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