@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.
- package/CHANGELOG.md +3 -0
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +2 -0
- package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/harmonic.cjs.development.js +1360 -1119
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +1360 -1120
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/package.json +2 -1
package/dist/harmonic.esm.js
CHANGED
|
@@ -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
|
|
6491
|
-
var
|
|
6492
|
-
var
|
|
6493
|
-
var
|
|
6494
|
-
var
|
|
6495
|
-
var
|
|
6496
|
-
var
|
|
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
|
|
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
|
|
6548
|
-
var
|
|
6549
|
-
var
|
|
6550
|
-
|
|
6551
|
-
|
|
6552
|
-
|
|
6553
|
-
|
|
6554
|
-
|
|
6555
|
-
|
|
6556
|
-
|
|
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
|
-
|
|
6562
|
-
|
|
6563
|
-
|
|
6564
|
-
|
|
6565
|
-
|
|
6566
|
-
|
|
6567
|
-
|
|
6568
|
-
|
|
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
|
|
6571
|
-
|
|
6572
|
-
|
|
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
|
|
6576
|
-
|
|
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
|
|
6641
|
-
var
|
|
6642
|
-
var
|
|
6643
|
-
|
|
6644
|
-
|
|
6645
|
-
|
|
6646
|
-
|
|
6647
|
-
|
|
6648
|
-
}
|
|
6649
|
-
|
|
6650
|
-
|
|
6651
|
-
|
|
6652
|
-
|
|
6653
|
-
var
|
|
6654
|
-
var
|
|
6655
|
-
|
|
6656
|
-
|
|
6657
|
-
|
|
6658
|
-
|
|
6659
|
-
|
|
6660
|
-
|
|
6661
|
-
|
|
6662
|
-
|
|
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
|
|
6694
|
-
var
|
|
6695
|
-
var
|
|
6696
|
-
var
|
|
6697
|
-
|
|
6698
|
-
|
|
6699
|
-
|
|
6700
|
-
|
|
6701
|
-
|
|
6702
|
-
|
|
6703
|
-
|
|
6704
|
-
|
|
6705
|
-
|
|
6706
|
-
|
|
6707
|
-
|
|
6708
|
-
|
|
6709
|
-
|
|
6710
|
-
|
|
6711
|
-
|
|
6712
|
-
|
|
6713
|
-
|
|
6714
|
-
|
|
6715
|
-
|
|
6716
|
-
|
|
6717
|
-
|
|
6718
|
-
|
|
6719
|
-
|
|
6720
|
-
|
|
6721
|
-
|
|
6722
|
-
|
|
6723
|
-
|
|
6724
|
-
|
|
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$
|
|
6761
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
6762
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
6763
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
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$
|
|
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$
|
|
6998
|
-
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$
|
|
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$
|
|
7003
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
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$
|
|
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$
|
|
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$
|
|
7016
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
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$
|
|
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$
|
|
7094
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7095
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7096
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
7097
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7098
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7099
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
7100
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$
|
|
7101
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
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$
|
|
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$
|
|
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$
|
|
7165
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
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$
|
|
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$
|
|
7177
|
-
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7178
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
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$
|
|
7209
|
-
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$
|
|
7210
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7211
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7212
|
-
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7213
|
-
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$
|
|
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$
|
|
7221
|
-
var AdditionalContentWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
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$
|
|
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$
|
|
7230
|
-
var TitleWrapper$3 = /*#__PURE__*/styled.div(_templateObject0$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
7447
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$
|
|
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$
|
|
7471
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
7472
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
7473
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7474
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7475
|
-
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$
|
|
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$
|
|
7492
|
-
var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
7493
|
-
var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
7494
|
-
var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject0$
|
|
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
|
|
7789
|
-
|
|
7790
|
-
var
|
|
7791
|
-
var
|
|
7792
|
-
|
|
7793
|
-
|
|
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
|
|
7796
|
-
|
|
7797
|
-
|
|
7798
|
-
|
|
7799
|
-
|
|
7800
|
-
|
|
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
|
-
|
|
7803
|
-
|
|
7804
|
-
|
|
7805
|
-
|
|
7806
|
-
|
|
7807
|
-
|
|
7808
|
-
|
|
7809
|
-
|
|
7810
|
-
|
|
7811
|
-
|
|
7812
|
-
|
|
7813
|
-
|
|
7814
|
-
|
|
7815
|
-
var
|
|
7816
|
-
|
|
7817
|
-
|
|
7818
|
-
|
|
7819
|
-
|
|
7820
|
-
|
|
7821
|
-
|
|
7822
|
-
|
|
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
|
-
|
|
7998
|
-
|
|
7999
|
-
|
|
8000
|
-
|
|
8001
|
-
|
|
8002
|
-
|
|
8003
|
-
|
|
8004
|
-
|
|
8005
|
-
|
|
8006
|
-
|
|
8007
|
-
|
|
8008
|
-
|
|
8009
|
-
|
|
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
|
-
|
|
8014
|
-
|
|
8015
|
-
|
|
8016
|
-
|
|
8017
|
-
|
|
8018
|
-
|
|
8019
|
-
|
|
8020
|
-
|
|
8021
|
-
|
|
8022
|
-
|
|
8023
|
-
|
|
8024
|
-
|
|
8025
|
-
|
|
8026
|
-
|
|
8027
|
-
|
|
8028
|
-
|
|
8029
|
-
|
|
8030
|
-
|
|
8031
|
-
|
|
8032
|
-
|
|
8033
|
-
|
|
8034
|
-
|
|
8035
|
-
|
|
8036
|
-
|
|
8037
|
-
|
|
8038
|
-
var
|
|
8039
|
-
|
|
8040
|
-
|
|
8041
|
-
|
|
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
|
|
8073
|
-
|
|
8074
|
-
|
|
8075
|
-
|
|
8324
|
+
var poster = {
|
|
8325
|
+
desktop: bgUrlDesktop,
|
|
8326
|
+
mobile: bgUrlDevice,
|
|
8327
|
+
alt: bgImageAltText
|
|
8076
8328
|
};
|
|
8077
|
-
|
|
8078
|
-
|
|
8079
|
-
|
|
8080
|
-
|
|
8081
|
-
|
|
8082
|
-
|
|
8083
|
-
|
|
8084
|
-
|
|
8085
|
-
|
|
8086
|
-
|
|
8087
|
-
},
|
|
8088
|
-
|
|
8089
|
-
|
|
8090
|
-
|
|
8091
|
-
|
|
8092
|
-
},
|
|
8093
|
-
|
|
8094
|
-
|
|
8095
|
-
|
|
8096
|
-
|
|
8097
|
-
|
|
8098
|
-
|
|
8099
|
-
|
|
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$
|
|
8114
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8115
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8116
|
-
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8117
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
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$
|
|
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$
|
|
8129
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
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$
|
|
8193
|
-
var linkButtonStyles = /*#__PURE__*/css(_templateObject$
|
|
8194
|
-
var PageNav = /*#__PURE__*/styled.a(_templateObject2$
|
|
8195
|
-
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
8196
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$
|
|
8197
|
-
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$
|
|
8198
|
-
var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$
|
|
8199
|
-
var TextLinkPagination = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject8$
|
|
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$
|
|
8352
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
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
|
|
8360
|
-
var
|
|
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
|
|
8400
|
-
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8401
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
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
|
|
8440
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8441
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
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$
|
|
8446
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
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$
|
|
8574
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
8641
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$
|
|
8642
|
-
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
8643
|
-
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$
|
|
8644
|
-
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
8645
|
-
var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
8646
|
-
var asCardOverrides = /*#__PURE__*/css(_templateObject1$
|
|
8647
|
-
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject10$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
8883
|
-
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$
|
|
8884
|
-
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$
|
|
8885
|
-
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$
|
|
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$
|
|
8908
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
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$
|
|
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$
|
|
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$
|
|
9091
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
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$
|
|
9147
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9148
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
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$
|
|
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$
|
|
9234
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9235
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9236
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
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$
|
|
9293
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
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$
|
|
9336
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
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$
|
|
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$
|
|
9351
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$
|
|
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$
|
|
9360
|
-
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$
|
|
9361
|
-
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
9362
|
-
var Options = /*#__PURE__*/styled.div(_templateObject8$
|
|
9363
|
-
var Option = /*#__PURE__*/styled.li(_templateObject9$
|
|
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$
|
|
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$
|
|
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$
|
|
9717
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
9718
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
9855
|
-
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$
|
|
9856
|
-
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$
|
|
9857
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
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$
|
|
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$
|
|
9869
|
-
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$
|
|
9870
|
-
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$
|
|
9871
|
-
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$
|
|
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$
|
|
9961
|
-
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$
|
|
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$
|
|
9972
|
-
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$
|
|
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$
|
|
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$
|
|
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$
|
|
10006
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10007
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10008
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
10009
|
-
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10010
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10011
|
-
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$
|
|
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$
|
|
10050
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10051
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10052
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
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$
|
|
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$
|
|
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$
|
|
10142
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
10143
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
10144
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
10145
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
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$
|
|
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$
|
|
10306
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10307
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
10308
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
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$
|
|
10313
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$
|
|
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$
|
|
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$
|
|
10400
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
10401
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10402
|
-
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10403
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
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$
|
|
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$
|
|
10410
|
-
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$
|
|
10411
|
-
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$
|
|
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$
|
|
10615
|
-
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$
|
|
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
|
|
10623
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
10624
|
-
var Error = /*#__PURE__*/styled.div(_templateObject4$
|
|
10625
|
-
var Form = /*#__PURE__*/styled.form(_templateObject5$
|
|
10626
|
-
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
10627
|
-
var ServerError = /*#__PURE__*/styled.div(_templateObject7$
|
|
10628
|
-
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$
|
|
10629
|
-
var ButtonWrapper$3 = /*#__PURE__*/styled.div(_templateObject9$
|
|
10630
|
-
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
10631
|
-
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$
|
|
10632
|
-
var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject10$
|
|
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$
|
|
11040
|
-
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
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
|
|
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$
|
|
11045
|
-
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$
|
|
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$
|
|
11104
|
-
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$
|
|
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$
|
|
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$
|
|
11201
|
-
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
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$
|
|
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$
|
|
11269
|
-
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11270
|
-
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$
|
|
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$
|
|
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$
|
|
11278
|
-
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$
|
|
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$
|
|
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$
|
|
11475
|
-
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11476
|
-
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
11477
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$
|
|
11478
|
-
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11479
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
11480
|
-
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$
|
|
11481
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
11549
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11550
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
11821
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
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$
|
|
11826
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
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$
|
|
11831
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
11832
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
11833
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$
|
|
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$
|
|
11847
|
-
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject0$
|
|
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$
|
|
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$
|
|
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$
|
|
11881
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
11882
|
-
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$
|
|
11883
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
11884
|
-
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$
|
|
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$
|
|
11887
|
-
var Wrapper$a = /*#__PURE__*/styled.div(_templateObject$
|
|
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$
|
|
11950
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
11951
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
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$
|
|
11983
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
11984
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
11985
|
-
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
11986
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
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$
|
|
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$
|
|
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$
|
|
12191
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
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$
|
|
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$
|
|
12204
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12205
|
-
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
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$
|
|
12210
|
-
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12211
|
-
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$
|
|
12212
|
-
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$
|
|
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$
|
|
12456
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
12457
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12458
|
-
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
12459
|
-
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
12460
|
-
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
12461
|
-
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
12462
|
-
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12463
|
-
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
12464
|
-
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
12465
|
-
var RotatorButtonsWrapper$
|
|
12466
|
-
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$
|
|
12467
|
-
var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject10$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
12982
|
+
var _excluded$w = ["slides"];
|
|
12743
12983
|
var HighlightsCore = function HighlightsCore(_ref) {
|
|
12744
12984
|
var slides = _ref.slides,
|
|
12745
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
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$
|
|
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$
|
|
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$
|
|
12781
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
12782
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
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$
|
|
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$
|
|
14326
|
-
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$
|
|
14327
|
-
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$
|
|
14328
|
-
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$
|
|
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
|