@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.
@@ -6486,242 +6486,871 @@ var Cards = function Cards(_ref) {
6486
6486
  }));
6487
6487
  };
6488
6488
 
6489
- var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7;
6490
- var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
6491
- var Wrapper$2 = /*#__PURE__*/styled.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);
6492
- var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
6493
- var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
6494
- var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
6495
- var DesktopSuffixWrapper = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
6496
- var DetailsWrapper = /*#__PURE__*/styled.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);
6489
+ 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;
6490
+ var CastFiltersComponentWrapper = /*#__PURE__*/styled.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);
6491
+ var CastFiltersWrapper = /*#__PURE__*/styled.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);
6492
+ var HeadingTextWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
6493
+ var RotatorButtonsWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
6494
+ var CastWrapper = /*#__PURE__*/styled.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);
6495
+ var ActionButtons = /*#__PURE__*/styled.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);
6496
+ var PersonWrapper = /*#__PURE__*/styled.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);
6497
+ var PersonToggle = /*#__PURE__*/styled.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) {
6498
+ var isSelected = _ref.isSelected;
6499
+ return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
6500
+ });
6501
+ var PersonImage = /*#__PURE__*/styled.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) {
6502
+ var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
6503
+ return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
6504
+ });
6505
+ var PersonName = /*#__PURE__*/styled.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);
6506
+ var Decal = /*#__PURE__*/styled.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) {
6507
+ var isSelected = _ref3.isSelected;
6508
+ return isSelected ? 'flex' : 'none';
6509
+ }, function (_ref4) {
6510
+ var isSelected = _ref4.isSelected;
6511
+ return isSelected ? 'flex' : 'none';
6512
+ });
6513
+ var EmptySelectionTextSpacer = /*#__PURE__*/styled.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);
6497
6514
 
6498
- var ContactCard = function ContactCard(_ref) {
6499
- var title = _ref.title,
6500
- titleSuffix = _ref.titleSuffix,
6501
- description = _ref.description,
6502
- email = _ref.email,
6503
- phone = _ref.phone,
6504
- website = _ref.website,
6505
- address = _ref.address,
6506
- className = _ref.className;
6507
- var hasDetails = email || phone || website;
6508
- var addressString = address == null ? void 0 : address.substring(0, 110);
6509
- var descriptionText = description == null ? void 0 : description.substring(0, 110);
6510
- return /*#__PURE__*/React__default.createElement("div", {
6511
- className: className
6512
- }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
6513
- columnStartDesktop: 3,
6514
- columnSpanDesktop: 12,
6515
- columnStartDevice: 1,
6516
- columnSpanDevice: 14
6517
- }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
6518
- "data-testid": "contact-card-wrapper"
6519
- }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
6520
- size: "large"
6521
- }, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
6522
- size: "small"
6523
- }, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
6524
- size: "small"
6525
- }, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
6526
- size: "large"
6527
- }, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
6528
- "data-testid": "contact-card-details-block"
6529
- }, email && (/*#__PURE__*/React__default.createElement("a", {
6530
- tabIndex: 0,
6531
- href: "mailto:" + email
6532
- }, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
6533
- tabIndex: 0,
6534
- href: "tel:" + phone
6535
- }, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
6536
- tabIndex: 0,
6537
- href: website,
6538
- target: "_blank",
6539
- rel: "noreferrer"
6540
- }, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
6541
- "data-testid": "contact-card-address-block"
6542
- }, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
6543
- size: "large"
6544
- }, addressString)))))))));
6545
- };
6515
+ 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";
6546
6516
 
6547
- var _templateObject$K, _templateObject2$y, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b;
6548
- var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
6549
- var ContentSummaryWrapper = /*#__PURE__*/styled.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) {
6550
- return props.clickable ? 'pointer' : 'default';
6551
- }, devices.mobile);
6552
- var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
6553
- var ContentSummaryTextWrapper = /*#__PURE__*/styled.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) {
6554
- return props.showImage ? 2 : '1 / span 4';
6555
- }, devices.mobile);
6556
- var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
6557
- var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.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) {
6558
- 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 ";
6559
- });
6517
+ var _templateObject$K, _templateObject2$y;
6518
+ var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
6519
+ var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
6520
+ var SwipeTrack = /*#__PURE__*/styled.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) {
6521
+ var transitioning = _ref.transitioning;
6522
+ return transitioning ? 'transform 0.3s ease' : 'none';
6523
+ }, function (_ref2) {
6524
+ var translateX = _ref2.translateX;
6525
+ return translateX + "px";
6526
+ }, SWIPE_SLIDE_CLASS_NAME);
6560
6527
 
6561
- /* eslint-disable no-shadow */
6562
- var CarouselType;
6563
- (function (CarouselType) {
6564
- CarouselType["Image"] = "image";
6565
- CarouselType["SmallCard"] = "SmallCard";
6566
- CarouselType["LargeCard"] = "LargeCard";
6567
- CarouselType["PersonCard"] = "PersonCard";
6568
- })(CarouselType || (CarouselType = {}));
6528
+ /**
6529
+ * Generates a random string in the format XXX-XXX.
6530
+ * Does not meet UUID standards.
6531
+ * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
6532
+ *
6533
+ * @return {string} A random string in the format XXX-XXX.
6534
+ */
6535
+ var generateDomElementId = function generateDomElementId() {
6536
+ var randomPart = Math.floor(100 + Math.random() * 900).toString();
6537
+ var datePart = Date.now().toString().slice(-3);
6538
+ return randomPart + "-" + datePart;
6539
+ };
6569
6540
 
6570
- var clickHandler = function clickHandler(link) {
6571
- if (link != null && link.href && document) {
6572
- document.location.href = link.href;
6573
- }
6541
+ var DISABLED_TABBING_TAGS = 'a, button';
6542
+ var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
6543
+ if (!element) return;
6544
+ var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
6545
+ focusables.forEach(function (el) {
6546
+ if (shouldDisable) el.setAttribute('tabindex', '-1');
6547
+ });
6574
6548
  };
6575
- var ContentSummary = function ContentSummary(_ref) {
6576
- var title = _ref.title,
6577
- subtitle = _ref.subtitle,
6578
- bodyText = _ref.bodyText,
6579
- link = _ref.link,
6580
- image = _ref.image,
6581
- _ref$largeTitle = _ref.largeTitle,
6582
- largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
6583
- _ref$showImage = _ref.showImage,
6584
- showImage = _ref$showImage === void 0 ? false : _ref$showImage,
6585
- _ref$truncate = _ref.truncate,
6586
- truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
6587
- _ref$fullyClickable = _ref.fullyClickable,
6588
- fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
6589
- _ref$headerSemanticLe = _ref.headerSemanticLevel,
6590
- headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
6591
- className = _ref.className;
6592
- return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
6593
- className: className,
6594
- onClick: function onClick() {
6595
- if (fullyClickable) {
6596
- clickHandler(link);
6597
- }
6598
- },
6599
- clickable: fullyClickable,
6600
- "data-roh": "content-summary-item"
6601
- }, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
6602
- "data-testid": "image-wrapper"
6603
- }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
6604
- href: link.href
6605
- }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
6606
- aspectRatio: AspectRatio['4:3']
6607
- }, /*#__PURE__*/React__default.createElement("img", {
6608
- src: image.src,
6609
- alt: image.alt
6610
- })))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
6611
- aspectRatio: AspectRatio['4:3']
6612
- }, /*#__PURE__*/React__default.createElement("img", {
6613
- src: image.src,
6614
- alt: image.alt
6615
- }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
6616
- showImage: showImage
6617
- }, title && (/*#__PURE__*/React__default.createElement("div", {
6618
- "data-testid": largeTitle ? 'large-title' : 'default-title'
6619
- }, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
6620
- size: "large",
6621
- hierarchy: headerSemanticLevel
6622
- }, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
6623
- size: "medium",
6624
- hierarchy: headerSemanticLevel
6625
- }, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
6626
- size: "large"
6627
- }, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
6628
- size: "large"
6629
- }, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
6630
- truncate: truncate,
6631
- dangerouslySetInnerHTML: {
6632
- __html: bodyText
6633
- },
6634
- "data-testid": "body-text"
6635
- })))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
6636
- className: "content-summary-text-link"
6637
- }), link.text))));
6549
+ var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
6550
+ return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
6638
6551
  };
6639
-
6640
- var _templateObject$L, _templateObject2$z, _templateObject3$o, _templateObject4$l, _templateObject5$h;
6641
- var EditorialGrid = /*#__PURE__*/styled.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) {
6642
- var imageToLeft = _ref.imageToLeft;
6643
- return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
6644
- }, devices.mobile);
6645
- var EditorialImageWrapper = /*#__PURE__*/styled.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) {
6646
- var imageToLeft = _ref2.imageToLeft;
6647
- return imageToLeft ? 'left' : 'right';
6648
- }, devices.mobile);
6649
- var EditorialTextWrapper = /*#__PURE__*/styled.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) {
6650
- var imageToLeft = _ref3.imageToLeft;
6651
- return imageToLeft ? 'right' : 'left';
6652
- }, devices.mobile);
6653
- var EditorialSubtitle = /*#__PURE__*/styled(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"])));
6654
- var EditorialText = /*#__PURE__*/styled(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"])));
6655
-
6656
- var Editorial = function Editorial(_ref) {
6657
- var _ref$imagePosition = _ref.imagePosition,
6658
- imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
6659
- subtitle = _ref.subtitle,
6660
- text = _ref.text,
6661
- children = _ref.children,
6662
- className = _ref.className;
6663
- var imageToLeft = imagePosition === 'left';
6664
- return /*#__PURE__*/React__default.createElement(Grid, {
6665
- className: className,
6666
- "data-testid": "editorial-component"
6667
- }, /*#__PURE__*/React__default.createElement(GridItem, {
6668
- columnStartDesktop: 3,
6669
- columnSpanDesktop: 12,
6670
- columnStartDevice: 2,
6671
- columnSpanDevice: 12
6672
- }, /*#__PURE__*/React__default.createElement(EditorialGrid, {
6673
- imageToLeft: imageToLeft
6674
- }, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
6675
- "data-testid": "image-wrapper",
6676
- imageToLeft: imageToLeft
6677
- }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
6678
- aspectRatio: AspectRatio['1:1']
6679
- }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
6680
- "data-testid": "text-wrapper",
6681
- imageToLeft: imageToLeft
6682
- }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
6683
- tag: "span"
6684
- }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
6685
- tag: "div",
6686
- size: "large",
6687
- dangerouslySetInnerHTML: {
6688
- __html: text
6552
+ var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
6553
+ var widthSoFar = 0;
6554
+ var visible = [];
6555
+ for (var i = currentIndex; i < slidesLength; i++) {
6556
+ var _slideWidths$i;
6557
+ var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
6558
+ if (widthSoFar + width > containerWidth) break;
6559
+ visible.push(i);
6560
+ widthSoFar += width;
6561
+ }
6562
+ return visible;
6563
+ };
6564
+ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
6565
+ var absDelta = Math.abs(delta);
6566
+ var movedSlides = 0;
6567
+ var accumulated = 0;
6568
+ for (var i = 0; i < slideWidths.length; i++) {
6569
+ accumulated += slideWidths[i];
6570
+ // Allow partial slide (e.g. 50% of next slide) to count
6571
+ var partialThreshold = slideWidths[i] * 0.5;
6572
+ if (absDelta > accumulated - partialThreshold) {
6573
+ movedSlides++;
6574
+ } else {
6575
+ break;
6689
6576
  }
6690
- })))));
6577
+ }
6578
+ return movedSlides;
6691
6579
  };
6692
6580
 
6693
- var _templateObject$M, _templateObject2$A, _templateObject3$p;
6694
- var HotFiltersWrapper = /*#__PURE__*/styled.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"])));
6695
- var HotFilterOptionsWrapper = /*#__PURE__*/styled.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);
6696
- var StyledHotFiltersButton = /*#__PURE__*/styled(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"])));
6697
-
6698
- var _excluded$h = ["text", "onClick"];
6699
- var HotFilters = function HotFilters(_ref) {
6700
- var items = _ref.items,
6701
- className = _ref.className,
6702
- _ref$selectedIndex = _ref.selectedIndex,
6703
- selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex,
6704
- onSelect = _ref.onSelect;
6705
- var handleClick = React__default.useCallback(function (index, onClick) {
6706
- if (onSelect) onSelect(index);
6707
- if (onClick) onClick();
6708
- }, [onSelect]);
6709
- return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, {
6710
- className: className
6711
- }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
6712
- var text = item.text,
6713
- _onClick = item.onClick,
6714
- rest = _objectWithoutPropertiesLoose(item, _excluded$h);
6715
- var isSelected = index === selectedIndex;
6716
- return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
6717
- key: index,
6718
- onClick: function onClick() {
6719
- return handleClick(index, _onClick);
6720
- },
6721
- iconName: isSelected ? 'Confirm' : undefined,
6722
- backgroundColor: isSelected ? 'base-black' : 'base-white',
6723
- textColor: isSelected ? 'base-white' : 'base-black',
6724
- hoveredColor: "base-black",
6581
+ var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
6582
+ var MAX_CLONES_NUMBER = 6;
6583
+ var CLICK_DRAG_THRESHOLD = 10;
6584
+ var getClonesCount = function getClonesCount(infinite, childrenLength) {
6585
+ if (!infinite) return 0;
6586
+ return Math.min(childrenLength, MAX_CLONES_NUMBER);
6587
+ };
6588
+ var getSlidedWidth = function getSlidedWidth(slide) {
6589
+ if (!slide) return 0;
6590
+ var style = window.getComputedStyle(slide);
6591
+ var marginLeft = parseFloat(style.marginLeft) || 0;
6592
+ var marginRight = parseFloat(style.marginRight) || 0;
6593
+ return slide.getBoundingClientRect().width + marginLeft + marginRight;
6594
+ };
6595
+ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
6596
+ var children = _ref.children,
6597
+ _ref$infinite = _ref.infinite,
6598
+ infinite = _ref$infinite === void 0 ? false : _ref$infinite,
6599
+ onIndexChange = _ref.onIndexChange,
6600
+ _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
6601
+ slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
6602
+ _ref$slidesAriaHidden = _ref.slidesAriaHidden,
6603
+ slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
6604
+ onActiveChange = _ref.onActiveChange,
6605
+ onOverflowChange = _ref.onOverflowChange,
6606
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
6607
+ var containerRef = useRef(null);
6608
+ var childRefs = useRef([]);
6609
+ var startX = useRef(0);
6610
+ var currentTranslate = useRef(0);
6611
+ var isDragging = useRef(false);
6612
+ var isMouseDown = useRef(false);
6613
+ var isActive = useRef(false);
6614
+ var isClickPrevented = useRef(false);
6615
+ var uniqueIdRef = useRef(generateDomElementId());
6616
+ var _useState = useState(null),
6617
+ dragTranslateX = _useState[0],
6618
+ setDragTranslateX = _useState[1];
6619
+ var _useState2 = useState(false),
6620
+ transitioning = _useState2[0],
6621
+ setTransitioning = _useState2[1];
6622
+ var _useState3 = useState([]),
6623
+ slideWidths = _useState3[0],
6624
+ setSlideWidths = _useState3[1];
6625
+ var _useState4 = useState(0),
6626
+ containerWidth = _useState4[0],
6627
+ setContainerWidth = _useState4[1];
6628
+ var _useMemo = useMemo(function () {
6629
+ var count = getClonesCount(infinite, children.length);
6630
+ var leftClones = infinite ? children.slice(-count) : [];
6631
+ var rightClones = infinite ? children.slice(0, count) : [];
6632
+ var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
6633
+ return {
6634
+ slides: allSlides,
6635
+ clonesCount: count
6636
+ };
6637
+ }, [children, infinite]),
6638
+ slides = _useMemo.slides,
6639
+ clonesCount = _useMemo.clonesCount;
6640
+ var _useState5 = useState(infinite ? clonesCount : 0),
6641
+ currentIndex = _useState5[0],
6642
+ setCurrentIndex = _useState5[1];
6643
+ useEffect(function () {
6644
+ var handler = function handler(e) {
6645
+ if (isClickPrevented.current) {
6646
+ e.preventDefault();
6647
+ e.stopPropagation();
6648
+ }
6649
+ };
6650
+ var containerElement = containerRef.current;
6651
+ containerElement == null || containerElement.addEventListener('click', handler, true);
6652
+ return function () {
6653
+ return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
6654
+ };
6655
+ }, []);
6656
+ useEffect(function () {
6657
+ if (!onIndexChange) return;
6658
+ if (!infinite) {
6659
+ onIndexChange(currentIndex);
6660
+ } else {
6661
+ var offset = currentIndex - clonesCount + children.length;
6662
+ var realIndex = offset % children.length;
6663
+ onIndexChange(realIndex);
6664
+ }
6665
+ }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
6666
+ var updateDimensions = useCallback(function () {
6667
+ var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
6668
+ var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
6669
+ setContainerWidth(cw);
6670
+ setSlideWidths(widths);
6671
+ if (!infinite) {
6672
+ var totalWidth = widths.reduce(function (acc, w) {
6673
+ return acc + w;
6674
+ }, 0);
6675
+ var visibleSpace = cw - (slidesOffsetBefore || 0);
6676
+ var overflow = totalWidth > Math.max(0, visibleSpace);
6677
+ onOverflowChange == null || onOverflowChange(overflow);
6678
+ }
6679
+ }, []);
6680
+ useEffect(function () {
6681
+ var animationFrameRequestId = requestAnimationFrame(updateDimensions);
6682
+ return function () {
6683
+ return cancelAnimationFrame(animationFrameRequestId);
6684
+ };
6685
+ }, [children]);
6686
+ useEffect(function () {
6687
+ var observer = new ResizeObserver(updateDimensions);
6688
+ if (containerRef.current) observer.observe(containerRef.current);
6689
+ return function () {
6690
+ return observer.disconnect();
6691
+ };
6692
+ }, [children]);
6693
+ var setIsActive = function setIsActive() {
6694
+ if (!isActive.current) {
6695
+ isActive.current = true;
6696
+ onActiveChange == null || onActiveChange(true);
6697
+ }
6698
+ };
6699
+ var getTranslateX = function getTranslateX() {
6700
+ var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
6701
+ return acc + width;
6702
+ }, 0);
6703
+ return (slidesOffsetBefore || 0) - widthsBefore;
6704
+ };
6705
+ var getTranslateForIndex = function getTranslateForIndex(index) {
6706
+ var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
6707
+ return acc + width;
6708
+ }, 0);
6709
+ return (slidesOffsetBefore || 0) - widthsBefore;
6710
+ };
6711
+ var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
6712
+ var delta = currentTranslate.current - getTranslateX();
6713
+ var direction = delta > 0 ? -1 : 1;
6714
+ var movedSlides = getMovedSlides(delta, slideWidths);
6715
+ if (Math.abs(delta) > 20) {
6716
+ movedSlides = Math.max(1, movedSlides);
6717
+ var targetIndex = currentIndex + direction * movedSlides;
6718
+ var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
6719
+ if (!infinite) {
6720
+ currentTranslate.current = getTranslateForIndex(finalIndex);
6721
+ setDragTranslateX(null);
6722
+ }
6723
+ setTransitioning(true);
6724
+ setCurrentIndex(finalIndex);
6725
+ } else {
6726
+ setTransitioning(true);
6727
+ setCurrentIndex(function (prev) {
6728
+ return prev;
6729
+ });
6730
+ }
6731
+ setDragTranslateX(null);
6732
+ };
6733
+ var canMoveNext = function canMoveNext() {
6734
+ if (infinite) return true;
6735
+ if (slideWidths.length === 0 || containerWidth === 0) return false;
6736
+ var totalWidth = slideWidths.reduce(function (acc, w) {
6737
+ return acc + w;
6738
+ }, 0);
6739
+ var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
6740
+ return acc + w;
6741
+ }, 0);
6742
+ var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
6743
+ var remainingToRight = totalWidth - widthsBefore - visibleSpace;
6744
+ var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
6745
+ var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
6746
+ var nextIndex = lastVisibleIndex + 1;
6747
+ if (nextIndex >= slideWidths.length) return false;
6748
+ var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
6749
+ if (nextSlideWidth === 0) return false;
6750
+ var EPS = 1; // pixel tolerance
6751
+ // full next slide fits
6752
+ if (remainingToRight + EPS >= nextSlideWidth) return true;
6753
+ return remainingToRight > 0;
6754
+ };
6755
+ var handleTransitionEnd = function handleTransitionEnd() {
6756
+ setTransitioning(false);
6757
+ if (!infinite) return;
6758
+ if (currentIndex >= children.length + clonesCount) {
6759
+ setCurrentIndex(clonesCount);
6760
+ } else if (currentIndex < clonesCount) {
6761
+ setCurrentIndex(children.length + currentIndex);
6762
+ }
6763
+ };
6764
+ var goToPrev = function goToPrev() {
6765
+ if (transitioning) return;
6766
+ setIsActive();
6767
+ setTransitioning(true);
6768
+ setCurrentIndex(function (prev) {
6769
+ var target = infinite ? prev - 1 : Math.max(0, prev - 1);
6770
+ if (!infinite) {
6771
+ currentTranslate.current = getTranslateForIndex(target);
6772
+ setDragTranslateX(null);
6773
+ }
6774
+ return target;
6775
+ });
6776
+ };
6777
+ var goToNext = function goToNext() {
6778
+ if (transitioning || !canMoveNext()) return;
6779
+ setIsActive();
6780
+ setTransitioning(true);
6781
+ setCurrentIndex(function (prev) {
6782
+ var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
6783
+ if (!infinite) {
6784
+ currentTranslate.current = getTranslateForIndex(target);
6785
+ setDragTranslateX(null);
6786
+ }
6787
+ return target;
6788
+ });
6789
+ };
6790
+ useImperativeHandle(ref, function () {
6791
+ return {
6792
+ nextSlide: goToNext,
6793
+ prevSlide: goToPrev,
6794
+ hasOverflow: function hasOverflow() {
6795
+ var totalWidth = slideWidths.reduce(function (acc, w) {
6796
+ return acc + w;
6797
+ }, 0);
6798
+ var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
6799
+ return totalWidth > Math.max(0, visibleSpace);
6800
+ },
6801
+ hasNext: function hasNext() {
6802
+ return canMoveNext();
6803
+ }
6804
+ };
6805
+ });
6806
+ var handleTouchStart = function handleTouchStart(e) {
6807
+ setIsActive();
6808
+ startX.current = e.touches[0].clientX;
6809
+ isDragging.current = true;
6810
+ isClickPrevented.current = false;
6811
+ setTransitioning(false);
6812
+ };
6813
+ var handleTouchMove = function handleTouchMove(e) {
6814
+ if (!isDragging.current) return;
6815
+ var deltaX = e.touches[0].clientX - startX.current;
6816
+ if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
6817
+ isClickPrevented.current = true;
6818
+ }
6819
+ var visualOffset = getTranslateX() + deltaX;
6820
+ currentTranslate.current = visualOffset;
6821
+ setDragTranslateX(visualOffset);
6822
+ };
6823
+ var handleTouchEnd = function handleTouchEnd() {
6824
+ isDragging.current = false;
6825
+ if (isClickPrevented.current) {
6826
+ navigateOnSwipeEnd();
6827
+ } else {
6828
+ setDragTranslateX(null);
6829
+ }
6830
+ };
6831
+ var handleMouseMove = function handleMouseMove(e) {
6832
+ if (!isDragging.current || !isMouseDown.current || transitioning) return;
6833
+ var deltaX = e.clientX - startX.current;
6834
+ if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
6835
+ isClickPrevented.current = true;
6836
+ }
6837
+ var visualOffset = getTranslateX() + deltaX;
6838
+ currentTranslate.current = visualOffset;
6839
+ setDragTranslateX(visualOffset);
6840
+ };
6841
+ var _handleMouseUp = function handleMouseUp() {
6842
+ if (!isMouseDown.current) return;
6843
+ isMouseDown.current = false;
6844
+ isDragging.current = false;
6845
+ if (isClickPrevented.current) {
6846
+ navigateOnSwipeEnd();
6847
+ } else {
6848
+ setDragTranslateX(null);
6849
+ }
6850
+ window.removeEventListener('mousemove', handleMouseMove);
6851
+ window.removeEventListener('mouseup', _handleMouseUp);
6852
+ };
6853
+ var handleMouseDown = function handleMouseDown(e) {
6854
+ if (transitioning || e.button !== 0) return;
6855
+ e.preventDefault();
6856
+ setIsActive();
6857
+ startX.current = e.clientX;
6858
+ isDragging.current = true;
6859
+ isMouseDown.current = true;
6860
+ isClickPrevented.current = false;
6861
+ setTransitioning(false);
6862
+ window.addEventListener('mousemove', handleMouseMove);
6863
+ window.addEventListener('mouseup', _handleMouseUp);
6864
+ };
6865
+ var onSlideFocus = function onSlideFocus(isVisible, index) {
6866
+ if (!isVisible) {
6867
+ setCurrentIndex(index);
6868
+ }
6869
+ };
6870
+ var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
6871
+ return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
6872
+ ref: containerRef,
6873
+ className: "swipe",
6874
+ onTouchStart: handleTouchStart,
6875
+ onTouchMove: handleTouchMove,
6876
+ onTouchEnd: handleTouchEnd,
6877
+ onMouseDown: handleMouseDown,
6878
+ "aria-roledescription": "carousel",
6879
+ role: "list"
6880
+ }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
6881
+ className: "swipe-track-wrapper",
6882
+ translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
6883
+ transitioning: transitioning && dragTranslateX === null,
6884
+ onTransitionEnd: handleTransitionEnd
6885
+ }, slides.map(function (child, index) {
6886
+ var isVisible = visibleIndexes.includes(index);
6887
+ var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
6888
+ return /*#__PURE__*/React__default.createElement("div", {
6889
+ key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
6890
+ className: SWIPE_SLIDE_CLASS_NAME,
6891
+ "aria-hidden": slidesAriaHidden || isClone,
6892
+ "aria-roledescription": "slide",
6893
+ role: "listitem",
6894
+ ref: function ref(el) {
6895
+ childRefs.current[index] = el;
6896
+ disableTabbingInside(el, isClone);
6897
+ },
6898
+ onFocus: function onFocus() {
6899
+ return onSlideFocus(isVisible, index);
6900
+ }
6901
+ }, child);
6902
+ })));
6903
+ });
6904
+ Swipe.displayName = 'Swipe';
6905
+
6906
+ var _excluded$i = ["name", "image", "onClick"];
6907
+ var CastFilters = function CastFilters(_ref) {
6908
+ var cast = _ref.cast,
6909
+ headingText = _ref.headingText,
6910
+ ctaText = _ref.ctaText,
6911
+ textLinkText = _ref.textLinkText,
6912
+ emptySelectionText = _ref.emptySelectionText,
6913
+ placeholderImage = _ref.placeholderImage,
6914
+ listRoleDescription = _ref.listRoleDescription,
6915
+ className = _ref.className,
6916
+ onSelect = _ref.onSelect,
6917
+ onApply = _ref.onApply,
6918
+ onClear = _ref.onClear,
6919
+ _ref$selectedIndices = _ref.selectedIndices,
6920
+ selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
6921
+ var _useViewport = useViewport(),
6922
+ isMobile = _useViewport.isMobile;
6923
+ var castWrapperRef = useRef(null);
6924
+ var isDraggingRef = useRef(false);
6925
+ var startXRef = useRef(0);
6926
+ var scrollStartRef = useRef(0);
6927
+ var hasDraggedRef = useRef(false);
6928
+ var swipeRef = useRef(null);
6929
+ var _useState = useState(false),
6930
+ availablePrev = _useState[0],
6931
+ setAvailablePrev = _useState[1];
6932
+ var _useState2 = useState(cast.length > 1),
6933
+ availableNext = _useState2[0],
6934
+ setAvailableNext = _useState2[1];
6935
+ var _useState3 = useState(true),
6936
+ showRotatorButtons = _useState3[0],
6937
+ setShowRotatorButtons = _useState3[1];
6938
+ var onIndexChangeHandler = function onIndexChangeHandler(index) {
6939
+ setAvailablePrev(index > 0);
6940
+ setAvailableNext(function () {
6941
+ var _swipeRef$current$has, _swipeRef$current;
6942
+ 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);
6943
+ });
6944
+ };
6945
+ useEffect(function () {
6946
+ setAvailablePrev(false);
6947
+ setAvailableNext(function () {
6948
+ var _swipeRef$current$has2, _swipeRef$current2;
6949
+ return (_swipeRef$current$has2 = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext()) != null ? _swipeRef$current$has2 : cast.length > 1;
6950
+ });
6951
+ }, [cast.length]);
6952
+ var handleOverflowChange = function handleOverflowChange(overflow) {
6953
+ var _swipeRef$current3;
6954
+ setShowRotatorButtons(overflow);
6955
+ var hasNext = (_swipeRef$current3 = swipeRef.current) == null ? void 0 : _swipeRef$current3.hasNext();
6956
+ if (typeof hasNext === 'boolean') {
6957
+ setAvailableNext(hasNext);
6958
+ } else {
6959
+ setAvailableNext(overflow);
6960
+ }
6961
+ };
6962
+ var onNext = function onNext() {
6963
+ var _swipeRef$current4;
6964
+ return (_swipeRef$current4 = swipeRef.current) == null ? void 0 : _swipeRef$current4.nextSlide();
6965
+ };
6966
+ var onPrev = function onPrev() {
6967
+ var _swipeRef$current5;
6968
+ return (_swipeRef$current5 = swipeRef.current) == null ? void 0 : _swipeRef$current5.prevSlide();
6969
+ };
6970
+ useEffect(function () {
6971
+ var el = castWrapperRef.current;
6972
+ if (!el) return undefined;
6973
+ var handleKeydown = function handleKeydown(e) {
6974
+ if (!el.contains(document.activeElement)) return;
6975
+ if (e.key === 'ArrowRight') {
6976
+ var _swipeRef$current6;
6977
+ e.preventDefault();
6978
+ (_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.nextSlide();
6979
+ } else if (e.key === 'ArrowLeft') {
6980
+ var _swipeRef$current7;
6981
+ e.preventDefault();
6982
+ (_swipeRef$current7 = swipeRef.current) == null || _swipeRef$current7.prevSlide();
6983
+ }
6984
+ };
6985
+ el.addEventListener('keydown', handleKeydown);
6986
+ return function () {
6987
+ return el.removeEventListener('keydown', handleKeydown);
6988
+ };
6989
+ }, []);
6990
+ var handleMouseDown = useCallback(function (e) {
6991
+ if (!castWrapperRef.current) return;
6992
+ isDraggingRef.current = true;
6993
+ hasDraggedRef.current = false;
6994
+ startXRef.current = e.clientX;
6995
+ scrollStartRef.current = castWrapperRef.current.scrollLeft;
6996
+ if (e.target === castWrapperRef.current) e.preventDefault();
6997
+ }, []);
6998
+ var handleMouseMove = useCallback(function (e) {
6999
+ if (!isDraggingRef.current || !castWrapperRef.current) return;
7000
+ var deltaX = e.clientX - startXRef.current;
7001
+ var threshold = 5;
7002
+ if (Math.abs(deltaX) > threshold) {
7003
+ hasDraggedRef.current = true;
7004
+ e.preventDefault();
7005
+ castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
7006
+ }
7007
+ }, []);
7008
+ var handleMouseUp = useCallback(function () {
7009
+ isDraggingRef.current = false;
7010
+ setTimeout(function () {
7011
+ hasDraggedRef.current = false;
7012
+ }, 0);
7013
+ }, []);
7014
+ var handleMouseLeave = useCallback(function () {
7015
+ isDraggingRef.current = false;
7016
+ hasDraggedRef.current = false;
7017
+ }, []);
7018
+ var handleClick = React__default.useCallback(function (index, onClick) {
7019
+ if (hasDraggedRef.current) return;
7020
+ if (onSelect) onSelect(index);
7021
+ if (onClick) onClick();
7022
+ }, [onSelect]);
7023
+ var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
7024
+ if (e.key === 'Enter') {
7025
+ handleClick(index, onClick);
7026
+ }
7027
+ }, [handleClick]);
7028
+ var handleClearKeydown = React__default.useCallback(function (e) {
7029
+ if (e.key === 'Enter' && onClear) {
7030
+ onClear();
7031
+ }
7032
+ }, [onClear]);
7033
+ var showActionButtonsSection = onApply || onClear || emptySelectionText;
7034
+ var getPersonCards = function getPersonCards() {
7035
+ return cast.map(function (person, index) {
7036
+ var name = person.name,
7037
+ image = person.image,
7038
+ _onClick = person.onClick,
7039
+ rest = _objectWithoutPropertiesLoose(person, _excluded$i);
7040
+ var isSelected = selectedIndices.includes(index);
7041
+ var personImage = image || placeholderImage || defaultPlaceholderImage;
7042
+ return /*#__PURE__*/React__default.createElement(PersonWrapper, {
7043
+ key: index,
7044
+ "aria-selected": isSelected,
7045
+ role: "option",
7046
+ tabIndex: 0,
7047
+ onKeyDown: function onKeyDown(e) {
7048
+ return handlePersonKeydown(e, index, _onClick);
7049
+ }
7050
+ }, /*#__PURE__*/React__default.createElement(PersonToggle, Object.assign({
7051
+ isSelected: isSelected,
7052
+ onClick: function onClick() {
7053
+ return handleClick(index, _onClick);
7054
+ }
7055
+ }, rest), /*#__PURE__*/React__default.createElement(PersonImage, {
7056
+ src: personImage,
7057
+ alt: image ? name : "Placeholder image for " + name,
7058
+ draggable: false,
7059
+ isDefaultPlaceholder: !(!!image || !!placeholderImage)
7060
+ }), /*#__PURE__*/React__default.createElement(Decal, {
7061
+ isSelected: isSelected
7062
+ }, /*#__PURE__*/React__default.createElement(Icon, {
7063
+ iconName: "Confirm",
7064
+ color: "white"
7065
+ }))), /*#__PURE__*/React__default.createElement(PersonName, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7066
+ size: "medium"
7067
+ }, name)));
7068
+ });
7069
+ };
7070
+ return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper, {
7071
+ className: className
7072
+ }, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, headingText && (/*#__PURE__*/React__default.createElement(GridItem, {
7073
+ columnStartDesktop: 1,
7074
+ columnSpanDesktop: 10,
7075
+ columnStartDevice: 1,
7076
+ columnSpanDevice: 9
7077
+ }, /*#__PURE__*/React__default.createElement(HeadingTextWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7078
+ size: "large"
7079
+ }, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
7080
+ columnStartDesktop: 16,
7081
+ columnSpanDesktop: 2
7082
+ }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
7083
+ size: "small",
7084
+ onClickNext: onNext,
7085
+ onClickPrev: onPrev,
7086
+ availablePrev: availablePrev,
7087
+ availableNext: availableNext
7088
+ })))), /*#__PURE__*/React__default.createElement(CastWrapper, {
7089
+ ref: castWrapperRef,
7090
+ role: "listbox",
7091
+ "aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
7092
+ "aria-label": "filter list",
7093
+ "aria-multiselectable": true,
7094
+ onMouseDown: handleMouseDown,
7095
+ onMouseMove: handleMouseMove,
7096
+ onMouseUp: handleMouseUp,
7097
+ onMouseLeave: handleMouseLeave
7098
+ }, isMobile ? getPersonCards() : (/*#__PURE__*/React__default.createElement(Swipe, {
7099
+ onIndexChange: onIndexChangeHandler,
7100
+ "data-testid": "cast-filter-swipe",
7101
+ ref: swipeRef,
7102
+ onOverflowChange: handleOverflowChange
7103
+ }, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7104
+ size: "medium",
7105
+ className: "mobile-only"
7106
+ }, 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, {
7107
+ onClick: function onClick() {
7108
+ return onApply(selectedIndices);
7109
+ }
7110
+ }, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
7111
+ tabIndex: 0,
7112
+ role: "button",
7113
+ onClick: onClear,
7114
+ onKeyDown: handleClearKeydown
7115
+ }, textLinkText != null ? textLinkText : 'Clear')))))));
7116
+ };
7117
+
7118
+ var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
7119
+ var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
7120
+ var Wrapper$2 = /*#__PURE__*/styled.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);
7121
+ var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
7122
+ var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
7123
+ var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
7124
+ var DesktopSuffixWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
7125
+ var DetailsWrapper = /*#__PURE__*/styled.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);
7126
+
7127
+ var ContactCard = function ContactCard(_ref) {
7128
+ var title = _ref.title,
7129
+ titleSuffix = _ref.titleSuffix,
7130
+ description = _ref.description,
7131
+ email = _ref.email,
7132
+ phone = _ref.phone,
7133
+ website = _ref.website,
7134
+ address = _ref.address,
7135
+ className = _ref.className;
7136
+ var hasDetails = email || phone || website;
7137
+ var addressString = address == null ? void 0 : address.substring(0, 110);
7138
+ var descriptionText = description == null ? void 0 : description.substring(0, 110);
7139
+ return /*#__PURE__*/React__default.createElement("div", {
7140
+ className: className
7141
+ }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
7142
+ columnStartDesktop: 3,
7143
+ columnSpanDesktop: 12,
7144
+ columnStartDevice: 1,
7145
+ columnSpanDevice: 14
7146
+ }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
7147
+ "data-testid": "contact-card-wrapper"
7148
+ }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
7149
+ size: "large"
7150
+ }, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7151
+ size: "small"
7152
+ }, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
7153
+ size: "small"
7154
+ }, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
7155
+ size: "large"
7156
+ }, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
7157
+ "data-testid": "contact-card-details-block"
7158
+ }, email && (/*#__PURE__*/React__default.createElement("a", {
7159
+ tabIndex: 0,
7160
+ href: "mailto:" + email
7161
+ }, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
7162
+ tabIndex: 0,
7163
+ href: "tel:" + phone
7164
+ }, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
7165
+ tabIndex: 0,
7166
+ href: website,
7167
+ target: "_blank",
7168
+ rel: "noreferrer"
7169
+ }, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
7170
+ "data-testid": "contact-card-address-block"
7171
+ }, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7172
+ size: "large"
7173
+ }, addressString)))))))));
7174
+ };
7175
+
7176
+ var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$c;
7177
+ var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
7178
+ var ContentSummaryWrapper = /*#__PURE__*/styled.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) {
7179
+ return props.clickable ? 'pointer' : 'default';
7180
+ }, devices.mobile);
7181
+ var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
7182
+ var ContentSummaryTextWrapper = /*#__PURE__*/styled.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) {
7183
+ return props.showImage ? 2 : '1 / span 4';
7184
+ }, devices.mobile);
7185
+ var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
7186
+ var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.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) {
7187
+ 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 ";
7188
+ });
7189
+
7190
+ /* eslint-disable no-shadow */
7191
+ var CarouselType;
7192
+ (function (CarouselType) {
7193
+ CarouselType["Image"] = "image";
7194
+ CarouselType["SmallCard"] = "SmallCard";
7195
+ CarouselType["LargeCard"] = "LargeCard";
7196
+ CarouselType["PersonCard"] = "PersonCard";
7197
+ })(CarouselType || (CarouselType = {}));
7198
+
7199
+ var clickHandler = function clickHandler(link) {
7200
+ if (link != null && link.href && document) {
7201
+ document.location.href = link.href;
7202
+ }
7203
+ };
7204
+ var ContentSummary = function ContentSummary(_ref) {
7205
+ var title = _ref.title,
7206
+ subtitle = _ref.subtitle,
7207
+ bodyText = _ref.bodyText,
7208
+ link = _ref.link,
7209
+ image = _ref.image,
7210
+ _ref$largeTitle = _ref.largeTitle,
7211
+ largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
7212
+ _ref$showImage = _ref.showImage,
7213
+ showImage = _ref$showImage === void 0 ? false : _ref$showImage,
7214
+ _ref$truncate = _ref.truncate,
7215
+ truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
7216
+ _ref$fullyClickable = _ref.fullyClickable,
7217
+ fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
7218
+ _ref$headerSemanticLe = _ref.headerSemanticLevel,
7219
+ headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
7220
+ className = _ref.className;
7221
+ return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
7222
+ className: className,
7223
+ onClick: function onClick() {
7224
+ if (fullyClickable) {
7225
+ clickHandler(link);
7226
+ }
7227
+ },
7228
+ clickable: fullyClickable,
7229
+ "data-roh": "content-summary-item"
7230
+ }, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
7231
+ "data-testid": "image-wrapper"
7232
+ }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
7233
+ href: link.href
7234
+ }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
7235
+ aspectRatio: AspectRatio['4:3']
7236
+ }, /*#__PURE__*/React__default.createElement("img", {
7237
+ src: image.src,
7238
+ alt: image.alt
7239
+ })))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
7240
+ aspectRatio: AspectRatio['4:3']
7241
+ }, /*#__PURE__*/React__default.createElement("img", {
7242
+ src: image.src,
7243
+ alt: image.alt
7244
+ }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
7245
+ showImage: showImage
7246
+ }, title && (/*#__PURE__*/React__default.createElement("div", {
7247
+ "data-testid": largeTitle ? 'large-title' : 'default-title'
7248
+ }, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
7249
+ size: "large",
7250
+ hierarchy: headerSemanticLevel
7251
+ }, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
7252
+ size: "medium",
7253
+ hierarchy: headerSemanticLevel
7254
+ }, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
7255
+ size: "large"
7256
+ }, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
7257
+ size: "large"
7258
+ }, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
7259
+ truncate: truncate,
7260
+ dangerouslySetInnerHTML: {
7261
+ __html: bodyText
7262
+ },
7263
+ "data-testid": "body-text"
7264
+ })))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
7265
+ className: "content-summary-text-link"
7266
+ }), link.text))));
7267
+ };
7268
+
7269
+ var _templateObject$N, _templateObject2$B, _templateObject3$p, _templateObject4$m, _templateObject5$i;
7270
+ var EditorialGrid = /*#__PURE__*/styled.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) {
7271
+ var imageToLeft = _ref.imageToLeft;
7272
+ return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
7273
+ }, devices.mobile);
7274
+ var EditorialImageWrapper = /*#__PURE__*/styled.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) {
7275
+ var imageToLeft = _ref2.imageToLeft;
7276
+ return imageToLeft ? 'left' : 'right';
7277
+ }, devices.mobile);
7278
+ var EditorialTextWrapper = /*#__PURE__*/styled.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) {
7279
+ var imageToLeft = _ref3.imageToLeft;
7280
+ return imageToLeft ? 'right' : 'left';
7281
+ }, devices.mobile);
7282
+ var EditorialSubtitle = /*#__PURE__*/styled(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"])));
7283
+ var EditorialText = /*#__PURE__*/styled(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"])));
7284
+
7285
+ var Editorial = function Editorial(_ref) {
7286
+ var _ref$imagePosition = _ref.imagePosition,
7287
+ imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
7288
+ subtitle = _ref.subtitle,
7289
+ text = _ref.text,
7290
+ children = _ref.children,
7291
+ className = _ref.className;
7292
+ var imageToLeft = imagePosition === 'left';
7293
+ return /*#__PURE__*/React__default.createElement(Grid, {
7294
+ className: className,
7295
+ "data-testid": "editorial-component"
7296
+ }, /*#__PURE__*/React__default.createElement(GridItem, {
7297
+ columnStartDesktop: 3,
7298
+ columnSpanDesktop: 12,
7299
+ columnStartDevice: 2,
7300
+ columnSpanDevice: 12
7301
+ }, /*#__PURE__*/React__default.createElement(EditorialGrid, {
7302
+ imageToLeft: imageToLeft
7303
+ }, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
7304
+ "data-testid": "image-wrapper",
7305
+ imageToLeft: imageToLeft
7306
+ }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
7307
+ aspectRatio: AspectRatio['1:1']
7308
+ }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
7309
+ "data-testid": "text-wrapper",
7310
+ imageToLeft: imageToLeft
7311
+ }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
7312
+ tag: "span"
7313
+ }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
7314
+ tag: "div",
7315
+ size: "large",
7316
+ dangerouslySetInnerHTML: {
7317
+ __html: text
7318
+ }
7319
+ })))));
7320
+ };
7321
+
7322
+ var _templateObject$O, _templateObject2$C, _templateObject3$q;
7323
+ var HotFiltersWrapper = /*#__PURE__*/styled.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"])));
7324
+ var HotFilterOptionsWrapper = /*#__PURE__*/styled.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);
7325
+ var StyledHotFiltersButton = /*#__PURE__*/styled(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"])));
7326
+
7327
+ var _excluded$j = ["text", "onClick"];
7328
+ var HotFilters = function HotFilters(_ref) {
7329
+ var items = _ref.items,
7330
+ className = _ref.className,
7331
+ _ref$selectedIndex = _ref.selectedIndex,
7332
+ selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex,
7333
+ onSelect = _ref.onSelect;
7334
+ var handleClick = React__default.useCallback(function (index, onClick) {
7335
+ if (onSelect) onSelect(index);
7336
+ if (onClick) onClick();
7337
+ }, [onSelect]);
7338
+ return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, {
7339
+ className: className
7340
+ }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
7341
+ var text = item.text,
7342
+ _onClick = item.onClick,
7343
+ rest = _objectWithoutPropertiesLoose(item, _excluded$j);
7344
+ var isSelected = index === selectedIndex;
7345
+ return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
7346
+ key: index,
7347
+ onClick: function onClick() {
7348
+ return handleClick(index, _onClick);
7349
+ },
7350
+ iconName: isSelected ? 'Confirm' : undefined,
7351
+ backgroundColor: isSelected ? 'base-black' : 'base-white',
7352
+ textColor: isSelected ? 'base-white' : 'base-black',
7353
+ hoveredColor: "base-black",
6725
7354
  pressedColor: "black-pressed",
6726
7355
  "aria-pressed": isSelected
6727
7356
  }, rest), text);
@@ -6757,10 +7386,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
6757
7386
  return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
6758
7387
  };
6759
7388
 
6760
- var _templateObject$N, _templateObject2$B, _templateObject3$q, _templateObject4$m;
6761
- var InfoWrapper = /*#__PURE__*/styled(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);
6762
- var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
6763
- var InfoCTAWrapper = /*#__PURE__*/styled('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) {
7389
+ var _templateObject$P, _templateObject2$D, _templateObject3$r, _templateObject4$n;
7390
+ var InfoWrapper = /*#__PURE__*/styled(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);
7391
+ var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
7392
+ var InfoCTAWrapper = /*#__PURE__*/styled('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) {
6764
7393
  var variant = _ref.variant,
6765
7394
  theme = _ref.theme;
6766
7395
  return getTextColor$4(variant, theme, COLORS$4.background);
@@ -6803,7 +7432,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$q || (_template
6803
7432
  theme = _ref10.theme;
6804
7433
  return getTextColor$4(variant, theme, COLORS$4.pressed);
6805
7434
  });
6806
- var InfoBodyWrapper = /*#__PURE__*/styled(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);
7435
+ var InfoBodyWrapper = /*#__PURE__*/styled(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);
6807
7436
 
6808
7437
  var css_248z$1 = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2') format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
6809
7438
  styleInject(css_248z$1);
@@ -6994,33 +7623,33 @@ var Information = function Information(_ref) {
6994
7623
  })))));
6995
7624
  };
6996
7625
 
6997
- var _templateObject$O, _templateObject2$C, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$c, _templateObject7$8, _templateObject8$4;
6998
- var PageHeadingWrapper = /*#__PURE__*/styled('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) {
7626
+ var _templateObject$Q, _templateObject2$E, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
7627
+ var PageHeadingWrapper = /*#__PURE__*/styled('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) {
6999
7628
  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
7000
7629
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
7001
7630
  }, devices.mobile);
7002
- var PageHeadingGrid = /*#__PURE__*/styled(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);
7003
- var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
7631
+ var PageHeadingGrid = /*#__PURE__*/styled(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);
7632
+ var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
7004
7633
  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
7005
7634
  return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
7006
7635
  });
7007
- var TitleWrapper$2 = /*#__PURE__*/styled.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) {
7636
+ var TitleWrapper$2 = /*#__PURE__*/styled.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) {
7008
7637
  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
7009
7638
  return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
7010
7639
  }, devices.mobile);
7011
- var ChildrenWrapper = /*#__PURE__*/styled.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) {
7640
+ var ChildrenWrapper = /*#__PURE__*/styled.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) {
7012
7641
  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
7013
7642
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
7014
7643
  }, devices.mobile);
7015
- var TextWrapper = /*#__PURE__*/styled.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"])));
7016
- var LogoWrapper = /*#__PURE__*/styled.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) {
7644
+ var TextWrapper = /*#__PURE__*/styled.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"])));
7645
+ var LogoWrapper = /*#__PURE__*/styled.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) {
7017
7646
  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
7018
7647
  return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
7019
7648
  }, devices.mobile, function (_ref6) {
7020
7649
  var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
7021
7650
  return isPageHeadingWithoutTitle && "\n margin-top: 15px;\n ";
7022
7651
  });
7023
- var ButtonWrapper$1 = /*#__PURE__*/styled.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);
7652
+ var ButtonWrapper$1 = /*#__PURE__*/styled.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);
7024
7653
 
7025
7654
  var PageHeading = function PageHeading(_ref) {
7026
7655
  var title = _ref.title,
@@ -7090,17 +7719,17 @@ var PageHeading = function PageHeading(_ref) {
7090
7719
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
7091
7720
  };
7092
7721
 
7093
- var _templateObject$P, _templateObject2$D, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
7094
- var ImpactWrapper = /*#__PURE__*/styled.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);
7095
- var ImpactHeaderImageWrapper = /*#__PURE__*/styled.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);
7096
- var ImpactGrid = /*#__PURE__*/styled(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);
7097
- var SponsorWrapper = /*#__PURE__*/styled.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);
7098
- var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
7099
- var TextWrapper$1 = /*#__PURE__*/styled.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);
7100
- var ButtonWrapper$2 = /*#__PURE__*/styled.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);
7101
- var ScrollDownWrapper = /*#__PURE__*/styled.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);
7722
+ var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
7723
+ var ImpactWrapper = /*#__PURE__*/styled.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);
7724
+ var ImpactHeaderImageWrapper = /*#__PURE__*/styled.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);
7725
+ var ImpactGrid = /*#__PURE__*/styled(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);
7726
+ var SponsorWrapper = /*#__PURE__*/styled.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);
7727
+ var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
7728
+ var TextWrapper$1 = /*#__PURE__*/styled.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);
7729
+ var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
7730
+ var ScrollDownWrapper = /*#__PURE__*/styled.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);
7102
7731
 
7103
- var _excluded$i = ["text"];
7732
+ var _excluded$k = ["text"];
7104
7733
  var PageHeadingImpact = function PageHeadingImpact(_ref) {
7105
7734
  var children = _ref.children,
7106
7735
  text = _ref.text,
@@ -7118,7 +7747,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
7118
7747
  var truncatedText = text == null ? void 0 : text.substring(0, 75);
7119
7748
  var _ref2 = link || {},
7120
7749
  linkText = _ref2.text,
7121
- restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
7750
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
7122
7751
  return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
7123
7752
  bgUrlDesktop: bgUrlDesktop,
7124
7753
  bgUrlDevice: bgUrlDevice,
@@ -7161,21 +7790,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
7161
7790
  }, "Scroll Down"))) : null);
7162
7791
  };
7163
7792
 
7164
- var _templateObject$Q, _templateObject2$E, _templateObject3$t, _templateObject4$p, _templateObject5$k;
7165
- var PanelGrid = /*#__PURE__*/styled(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) {
7793
+ var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q, _templateObject5$l;
7794
+ var PanelGrid = /*#__PURE__*/styled(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) {
7166
7795
  var color = _ref.color;
7167
7796
  return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
7168
7797
  }, devices.mobileAndTablet);
7169
- var LeftPanel = /*#__PURE__*/styled.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) {
7798
+ var LeftPanel = /*#__PURE__*/styled.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) {
7170
7799
  var hasImage = _ref2.hasImage;
7171
7800
  return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
7172
7801
  }, devices.mobileAndTablet, function (_ref3) {
7173
7802
  var hasImage = _ref3.hasImage;
7174
7803
  return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
7175
7804
  });
7176
- var RightPanel = /*#__PURE__*/styled.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);
7177
- var InfoWrapper$1 = /*#__PURE__*/styled.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);
7178
- var ScrollDownWrapper$1 = /*#__PURE__*/styled.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);
7805
+ var RightPanel = /*#__PURE__*/styled.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);
7806
+ var InfoWrapper$1 = /*#__PURE__*/styled.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);
7807
+ var ScrollDownWrapper$1 = /*#__PURE__*/styled.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);
7179
7808
 
7180
7809
  var PageHeadingPanel = function PageHeadingPanel(_ref) {
7181
7810
  var _image$src, _image$alt;
@@ -7205,36 +7834,36 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
7205
7834
  })))));
7206
7835
  };
7207
7836
 
7208
- var _templateObject$R, _templateObject2$F, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$e, _templateObject7$a, _templateObject8$6, _templateObject9$3, _templateObject0$3, _templateObject1$2;
7209
- var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
7210
- var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
7211
- var SponsorWrapper$1 = /*#__PURE__*/styled.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);
7212
- var ImageButtonWrapper = /*#__PURE__*/styled.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);
7213
- var ContentSection = /*#__PURE__*/styled.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) {
7837
+ var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
7838
+ var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
7839
+ var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
7840
+ var SponsorWrapper$1 = /*#__PURE__*/styled.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);
7841
+ var ImageButtonWrapper = /*#__PURE__*/styled.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);
7842
+ var ContentSection = /*#__PURE__*/styled.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) {
7214
7843
  var theme = _ref.theme;
7215
7844
  return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
7216
7845
  }, function (_ref2) {
7217
7846
  var showBlock = _ref2.showBlock;
7218
7847
  return showBlock ? 'block' : 'none';
7219
7848
  }, devices.mobile);
7220
- var BadgeWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
7221
- var AdditionalContentWrapper = /*#__PURE__*/styled.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) {
7849
+ var BadgeWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
7850
+ var AdditionalContentWrapper = /*#__PURE__*/styled.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) {
7222
7851
  var isBadgePresent = _ref3.isBadgePresent;
7223
7852
  return isBadgePresent ? '1' : '4';
7224
7853
  });
7225
- var MainButtonWrapper = /*#__PURE__*/styled.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) {
7854
+ var MainButtonWrapper = /*#__PURE__*/styled.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) {
7226
7855
  var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
7227
7856
  return isAdditionalButtonPresent ? '20px' : '0';
7228
7857
  });
7229
- var AdditionalButtonWrapper = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
7230
- var TitleWrapper$3 = /*#__PURE__*/styled.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) {
7858
+ var AdditionalButtonWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
7859
+ var TitleWrapper$3 = /*#__PURE__*/styled.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) {
7231
7860
  var theme = _ref5.theme;
7232
7861
  return theme == ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
7233
7862
  }, devices.mobile, function (_ref6) {
7234
7863
  var isButtonPresent = _ref6.isButtonPresent;
7235
7864
  return isButtonPresent ? '20px' : '0';
7236
7865
  });
7237
- var ContentWrapper$1 = /*#__PURE__*/styled.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);
7866
+ var ContentWrapper$1 = /*#__PURE__*/styled.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);
7238
7867
 
7239
7868
  var PageHeadingPromoBadge;
7240
7869
  (function (PageHeadingPromoBadge) {
@@ -7419,7 +8048,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
7419
8048
  })))))))))));
7420
8049
  };
7421
8050
 
7422
- var _templateObject$S, _templateObject2$G, _templateObject3$v, _templateObject4$r;
8051
+ var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s;
7423
8052
  var GRID = {
7424
8053
  desktop: {
7425
8054
  leftWithImage: '1 / 1 / 3 / 7',
@@ -7432,19 +8061,19 @@ var GRID = {
7432
8061
  right: '2 / 1 / 3 / 15'
7433
8062
  }
7434
8063
  };
7435
- var HighlightPanelGrid = /*#__PURE__*/styled(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) {
8064
+ var HighlightPanelGrid = /*#__PURE__*/styled(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) {
7436
8065
  var $background = _ref.$background;
7437
8066
  return "var(--color-" + $background + ")";
7438
8067
  });
7439
- var LeftPanel$1 = /*#__PURE__*/styled.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) {
8068
+ var LeftPanel$1 = /*#__PURE__*/styled.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) {
7440
8069
  var hasImage = _ref2.hasImage;
7441
8070
  return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
7442
8071
  }, devices.mobileAndTablet, function (_ref3) {
7443
8072
  var hasImage = _ref3.hasImage;
7444
8073
  return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
7445
8074
  });
7446
- var RightPanel$1 = /*#__PURE__*/styled.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);
7447
- var Wrapper$4 = /*#__PURE__*/styled.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);
8075
+ var RightPanel$1 = /*#__PURE__*/styled.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);
8076
+ var Wrapper$4 = /*#__PURE__*/styled.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);
7448
8077
 
7449
8078
  var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
7450
8079
  var _image$src, _image$alt;
@@ -7467,12 +8096,12 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
7467
8096
  })))));
7468
8097
  };
7469
8098
 
7470
- var _templateObject$T, _templateObject2$H, _templateObject3$w, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4;
7471
- var BrandingTextBlock = /*#__PURE__*/styled.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);
7472
- var BrandingTextBody = /*#__PURE__*/styled.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"])));
7473
- var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
7474
- var CompactHeaderAssetWrapper = /*#__PURE__*/styled.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);
7475
- var CompactHeaderCopyWrapper = /*#__PURE__*/styled(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) {
8099
+ var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
8100
+ var BrandingTextBlock = /*#__PURE__*/styled.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);
8101
+ var BrandingTextBody = /*#__PURE__*/styled.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"])));
8102
+ var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
8103
+ var CompactHeaderAssetWrapper = /*#__PURE__*/styled.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);
8104
+ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(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) {
7476
8105
  var invert = _ref.invert,
7477
8106
  theme = _ref.theme;
7478
8107
  return invert ? theme.colors.white : theme.colors.primary;
@@ -7488,10 +8117,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$f || (
7488
8117
  var theme = _ref4.theme;
7489
8118
  return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
7490
8119
  }, devices.tablet, devices.mobile);
7491
- var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
7492
- var CompactHeaderTitleWrapper = /*#__PURE__*/styled.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);
7493
- var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
7494
- var PrimaryButtonWithInversion = /*#__PURE__*/styled(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) {
8120
+ var CompactHeaderLogoWrapper = /*#__PURE__*/styled.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);
8121
+ var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
8122
+ var CompactHeaderCTAWrapper = /*#__PURE__*/styled.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);
8123
+ var PrimaryButtonWithInversion = /*#__PURE__*/styled(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) {
7495
8124
  var invert = _ref5.invert,
7496
8125
  theme = _ref5.theme;
7497
8126
  return invert ? theme.colors.primary : theme.colors.white;
@@ -7532,601 +8161,212 @@ var isSameSiteUrl = function isSameSiteUrl(url) {
7532
8161
  var useSameSiteUrl = function useSameSiteUrl(url) {
7533
8162
  var _useState = useState(false),
7534
8163
  hasSameSiteUrl = _useState[0],
7535
- setSameSiteUrl = _useState[1];
7536
- useEffect(function () {
7537
- setSameSiteUrl(isSameSiteUrl(url));
7538
- }, [url]);
7539
- return hasSameSiteUrl;
7540
- };
7541
-
7542
- var renderBranding = function renderBranding(brandingStyle, invert, brandingText, brandingLink) {
7543
- // eslint-disable-next-line react-hooks/rules-of-hooks
7544
- var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
7545
- var target = sameSiteUrl ? '_self' : '_blank';
7546
- var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
7547
- switch (brandingStyle) {
7548
- case 'BlockText':
7549
- return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
7550
- case 'BodyText':
7551
- return (brandingText == null ? void 0 : brandingText.trim()) && (/*#__PURE__*/React__default.createElement(BrandingTextBody, {
7552
- dangerouslySetInnerHTML: {
7553
- __html: truncateHtmlString(brandingText, 65)
7554
- }
7555
- }));
7556
- case 'TextLink':
7557
- return (brandingText == null ? void 0 : brandingText.trim()) && brandingLink && (/*#__PURE__*/React__default.createElement(TextLink, {
7558
- target: target,
7559
- href: brandingLink,
7560
- color: color
7561
- }, truncate(stripAllHtmlTags(brandingText), 25)));
7562
- case 'StreamLogo':
7563
- return /*#__PURE__*/React__default.createElement(StreamBadge, {
7564
- invert: invert
7565
- });
7566
- case 'CinemaLogo':
7567
- return /*#__PURE__*/React__default.createElement(CinemaBadge, {
7568
- invert: invert
7569
- });
7570
- default:
7571
- return null;
7572
- }
7573
- };
7574
- var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
7575
- var brandingStyle = _ref.brandingStyle,
7576
- _ref$invert = _ref.invert,
7577
- invert = _ref$invert === void 0 ? false : _ref$invert,
7578
- brandingText = _ref.brandingText,
7579
- brandingLink = _ref.brandingLink;
7580
- return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
7581
- };
7582
-
7583
- var _excluded$j = ["text"];
7584
- var useResponsiveVideo = function useResponsiveVideo(video, poster) {
7585
- var mobileVideo = video.mobile || video.desktop;
7586
- var desktopVideo = video.desktop || video.mobile;
7587
- var mobilePoster = poster.mobile || poster.desktop;
7588
- var desktopPoster = poster.desktop || poster.mobile;
7589
- var _useState = useState(desktopPoster),
7590
- posterUrl = _useState[0],
7591
- setPoster = _useState[1];
7592
- var _useState2 = useState(desktopVideo),
7593
- videoUrl = _useState2[0],
7594
- setVideoUrl = _useState2[1];
7595
- var isMobile = useMobile();
7596
- useEffect(function () {
7597
- setPoster(isMobile ? mobilePoster : desktopPoster);
7598
- setVideoUrl(isMobile ? mobileVideo : desktopVideo);
7599
- }, [isMobile]);
7600
- return {
7601
- posterUrl: posterUrl,
7602
- videoUrl: videoUrl
7603
- };
7604
- };
7605
- var VideoWithControls = function VideoWithControls(_ref) {
7606
- var video = _ref.video,
7607
- poster = _ref.poster;
7608
- var _useResponsiveVideo = useResponsiveVideo(video, poster),
7609
- posterUrl = _useResponsiveVideo.posterUrl,
7610
- videoUrl = _useResponsiveVideo.videoUrl;
7611
- var isIOS = useIOS();
7612
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
7613
- id: video.elementId,
7614
- width: "100%",
7615
- height: "100%",
7616
- muted: true,
7617
- poster: posterUrl,
7618
- src: videoUrl,
7619
- "data-testid": "compact-video",
7620
- playsInline: true
7621
- }, /*#__PURE__*/React__default.createElement("source", {
7622
- src: videoUrl
7623
- }), /*#__PURE__*/React__default.createElement("img", {
7624
- src: posterUrl,
7625
- alt: poster.alt,
7626
- "data-testid": "compact-image"
7627
- })), /*#__PURE__*/React__default.createElement(VideoControls, {
7628
- loop: true,
7629
- videoElementId: video.elementId,
7630
- muted: true,
7631
- autoPlay: false,
7632
- soundControl: !isIOS
7633
- }));
7634
- };
7635
- var CompactHeaderImage = function CompactHeaderImage(_ref2) {
7636
- var mobile = _ref2.mobile,
7637
- desktop = _ref2.desktop,
7638
- alt = _ref2.alt;
7639
- return /*#__PURE__*/React__default.createElement("picture", {
7640
- "data-testid": "compact-picture"
7641
- }, mobile && /*#__PURE__*/React__default.createElement("source", {
7642
- srcSet: mobile,
7643
- media: "" + devices.mobile,
7644
- "data-testid": "compact-mobile-image-source"
7645
- }), /*#__PURE__*/React__default.createElement("source", {
7646
- srcSet: desktop,
7647
- media: "" + devices.desktop,
7648
- "data-testid": "compact-desktop-image-source"
7649
- }), /*#__PURE__*/React__default.createElement("img", {
7650
- src: desktop,
7651
- alt: alt,
7652
- "data-testid": "compact-image"
7653
- }));
7654
- };
7655
- var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
7656
- var video = _ref3.video,
7657
- poster = _ref3.poster;
7658
- if (!video.desktop && !video.mobile) {
7659
- return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
7660
- }
7661
- return /*#__PURE__*/React__default.createElement(VideoWithControls, {
7662
- video: video,
7663
- poster: poster
7664
- });
7665
- };
7666
- var PageHeadingCompact = function PageHeadingCompact(_ref4) {
7667
- var title = _ref4.title,
7668
- link = _ref4.link,
7669
- _ref4$sponsor = _ref4.sponsor,
7670
- sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
7671
- customSponsorImage = _ref4.customSponsorImage,
7672
- bgUrlDesktop = _ref4.bgUrlDesktop,
7673
- bgUrlDevice = _ref4.bgUrlDevice,
7674
- videoUrlDesktop = _ref4.videoUrlDesktop,
7675
- videoUrlMobile = _ref4.videoUrlMobile,
7676
- _ref4$bgImageAltText = _ref4.bgImageAltText,
7677
- bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
7678
- _ref4$invert = _ref4.invert,
7679
- invert = _ref4$invert === void 0 ? false : _ref4$invert,
7680
- _ref4$brandingStyle = _ref4.brandingStyle,
7681
- brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
7682
- brandingText = _ref4.brandingText,
7683
- brandingLink = _ref4.brandingLink,
7684
- _ref4$showCopy = _ref4.showCopy,
7685
- showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
7686
- var _ref5 = link || {},
7687
- linkText = _ref5.text,
7688
- restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
7689
- // const titleSize = title && title.length > 20 ? 4 : 3;
7690
- var video = {
7691
- elementId: 'compact-header-video',
7692
- desktop: videoUrlDesktop,
7693
- mobile: videoUrlMobile
7694
- };
7695
- var poster = {
7696
- desktop: bgUrlDesktop,
7697
- mobile: bgUrlDevice,
7698
- alt: bgImageAltText
7699
- };
7700
- return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
7701
- "data-testid": "compact-sponsor"
7702
- }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
7703
- "data-testid": "compact-custom-sponsor"
7704
- }, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
7705
- video: video,
7706
- poster: poster
7707
- })), showCopy && (/*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
7708
- className: "page-heading-compact__background",
7709
- invert: invert
7710
- }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
7711
- brandingStyle: brandingStyle,
7712
- brandingText: brandingText,
7713
- brandingLink: brandingLink,
7714
- invert: invert
7715
- }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
7716
- size: "large",
7717
- hierarchy: "h1"
7718
- }, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
7719
- invert: invert,
7720
- className: "page-heading-compact__button"
7721
- }), linkText))))));
7722
- };
7723
-
7724
- var _templateObject$U, _templateObject2$I;
7725
- var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
7726
- var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
7727
- var SwipeTrack = /*#__PURE__*/styled.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) {
7728
- var transitioning = _ref.transitioning;
7729
- return transitioning ? 'transform 0.3s ease' : 'none';
7730
- }, function (_ref2) {
7731
- var translateX = _ref2.translateX;
7732
- return translateX + "px";
7733
- }, SWIPE_SLIDE_CLASS_NAME);
7734
-
7735
- /**
7736
- * Generates a random string in the format XXX-XXX.
7737
- * Does not meet UUID standards.
7738
- * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
7739
- *
7740
- * @return {string} A random string in the format XXX-XXX.
7741
- */
7742
- var generateDomElementId = function generateDomElementId() {
7743
- var randomPart = Math.floor(100 + Math.random() * 900).toString();
7744
- var datePart = Date.now().toString().slice(-3);
7745
- return randomPart + "-" + datePart;
7746
- };
7747
-
7748
- var DISABLED_TABBING_TAGS = 'a, button';
7749
- var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
7750
- if (!element) return;
7751
- var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
7752
- focusables.forEach(function (el) {
7753
- if (shouldDisable) el.setAttribute('tabindex', '-1');
7754
- });
7755
- };
7756
- var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
7757
- return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
7758
- };
7759
- var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
7760
- var widthSoFar = 0;
7761
- var visible = [];
7762
- for (var i = currentIndex; i < slidesLength; i++) {
7763
- var _slideWidths$i;
7764
- var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
7765
- if (widthSoFar + width > containerWidth) break;
7766
- visible.push(i);
7767
- widthSoFar += width;
7768
- }
7769
- return visible;
7770
- };
7771
- var getMovedSlides = function getMovedSlides(delta, slideWidths) {
7772
- var absDelta = Math.abs(delta);
7773
- var movedSlides = 0;
7774
- var accumulated = 0;
7775
- for (var i = 0; i < slideWidths.length; i++) {
7776
- accumulated += slideWidths[i];
7777
- // Allow partial slide (e.g. 50% of next slide) to count
7778
- var partialThreshold = slideWidths[i] * 0.5;
7779
- if (absDelta > accumulated - partialThreshold) {
7780
- movedSlides++;
7781
- } else {
7782
- break;
7783
- }
7784
- }
7785
- return movedSlides;
8164
+ setSameSiteUrl = _useState[1];
8165
+ useEffect(function () {
8166
+ setSameSiteUrl(isSameSiteUrl(url));
8167
+ }, [url]);
8168
+ return hasSameSiteUrl;
7786
8169
  };
7787
8170
 
7788
- var _excluded$k = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
7789
- var MAX_CLONES_NUMBER = 6;
7790
- var CLICK_DRAG_THRESHOLD = 10;
7791
- var getClonesCount = function getClonesCount(infinite, childrenLength) {
7792
- if (!infinite) return 0;
7793
- return Math.min(childrenLength, MAX_CLONES_NUMBER);
8171
+ var renderBranding = function renderBranding(brandingStyle, invert, brandingText, brandingLink) {
8172
+ // eslint-disable-next-line react-hooks/rules-of-hooks
8173
+ var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
8174
+ var target = sameSiteUrl ? '_self' : '_blank';
8175
+ var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
8176
+ switch (brandingStyle) {
8177
+ case 'BlockText':
8178
+ return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
8179
+ case 'BodyText':
8180
+ return (brandingText == null ? void 0 : brandingText.trim()) && (/*#__PURE__*/React__default.createElement(BrandingTextBody, {
8181
+ dangerouslySetInnerHTML: {
8182
+ __html: truncateHtmlString(brandingText, 65)
8183
+ }
8184
+ }));
8185
+ case 'TextLink':
8186
+ return (brandingText == null ? void 0 : brandingText.trim()) && brandingLink && (/*#__PURE__*/React__default.createElement(TextLink, {
8187
+ target: target,
8188
+ href: brandingLink,
8189
+ color: color
8190
+ }, truncate(stripAllHtmlTags(brandingText), 25)));
8191
+ case 'StreamLogo':
8192
+ return /*#__PURE__*/React__default.createElement(StreamBadge, {
8193
+ invert: invert
8194
+ });
8195
+ case 'CinemaLogo':
8196
+ return /*#__PURE__*/React__default.createElement(CinemaBadge, {
8197
+ invert: invert
8198
+ });
8199
+ default:
8200
+ return null;
8201
+ }
7794
8202
  };
7795
- var getSlidedWidth = function getSlidedWidth(slide) {
7796
- if (!slide) return 0;
7797
- var style = window.getComputedStyle(slide);
7798
- var marginLeft = parseFloat(style.marginLeft) || 0;
7799
- var marginRight = parseFloat(style.marginRight) || 0;
7800
- return slide.getBoundingClientRect().width + marginLeft + marginRight;
8203
+ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
8204
+ var brandingStyle = _ref.brandingStyle,
8205
+ _ref$invert = _ref.invert,
8206
+ invert = _ref$invert === void 0 ? false : _ref$invert,
8207
+ brandingText = _ref.brandingText,
8208
+ brandingLink = _ref.brandingLink;
8209
+ return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
7801
8210
  };
7802
- var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
7803
- var children = _ref.children,
7804
- _ref$infinite = _ref.infinite,
7805
- infinite = _ref$infinite === void 0 ? false : _ref$infinite,
7806
- onIndexChange = _ref.onIndexChange,
7807
- _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
7808
- slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
7809
- _ref$slidesAriaHidden = _ref.slidesAriaHidden,
7810
- slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
7811
- onActiveChange = _ref.onActiveChange,
7812
- onOverflowChange = _ref.onOverflowChange,
7813
- props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
7814
- var containerRef = useRef(null);
7815
- var childRefs = useRef([]);
7816
- var startX = useRef(0);
7817
- var currentTranslate = useRef(0);
7818
- var isDragging = useRef(false);
7819
- var isMouseDown = useRef(false);
7820
- var isActive = useRef(false);
7821
- var isClickPrevented = useRef(false);
7822
- var uniqueIdRef = useRef(generateDomElementId());
7823
- var _useState = useState(null),
7824
- dragTranslateX = _useState[0],
7825
- setDragTranslateX = _useState[1];
7826
- var _useState2 = useState(false),
7827
- transitioning = _useState2[0],
7828
- setTransitioning = _useState2[1];
7829
- var _useState3 = useState([]),
7830
- slideWidths = _useState3[0],
7831
- setSlideWidths = _useState3[1];
7832
- var _useState4 = useState(0),
7833
- containerWidth = _useState4[0],
7834
- setContainerWidth = _useState4[1];
7835
- var _useMemo = useMemo(function () {
7836
- var count = getClonesCount(infinite, children.length);
7837
- var leftClones = infinite ? children.slice(-count) : [];
7838
- var rightClones = infinite ? children.slice(0, count) : [];
7839
- var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
7840
- return {
7841
- slides: allSlides,
7842
- clonesCount: count
7843
- };
7844
- }, [children, infinite]),
7845
- slides = _useMemo.slides,
7846
- clonesCount = _useMemo.clonesCount;
7847
- var _useState5 = useState(infinite ? clonesCount : 0),
7848
- currentIndex = _useState5[0],
7849
- setCurrentIndex = _useState5[1];
7850
- useEffect(function () {
7851
- var handler = function handler(e) {
7852
- if (isClickPrevented.current) {
7853
- e.preventDefault();
7854
- e.stopPropagation();
7855
- }
7856
- };
7857
- var containerElement = containerRef.current;
7858
- containerElement == null || containerElement.addEventListener('click', handler, true);
7859
- return function () {
7860
- return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
7861
- };
7862
- }, []);
7863
- useEffect(function () {
7864
- if (!onIndexChange) return;
7865
- if (!infinite) {
7866
- onIndexChange(currentIndex);
7867
- } else {
7868
- var offset = currentIndex - clonesCount + children.length;
7869
- var realIndex = offset % children.length;
7870
- onIndexChange(realIndex);
7871
- }
7872
- }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
7873
- var updateDimensions = useCallback(function () {
7874
- var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
7875
- var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
7876
- setContainerWidth(cw);
7877
- setSlideWidths(widths);
7878
- if (!infinite) {
7879
- var totalWidth = widths.reduce(function (acc, w) {
7880
- return acc + w;
7881
- }, 0);
7882
- var visibleSpace = cw - (slidesOffsetBefore || 0);
7883
- var overflow = totalWidth > Math.max(0, visibleSpace);
7884
- onOverflowChange == null || onOverflowChange(overflow);
7885
- }
7886
- }, []);
7887
- useEffect(function () {
7888
- var animationFrameRequestId = requestAnimationFrame(updateDimensions);
7889
- return function () {
7890
- return cancelAnimationFrame(animationFrameRequestId);
7891
- };
7892
- }, [children]);
7893
- useEffect(function () {
7894
- var observer = new ResizeObserver(updateDimensions);
7895
- if (containerRef.current) observer.observe(containerRef.current);
7896
- return function () {
7897
- return observer.disconnect();
7898
- };
7899
- }, [children]);
7900
- var setIsActive = function setIsActive() {
7901
- if (!isActive.current) {
7902
- isActive.current = true;
7903
- onActiveChange == null || onActiveChange(true);
7904
- }
7905
- };
7906
- var getTranslateX = function getTranslateX() {
7907
- var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
7908
- return acc + width;
7909
- }, 0);
7910
- return (slidesOffsetBefore || 0) - widthsBefore;
7911
- };
7912
- var getTranslateForIndex = function getTranslateForIndex(index) {
7913
- var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
7914
- return acc + width;
7915
- }, 0);
7916
- return (slidesOffsetBefore || 0) - widthsBefore;
7917
- };
7918
- var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
7919
- var delta = currentTranslate.current - getTranslateX();
7920
- var direction = delta > 0 ? -1 : 1;
7921
- var movedSlides = getMovedSlides(delta, slideWidths);
7922
- if (Math.abs(delta) > 20) {
7923
- movedSlides = Math.max(1, movedSlides);
7924
- var targetIndex = currentIndex + direction * movedSlides;
7925
- var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
7926
- if (!infinite) {
7927
- currentTranslate.current = getTranslateForIndex(finalIndex);
7928
- setDragTranslateX(null);
7929
- }
7930
- setTransitioning(true);
7931
- setCurrentIndex(finalIndex);
7932
- } else {
7933
- setTransitioning(true);
7934
- setCurrentIndex(function (prev) {
7935
- return prev;
7936
- });
7937
- }
7938
- setDragTranslateX(null);
7939
- };
7940
- var canMoveNext = function canMoveNext() {
7941
- if (infinite) return true;
7942
- if (slideWidths.length === 0 || containerWidth === 0) return false;
7943
- var totalWidth = slideWidths.reduce(function (acc, w) {
7944
- return acc + w;
7945
- }, 0);
7946
- var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
7947
- return acc + w;
7948
- }, 0);
7949
- var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
7950
- var remainingToRight = totalWidth - widthsBefore - visibleSpace;
7951
- var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
7952
- var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
7953
- var nextIndex = lastVisibleIndex + 1;
7954
- if (nextIndex >= slideWidths.length) return false;
7955
- var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
7956
- if (nextSlideWidth === 0) return false;
7957
- var EPS = 1; // pixel tolerance
7958
- // full next slide fits
7959
- if (remainingToRight + EPS >= nextSlideWidth) return true;
7960
- return remainingToRight > 0;
7961
- };
7962
- var handleTransitionEnd = function handleTransitionEnd() {
7963
- setTransitioning(false);
7964
- if (!infinite) return;
7965
- if (currentIndex >= children.length + clonesCount) {
7966
- setCurrentIndex(clonesCount);
7967
- } else if (currentIndex < clonesCount) {
7968
- setCurrentIndex(children.length + currentIndex);
7969
- }
7970
- };
7971
- var goToPrev = function goToPrev() {
7972
- if (transitioning) return;
7973
- setIsActive();
7974
- setTransitioning(true);
7975
- setCurrentIndex(function (prev) {
7976
- var target = infinite ? prev - 1 : Math.max(0, prev - 1);
7977
- if (!infinite) {
7978
- currentTranslate.current = getTranslateForIndex(target);
7979
- setDragTranslateX(null);
7980
- }
7981
- return target;
7982
- });
7983
- };
7984
- var goToNext = function goToNext() {
7985
- if (transitioning || !canMoveNext()) return;
7986
- setIsActive();
7987
- setTransitioning(true);
7988
- setCurrentIndex(function (prev) {
7989
- var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
7990
- if (!infinite) {
7991
- currentTranslate.current = getTranslateForIndex(target);
7992
- setDragTranslateX(null);
7993
- }
7994
- return target;
7995
- });
8211
+
8212
+ var _excluded$l = ["text"];
8213
+ var useResponsiveVideo = function useResponsiveVideo(video, poster) {
8214
+ var mobileVideo = video.mobile || video.desktop;
8215
+ var desktopVideo = video.desktop || video.mobile;
8216
+ var mobilePoster = poster.mobile || poster.desktop;
8217
+ var desktopPoster = poster.desktop || poster.mobile;
8218
+ var _useState = useState(desktopPoster),
8219
+ posterUrl = _useState[0],
8220
+ setPoster = _useState[1];
8221
+ var _useState2 = useState(desktopVideo),
8222
+ videoUrl = _useState2[0],
8223
+ setVideoUrl = _useState2[1];
8224
+ var isMobile = useMobile();
8225
+ useEffect(function () {
8226
+ setPoster(isMobile ? mobilePoster : desktopPoster);
8227
+ setVideoUrl(isMobile ? mobileVideo : desktopVideo);
8228
+ }, [isMobile]);
8229
+ return {
8230
+ posterUrl: posterUrl,
8231
+ videoUrl: videoUrl
7996
8232
  };
7997
- useImperativeHandle(ref, function () {
7998
- return {
7999
- nextSlide: goToNext,
8000
- prevSlide: goToPrev,
8001
- hasOverflow: function hasOverflow() {
8002
- var totalWidth = slideWidths.reduce(function (acc, w) {
8003
- return acc + w;
8004
- }, 0);
8005
- var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
8006
- return totalWidth > Math.max(0, visibleSpace);
8007
- },
8008
- hasNext: function hasNext() {
8009
- return canMoveNext();
8010
- }
8011
- };
8233
+ };
8234
+ var VideoWithControls = function VideoWithControls(_ref) {
8235
+ var video = _ref.video,
8236
+ poster = _ref.poster;
8237
+ var _useResponsiveVideo = useResponsiveVideo(video, poster),
8238
+ posterUrl = _useResponsiveVideo.posterUrl,
8239
+ videoUrl = _useResponsiveVideo.videoUrl;
8240
+ var isIOS = useIOS();
8241
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
8242
+ id: video.elementId,
8243
+ width: "100%",
8244
+ height: "100%",
8245
+ muted: true,
8246
+ poster: posterUrl,
8247
+ src: videoUrl,
8248
+ "data-testid": "compact-video",
8249
+ playsInline: true
8250
+ }, /*#__PURE__*/React__default.createElement("source", {
8251
+ src: videoUrl
8252
+ }), /*#__PURE__*/React__default.createElement("img", {
8253
+ src: posterUrl,
8254
+ alt: poster.alt,
8255
+ "data-testid": "compact-image"
8256
+ })), /*#__PURE__*/React__default.createElement(VideoControls, {
8257
+ loop: true,
8258
+ videoElementId: video.elementId,
8259
+ muted: true,
8260
+ autoPlay: false,
8261
+ soundControl: !isIOS
8262
+ }));
8263
+ };
8264
+ var CompactHeaderImage = function CompactHeaderImage(_ref2) {
8265
+ var mobile = _ref2.mobile,
8266
+ desktop = _ref2.desktop,
8267
+ alt = _ref2.alt;
8268
+ return /*#__PURE__*/React__default.createElement("picture", {
8269
+ "data-testid": "compact-picture"
8270
+ }, mobile && /*#__PURE__*/React__default.createElement("source", {
8271
+ srcSet: mobile,
8272
+ media: "" + devices.mobile,
8273
+ "data-testid": "compact-mobile-image-source"
8274
+ }), /*#__PURE__*/React__default.createElement("source", {
8275
+ srcSet: desktop,
8276
+ media: "" + devices.desktop,
8277
+ "data-testid": "compact-desktop-image-source"
8278
+ }), /*#__PURE__*/React__default.createElement("img", {
8279
+ src: desktop,
8280
+ alt: alt,
8281
+ "data-testid": "compact-image"
8282
+ }));
8283
+ };
8284
+ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
8285
+ var video = _ref3.video,
8286
+ poster = _ref3.poster;
8287
+ if (!video.desktop && !video.mobile) {
8288
+ return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
8289
+ }
8290
+ return /*#__PURE__*/React__default.createElement(VideoWithControls, {
8291
+ video: video,
8292
+ poster: poster
8012
8293
  });
8013
- var handleTouchStart = function handleTouchStart(e) {
8014
- setIsActive();
8015
- startX.current = e.touches[0].clientX;
8016
- isDragging.current = true;
8017
- isClickPrevented.current = false;
8018
- setTransitioning(false);
8019
- };
8020
- var handleTouchMove = function handleTouchMove(e) {
8021
- if (!isDragging.current) return;
8022
- var deltaX = e.touches[0].clientX - startX.current;
8023
- if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
8024
- isClickPrevented.current = true;
8025
- }
8026
- var visualOffset = getTranslateX() + deltaX;
8027
- currentTranslate.current = visualOffset;
8028
- setDragTranslateX(visualOffset);
8029
- };
8030
- var handleTouchEnd = function handleTouchEnd() {
8031
- isDragging.current = false;
8032
- if (isClickPrevented.current) {
8033
- navigateOnSwipeEnd();
8034
- } else {
8035
- setDragTranslateX(null);
8036
- }
8037
- };
8038
- var handleMouseMove = function handleMouseMove(e) {
8039
- if (!isDragging.current || !isMouseDown.current || transitioning) return;
8040
- var deltaX = e.clientX - startX.current;
8041
- if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
8042
- isClickPrevented.current = true;
8043
- }
8044
- var visualOffset = getTranslateX() + deltaX;
8045
- currentTranslate.current = visualOffset;
8046
- setDragTranslateX(visualOffset);
8047
- };
8048
- var _handleMouseUp = function handleMouseUp() {
8049
- if (!isMouseDown.current) return;
8050
- isMouseDown.current = false;
8051
- isDragging.current = false;
8052
- if (isClickPrevented.current) {
8053
- navigateOnSwipeEnd();
8054
- } else {
8055
- setDragTranslateX(null);
8056
- }
8057
- window.removeEventListener('mousemove', handleMouseMove);
8058
- window.removeEventListener('mouseup', _handleMouseUp);
8059
- };
8060
- var handleMouseDown = function handleMouseDown(e) {
8061
- if (transitioning || e.button !== 0) return;
8062
- e.preventDefault();
8063
- setIsActive();
8064
- startX.current = e.clientX;
8065
- isDragging.current = true;
8066
- isMouseDown.current = true;
8067
- isClickPrevented.current = false;
8068
- setTransitioning(false);
8069
- window.addEventListener('mousemove', handleMouseMove);
8070
- window.addEventListener('mouseup', _handleMouseUp);
8294
+ };
8295
+ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
8296
+ var title = _ref4.title,
8297
+ link = _ref4.link,
8298
+ _ref4$sponsor = _ref4.sponsor,
8299
+ sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
8300
+ customSponsorImage = _ref4.customSponsorImage,
8301
+ bgUrlDesktop = _ref4.bgUrlDesktop,
8302
+ bgUrlDevice = _ref4.bgUrlDevice,
8303
+ videoUrlDesktop = _ref4.videoUrlDesktop,
8304
+ videoUrlMobile = _ref4.videoUrlMobile,
8305
+ _ref4$bgImageAltText = _ref4.bgImageAltText,
8306
+ bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
8307
+ _ref4$invert = _ref4.invert,
8308
+ invert = _ref4$invert === void 0 ? false : _ref4$invert,
8309
+ _ref4$brandingStyle = _ref4.brandingStyle,
8310
+ brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
8311
+ brandingText = _ref4.brandingText,
8312
+ brandingLink = _ref4.brandingLink,
8313
+ _ref4$showCopy = _ref4.showCopy,
8314
+ showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
8315
+ var _ref5 = link || {},
8316
+ linkText = _ref5.text,
8317
+ restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
8318
+ // const titleSize = title && title.length > 20 ? 4 : 3;
8319
+ var video = {
8320
+ elementId: 'compact-header-video',
8321
+ desktop: videoUrlDesktop,
8322
+ mobile: videoUrlMobile
8071
8323
  };
8072
- var onSlideFocus = function onSlideFocus(isVisible, index) {
8073
- if (!isVisible) {
8074
- setCurrentIndex(index);
8075
- }
8324
+ var poster = {
8325
+ desktop: bgUrlDesktop,
8326
+ mobile: bgUrlDevice,
8327
+ alt: bgImageAltText
8076
8328
  };
8077
- var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
8078
- return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
8079
- ref: containerRef,
8080
- className: "swipe",
8081
- onTouchStart: handleTouchStart,
8082
- onTouchMove: handleTouchMove,
8083
- onTouchEnd: handleTouchEnd,
8084
- onMouseDown: handleMouseDown,
8085
- "aria-roledescription": "carousel",
8086
- role: "list"
8087
- }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
8088
- className: "swipe-track-wrapper",
8089
- translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
8090
- transitioning: transitioning && dragTranslateX === null,
8091
- onTransitionEnd: handleTransitionEnd
8092
- }, slides.map(function (child, index) {
8093
- var isVisible = visibleIndexes.includes(index);
8094
- var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
8095
- return /*#__PURE__*/React__default.createElement("div", {
8096
- key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
8097
- className: SWIPE_SLIDE_CLASS_NAME,
8098
- "aria-hidden": slidesAriaHidden || isClone,
8099
- "aria-roledescription": "slide",
8100
- role: "listitem",
8101
- ref: function ref(el) {
8102
- childRefs.current[index] = el;
8103
- disableTabbingInside(el, isClone);
8104
- },
8105
- onFocus: function onFocus() {
8106
- return onSlideFocus(isVisible, index);
8107
- }
8108
- }, child);
8109
- })));
8110
- });
8111
- Swipe.displayName = 'Swipe';
8329
+ return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
8330
+ "data-testid": "compact-sponsor"
8331
+ }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
8332
+ "data-testid": "compact-custom-sponsor"
8333
+ }, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
8334
+ video: video,
8335
+ poster: poster
8336
+ })), showCopy && (/*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
8337
+ className: "page-heading-compact__background",
8338
+ invert: invert
8339
+ }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
8340
+ brandingStyle: brandingStyle,
8341
+ brandingText: brandingText,
8342
+ brandingLink: brandingLink,
8343
+ invert: invert
8344
+ }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8345
+ size: "large",
8346
+ hierarchy: "h1"
8347
+ }, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
8348
+ invert: invert,
8349
+ className: "page-heading-compact__button"
8350
+ }), linkText))))));
8351
+ };
8112
8352
 
8113
- var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$g, _templateObject7$c;
8114
- var HighlightsGrid = /*#__PURE__*/styled(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);
8115
- var HighlightTitleWrapper = /*#__PURE__*/styled.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"])));
8116
- var HighlightTextWrapper = /*#__PURE__*/styled.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);
8117
- var HighlightsInfoWrapper = /*#__PURE__*/styled.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) {
8353
+ var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$d;
8354
+ var HighlightsGrid = /*#__PURE__*/styled(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);
8355
+ var HighlightTitleWrapper = /*#__PURE__*/styled.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"])));
8356
+ var HighlightTextWrapper = /*#__PURE__*/styled.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);
8357
+ var HighlightsInfoWrapper = /*#__PURE__*/styled.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) {
8118
8358
  var hasImages = _ref.hasImages;
8119
8359
  return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
8120
8360
  }, devices.mobile, function (_ref2) {
8121
8361
  var hasImages = _ref2.hasImages;
8122
8362
  return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
8123
8363
  });
8124
- var HighlightsCarouselWrapper = /*#__PURE__*/styled.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) {
8364
+ var HighlightsCarouselWrapper = /*#__PURE__*/styled.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) {
8125
8365
  var hasMultipleImages = _ref3.hasMultipleImages;
8126
8366
  return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
8127
8367
  }, devices.mobile);
8128
- var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.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);
8129
- var RotatorButtonsWrapper = /*#__PURE__*/styled.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);
8368
+ var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.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);
8369
+ var RotatorButtonsWrapper$1 = /*#__PURE__*/styled.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);
8130
8370
 
8131
8371
  /* eslint-disable react/no-danger */
8132
8372
  var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
@@ -8169,7 +8409,7 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
8169
8409
  }
8170
8410
  })))) : null), hasImages && (/*#__PURE__*/React__default.createElement(HighlightsCarouselWrapper, {
8171
8411
  hasMultipleImages: hasMultipleImages
8172
- }, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
8412
+ }, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
8173
8413
  "data-testid": "rotator-buttons"
8174
8414
  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
8175
8415
  onClickNext: onNext,
@@ -8189,14 +8429,14 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
8189
8429
  }))))));
8190
8430
  };
8191
8431
 
8192
- var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$o, _templateObject6$h, _templateObject7$d, _templateObject8$8;
8193
- var linkButtonStyles = /*#__PURE__*/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"])));
8194
- var PageNav = /*#__PURE__*/styled.a(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8195
- var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8196
- var PageNumberWrapper = /*#__PURE__*/styled.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"])));
8197
- var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8198
- var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8199
- var TextLinkPagination = /*#__PURE__*/styled(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) {
8432
+ var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
8433
+ var linkButtonStyles = /*#__PURE__*/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"])));
8434
+ var PageNav = /*#__PURE__*/styled.a(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8435
+ var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8436
+ var PageNumberWrapper = /*#__PURE__*/styled.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"])));
8437
+ var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8438
+ var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8439
+ var TextLinkPagination = /*#__PURE__*/styled(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) {
8200
8440
  var active = _ref.active;
8201
8441
  return active ? "var(--color-primary-red)" : 'inherit';
8202
8442
  }, function (_ref2) {
@@ -8348,16 +8588,16 @@ var Pagination = function Pagination(_ref) {
8348
8588
  }))))));
8349
8589
  };
8350
8590
 
8351
- var _templateObject$X;
8352
- var PeopleListingGrid = /*#__PURE__*/styled(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);
8353
-
8354
- var _templateObject$Y, _templateObject2$L;
8355
- var TextWrapper$2 = /*#__PURE__*/styled.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"])));
8356
- var RoleContent = /*#__PURE__*/styled(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"])));
8591
+ var _templateObject$Y;
8592
+ var PeopleListingGrid = /*#__PURE__*/styled(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);
8357
8593
 
8358
8594
  var _templateObject$Z, _templateObject2$M;
8359
- var PersonLink = /*#__PURE__*/styled.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"])));
8360
- var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
8595
+ var TextWrapper$2 = /*#__PURE__*/styled.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"])));
8596
+ var RoleContent = /*#__PURE__*/styled(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"])));
8597
+
8598
+ var _templateObject$_, _templateObject2$N;
8599
+ var PersonLink = /*#__PURE__*/styled.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"])));
8600
+ var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
8361
8601
 
8362
8602
  var Person = function Person(_ref) {
8363
8603
  var person = _ref.person,
@@ -8396,9 +8636,9 @@ var PersonDetails = function PersonDetails(_ref) {
8396
8636
  })));
8397
8637
  };
8398
8638
 
8399
- var _templateObject$_, _templateObject2$N;
8400
- var PersonWrapper = /*#__PURE__*/styled.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"])));
8401
- var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
8639
+ var _templateObject$$, _templateObject2$O;
8640
+ var PersonWrapper$1 = /*#__PURE__*/styled.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"])));
8641
+ var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
8402
8642
 
8403
8643
  var PersonCard = function PersonCard(_ref) {
8404
8644
  var role = _ref.role,
@@ -8408,7 +8648,7 @@ var PersonCard = function PersonCard(_ref) {
8408
8648
  var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
8409
8649
  return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
8410
8650
  }, [role]);
8411
- if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper, {
8651
+ if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
8412
8652
  className: className
8413
8653
  }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
8414
8654
  src: role.people[0].headshot,
@@ -8436,14 +8676,14 @@ var PeopleListing = function PeopleListing(_ref) {
8436
8676
  }));
8437
8677
  };
8438
8678
 
8439
- var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$t;
8440
- var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8441
- var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
8679
+ var _templateObject$10, _templateObject2$P, _templateObject3$A, _templateObject4$u;
8680
+ var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8681
+ var CreditListingWrapper = /*#__PURE__*/styled(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) {
8442
8682
  var columnCount = _ref.columnCount;
8443
8683
  return "repeat(" + columnCount + ", 1fr)";
8444
8684
  }, devices.mobile, devices.tablet);
8445
- var DescriptionWrapper = /*#__PURE__*/styled.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"])));
8446
- var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
8685
+ var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
8686
+ var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
8447
8687
 
8448
8688
  // Get the total character length of a property in an array of objects
8449
8689
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -8570,8 +8810,8 @@ var CreditListing = function CreditListing(_ref) {
8570
8810
  }, creditEntries);
8571
8811
  };
8572
8812
 
8573
- var _templateObject$10;
8574
- var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(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"])));
8813
+ var _templateObject$11;
8814
+ var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(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"])));
8575
8815
 
8576
8816
  var PolicyLinks = function PolicyLinks(_ref) {
8577
8817
  var items = _ref.items;
@@ -8589,14 +8829,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
8589
8829
  }));
8590
8830
  };
8591
8831
 
8592
- 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;
8832
+ 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;
8593
8833
  var LENGTH_TEXT = 28;
8594
8834
  var LENGTH_TEXT_TABLET$1 = 12;
8595
8835
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
8596
8836
  var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
8597
8837
  var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
8598
8838
  var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
8599
- var PromoWithTagsGrid = /*#__PURE__*/styled(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) {
8839
+ var PromoWithTagsGrid = /*#__PURE__*/styled(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) {
8600
8840
  var imageToLeft = _ref.imageToLeft;
8601
8841
  return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
8602
8842
  }, devices.tablet, function (_ref2) {
@@ -8606,7 +8846,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$11 || (_templa
8606
8846
  var asCard = _ref3.asCard;
8607
8847
  return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
8608
8848
  });
8609
- var ButtonsContainer$2 = /*#__PURE__*/styled.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) {
8849
+ var ButtonsContainer$2 = /*#__PURE__*/styled.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) {
8610
8850
  var hasTextLinks = _ref4.hasTextLinks;
8611
8851
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
8612
8852
  }, function (_ref5) {
@@ -8630,21 +8870,21 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$A || (_templat
8630
8870
  }
8631
8871
  return '';
8632
8872
  });
8633
- var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
8873
+ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
8634
8874
  var marginBottom = _ref7.marginBottom;
8635
8875
  return marginBottom + "px";
8636
8876
  }, function (_ref8) {
8637
8877
  var mobileMarginBottom = _ref8.mobileMarginBottom;
8638
8878
  return mobileMarginBottom && "\n @media " + devices.mobile + " {\n margin-bottom: " + mobileMarginBottom + "px;\n }\n ";
8639
8879
  });
8640
- var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
8641
- var TextLinkWrapper$2 = /*#__PURE__*/styled.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"])));
8642
- var ExtraContentWrapper = /*#__PURE__*/styled.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);
8643
- var IconWrapper$2 = /*#__PURE__*/styled.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);
8644
- var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
8645
- var MobileTitleWrapper = /*#__PURE__*/styled.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);
8646
- var asCardOverrides = /*#__PURE__*/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);
8647
- var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.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) {
8880
+ var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
8881
+ var TextLinkWrapper$2 = /*#__PURE__*/styled.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"])));
8882
+ var ExtraContentWrapper = /*#__PURE__*/styled.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);
8883
+ var IconWrapper$2 = /*#__PURE__*/styled.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);
8884
+ var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
8885
+ var MobileTitleWrapper = /*#__PURE__*/styled.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);
8886
+ var asCardOverrides = /*#__PURE__*/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);
8887
+ var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.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) {
8648
8888
  var imageToLeft = _ref9.imageToLeft;
8649
8889
  return imageToLeft ? 'left' : 'right';
8650
8890
  }, devices.mobile);
@@ -8665,7 +8905,7 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObj
8665
8905
  var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled(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);
8666
8906
  var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
8667
8907
 
8668
- var _excluded$l = ["text"],
8908
+ var _excluded$m = ["text"],
8669
8909
  _excluded2$2 = ["text"],
8670
8910
  _excluded3$1 = ["text"];
8671
8911
  var _buttonTypeToButton$1;
@@ -8733,7 +8973,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
8733
8973
  var _ref2 = firstButton || {},
8734
8974
  _ref2$text = _ref2.text,
8735
8975
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
8736
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
8976
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
8737
8977
  var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
8738
8978
  var secondButton = links == null ? void 0 : links[1];
8739
8979
  var _ref3 = secondButton || {},
@@ -8861,28 +9101,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
8861
9101
  }))));
8862
9102
  };
8863
9103
 
8864
- var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f;
9104
+ var _templateObject$13, _templateObject2$Q, _templateObject3$C, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
8865
9105
  var LENGTH_TEXT$2 = 28;
8866
9106
  var LENGTH_TEXT_TABLET$2 = 10;
8867
- var PromoWithTitleGrid = /*#__PURE__*/styled(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) {
9107
+ var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
8868
9108
  var imageToLeft = _ref.imageToLeft;
8869
9109
  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'";
8870
9110
  }, devices.tablet, function (_ref2) {
8871
9111
  var imageToLeft = _ref2.imageToLeft;
8872
9112
  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'";
8873
9113
  }, devices.mobile);
8874
- var PromoWithTitleImageWrapper = /*#__PURE__*/styled.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) {
9114
+ var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
8875
9115
  var imageToLeft = _ref3.imageToLeft;
8876
9116
  return imageToLeft ? 'left' : 'right';
8877
9117
  }, devices.mobile);
8878
- var PromoWithTitleContentWrapper = /*#__PURE__*/styled.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) {
9118
+ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.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) {
8879
9119
  var imageToLeft = _ref4.imageToLeft;
8880
9120
  return imageToLeft ? 'right' : 'left';
8881
9121
  }, devices.mobile);
8882
- var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
8883
- var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
8884
- var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(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);
8885
- var ButtonsContainer$3 = /*#__PURE__*/styled.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) {
9122
+ var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
9123
+ var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
9124
+ var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(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);
9125
+ var ButtonsContainer$3 = /*#__PURE__*/styled.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) {
8886
9126
  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
8887
9127
  primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
8888
9128
  _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -8904,8 +9144,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$f || (_templat
8904
9144
  return '';
8905
9145
  });
8906
9146
 
8907
- var _templateObject$13;
8908
- var VideoContainer = /*#__PURE__*/styled.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) {
9147
+ var _templateObject$14;
9148
+ var VideoContainer = /*#__PURE__*/styled.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) {
8909
9149
  var _ref$aspectRatio = _ref.aspectRatio,
8910
9150
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
8911
9151
  return aspectRatio;
@@ -9017,7 +9257,7 @@ var PromoChild = function PromoChild(_ref) {
9017
9257
  }));
9018
9258
  };
9019
9259
 
9020
- var _excluded$m = ["text"],
9260
+ var _excluded$n = ["text"],
9021
9261
  _excluded2$3 = ["text"];
9022
9262
  var LENGTH_TEXT$3 = 28;
9023
9263
  var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -9044,7 +9284,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9044
9284
  var _ref2 = primaryButton || {},
9045
9285
  _ref2$text = _ref2.text,
9046
9286
  primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
9047
- restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
9287
+ restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
9048
9288
  var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
9049
9289
  var tertiaryButton = links == null ? void 0 : links[1];
9050
9290
  var _ref3 = tertiaryButton || {},
@@ -9087,8 +9327,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9087
9327
  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
9088
9328
  };
9089
9329
 
9090
- var _templateObject$14;
9091
- var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
9330
+ var _templateObject$15;
9331
+ var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
9092
9332
 
9093
9333
  /**
9094
9334
  * DEPRECATED. Use RadioGroup2 instead
@@ -9143,9 +9383,9 @@ var RadioGroup = function RadioGroup(_ref) {
9143
9383
  })));
9144
9384
  };
9145
9385
 
9146
- var _templateObject$15, _templateObject2$Q, _templateObject3$C;
9147
- var Container$3 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9148
- var RadioGroup$1 = /*#__PURE__*/styled.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) {
9386
+ var _templateObject$16, _templateObject2$R, _templateObject3$D;
9387
+ var Container$3 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9388
+ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
9149
9389
  var horizontalMode = _ref.horizontalMode;
9150
9390
  if (horizontalMode) return 'row';
9151
9391
  return 'column';
@@ -9153,7 +9393,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObjec
9153
9393
  var gap = _ref2.gap;
9154
9394
  return gap + "px";
9155
9395
  });
9156
- var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
9396
+ var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
9157
9397
  var darkMode = _ref3.darkMode;
9158
9398
  if (darkMode) return 'var(--base-color-white)';
9159
9399
  return 'var(--base-color-errorstate)';
@@ -9230,10 +9470,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
9230
9470
  }, error))));
9231
9471
  };
9232
9472
 
9233
- var _templateObject$16, _templateObject2$R, _templateObject3$D;
9234
- var StatusBannerWrapper = /*#__PURE__*/styled.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);
9235
- var ContentContainer$3 = /*#__PURE__*/styled.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"])));
9236
- var SvgContainer$3 = /*#__PURE__*/styled.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);
9473
+ var _templateObject$17, _templateObject2$S, _templateObject3$E;
9474
+ var StatusBannerWrapper = /*#__PURE__*/styled.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);
9475
+ var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
9476
+ var SvgContainer$3 = /*#__PURE__*/styled.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);
9237
9477
 
9238
9478
  /* eslint-disable react/no-danger */
9239
9479
  var StatusBanner = function StatusBanner(_ref) {
@@ -9289,8 +9529,8 @@ var StatusBanner = function StatusBanner(_ref) {
9289
9529
  return null;
9290
9530
  };
9291
9531
 
9292
- var _templateObject$17;
9293
- var SectionTitleWrapper = /*#__PURE__*/styled.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);
9532
+ var _templateObject$18;
9533
+ var SectionTitleWrapper = /*#__PURE__*/styled.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);
9294
9534
 
9295
9535
  /* ~~~~~~~ new harmonic types ~~~~~~~ */
9296
9536
  var HarmonicSize = {
@@ -9332,8 +9572,8 @@ var SectionTitle = function SectionTitle(_ref) {
9332
9572
  }, description)))));
9333
9573
  };
9334
9574
 
9335
- var _templateObject$18, _templateObject2$S, _templateObject3$E, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4;
9336
- var stateStyles = /*#__PURE__*/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) {
9575
+ var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7, _templateObject0$7, _templateObject1$5;
9576
+ var stateStyles = /*#__PURE__*/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) {
9337
9577
  var theme = _ref.theme;
9338
9578
  return "3px solid " + theme.colors.lapisLazuli;
9339
9579
  }, function (_ref2) {
@@ -9343,12 +9583,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$18 || (_templateObject$18 = /
9343
9583
  var theme = _ref3.theme;
9344
9584
  return theme.colors.lightgrey;
9345
9585
  });
9346
- var borderStyles = /*#__PURE__*/css(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
9586
+ var borderStyles = /*#__PURE__*/css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
9347
9587
  var theme = _ref4.theme;
9348
9588
  return theme.colors.darkgrey;
9349
9589
  });
9350
- var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
9351
- var listItemStyles = /*#__PURE__*/css(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
9590
+ var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
9591
+ var listItemStyles = /*#__PURE__*/css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
9352
9592
  var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
9353
9593
  var theme = _ref5.theme;
9354
9594
  return {
@@ -9356,11 +9596,11 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
9356
9596
  color: theme.colors.black,
9357
9597
  title: 'Select Arrow'
9358
9598
  };
9359
- })(_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"])));
9360
- var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
9361
- var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
9362
- var Options = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
9363
- var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
9599
+ })(_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"])));
9600
+ var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
9601
+ var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
9602
+ var Options = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
9603
+ var Option = /*#__PURE__*/styled.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
9364
9604
  var theme = _ref6.theme,
9365
9605
  hover = _ref6.hover;
9366
9606
  var _theme$colors = theme.colors,
@@ -9370,9 +9610,9 @@ var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 =
9370
9610
  return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
9371
9611
  });
9372
9612
  var selectStyles = function selectStyles(width, height) {
9373
- return 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);
9613
+ return 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);
9374
9614
  };
9375
- var SelectList = /*#__PURE__*/styled.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) {
9615
+ var SelectList = /*#__PURE__*/styled.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) {
9376
9616
  var width = _ref7.width,
9377
9617
  height = _ref7.height;
9378
9618
  return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
@@ -9713,9 +9953,9 @@ function Select(_ref3) {
9713
9953
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
9714
9954
  }
9715
9955
 
9716
- var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x;
9717
- var Container$4 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9718
- var SelectWrapper$1 = /*#__PURE__*/styled.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) {
9956
+ var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
9957
+ var Container$4 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9958
+ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
9719
9959
  var width = _ref.width;
9720
9960
  if (!width) return 'none';
9721
9961
  return width + "px";
@@ -9732,18 +9972,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$T || (_templateOb
9732
9972
  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
9733
9973
  return "0 0 0 3px var(--base-color-lapislazuli)";
9734
9974
  });
9735
- var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
9975
+ var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
9736
9976
  var darkMode = _ref5.darkMode;
9737
9977
  if (darkMode) return "var(--base-color-white)";
9738
9978
  return "var(--base-color-black)";
9739
9979
  });
9740
- var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
9980
+ var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
9741
9981
  var darkMode = _ref6.darkMode;
9742
9982
  if (darkMode) return "var(--base-color-white)";
9743
9983
  return "var(--base-color-errorstate)";
9744
9984
  });
9745
9985
 
9746
- var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components"];
9986
+ var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
9747
9987
  var DropdownIndicator = function DropdownIndicator(props) {
9748
9988
  return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
9749
9989
  iconName: "DropdownArrow"
@@ -9794,7 +10034,7 @@ var SelectComponent = function SelectComponent(_ref2) {
9794
10034
  _ref2$isSearchable = _ref2.isSearchable,
9795
10035
  isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
9796
10036
  components = _ref2.components,
9797
- selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
10037
+ selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
9798
10038
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
9799
10039
  label: label,
9800
10040
  error: error,
@@ -9812,7 +10052,7 @@ var SelectComponent = function SelectComponent(_ref2) {
9812
10052
  })));
9813
10053
  };
9814
10054
 
9815
- var _excluded$o = ["label", "error", "width", "darkMode", "components"];
10055
+ var _excluded$p = ["label", "error", "width", "darkMode", "components"];
9816
10056
  /**
9817
10057
  * The Select2Async component is similar to Select 2, but uses react-select async
9818
10058
  * component for select instead of regular react-select component. This can be used
@@ -9834,7 +10074,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
9834
10074
  _ref$darkMode = _ref.darkMode,
9835
10075
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
9836
10076
  components = _ref.components,
9837
- selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
10077
+ selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
9838
10078
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
9839
10079
  label: label,
9840
10080
  error: error,
@@ -9851,24 +10091,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
9851
10091
  })));
9852
10092
  };
9853
10093
 
9854
- var _templateObject$1a, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
9855
- var Wrapper$6 = /*#__PURE__*/styled.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"])));
9856
- var PromoLabel = /*#__PURE__*/styled(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"])));
9857
- var ButtonContainer = /*#__PURE__*/styled.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) {
10094
+ var _templateObject$1b, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
10095
+ var Wrapper$6 = /*#__PURE__*/styled.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"])));
10096
+ var PromoLabel = /*#__PURE__*/styled(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"])));
10097
+ var ButtonContainer = /*#__PURE__*/styled.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) {
9858
10098
  var stackCtasEarly = _ref.stackCtasEarly;
9859
10099
  return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
9860
10100
  }, function (_ref2) {
9861
10101
  var stackCtasEarly = _ref2.stackCtasEarly;
9862
10102
  return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
9863
10103
  }, devices.smallDesktop, devices.mobileAndTablet);
9864
- var TitleContainer$3 = /*#__PURE__*/styled.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) {
10104
+ var TitleContainer$3 = /*#__PURE__*/styled.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) {
9865
10105
  var singleChild = _ref3.singleChild;
9866
10106
  return singleChild ? '0' : '10px';
9867
10107
  });
9868
- var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
9869
- var PriceRow = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
9870
- var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
9871
- var VisuallyHidden = /*#__PURE__*/styled.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"])));
10108
+ var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
10109
+ var PriceRow = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
10110
+ var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
10111
+ var VisuallyHidden = /*#__PURE__*/styled.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"])));
9872
10112
 
9873
10113
  // Set max. character length
9874
10114
  var setMaxCharLength = function setMaxCharLength(value, maxLength) {
@@ -9957,8 +10197,8 @@ var UpsellCard = function UpsellCard(_ref) {
9957
10197
  }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
9958
10198
  };
9959
10199
 
9960
- var _templateObject$1b, _templateObject2$U, _templateObject3$H;
9961
- var Wrapper$7 = /*#__PURE__*/styled.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) {
10200
+ var _templateObject$1c, _templateObject2$V, _templateObject3$I;
10201
+ var Wrapper$7 = /*#__PURE__*/styled.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) {
9962
10202
  var _ref$aspectRatio = _ref.aspectRatio,
9963
10203
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
9964
10204
  return aspectRatio;
@@ -9968,10 +10208,10 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1b || (_templateObjec
9968
10208
  height = _ref2.height;
9969
10209
  return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
9970
10210
  });
9971
- var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
9972
- var CaptionContext = /*#__PURE__*/styled(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"])));
10211
+ var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
10212
+ var CaptionContext = /*#__PURE__*/styled(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"])));
9973
10213
 
9974
- var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
10214
+ var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
9975
10215
  var ImageWithCaption = function ImageWithCaption(_ref) {
9976
10216
  var caption = _ref.caption,
9977
10217
  altText = _ref.altText,
@@ -9981,7 +10221,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
9981
10221
  loading = _ref.loading,
9982
10222
  aspectRatio = _ref.aspectRatio,
9983
10223
  className = _ref.className,
9984
- restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
10224
+ restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
9985
10225
  return /*#__PURE__*/React__default.createElement(Wrapper$7, Object.assign({
9986
10226
  aspectRatio: aspectRatio,
9987
10227
  className: className
@@ -10002,13 +10242,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
10002
10242
  }, caption))));
10003
10243
  };
10004
10244
 
10005
- var _templateObject$1c, _templateObject2$V, _templateObject3$I, _templateObject4$z, _templateObject5$t, _templateObject6$m;
10006
- var CardContainer$1 = /*#__PURE__*/styled.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"])));
10007
- var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
10008
- var StyledImage = /*#__PURE__*/styled.img(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
10009
- var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
10010
- var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
10011
- var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
10245
+ var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u, _templateObject6$n;
10246
+ var CardContainer$1 = /*#__PURE__*/styled.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"])));
10247
+ var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
10248
+ var StyledImage = /*#__PURE__*/styled.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
10249
+ var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
10250
+ var IconWrapper$3 = /*#__PURE__*/styled.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);
10251
+ var TitleWrapper$4 = /*#__PURE__*/styled.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);
10012
10252
 
10013
10253
  var MiniCard = function MiniCard(_ref) {
10014
10254
  var _ref$title = _ref.title,
@@ -10046,18 +10286,18 @@ var MiniCard = function MiniCard(_ref) {
10046
10286
  }, title)))));
10047
10287
  };
10048
10288
 
10049
- var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u;
10050
- var ReadMoreContainer = /*#__PURE__*/styled.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"])));
10051
- var LinkContainer = /*#__PURE__*/styled.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"])));
10052
- var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
10289
+ var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
10290
+ var ReadMoreContainer = /*#__PURE__*/styled.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"])));
10291
+ var LinkContainer = /*#__PURE__*/styled.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"])));
10292
+ var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
10053
10293
  var isVisible = _ref.isVisible;
10054
10294
  return isVisible ? 'visible' : 'hidden';
10055
10295
  });
10056
- var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
10296
+ var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
10057
10297
  var isVisible = _ref2.isVisible;
10058
10298
  return isVisible ? 'visible' : 'hidden';
10059
10299
  });
10060
- var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
10300
+ var ContentContainer$5 = /*#__PURE__*/styled.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"])));
10061
10301
 
10062
10302
  var keyDown = function keyDown(e, toggleFunction) {
10063
10303
  if (e.key === 'Enter' || e.key === 'Space') {
@@ -10138,15 +10378,15 @@ var ReadMore = function ReadMore(_ref) {
10138
10378
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
10139
10379
  };
10140
10380
 
10141
- var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
10142
- var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10143
- var MenuList = /*#__PURE__*/styled.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"])), Colors.LightGrey);
10144
- var MobileButton = /*#__PURE__*/styled.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"])), Colors.Black, Colors.White, Colors.DarkGrey);
10145
- var MenuItem$1 = /*#__PURE__*/styled.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"])), Colors.Black, function (_ref) {
10381
+ var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w;
10382
+ var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10383
+ var MenuList = /*#__PURE__*/styled.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"])), Colors.LightGrey);
10384
+ var MobileButton = /*#__PURE__*/styled.button(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
10385
+ var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
10146
10386
  var isActive = _ref.isActive;
10147
10387
  return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
10148
10388
  }, Colors.MidGrey);
10149
- var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
10389
+ var MobileMenuList = /*#__PURE__*/styled.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) {
10150
10390
  var isOpen = _ref2.isOpen;
10151
10391
  return isOpen ? 'block' : 'none';
10152
10392
  }, Colors.White, Colors.DarkGrey, MenuItem$1);
@@ -10302,19 +10542,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
10302
10542
  });
10303
10543
  };
10304
10544
 
10305
- var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w, _templateObject6$n;
10306
- var Container$5 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10307
- var Sections = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10308
- var Section = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10545
+ var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o;
10546
+ var Container$5 = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10547
+ var Sections = /*#__PURE__*/styled.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10548
+ var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10309
10549
  var color = _ref.color;
10310
10550
  return "var(--base-color-" + color + ")";
10311
10551
  });
10312
- var BottomLine = /*#__PURE__*/styled.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"])));
10313
- var Text = /*#__PURE__*/styled.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10552
+ var BottomLine = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
10553
+ var Text = /*#__PURE__*/styled.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10314
10554
  var color = _ref2.color;
10315
10555
  return "var(--base-color-" + color + ")";
10316
10556
  });
10317
- var LabelText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10557
+ var LabelText = /*#__PURE__*/styled.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10318
10558
  var color = _ref3.color;
10319
10559
  return "var(--base-color-" + color + ")";
10320
10560
  });
@@ -10396,19 +10636,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
10396
10636
  }, strengthLabel))));
10397
10637
  };
10398
10638
 
10399
- var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
10400
- var TableContainer = /*#__PURE__*/styled.table(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10401
- var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10402
- var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10403
- var TableHeader = /*#__PURE__*/styled.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) {
10639
+ var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
10640
+ var TableContainer = /*#__PURE__*/styled.table(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10641
+ var Container$6 = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10642
+ var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10643
+ var TableHeader = /*#__PURE__*/styled.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) {
10404
10644
  return "calc(100% / " + (props.columns - 1) + ")";
10405
10645
  }, devices.tablet, devices.mobile);
10406
- var TableCell = /*#__PURE__*/styled.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) {
10646
+ var TableCell = /*#__PURE__*/styled.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) {
10407
10647
  return "calc(100% / " + (props.columns - 1) + ")";
10408
10648
  }, devices.mobile);
10409
- var PaginationWrapper = /*#__PURE__*/styled(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);
10410
- var ScrollButtons = /*#__PURE__*/styled.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"])));
10411
- var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
10649
+ var PaginationWrapper = /*#__PURE__*/styled(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);
10650
+ var ScrollButtons = /*#__PURE__*/styled.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"])));
10651
+ var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
10412
10652
 
10413
10653
  /* eslint-disable react/no-danger */
10414
10654
  var Content = function Content(_ref) {
@@ -10611,25 +10851,25 @@ var Table = function Table(_ref) {
10611
10851
  }))));
10612
10852
  };
10613
10853
 
10614
- 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;
10615
- var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
10854
+ 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;
10855
+ var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
10616
10856
  var theme = _ref.theme;
10617
10857
  return "var(--color-" + theme + ")";
10618
10858
  }, function (_ref2) {
10619
10859
  var theme = _ref2.theme;
10620
10860
  return "var(--color-" + theme + ")";
10621
10861
  });
10622
- var SignUpFormWrapper = /*#__PURE__*/styled(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);
10623
- var SignUpTitleWrapper = /*#__PURE__*/styled('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);
10624
- var Error = /*#__PURE__*/styled.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"])));
10625
- var Form = /*#__PURE__*/styled.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
10626
- var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
10627
- var ServerError = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
10628
- var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
10629
- var ButtonWrapper$3 = /*#__PURE__*/styled.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);
10630
- var FieldsWrapper = /*#__PURE__*/styled.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);
10631
- var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
10632
- var DropdownAreaWrapper = /*#__PURE__*/styled.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"])));
10862
+ var SignUpFormWrapper = /*#__PURE__*/styled(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);
10863
+ var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--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);
10864
+ var Error = /*#__PURE__*/styled.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"])));
10865
+ var Form = /*#__PURE__*/styled.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);
10866
+ var FormFooterWrapper = /*#__PURE__*/styled.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);
10867
+ var ServerError = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
10868
+ var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
10869
+ var ButtonWrapper$3 = /*#__PURE__*/styled.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);
10870
+ var FieldsWrapper = /*#__PURE__*/styled.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);
10871
+ var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
10872
+ var DropdownAreaWrapper = /*#__PURE__*/styled.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"])));
10633
10873
  var DropdownWrapper = /*#__PURE__*/styled.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) {
10634
10874
  var _ref3$isOpen = _ref3.isOpen,
10635
10875
  isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
@@ -11036,13 +11276,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
11036
11276
  }))))));
11037
11277
  };
11038
11278
 
11039
- var _templateObject$1i, _templateObject2$$, _templateObject4$F, _templateObject5$z;
11040
- var AnchorBarContainer = /*#__PURE__*/styled(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) {
11279
+ var _templateObject$1j, _templateObject2$10, _templateObject4$G, _templateObject5$A;
11280
+ var AnchorBarContainer = /*#__PURE__*/styled(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) {
11041
11281
  var withShadow = _ref.withShadow;
11042
- return withShadow && css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11282
+ return withShadow && css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11043
11283
  }, devices.mobile);
11044
- var CloseButtonWrapper = /*#__PURE__*/styled.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);
11045
- var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
11284
+ var CloseButtonWrapper = /*#__PURE__*/styled.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);
11285
+ var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
11046
11286
 
11047
11287
  var defaultGrid = {
11048
11288
  columnStartDesktop: 2,
@@ -11100,12 +11340,12 @@ var AnchorBar = function AnchorBar(_ref) {
11100
11340
  return null;
11101
11341
  };
11102
11342
 
11103
- var _templateObject$1j, _templateObject2$10;
11104
- var FocusableTab = /*#__PURE__*/styled(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) {
11343
+ var _templateObject$1k, _templateObject2$11;
11344
+ var FocusableTab = /*#__PURE__*/styled(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) {
11105
11345
  var hide = _ref.hide;
11106
11346
  return hide && "display: none;";
11107
11347
  }, devices.mobileAndTablet);
11108
- var HiddenBlock = /*#__PURE__*/styled.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);
11348
+ var HiddenBlock = /*#__PURE__*/styled.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);
11109
11349
 
11110
11350
  /**
11111
11351
  * An accessible component which allows Assistive Technology users to move the focus
@@ -11197,8 +11437,8 @@ var SkipToMain = function SkipToMain(_ref) {
11197
11437
  }));
11198
11438
  };
11199
11439
 
11200
- var _templateObject$1k;
11201
- var TextContainer$1 = /*#__PURE__*/styled(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);
11440
+ var _templateObject$1l;
11441
+ var TextContainer$1 = /*#__PURE__*/styled(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);
11202
11442
 
11203
11443
  var addTypographyClasses = function addTypographyClasses(html) {
11204
11444
  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'] + "\">");
@@ -11258,27 +11498,27 @@ var BodyContent = function BodyContent(_ref2) {
11258
11498
  }, gridItemOrContent);
11259
11499
  };
11260
11500
 
11261
- var _templateObject$1l, _templateObject2$11, _templateObject3$O, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
11501
+ var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
11262
11502
  var color = 'primary-black';
11263
11503
  var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
11264
11504
  borderColor: color,
11265
11505
  hoveredColor: color,
11266
11506
  pressedColor: color,
11267
11507
  textColor: color
11268
- })(_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);
11269
- var Container$7 = /*#__PURE__*/styled.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);
11270
- var Description = /*#__PURE__*/styled(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);
11508
+ })(_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);
11509
+ var Container$7 = /*#__PURE__*/styled.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);
11510
+ var Description = /*#__PURE__*/styled(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);
11271
11511
  var Heading = /*#__PURE__*/styled(HarmonicHeader).attrs({
11272
11512
  serif: true,
11273
11513
  size: 'medium'
11274
- })(_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);
11514
+ })(_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);
11275
11515
  var Intro = /*#__PURE__*/styled(HarmonicSubtitle).attrs({
11276
11516
  size: 'large'
11277
- })(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
11278
- var SignInLink = /*#__PURE__*/styled.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"])));
11517
+ })(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
11518
+ var SignInLink = /*#__PURE__*/styled.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"])));
11279
11519
  var SignInPrompt = /*#__PURE__*/styled(BodyCopyHarmonic).attrs({
11280
11520
  size: 'large'
11281
- })(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11521
+ })(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11282
11522
 
11283
11523
  var Paywall = function Paywall(_ref) {
11284
11524
  var className = _ref.className,
@@ -11471,14 +11711,14 @@ var Navigation = function Navigation(_ref) {
11471
11711
  })))))));
11472
11712
  };
11473
11713
 
11474
- var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
11475
- var FooterSection = /*#__PURE__*/styled(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);
11476
- var PolicyLinksSection = /*#__PURE__*/styled(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);
11477
- var SocialAndNewsletterSection = /*#__PURE__*/styled(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);
11478
- var SectionWrapper = /*#__PURE__*/styled.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);
11479
- var LogoAndDescriptionSection = /*#__PURE__*/styled(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);
11480
- var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
11481
- var TextLinkWrapper$3 = /*#__PURE__*/styled(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"])));
11714
+ var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject6$s, _templateObject7$m;
11715
+ var FooterSection = /*#__PURE__*/styled(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);
11716
+ var PolicyLinksSection = /*#__PURE__*/styled(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);
11717
+ var SocialAndNewsletterSection = /*#__PURE__*/styled(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);
11718
+ var SectionWrapper = /*#__PURE__*/styled.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);
11719
+ var LogoAndDescriptionSection = /*#__PURE__*/styled(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);
11720
+ var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
11721
+ var TextLinkWrapper$3 = /*#__PURE__*/styled(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"])));
11482
11722
 
11483
11723
  var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
11484
11724
  var Footer = function Footer(_ref) {
@@ -11536,18 +11776,18 @@ var Footer = function Footer(_ref) {
11536
11776
  }, additionalInfo))));
11537
11777
  };
11538
11778
 
11539
- var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
11779
+ var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
11540
11780
  var LIST_ITEM_GAP = 32;
11541
- var AnchorTabbarWrapper = /*#__PURE__*/styled.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) {
11781
+ var AnchorTabbarWrapper = /*#__PURE__*/styled.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) {
11542
11782
  var bottomBorder = _ref.bottomBorder;
11543
11783
  return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
11544
11784
  }, zIndexes.anchor, function (_ref2) {
11545
11785
  var withShadow = _ref2.withShadow;
11546
- return withShadow && css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11786
+ return withShadow && css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11547
11787
  });
11548
- var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
11549
- var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
11550
- var TabsList = /*#__PURE__*/styled.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) {
11788
+ var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
11789
+ var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
11790
+ var TabsList = /*#__PURE__*/styled.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) {
11551
11791
  var tabsOverflow = _ref3.tabsOverflow;
11552
11792
  return tabsOverflow ? 'calc(100% - 74px)' : '100%';
11553
11793
  }, LIST_ITEM_GAP, function (_ref4) {
@@ -11558,11 +11798,11 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject5$C || (_templateObject5$C
11558
11798
  hasTwoArrows = _ref5.hasTwoArrows;
11559
11799
  return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
11560
11800
  });
11561
- var ArrowsContainer = /*#__PURE__*/styled.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) {
11801
+ var ArrowsContainer = /*#__PURE__*/styled.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) {
11562
11802
  var withShadow = _ref7.withShadow;
11563
- return withShadow && css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11803
+ return withShadow && css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11564
11804
  });
11565
- var ArrowWrapper = /*#__PURE__*/styled.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) {
11805
+ var ArrowWrapper = /*#__PURE__*/styled.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) {
11566
11806
  var disabled = _ref8.disabled;
11567
11807
  return disabled ? 'not-allowed' : 'pointer';
11568
11808
  }, function (_ref9) {
@@ -11573,7 +11813,7 @@ var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$8 || (_templateObjec
11573
11813
  return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
11574
11814
  });
11575
11815
 
11576
- var _excluded$q = ["id", "text"];
11816
+ var _excluded$r = ["id", "text"];
11577
11817
  var AnchorTabBar = function AnchorTabBar(_ref) {
11578
11818
  var tabs = _ref.tabs,
11579
11819
  onTabClick = _ref.onTabClick,
@@ -11784,7 +12024,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
11784
12024
  }, tabs.map(function (_ref4) {
11785
12025
  var id = _ref4.id,
11786
12026
  text = _ref4.text,
11787
- rest = _objectWithoutPropertiesLoose(_ref4, _excluded$q);
12027
+ rest = _objectWithoutPropertiesLoose(_ref4, _excluded$r);
11788
12028
  return /*#__PURE__*/React__default.createElement("li", {
11789
12029
  key: id
11790
12030
  }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
@@ -11817,20 +12057,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
11817
12057
  })))) : null))));
11818
12058
  };
11819
12059
 
11820
- var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
11821
- var TitleCTAGridWrapper = /*#__PURE__*/styled.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) {
12060
+ var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
12061
+ var TitleCTAGridWrapper = /*#__PURE__*/styled.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) {
11822
12062
  var sticky = _ref.sticky;
11823
12063
  return sticky ? 'sticky' : 'initial';
11824
12064
  }, zIndexes.anchor);
11825
- var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
11826
- var TitleCTAGridItem = /*#__PURE__*/styled.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) {
12065
+ var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
12066
+ var TitleCTAGridItem = /*#__PURE__*/styled.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) {
11827
12067
  var title = _ref2.title;
11828
12068
  return title ? 'row' : 'row-reverse';
11829
12069
  }, devices.tablet, devices.mobile);
11830
- var AnchorTitle = /*#__PURE__*/styled.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);
11831
- var ButtonsDesktopWrapper = /*#__PURE__*/styled.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);
11832
- var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
11833
- var PrimaryButtonReverse = /*#__PURE__*/styled(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) {
12070
+ var AnchorTitle = /*#__PURE__*/styled.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);
12071
+ var ButtonsDesktopWrapper = /*#__PURE__*/styled.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);
12072
+ var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
12073
+ var PrimaryButtonReverse = /*#__PURE__*/styled(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) {
11834
12074
  var theme = _ref3.theme;
11835
12075
  return theme.colors.primaryButtonReverseBg;
11836
12076
  }, function (_ref4) {
@@ -11843,10 +12083,10 @@ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$f
11843
12083
  var theme = _ref6.theme;
11844
12084
  return theme.colors.primaryButtonReverse;
11845
12085
  });
11846
- var MessageWrapper$1 = /*#__PURE__*/styled.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);
11847
- var MessageWrapperMobile = /*#__PURE__*/styled.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);
12086
+ var MessageWrapper$1 = /*#__PURE__*/styled.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);
12087
+ var MessageWrapperMobile = /*#__PURE__*/styled.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);
11848
12088
 
11849
- var _excluded$r = ["text"],
12089
+ var _excluded$s = ["text"],
11850
12090
  _excluded2$4 = ["text"];
11851
12091
  var TitleWithCTA = function TitleWithCTA(_ref) {
11852
12092
  var title = _ref.title,
@@ -11856,7 +12096,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
11856
12096
  message = _ref.message;
11857
12097
  var _ref2 = (links == null ? void 0 : links[0]) || {},
11858
12098
  primaryButtonText = _ref2.text,
11859
- primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
12099
+ primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
11860
12100
  var _ref3 = (links == null ? void 0 : links[1]) || {},
11861
12101
  secondaryButtonText = _ref3.text,
11862
12102
  secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
@@ -11877,14 +12117,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
11877
12117
  }, message))));
11878
12118
  };
11879
12119
 
11880
- var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K;
11881
- var UpsellBorderBox = /*#__PURE__*/styled.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);
11882
- var TitleContent = /*#__PURE__*/styled(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);
11883
- var TextContainer$2 = /*#__PURE__*/styled.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);
11884
- var TextContent = /*#__PURE__*/styled(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);
12120
+ var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L;
12121
+ var UpsellBorderBox = /*#__PURE__*/styled.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);
12122
+ var TitleContent = /*#__PURE__*/styled(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);
12123
+ var TextContainer$2 = /*#__PURE__*/styled.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);
12124
+ var TextContent = /*#__PURE__*/styled(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);
11885
12125
 
11886
- var _templateObject$1q;
11887
- var Wrapper$a = /*#__PURE__*/styled.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);
12126
+ var _templateObject$1r;
12127
+ var Wrapper$a = /*#__PURE__*/styled.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);
11888
12128
 
11889
12129
  var UpsellCards = function UpsellCards(_ref) {
11890
12130
  var upsellCards = _ref.upsellCards;
@@ -11946,9 +12186,9 @@ var UpsellSection = function UpsellSection(_ref) {
11946
12186
  })))));
11947
12187
  };
11948
12188
 
11949
- var _templateObject$1r, _templateObject2$16;
11950
- var StickyBarWrapper = /*#__PURE__*/styled.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);
11951
- var StickyBarGrid = /*#__PURE__*/styled(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) {
12189
+ var _templateObject$1s, _templateObject2$17;
12190
+ var StickyBarWrapper = /*#__PURE__*/styled.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);
12191
+ var StickyBarGrid = /*#__PURE__*/styled(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) {
11952
12192
  var bottomBorder = _ref.bottomBorder;
11953
12193
  return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
11954
12194
  }, devices.mobileAndTablet, devices.mobile);
@@ -11979,13 +12219,13 @@ var StickyBar = function StickyBar(_ref) {
11979
12219
  }, children)));
11980
12220
  };
11981
12221
 
11982
- var _templateObject$1s, _templateObject2$17, _templateObject3$T, _templateObject4$L;
11983
- var InnerModal = /*#__PURE__*/styled.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);
11984
- var CloseButton = /*#__PURE__*/styled.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);
11985
- var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11986
- var Overlay = /*#__PURE__*/styled(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"])));
12222
+ var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M;
12223
+ var InnerModal = /*#__PURE__*/styled.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);
12224
+ var CloseButton = /*#__PURE__*/styled.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);
12225
+ var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
12226
+ var Overlay = /*#__PURE__*/styled(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"])));
11987
12227
 
11988
- var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
12228
+ var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
11989
12229
  var MAX_Z_INDEX = 9999999999;
11990
12230
  if (Modal.defaultStyles.content) {
11991
12231
  Modal.defaultStyles.content.position = 'static';
@@ -12059,7 +12299,7 @@ var ModalWindow = function ModalWindow(_ref) {
12059
12299
  setIsOpen = _ref.setIsOpen,
12060
12300
  children = _ref.children,
12061
12301
  appElementId = _ref.appElementId,
12062
- modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
12302
+ modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
12063
12303
  var isMobile = useMobile();
12064
12304
  var customStyles = {
12065
12305
  overlay: {
@@ -12187,29 +12427,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
12187
12427
  return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
12188
12428
  };
12189
12429
 
12190
- var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
12191
- var ImageCarouselWrapper = /*#__PURE__*/styled.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) {
12430
+ var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
12431
+ var ImageCarouselWrapper = /*#__PURE__*/styled.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) {
12192
12432
  var imagesHeightDesktop = _ref.imagesHeightDesktop;
12193
12433
  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 }";
12194
12434
  }, devices.mobile, function (_ref2) {
12195
12435
  var imagesHeightDevice = _ref2.imagesHeightDevice;
12196
12436
  return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
12197
12437
  });
12198
- var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
12438
+ var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
12199
12439
  var type = _ref3.type,
12200
12440
  isActive = _ref3.isActive;
12201
12441
  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 ";
12202
12442
  });
12203
- var TitleButtonsGrid = /*#__PURE__*/styled(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);
12204
- var CarouselInfoWrapper = /*#__PURE__*/styled.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"])));
12205
- var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
12443
+ var TitleButtonsGrid = /*#__PURE__*/styled(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);
12444
+ var CarouselInfoWrapper = /*#__PURE__*/styled.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"])));
12445
+ var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
12206
12446
  var isDescriptionPresent = _ref4.isDescriptionPresent;
12207
12447
  return isDescriptionPresent && 'margin: 20px 0';
12208
12448
  });
12209
- var TitleText$1 = /*#__PURE__*/styled(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"])));
12210
- var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
12211
- var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
12212
- var SwipeGridWrapper = /*#__PURE__*/styled(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) {
12449
+ var TitleText$1 = /*#__PURE__*/styled(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"])));
12450
+ var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
12451
+ var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
12452
+ var SwipeGridWrapper = /*#__PURE__*/styled(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) {
12213
12453
  var active = _ref5.active;
12214
12454
  return active ? 'grid-column: 1 / span 16' : '';
12215
12455
  }, devices.tablet, function (_ref6) {
@@ -12452,19 +12692,19 @@ var Carousel = function Carousel(_ref) {
12452
12692
  }, children))));
12453
12693
  };
12454
12694
 
12455
- 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;
12456
- var HighlightsGrid$1 = /*#__PURE__*/styled(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);
12457
- var CarouselTitleWrapper = /*#__PURE__*/styled.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);
12458
- var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
12459
- var InfoWrapper$2 = /*#__PURE__*/styled.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);
12460
- var InfoLogoWrapper = /*#__PURE__*/styled.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);
12461
- var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
12462
- var InfoTextWrapper = /*#__PURE__*/styled.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);
12463
- var InfoLinkWrapper = /*#__PURE__*/styled.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);
12464
- var CarouselWrapper = /*#__PURE__*/styled.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);
12465
- var RotatorButtonsWrapper$1 = /*#__PURE__*/styled.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);
12466
- var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.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);
12467
- var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
12695
+ 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;
12696
+ var HighlightsGrid$1 = /*#__PURE__*/styled(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);
12697
+ var CarouselTitleWrapper = /*#__PURE__*/styled.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);
12698
+ var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
12699
+ var InfoWrapper$2 = /*#__PURE__*/styled.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);
12700
+ var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
12701
+ var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
12702
+ var InfoTextWrapper = /*#__PURE__*/styled.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);
12703
+ var InfoLinkWrapper = /*#__PURE__*/styled.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);
12704
+ var CarouselWrapper = /*#__PURE__*/styled.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);
12705
+ var RotatorButtonsWrapper$2 = /*#__PURE__*/styled.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);
12706
+ var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.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);
12707
+ var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
12468
12708
  var FirstButtonComponentWrapper = /*#__PURE__*/styled.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);
12469
12709
  var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
12470
12710
  var AdditionalInfoWrapper = /*#__PURE__*/styled.div(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n"])), devices.mobileAndTablet);
@@ -12475,7 +12715,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled.div(_templateObject15$1 || (_
12475
12715
  }, devices.mobile);
12476
12716
  var ProgressContainer$1 = /*#__PURE__*/styled.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);
12477
12717
 
12478
- var _excluded$t = ["text"],
12718
+ var _excluded$u = ["text"],
12479
12719
  _excluded2$5 = ["text"];
12480
12720
  var _buttonTypeToButton$2;
12481
12721
  var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
@@ -12486,7 +12726,7 @@ var Buttons = function Buttons(_ref) {
12486
12726
  var _ref2 = firstButton || {},
12487
12727
  _ref2$text = _ref2.text,
12488
12728
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
12489
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
12729
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$u);
12490
12730
  var secondButton = links == null ? void 0 : links[1];
12491
12731
  var _ref3 = secondButton || {},
12492
12732
  _ref3$text = _ref3.text,
@@ -12701,7 +12941,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12701
12941
  auxiliaryCTA: auxiliaryCTA
12702
12942
  })), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
12703
12943
  "data-testid": "carousel-wrapper"
12704
- }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
12944
+ }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$2, {
12705
12945
  "data-testid": "rotator-buttons"
12706
12946
  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12707
12947
  onClickNext: onNext,
@@ -12718,11 +12958,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12718
12958
  })));
12719
12959
  };
12720
12960
 
12721
- var _excluded$u = ["logo", "slides"];
12961
+ var _excluded$v = ["logo", "slides"];
12722
12962
  var HighlightsCinema = function HighlightsCinema(_ref) {
12723
12963
  var logo = _ref.logo,
12724
12964
  slides = _ref.slides,
12725
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
12965
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12726
12966
  var slidesWithLinks = slides.map(function (slide) {
12727
12967
  var links = processSlideLinks(slide.links);
12728
12968
  return _extends({}, slide, {
@@ -12739,10 +12979,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
12739
12979
  })));
12740
12980
  };
12741
12981
 
12742
- var _excluded$v = ["slides"];
12982
+ var _excluded$w = ["slides"];
12743
12983
  var HighlightsCore = function HighlightsCore(_ref) {
12744
12984
  var slides = _ref.slides,
12745
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12985
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
12746
12986
  var slidesWithLinks = slides.map(function (slide) {
12747
12987
  var links = processSlideLinks(slide.links);
12748
12988
  return _extends({}, slide, {
@@ -12756,11 +12996,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
12756
12996
  })));
12757
12997
  };
12758
12998
 
12759
- var _excluded$w = ["logo", "slides"];
12999
+ var _excluded$x = ["logo", "slides"];
12760
13000
  var HighlightsStream = function HighlightsStream(_ref) {
12761
13001
  var logo = _ref.logo,
12762
13002
  slides = _ref.slides,
12763
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
13003
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
12764
13004
  var slidesWithLinks = slides.map(function (slide) {
12765
13005
  var links = processSlideLinks(slide.links);
12766
13006
  return _extends({}, slide, {
@@ -12777,9 +13017,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
12777
13017
  })));
12778
13018
  };
12779
13019
 
12780
- var _templateObject$1v, _templateObject3$W;
12781
- var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
12782
- var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
13020
+ var _templateObject$1w, _templateObject3$X;
13021
+ var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
13022
+ var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
12783
13023
 
12784
13024
  var MinimalCarousel = function MinimalCarousel(_ref) {
12785
13025
  var children = _ref.children;
@@ -13374,8 +13614,8 @@ var Theme = function Theme(_ref) {
13374
13614
  }, children);
13375
13615
  };
13376
13616
 
13377
- var _templateObject$1w;
13378
- var GlobalStyles = /*#__PURE__*/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) {
13617
+ var _templateObject$1x;
13618
+ var GlobalStyles = /*#__PURE__*/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) {
13379
13619
  var theme = _ref.theme;
13380
13620
  return theme.colors.primary;
13381
13621
  }, function (_ref2) {
@@ -14322,10 +14562,10 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1w || (_templa
14322
14562
  return theme.footer.tablet.paddingBottom;
14323
14563
  }, devices.desktop, devices.largeDesktop);
14324
14564
 
14325
- var _templateObject$1x, _templateObject2$1a, _templateObject3$X;
14326
- var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14327
- var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14328
- var AttributionBlock = /*#__PURE__*/styled(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);
14565
+ var _templateObject$1y, _templateObject2$1b, _templateObject3$Y;
14566
+ var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14567
+ var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14568
+ var AttributionBlock = /*#__PURE__*/styled(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);
14329
14569
 
14330
14570
  /* eslint-disable react/no-danger */
14331
14571
  var Quote = function Quote(_ref) {
@@ -14355,5 +14595,5 @@ var Quote = function Quote(_ref) {
14355
14595
  }, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
14356
14596
  };
14357
14597
 
14358
- export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
14598
+ export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
14359
14599
  //# sourceMappingURL=harmonic.esm.js.map