@royaloperahouse/harmonic 0.18.3-a → 0.18.3-experiment
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/README.md +1 -2
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +0 -2
- package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +1 -2
- package/dist/harmonic.cjs.development.css +0 -319
- package/dist/harmonic.cjs.development.js +1113 -1361
- 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 +1123 -1373
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
- package/dist/types/types.d.ts +1 -9
- package/package.json +4 -4
|
@@ -8,7 +8,7 @@ var React = require('react');
|
|
|
8
8
|
var React__default = _interopDefault(React);
|
|
9
9
|
var styled = require('styled-components');
|
|
10
10
|
var styled__default = _interopDefault(styled);
|
|
11
|
-
var
|
|
11
|
+
var moment = _interopDefault(require('moment'));
|
|
12
12
|
var server = require('react-dom/server');
|
|
13
13
|
var Select$1 = require('react-select');
|
|
14
14
|
var Select$1__default = _interopDefault(Select$1);
|
|
@@ -3824,7 +3824,6 @@ var Tab = function Tab(_ref) {
|
|
|
3824
3824
|
className = _ref.className,
|
|
3825
3825
|
role = _ref.role,
|
|
3826
3826
|
ariaLabel = _ref.ariaLabel,
|
|
3827
|
-
tabLinkId = _ref.tabLinkId,
|
|
3828
3827
|
color = _ref.color,
|
|
3829
3828
|
dataTestId = _ref.dataTestId,
|
|
3830
3829
|
isOpen = _ref.isOpen;
|
|
@@ -3859,9 +3858,8 @@ var Tab = function Tab(_ref) {
|
|
|
3859
3858
|
className: className,
|
|
3860
3859
|
"data-testid": dataTestId
|
|
3861
3860
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
3862
|
-
id: tabLinkId,
|
|
3863
|
-
trimText: trimText,
|
|
3864
3861
|
color: color,
|
|
3862
|
+
trimText: trimText,
|
|
3865
3863
|
withTextInMobile: withTextInMobile,
|
|
3866
3864
|
"aria-hidden": "true"
|
|
3867
3865
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -4546,31 +4544,6 @@ var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 ||
|
|
|
4546
4544
|
var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4547
4545
|
var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4548
4546
|
|
|
4549
|
-
var pad = function pad(num) {
|
|
4550
|
-
return String(num || 0).padStart(2, '0');
|
|
4551
|
-
};
|
|
4552
|
-
var renderTimerValue = function renderTimerValue(value, label, separator) {
|
|
4553
|
-
if (separator === void 0) {
|
|
4554
|
-
separator = true;
|
|
4555
|
-
}
|
|
4556
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
|
|
4557
|
-
className: "harmonic-timer-value"
|
|
4558
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4559
|
-
color: "inherit",
|
|
4560
|
-
hierarchy: "h3",
|
|
4561
|
-
size: "medium",
|
|
4562
|
-
"data-testid": label
|
|
4563
|
-
}, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
|
|
4564
|
-
className: "harmonic-timer-label"
|
|
4565
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4566
|
-
color: "inherit",
|
|
4567
|
-
size: "large"
|
|
4568
|
-
}, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4569
|
-
color: "inherit",
|
|
4570
|
-
hierarchy: "h3",
|
|
4571
|
-
size: "medium"
|
|
4572
|
-
}, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
|
|
4573
|
-
};
|
|
4574
4547
|
var Timer = function Timer(_ref) {
|
|
4575
4548
|
var endDate = _ref.endDate,
|
|
4576
4549
|
title = _ref.title,
|
|
@@ -4579,22 +4552,43 @@ var Timer = function Timer(_ref) {
|
|
|
4579
4552
|
bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
|
|
4580
4553
|
_ref$color = _ref.color,
|
|
4581
4554
|
color = _ref$color === void 0 ? ThemeColor['base-black'] : _ref$color;
|
|
4582
|
-
var
|
|
4583
|
-
seconds =
|
|
4584
|
-
setSeconds =
|
|
4585
|
-
var
|
|
4586
|
-
minutes =
|
|
4587
|
-
setMinutes =
|
|
4588
|
-
var
|
|
4589
|
-
hours =
|
|
4590
|
-
setHours =
|
|
4591
|
-
var
|
|
4592
|
-
days =
|
|
4593
|
-
setDays =
|
|
4594
|
-
var
|
|
4595
|
-
isEndDateReached =
|
|
4596
|
-
setIsEndDateReached =
|
|
4597
|
-
|
|
4555
|
+
var _React$useState = React__default.useState('00'),
|
|
4556
|
+
seconds = _React$useState[0],
|
|
4557
|
+
setSeconds = _React$useState[1];
|
|
4558
|
+
var _React$useState2 = React__default.useState('00'),
|
|
4559
|
+
minutes = _React$useState2[0],
|
|
4560
|
+
setMinutes = _React$useState2[1];
|
|
4561
|
+
var _React$useState3 = React__default.useState('00'),
|
|
4562
|
+
hours = _React$useState3[0],
|
|
4563
|
+
setHours = _React$useState3[1];
|
|
4564
|
+
var _React$useState4 = React__default.useState('00'),
|
|
4565
|
+
days = _React$useState4[0],
|
|
4566
|
+
setDays = _React$useState4[1];
|
|
4567
|
+
var _React$useState5 = React__default.useState(false),
|
|
4568
|
+
isEndDateReached = _React$useState5[0],
|
|
4569
|
+
setIsEndDateReached = _React$useState5[1];
|
|
4570
|
+
var renderTimerValue = function renderTimerValue(value, label, separator) {
|
|
4571
|
+
if (separator === void 0) {
|
|
4572
|
+
separator = true;
|
|
4573
|
+
}
|
|
4574
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
|
|
4575
|
+
className: "harmonic-timer-value"
|
|
4576
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4577
|
+
color: "inherit",
|
|
4578
|
+
hierarchy: "h3",
|
|
4579
|
+
size: "medium"
|
|
4580
|
+
}, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
|
|
4581
|
+
className: "harmonic-timer-label"
|
|
4582
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4583
|
+
color: "inherit",
|
|
4584
|
+
size: "large"
|
|
4585
|
+
}, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4586
|
+
color: "inherit",
|
|
4587
|
+
hierarchy: "h3",
|
|
4588
|
+
size: "medium"
|
|
4589
|
+
}, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
|
|
4590
|
+
};
|
|
4591
|
+
React__default.useEffect(function () {
|
|
4598
4592
|
if (isEndDateReached) return undefined;
|
|
4599
4593
|
// We use this to set values for the timer immediately
|
|
4600
4594
|
var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
|
|
@@ -4602,21 +4596,19 @@ var Timer = function Timer(_ref) {
|
|
|
4602
4596
|
return setInterval(fn, delay);
|
|
4603
4597
|
};
|
|
4604
4598
|
var updateValues = function updateValues() {
|
|
4605
|
-
var futureDate =
|
|
4606
|
-
var nowDate =
|
|
4607
|
-
var
|
|
4608
|
-
|
|
4599
|
+
var futureDate = moment(endDate);
|
|
4600
|
+
var nowDate = moment();
|
|
4601
|
+
var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
|
|
4602
|
+
var difference = moment(differenceInMilliseconds).utc();
|
|
4603
|
+
if (differenceInMilliseconds < 0) {
|
|
4609
4604
|
setIsEndDateReached(true);
|
|
4610
4605
|
if (endDateHandler) endDateHandler();
|
|
4611
4606
|
} else {
|
|
4612
|
-
var
|
|
4613
|
-
|
|
4614
|
-
|
|
4615
|
-
|
|
4616
|
-
var
|
|
4617
|
-
var hoursDiff = pad(duration.hours);
|
|
4618
|
-
var minutesDiff = pad(duration.minutes);
|
|
4619
|
-
var secondsDiff = pad(duration.seconds);
|
|
4607
|
+
var fullDaysLeft = Math.floor(futureDate.diff(nowDate, 'days', true));
|
|
4608
|
+
var daysDiff = fullDaysLeft < 10 ? "0" + fullDaysLeft : fullDaysLeft.toString();
|
|
4609
|
+
var hoursDiff = difference.format('HH');
|
|
4610
|
+
var minutesDiff = difference.format('mm');
|
|
4611
|
+
var secondsDiff = difference.format('ss');
|
|
4620
4612
|
setDays(daysDiff);
|
|
4621
4613
|
setHours(hoursDiff);
|
|
4622
4614
|
setMinutes(minutesDiff);
|
|
@@ -4628,7 +4620,7 @@ var Timer = function Timer(_ref) {
|
|
|
4628
4620
|
clearInterval(interval);
|
|
4629
4621
|
};
|
|
4630
4622
|
});
|
|
4631
|
-
var hideTimer =
|
|
4623
|
+
var hideTimer = moment(endDate).isBefore(moment());
|
|
4632
4624
|
if (hideTimer) return null;
|
|
4633
4625
|
return /*#__PURE__*/React__default.createElement(TimerWrapper, {
|
|
4634
4626
|
color: color
|
|
@@ -5346,7 +5338,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5346
5338
|
className = _ref.className,
|
|
5347
5339
|
role = _ref.role,
|
|
5348
5340
|
ariaLabel = _ref.ariaLabel,
|
|
5349
|
-
tabLinkId = _ref.tabLinkId,
|
|
5350
5341
|
trimTabText = _ref.trimTabText;
|
|
5351
5342
|
var node = React.useRef();
|
|
5352
5343
|
var _useState = React.useState(false),
|
|
@@ -5443,7 +5434,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5443
5434
|
};
|
|
5444
5435
|
var renderTab = function renderTab() {
|
|
5445
5436
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
5446
|
-
tabLinkId: tabLinkId,
|
|
5447
5437
|
trimText: trimTabText,
|
|
5448
5438
|
title: title,
|
|
5449
5439
|
titleLink: titleLink,
|
|
@@ -5523,8 +5513,7 @@ var Account = function Account(_ref) {
|
|
|
5523
5513
|
iconName: iconName,
|
|
5524
5514
|
withOptionsInMobile: false,
|
|
5525
5515
|
withIcon: "left",
|
|
5526
|
-
className: className
|
|
5527
|
-
tabLinkId: "account-link"
|
|
5516
|
+
className: className
|
|
5528
5517
|
});
|
|
5529
5518
|
};
|
|
5530
5519
|
|
|
@@ -5943,7 +5932,6 @@ var Accordion = function Accordion(_ref) {
|
|
|
5943
5932
|
var toggleAccordion = function toggleAccordion() {
|
|
5944
5933
|
if (React__default.Children.count(children) === 0) return;
|
|
5945
5934
|
if (openAccordion) {
|
|
5946
|
-
setIcon(collapsedStateIconData);
|
|
5947
5935
|
setOpenAccordion(false);
|
|
5948
5936
|
setTextHeight('0px');
|
|
5949
5937
|
setIcon(collapsedStateIconData);
|
|
@@ -6472,844 +6460,215 @@ var Cards = function Cards(_ref) {
|
|
|
6472
6460
|
}));
|
|
6473
6461
|
};
|
|
6474
6462
|
|
|
6475
|
-
var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7
|
|
6476
|
-
var
|
|
6477
|
-
var
|
|
6478
|
-
var
|
|
6479
|
-
var
|
|
6480
|
-
var
|
|
6481
|
-
var
|
|
6482
|
-
var
|
|
6483
|
-
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) {
|
|
6484
|
-
var isSelected = _ref.isSelected;
|
|
6485
|
-
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
6486
|
-
});
|
|
6487
|
-
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) {
|
|
6488
|
-
var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
|
|
6489
|
-
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6490
|
-
});
|
|
6491
|
-
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);
|
|
6492
|
-
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) {
|
|
6493
|
-
var isSelected = _ref3.isSelected;
|
|
6494
|
-
return isSelected ? 'flex' : 'none';
|
|
6495
|
-
}, function (_ref4) {
|
|
6496
|
-
var isSelected = _ref4.isSelected;
|
|
6497
|
-
return isSelected ? 'flex' : 'none';
|
|
6498
|
-
});
|
|
6499
|
-
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);
|
|
6463
|
+
var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7;
|
|
6464
|
+
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
6465
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
|
|
6466
|
+
var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
6467
|
+
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
6468
|
+
var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
6469
|
+
var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6470
|
+
var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
6500
6471
|
|
|
6501
|
-
var
|
|
6472
|
+
var ContactCard = function ContactCard(_ref) {
|
|
6473
|
+
var title = _ref.title,
|
|
6474
|
+
titleSuffix = _ref.titleSuffix,
|
|
6475
|
+
description = _ref.description,
|
|
6476
|
+
email = _ref.email,
|
|
6477
|
+
phone = _ref.phone,
|
|
6478
|
+
website = _ref.website,
|
|
6479
|
+
address = _ref.address,
|
|
6480
|
+
className = _ref.className;
|
|
6481
|
+
var hasDetails = email || phone || website;
|
|
6482
|
+
var addressString = address == null ? void 0 : address.substring(0, 110);
|
|
6483
|
+
var descriptionText = description == null ? void 0 : description.substring(0, 110);
|
|
6484
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
6485
|
+
className: className
|
|
6486
|
+
}, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
6487
|
+
columnStartDesktop: 3,
|
|
6488
|
+
columnSpanDesktop: 12,
|
|
6489
|
+
columnStartDevice: 1,
|
|
6490
|
+
columnSpanDevice: 14
|
|
6491
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
6492
|
+
"data-testid": "contact-card-wrapper"
|
|
6493
|
+
}, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
6494
|
+
size: "large"
|
|
6495
|
+
}, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
6496
|
+
size: "small"
|
|
6497
|
+
}, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
6498
|
+
size: "small"
|
|
6499
|
+
}, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
6500
|
+
size: "large"
|
|
6501
|
+
}, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
|
|
6502
|
+
"data-testid": "contact-card-details-block"
|
|
6503
|
+
}, email && (/*#__PURE__*/React__default.createElement("a", {
|
|
6504
|
+
tabIndex: 0,
|
|
6505
|
+
href: "mailto:" + email
|
|
6506
|
+
}, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
|
|
6507
|
+
tabIndex: 0,
|
|
6508
|
+
href: "tel:" + phone
|
|
6509
|
+
}, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
|
|
6510
|
+
tabIndex: 0,
|
|
6511
|
+
href: website,
|
|
6512
|
+
target: "_blank",
|
|
6513
|
+
rel: "noreferrer"
|
|
6514
|
+
}, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
|
|
6515
|
+
"data-testid": "contact-card-address-block"
|
|
6516
|
+
}, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
6517
|
+
size: "large"
|
|
6518
|
+
}, addressString)))))))));
|
|
6519
|
+
};
|
|
6502
6520
|
|
|
6503
|
-
var _templateObject$K, _templateObject2$y;
|
|
6504
|
-
var
|
|
6505
|
-
var
|
|
6506
|
-
|
|
6507
|
-
|
|
6508
|
-
|
|
6509
|
-
}, function (
|
|
6510
|
-
|
|
6511
|
-
|
|
6512
|
-
|
|
6521
|
+
var _templateObject$K, _templateObject2$y, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b;
|
|
6522
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6523
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
6524
|
+
return props.clickable ? 'pointer' : 'default';
|
|
6525
|
+
}, devices.mobile);
|
|
6526
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
6527
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
6528
|
+
return props.showImage ? 2 : '1 / span 4';
|
|
6529
|
+
}, devices.mobile);
|
|
6530
|
+
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
6531
|
+
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
6532
|
+
return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
|
|
6533
|
+
});
|
|
6513
6534
|
|
|
6514
|
-
|
|
6515
|
-
|
|
6516
|
-
|
|
6517
|
-
|
|
6518
|
-
|
|
6519
|
-
|
|
6520
|
-
|
|
6521
|
-
var generateDomElementId = function generateDomElementId() {
|
|
6522
|
-
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
6523
|
-
var datePart = Date.now().toString().slice(-3);
|
|
6524
|
-
return randomPart + "-" + datePart;
|
|
6525
|
-
};
|
|
6535
|
+
/* eslint-disable no-shadow */
|
|
6536
|
+
(function (CarouselType) {
|
|
6537
|
+
CarouselType["Image"] = "image";
|
|
6538
|
+
CarouselType["SmallCard"] = "SmallCard";
|
|
6539
|
+
CarouselType["LargeCard"] = "LargeCard";
|
|
6540
|
+
CarouselType["PersonCard"] = "PersonCard";
|
|
6541
|
+
})(exports.CarouselType || (exports.CarouselType = {}));
|
|
6526
6542
|
|
|
6527
|
-
var
|
|
6528
|
-
|
|
6529
|
-
|
|
6530
|
-
var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
|
|
6531
|
-
focusables.forEach(function (el) {
|
|
6532
|
-
if (shouldDisable) el.setAttribute('tabindex', '-1');
|
|
6533
|
-
});
|
|
6534
|
-
};
|
|
6535
|
-
var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
|
|
6536
|
-
return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
|
|
6537
|
-
};
|
|
6538
|
-
var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
|
|
6539
|
-
var widthSoFar = 0;
|
|
6540
|
-
var visible = [];
|
|
6541
|
-
for (var i = currentIndex; i < slidesLength; i++) {
|
|
6542
|
-
var _slideWidths$i;
|
|
6543
|
-
var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
|
|
6544
|
-
if (widthSoFar + width > containerWidth) break;
|
|
6545
|
-
visible.push(i);
|
|
6546
|
-
widthSoFar += width;
|
|
6543
|
+
var clickHandler = function clickHandler(link) {
|
|
6544
|
+
if (link != null && link.href && document) {
|
|
6545
|
+
document.location.href = link.href;
|
|
6547
6546
|
}
|
|
6548
|
-
return visible;
|
|
6549
6547
|
};
|
|
6550
|
-
var
|
|
6551
|
-
var
|
|
6552
|
-
|
|
6553
|
-
|
|
6554
|
-
|
|
6555
|
-
|
|
6556
|
-
|
|
6557
|
-
|
|
6558
|
-
|
|
6559
|
-
|
|
6560
|
-
|
|
6561
|
-
|
|
6548
|
+
var ContentSummary = function ContentSummary(_ref) {
|
|
6549
|
+
var title = _ref.title,
|
|
6550
|
+
subtitle = _ref.subtitle,
|
|
6551
|
+
bodyText = _ref.bodyText,
|
|
6552
|
+
link = _ref.link,
|
|
6553
|
+
image = _ref.image,
|
|
6554
|
+
_ref$largeTitle = _ref.largeTitle,
|
|
6555
|
+
largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
|
|
6556
|
+
_ref$showImage = _ref.showImage,
|
|
6557
|
+
showImage = _ref$showImage === void 0 ? false : _ref$showImage,
|
|
6558
|
+
_ref$truncate = _ref.truncate,
|
|
6559
|
+
truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
|
|
6560
|
+
_ref$fullyClickable = _ref.fullyClickable,
|
|
6561
|
+
fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
|
|
6562
|
+
_ref$headerSemanticLe = _ref.headerSemanticLevel,
|
|
6563
|
+
headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
|
|
6564
|
+
className = _ref.className;
|
|
6565
|
+
return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
|
|
6566
|
+
className: className,
|
|
6567
|
+
onClick: function onClick() {
|
|
6568
|
+
if (fullyClickable) {
|
|
6569
|
+
clickHandler(link);
|
|
6570
|
+
}
|
|
6571
|
+
},
|
|
6572
|
+
clickable: fullyClickable,
|
|
6573
|
+
"data-roh": "content-summary-item"
|
|
6574
|
+
}, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
|
|
6575
|
+
"data-testid": "image-wrapper"
|
|
6576
|
+
}, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
|
|
6577
|
+
href: link.href
|
|
6578
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
6579
|
+
aspectRatio: exports.AspectRatio['4:3']
|
|
6580
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
6581
|
+
src: image.src,
|
|
6582
|
+
alt: image.alt
|
|
6583
|
+
})))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
6584
|
+
aspectRatio: exports.AspectRatio['4:3']
|
|
6585
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
6586
|
+
src: image.src,
|
|
6587
|
+
alt: image.alt
|
|
6588
|
+
}))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
|
|
6589
|
+
showImage: showImage
|
|
6590
|
+
}, title && (/*#__PURE__*/React__default.createElement("div", {
|
|
6591
|
+
"data-testid": largeTitle ? 'large-title' : 'default-title'
|
|
6592
|
+
}, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
6593
|
+
size: "large",
|
|
6594
|
+
hierarchy: headerSemanticLevel
|
|
6595
|
+
}, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
6596
|
+
size: "medium",
|
|
6597
|
+
hierarchy: headerSemanticLevel
|
|
6598
|
+
}, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
6599
|
+
size: "large"
|
|
6600
|
+
}, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
|
|
6601
|
+
size: "large"
|
|
6602
|
+
}, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
|
|
6603
|
+
truncate: truncate,
|
|
6604
|
+
dangerouslySetInnerHTML: {
|
|
6605
|
+
__html: bodyText
|
|
6606
|
+
},
|
|
6607
|
+
"data-testid": "body-text"
|
|
6608
|
+
})))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
|
|
6609
|
+
className: "content-summary-text-link"
|
|
6610
|
+
}), link.text))));
|
|
6611
|
+
};
|
|
6612
|
+
|
|
6613
|
+
var _templateObject$L, _templateObject2$z, _templateObject3$o, _templateObject4$l, _templateObject5$h;
|
|
6614
|
+
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
6615
|
+
var imageToLeft = _ref.imageToLeft;
|
|
6616
|
+
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
6617
|
+
}, devices.mobile);
|
|
6618
|
+
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
6619
|
+
var imageToLeft = _ref2.imageToLeft;
|
|
6620
|
+
return imageToLeft ? 'left' : 'right';
|
|
6621
|
+
}, devices.mobile);
|
|
6622
|
+
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
6623
|
+
var imageToLeft = _ref3.imageToLeft;
|
|
6624
|
+
return imageToLeft ? 'right' : 'left';
|
|
6625
|
+
}, devices.mobile);
|
|
6626
|
+
var EditorialSubtitle = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-subtitle);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
6627
|
+
var EditorialText = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
6628
|
+
|
|
6629
|
+
var Editorial = function Editorial(_ref) {
|
|
6630
|
+
var _ref$imagePosition = _ref.imagePosition,
|
|
6631
|
+
imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
|
|
6632
|
+
subtitle = _ref.subtitle,
|
|
6633
|
+
text = _ref.text,
|
|
6634
|
+
children = _ref.children,
|
|
6635
|
+
className = _ref.className;
|
|
6636
|
+
var imageToLeft = imagePosition === 'left';
|
|
6637
|
+
return /*#__PURE__*/React__default.createElement(Grid, {
|
|
6638
|
+
className: className,
|
|
6639
|
+
"data-testid": "editorial-component"
|
|
6640
|
+
}, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
6641
|
+
columnStartDesktop: 3,
|
|
6642
|
+
columnSpanDesktop: 12,
|
|
6643
|
+
columnStartDevice: 2,
|
|
6644
|
+
columnSpanDevice: 12
|
|
6645
|
+
}, /*#__PURE__*/React__default.createElement(EditorialGrid, {
|
|
6646
|
+
imageToLeft: imageToLeft
|
|
6647
|
+
}, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
|
|
6648
|
+
"data-testid": "image-wrapper",
|
|
6649
|
+
imageToLeft: imageToLeft
|
|
6650
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
6651
|
+
aspectRatio: exports.AspectRatio['1:1']
|
|
6652
|
+
}, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
|
|
6653
|
+
"data-testid": "text-wrapper",
|
|
6654
|
+
imageToLeft: imageToLeft
|
|
6655
|
+
}, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
|
|
6656
|
+
tag: "span"
|
|
6657
|
+
}, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
|
|
6658
|
+
tag: "div",
|
|
6659
|
+
size: "large",
|
|
6660
|
+
dangerouslySetInnerHTML: {
|
|
6661
|
+
__html: text
|
|
6562
6662
|
}
|
|
6563
|
-
}
|
|
6564
|
-
return movedSlides;
|
|
6663
|
+
})))));
|
|
6565
6664
|
};
|
|
6566
6665
|
|
|
6567
|
-
var
|
|
6568
|
-
var
|
|
6569
|
-
var
|
|
6570
|
-
var
|
|
6571
|
-
if (!infinite) return 0;
|
|
6572
|
-
return Math.min(childrenLength, MAX_CLONES_NUMBER);
|
|
6573
|
-
};
|
|
6574
|
-
var getSlidedWidth = function getSlidedWidth(slide) {
|
|
6575
|
-
if (!slide) return 0;
|
|
6576
|
-
var style = window.getComputedStyle(slide);
|
|
6577
|
-
var marginLeft = parseFloat(style.marginLeft) || 0;
|
|
6578
|
-
var marginRight = parseFloat(style.marginRight) || 0;
|
|
6579
|
-
return slide.getBoundingClientRect().width + marginLeft + marginRight;
|
|
6580
|
-
};
|
|
6581
|
-
var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
6582
|
-
var children = _ref.children,
|
|
6583
|
-
_ref$infinite = _ref.infinite,
|
|
6584
|
-
infinite = _ref$infinite === void 0 ? false : _ref$infinite,
|
|
6585
|
-
onIndexChange = _ref.onIndexChange,
|
|
6586
|
-
_ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
|
|
6587
|
-
slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
|
|
6588
|
-
_ref$slidesAriaHidden = _ref.slidesAriaHidden,
|
|
6589
|
-
slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
|
|
6590
|
-
onActiveChange = _ref.onActiveChange,
|
|
6591
|
-
onOverflowChange = _ref.onOverflowChange,
|
|
6592
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
6593
|
-
var containerRef = React.useRef(null);
|
|
6594
|
-
var childRefs = React.useRef([]);
|
|
6595
|
-
var startX = React.useRef(0);
|
|
6596
|
-
var currentTranslate = React.useRef(0);
|
|
6597
|
-
var isDragging = React.useRef(false);
|
|
6598
|
-
var isMouseDown = React.useRef(false);
|
|
6599
|
-
var isActive = React.useRef(false);
|
|
6600
|
-
var isClickPrevented = React.useRef(false);
|
|
6601
|
-
var uniqueIdRef = React.useRef(generateDomElementId());
|
|
6602
|
-
var _useState = React.useState(null),
|
|
6603
|
-
dragTranslateX = _useState[0],
|
|
6604
|
-
setDragTranslateX = _useState[1];
|
|
6605
|
-
var _useState2 = React.useState(false),
|
|
6606
|
-
transitioning = _useState2[0],
|
|
6607
|
-
setTransitioning = _useState2[1];
|
|
6608
|
-
var _useState3 = React.useState([]),
|
|
6609
|
-
slideWidths = _useState3[0],
|
|
6610
|
-
setSlideWidths = _useState3[1];
|
|
6611
|
-
var _useState4 = React.useState(0),
|
|
6612
|
-
containerWidth = _useState4[0],
|
|
6613
|
-
setContainerWidth = _useState4[1];
|
|
6614
|
-
var _useMemo = React.useMemo(function () {
|
|
6615
|
-
var count = getClonesCount(infinite, children.length);
|
|
6616
|
-
var leftClones = infinite ? children.slice(-count) : [];
|
|
6617
|
-
var rightClones = infinite ? children.slice(0, count) : [];
|
|
6618
|
-
var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
|
|
6619
|
-
return {
|
|
6620
|
-
slides: allSlides,
|
|
6621
|
-
clonesCount: count
|
|
6622
|
-
};
|
|
6623
|
-
}, [children, infinite]),
|
|
6624
|
-
slides = _useMemo.slides,
|
|
6625
|
-
clonesCount = _useMemo.clonesCount;
|
|
6626
|
-
var _useState5 = React.useState(infinite ? clonesCount : 0),
|
|
6627
|
-
currentIndex = _useState5[0],
|
|
6628
|
-
setCurrentIndex = _useState5[1];
|
|
6629
|
-
React.useEffect(function () {
|
|
6630
|
-
var handler = function handler(e) {
|
|
6631
|
-
if (isClickPrevented.current) {
|
|
6632
|
-
e.preventDefault();
|
|
6633
|
-
e.stopPropagation();
|
|
6634
|
-
}
|
|
6635
|
-
};
|
|
6636
|
-
var containerElement = containerRef.current;
|
|
6637
|
-
containerElement == null || containerElement.addEventListener('click', handler, true);
|
|
6638
|
-
return function () {
|
|
6639
|
-
return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
|
|
6640
|
-
};
|
|
6641
|
-
}, []);
|
|
6642
|
-
React.useEffect(function () {
|
|
6643
|
-
if (!onIndexChange) return;
|
|
6644
|
-
if (!infinite) {
|
|
6645
|
-
onIndexChange(currentIndex);
|
|
6646
|
-
} else {
|
|
6647
|
-
var offset = currentIndex - clonesCount + children.length;
|
|
6648
|
-
var realIndex = offset % children.length;
|
|
6649
|
-
onIndexChange(realIndex);
|
|
6650
|
-
}
|
|
6651
|
-
}, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
|
|
6652
|
-
var updateDimensions = React.useCallback(function () {
|
|
6653
|
-
var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
|
|
6654
|
-
var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
|
|
6655
|
-
setContainerWidth(cw);
|
|
6656
|
-
setSlideWidths(widths);
|
|
6657
|
-
if (!infinite) {
|
|
6658
|
-
var totalWidth = widths.reduce(function (acc, w) {
|
|
6659
|
-
return acc + w;
|
|
6660
|
-
}, 0);
|
|
6661
|
-
var visibleSpace = cw - (slidesOffsetBefore || 0);
|
|
6662
|
-
var overflow = totalWidth > Math.max(0, visibleSpace);
|
|
6663
|
-
onOverflowChange == null || onOverflowChange(overflow);
|
|
6664
|
-
}
|
|
6665
|
-
}, []);
|
|
6666
|
-
React.useEffect(function () {
|
|
6667
|
-
var animationFrameRequestId = requestAnimationFrame(updateDimensions);
|
|
6668
|
-
return function () {
|
|
6669
|
-
return cancelAnimationFrame(animationFrameRequestId);
|
|
6670
|
-
};
|
|
6671
|
-
}, [children]);
|
|
6672
|
-
React.useEffect(function () {
|
|
6673
|
-
var observer = new ResizeObserver(updateDimensions);
|
|
6674
|
-
if (containerRef.current) observer.observe(containerRef.current);
|
|
6675
|
-
return function () {
|
|
6676
|
-
return observer.disconnect();
|
|
6677
|
-
};
|
|
6678
|
-
}, [children]);
|
|
6679
|
-
var setIsActive = function setIsActive() {
|
|
6680
|
-
if (!isActive.current) {
|
|
6681
|
-
isActive.current = true;
|
|
6682
|
-
onActiveChange == null || onActiveChange(true);
|
|
6683
|
-
}
|
|
6684
|
-
};
|
|
6685
|
-
var getTranslateX = function getTranslateX() {
|
|
6686
|
-
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
|
|
6687
|
-
return acc + width;
|
|
6688
|
-
}, 0);
|
|
6689
|
-
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
6690
|
-
};
|
|
6691
|
-
var getTranslateForIndex = function getTranslateForIndex(index) {
|
|
6692
|
-
var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
|
|
6693
|
-
return acc + width;
|
|
6694
|
-
}, 0);
|
|
6695
|
-
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
6696
|
-
};
|
|
6697
|
-
var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
|
|
6698
|
-
var delta = currentTranslate.current - getTranslateX();
|
|
6699
|
-
var direction = delta > 0 ? -1 : 1;
|
|
6700
|
-
var movedSlides = getMovedSlides(delta, slideWidths);
|
|
6701
|
-
if (Math.abs(delta) > 20) {
|
|
6702
|
-
movedSlides = Math.max(1, movedSlides);
|
|
6703
|
-
var targetIndex = currentIndex + direction * movedSlides;
|
|
6704
|
-
var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
|
|
6705
|
-
if (!infinite) {
|
|
6706
|
-
currentTranslate.current = getTranslateForIndex(finalIndex);
|
|
6707
|
-
setDragTranslateX(null);
|
|
6708
|
-
}
|
|
6709
|
-
setTransitioning(true);
|
|
6710
|
-
setCurrentIndex(finalIndex);
|
|
6711
|
-
} else {
|
|
6712
|
-
setTransitioning(true);
|
|
6713
|
-
setCurrentIndex(function (prev) {
|
|
6714
|
-
return prev;
|
|
6715
|
-
});
|
|
6716
|
-
}
|
|
6717
|
-
setDragTranslateX(null);
|
|
6718
|
-
};
|
|
6719
|
-
var canMoveNext = function canMoveNext() {
|
|
6720
|
-
if (infinite) return true;
|
|
6721
|
-
if (slideWidths.length === 0 || containerWidth === 0) return false;
|
|
6722
|
-
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
6723
|
-
return acc + w;
|
|
6724
|
-
}, 0);
|
|
6725
|
-
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
|
|
6726
|
-
return acc + w;
|
|
6727
|
-
}, 0);
|
|
6728
|
-
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
6729
|
-
var remainingToRight = totalWidth - widthsBefore - visibleSpace;
|
|
6730
|
-
var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
6731
|
-
var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
|
|
6732
|
-
var nextIndex = lastVisibleIndex + 1;
|
|
6733
|
-
if (nextIndex >= slideWidths.length) return false;
|
|
6734
|
-
var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
|
|
6735
|
-
if (nextSlideWidth === 0) return false;
|
|
6736
|
-
var EPS = 1; // pixel tolerance
|
|
6737
|
-
// full next slide fits
|
|
6738
|
-
if (remainingToRight + EPS >= nextSlideWidth) return true;
|
|
6739
|
-
return remainingToRight > 0;
|
|
6740
|
-
};
|
|
6741
|
-
var handleTransitionEnd = function handleTransitionEnd() {
|
|
6742
|
-
setTransitioning(false);
|
|
6743
|
-
if (!infinite) return;
|
|
6744
|
-
if (currentIndex >= children.length + clonesCount) {
|
|
6745
|
-
setCurrentIndex(clonesCount);
|
|
6746
|
-
} else if (currentIndex < clonesCount) {
|
|
6747
|
-
setCurrentIndex(children.length + currentIndex);
|
|
6748
|
-
}
|
|
6749
|
-
};
|
|
6750
|
-
var goToPrev = function goToPrev() {
|
|
6751
|
-
if (transitioning) return;
|
|
6752
|
-
setIsActive();
|
|
6753
|
-
setTransitioning(true);
|
|
6754
|
-
setCurrentIndex(function (prev) {
|
|
6755
|
-
var target = infinite ? prev - 1 : Math.max(0, prev - 1);
|
|
6756
|
-
if (!infinite) {
|
|
6757
|
-
currentTranslate.current = getTranslateForIndex(target);
|
|
6758
|
-
setDragTranslateX(null);
|
|
6759
|
-
}
|
|
6760
|
-
return target;
|
|
6761
|
-
});
|
|
6762
|
-
};
|
|
6763
|
-
var goToNext = function goToNext() {
|
|
6764
|
-
if (transitioning || !canMoveNext()) return;
|
|
6765
|
-
setIsActive();
|
|
6766
|
-
setTransitioning(true);
|
|
6767
|
-
setCurrentIndex(function (prev) {
|
|
6768
|
-
var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
|
|
6769
|
-
if (!infinite) {
|
|
6770
|
-
currentTranslate.current = getTranslateForIndex(target);
|
|
6771
|
-
setDragTranslateX(null);
|
|
6772
|
-
}
|
|
6773
|
-
return target;
|
|
6774
|
-
});
|
|
6775
|
-
};
|
|
6776
|
-
React.useImperativeHandle(ref, function () {
|
|
6777
|
-
return {
|
|
6778
|
-
nextSlide: goToNext,
|
|
6779
|
-
prevSlide: goToPrev,
|
|
6780
|
-
hasOverflow: function hasOverflow() {
|
|
6781
|
-
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
6782
|
-
return acc + w;
|
|
6783
|
-
}, 0);
|
|
6784
|
-
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
6785
|
-
return totalWidth > Math.max(0, visibleSpace);
|
|
6786
|
-
},
|
|
6787
|
-
hasNext: function hasNext() {
|
|
6788
|
-
return canMoveNext();
|
|
6789
|
-
}
|
|
6790
|
-
};
|
|
6791
|
-
});
|
|
6792
|
-
var handleTouchStart = function handleTouchStart(e) {
|
|
6793
|
-
setIsActive();
|
|
6794
|
-
startX.current = e.touches[0].clientX;
|
|
6795
|
-
isDragging.current = true;
|
|
6796
|
-
isClickPrevented.current = false;
|
|
6797
|
-
setTransitioning(false);
|
|
6798
|
-
};
|
|
6799
|
-
var handleTouchMove = function handleTouchMove(e) {
|
|
6800
|
-
if (!isDragging.current) return;
|
|
6801
|
-
var deltaX = e.touches[0].clientX - startX.current;
|
|
6802
|
-
if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
|
|
6803
|
-
isClickPrevented.current = true;
|
|
6804
|
-
}
|
|
6805
|
-
var visualOffset = getTranslateX() + deltaX;
|
|
6806
|
-
currentTranslate.current = visualOffset;
|
|
6807
|
-
setDragTranslateX(visualOffset);
|
|
6808
|
-
};
|
|
6809
|
-
var handleTouchEnd = function handleTouchEnd() {
|
|
6810
|
-
isDragging.current = false;
|
|
6811
|
-
if (isClickPrevented.current) {
|
|
6812
|
-
navigateOnSwipeEnd();
|
|
6813
|
-
} else {
|
|
6814
|
-
setDragTranslateX(null);
|
|
6815
|
-
}
|
|
6816
|
-
};
|
|
6817
|
-
var handleMouseMove = function handleMouseMove(e) {
|
|
6818
|
-
if (!isDragging.current || !isMouseDown.current || transitioning) return;
|
|
6819
|
-
var deltaX = e.clientX - startX.current;
|
|
6820
|
-
if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
|
|
6821
|
-
isClickPrevented.current = true;
|
|
6822
|
-
}
|
|
6823
|
-
var visualOffset = getTranslateX() + deltaX;
|
|
6824
|
-
currentTranslate.current = visualOffset;
|
|
6825
|
-
setDragTranslateX(visualOffset);
|
|
6826
|
-
};
|
|
6827
|
-
var _handleMouseUp = function handleMouseUp() {
|
|
6828
|
-
if (!isMouseDown.current) return;
|
|
6829
|
-
isMouseDown.current = false;
|
|
6830
|
-
isDragging.current = false;
|
|
6831
|
-
if (isClickPrevented.current) {
|
|
6832
|
-
navigateOnSwipeEnd();
|
|
6833
|
-
} else {
|
|
6834
|
-
setDragTranslateX(null);
|
|
6835
|
-
}
|
|
6836
|
-
window.removeEventListener('mousemove', handleMouseMove);
|
|
6837
|
-
window.removeEventListener('mouseup', _handleMouseUp);
|
|
6838
|
-
};
|
|
6839
|
-
var handleMouseDown = function handleMouseDown(e) {
|
|
6840
|
-
if (transitioning || e.button !== 0) return;
|
|
6841
|
-
e.preventDefault();
|
|
6842
|
-
setIsActive();
|
|
6843
|
-
startX.current = e.clientX;
|
|
6844
|
-
isDragging.current = true;
|
|
6845
|
-
isMouseDown.current = true;
|
|
6846
|
-
isClickPrevented.current = false;
|
|
6847
|
-
setTransitioning(false);
|
|
6848
|
-
window.addEventListener('mousemove', handleMouseMove);
|
|
6849
|
-
window.addEventListener('mouseup', _handleMouseUp);
|
|
6850
|
-
};
|
|
6851
|
-
var onSlideFocus = function onSlideFocus(isVisible, index) {
|
|
6852
|
-
if (!isVisible) {
|
|
6853
|
-
setCurrentIndex(index);
|
|
6854
|
-
}
|
|
6855
|
-
};
|
|
6856
|
-
var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
6857
|
-
return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
|
|
6858
|
-
ref: containerRef,
|
|
6859
|
-
className: "swipe",
|
|
6860
|
-
onTouchStart: handleTouchStart,
|
|
6861
|
-
onTouchMove: handleTouchMove,
|
|
6862
|
-
onTouchEnd: handleTouchEnd,
|
|
6863
|
-
onMouseDown: handleMouseDown,
|
|
6864
|
-
"aria-roledescription": "carousel",
|
|
6865
|
-
role: "list"
|
|
6866
|
-
}, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
|
|
6867
|
-
className: "swipe-track-wrapper",
|
|
6868
|
-
translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
|
|
6869
|
-
transitioning: transitioning && dragTranslateX === null,
|
|
6870
|
-
onTransitionEnd: handleTransitionEnd
|
|
6871
|
-
}, slides.map(function (child, index) {
|
|
6872
|
-
var isVisible = visibleIndexes.includes(index);
|
|
6873
|
-
var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
|
|
6874
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
6875
|
-
key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
|
|
6876
|
-
className: SWIPE_SLIDE_CLASS_NAME,
|
|
6877
|
-
"aria-hidden": slidesAriaHidden || isClone,
|
|
6878
|
-
"aria-roledescription": "slide",
|
|
6879
|
-
role: "listitem",
|
|
6880
|
-
ref: function ref(el) {
|
|
6881
|
-
childRefs.current[index] = el;
|
|
6882
|
-
disableTabbingInside(el, isClone);
|
|
6883
|
-
},
|
|
6884
|
-
onFocus: function onFocus() {
|
|
6885
|
-
return onSlideFocus(isVisible, index);
|
|
6886
|
-
}
|
|
6887
|
-
}, child);
|
|
6888
|
-
})));
|
|
6889
|
-
});
|
|
6890
|
-
Swipe.displayName = 'Swipe';
|
|
6891
|
-
|
|
6892
|
-
var _excluded$i = ["name", "image", "onClick"];
|
|
6893
|
-
var CastFilters = function CastFilters(_ref) {
|
|
6894
|
-
var cast = _ref.cast,
|
|
6895
|
-
headingText = _ref.headingText,
|
|
6896
|
-
ctaText = _ref.ctaText,
|
|
6897
|
-
textLinkText = _ref.textLinkText,
|
|
6898
|
-
emptySelectionText = _ref.emptySelectionText,
|
|
6899
|
-
placeholderImage = _ref.placeholderImage,
|
|
6900
|
-
listRoleDescription = _ref.listRoleDescription,
|
|
6901
|
-
className = _ref.className,
|
|
6902
|
-
onSelect = _ref.onSelect,
|
|
6903
|
-
onApply = _ref.onApply,
|
|
6904
|
-
onClear = _ref.onClear,
|
|
6905
|
-
_ref$selectedIndices = _ref.selectedIndices,
|
|
6906
|
-
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
6907
|
-
var _useViewport = useViewport(),
|
|
6908
|
-
isMobile = _useViewport.isMobile;
|
|
6909
|
-
var castWrapperRef = React.useRef(null);
|
|
6910
|
-
var isDraggingRef = React.useRef(false);
|
|
6911
|
-
var startXRef = React.useRef(0);
|
|
6912
|
-
var scrollStartRef = React.useRef(0);
|
|
6913
|
-
var hasDraggedRef = React.useRef(false);
|
|
6914
|
-
var swipeRef = React.useRef(null);
|
|
6915
|
-
var _useState = React.useState(false),
|
|
6916
|
-
availablePrev = _useState[0],
|
|
6917
|
-
setAvailablePrev = _useState[1];
|
|
6918
|
-
var _useState2 = React.useState(cast.length > 1),
|
|
6919
|
-
availableNext = _useState2[0],
|
|
6920
|
-
setAvailableNext = _useState2[1];
|
|
6921
|
-
var _useState3 = React.useState(true),
|
|
6922
|
-
showRotatorButtons = _useState3[0],
|
|
6923
|
-
setShowRotatorButtons = _useState3[1];
|
|
6924
|
-
var onIndexChangeHandler = function onIndexChangeHandler(index) {
|
|
6925
|
-
setAvailablePrev(index > 0);
|
|
6926
|
-
setAvailableNext(function () {
|
|
6927
|
-
var _swipeRef$current$has, _swipeRef$current;
|
|
6928
|
-
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);
|
|
6929
|
-
});
|
|
6930
|
-
};
|
|
6931
|
-
React.useEffect(function () {
|
|
6932
|
-
setAvailablePrev(false);
|
|
6933
|
-
setAvailableNext(function () {
|
|
6934
|
-
var _swipeRef$current$has2, _swipeRef$current2;
|
|
6935
|
-
return (_swipeRef$current$has2 = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext()) != null ? _swipeRef$current$has2 : cast.length > 1;
|
|
6936
|
-
});
|
|
6937
|
-
}, [cast.length]);
|
|
6938
|
-
var handleOverflowChange = function handleOverflowChange(overflow) {
|
|
6939
|
-
var _swipeRef$current3;
|
|
6940
|
-
setShowRotatorButtons(overflow);
|
|
6941
|
-
var hasNext = (_swipeRef$current3 = swipeRef.current) == null ? void 0 : _swipeRef$current3.hasNext();
|
|
6942
|
-
if (typeof hasNext === 'boolean') {
|
|
6943
|
-
setAvailableNext(hasNext);
|
|
6944
|
-
} else {
|
|
6945
|
-
setAvailableNext(overflow);
|
|
6946
|
-
}
|
|
6947
|
-
};
|
|
6948
|
-
var onNext = function onNext() {
|
|
6949
|
-
var _swipeRef$current4;
|
|
6950
|
-
return (_swipeRef$current4 = swipeRef.current) == null ? void 0 : _swipeRef$current4.nextSlide();
|
|
6951
|
-
};
|
|
6952
|
-
var onPrev = function onPrev() {
|
|
6953
|
-
var _swipeRef$current5;
|
|
6954
|
-
return (_swipeRef$current5 = swipeRef.current) == null ? void 0 : _swipeRef$current5.prevSlide();
|
|
6955
|
-
};
|
|
6956
|
-
React.useEffect(function () {
|
|
6957
|
-
var el = castWrapperRef.current;
|
|
6958
|
-
if (!el) return undefined;
|
|
6959
|
-
var handleKeydown = function handleKeydown(e) {
|
|
6960
|
-
if (!el.contains(document.activeElement)) return;
|
|
6961
|
-
if (e.key === 'ArrowRight') {
|
|
6962
|
-
var _swipeRef$current6;
|
|
6963
|
-
e.preventDefault();
|
|
6964
|
-
(_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.nextSlide();
|
|
6965
|
-
} else if (e.key === 'ArrowLeft') {
|
|
6966
|
-
var _swipeRef$current7;
|
|
6967
|
-
e.preventDefault();
|
|
6968
|
-
(_swipeRef$current7 = swipeRef.current) == null || _swipeRef$current7.prevSlide();
|
|
6969
|
-
}
|
|
6970
|
-
};
|
|
6971
|
-
el.addEventListener('keydown', handleKeydown);
|
|
6972
|
-
return function () {
|
|
6973
|
-
return el.removeEventListener('keydown', handleKeydown);
|
|
6974
|
-
};
|
|
6975
|
-
}, []);
|
|
6976
|
-
var handleMouseDown = React.useCallback(function (e) {
|
|
6977
|
-
if (!castWrapperRef.current) return;
|
|
6978
|
-
isDraggingRef.current = true;
|
|
6979
|
-
hasDraggedRef.current = false;
|
|
6980
|
-
startXRef.current = e.clientX;
|
|
6981
|
-
scrollStartRef.current = castWrapperRef.current.scrollLeft;
|
|
6982
|
-
if (e.target === castWrapperRef.current) e.preventDefault();
|
|
6983
|
-
}, []);
|
|
6984
|
-
var handleMouseMove = React.useCallback(function (e) {
|
|
6985
|
-
if (!isDraggingRef.current || !castWrapperRef.current) return;
|
|
6986
|
-
var deltaX = e.clientX - startXRef.current;
|
|
6987
|
-
var threshold = 5;
|
|
6988
|
-
if (Math.abs(deltaX) > threshold) {
|
|
6989
|
-
hasDraggedRef.current = true;
|
|
6990
|
-
e.preventDefault();
|
|
6991
|
-
castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
|
|
6992
|
-
}
|
|
6993
|
-
}, []);
|
|
6994
|
-
var handleMouseUp = React.useCallback(function () {
|
|
6995
|
-
isDraggingRef.current = false;
|
|
6996
|
-
setTimeout(function () {
|
|
6997
|
-
hasDraggedRef.current = false;
|
|
6998
|
-
}, 0);
|
|
6999
|
-
}, []);
|
|
7000
|
-
var handleMouseLeave = React.useCallback(function () {
|
|
7001
|
-
isDraggingRef.current = false;
|
|
7002
|
-
hasDraggedRef.current = false;
|
|
7003
|
-
}, []);
|
|
7004
|
-
var handleClick = React__default.useCallback(function (index, onClick) {
|
|
7005
|
-
if (hasDraggedRef.current) return;
|
|
7006
|
-
if (onSelect) onSelect(index);
|
|
7007
|
-
if (onClick) onClick();
|
|
7008
|
-
}, [onSelect]);
|
|
7009
|
-
var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
|
|
7010
|
-
if (e.key === 'Enter') {
|
|
7011
|
-
handleClick(index, onClick);
|
|
7012
|
-
}
|
|
7013
|
-
}, [handleClick]);
|
|
7014
|
-
var handleClearKeydown = React__default.useCallback(function (e) {
|
|
7015
|
-
if (e.key === 'Enter' && onClear) {
|
|
7016
|
-
onClear();
|
|
7017
|
-
}
|
|
7018
|
-
}, [onClear]);
|
|
7019
|
-
var showActionButtonsSection = onApply || onClear || emptySelectionText;
|
|
7020
|
-
var getPersonCards = function getPersonCards() {
|
|
7021
|
-
return cast.map(function (person, index) {
|
|
7022
|
-
var name = person.name,
|
|
7023
|
-
image = person.image,
|
|
7024
|
-
_onClick = person.onClick,
|
|
7025
|
-
rest = _objectWithoutPropertiesLoose(person, _excluded$i);
|
|
7026
|
-
var isSelected = selectedIndices.includes(index);
|
|
7027
|
-
var personImage = image || placeholderImage || defaultPlaceholderImage;
|
|
7028
|
-
return /*#__PURE__*/React__default.createElement(PersonWrapper, {
|
|
7029
|
-
key: index,
|
|
7030
|
-
"aria-selected": isSelected,
|
|
7031
|
-
role: "option",
|
|
7032
|
-
tabIndex: 0,
|
|
7033
|
-
onKeyDown: function onKeyDown(e) {
|
|
7034
|
-
return handlePersonKeydown(e, index, _onClick);
|
|
7035
|
-
}
|
|
7036
|
-
}, /*#__PURE__*/React__default.createElement(PersonToggle, Object.assign({
|
|
7037
|
-
isSelected: isSelected,
|
|
7038
|
-
onClick: function onClick() {
|
|
7039
|
-
return handleClick(index, _onClick);
|
|
7040
|
-
}
|
|
7041
|
-
}, rest), /*#__PURE__*/React__default.createElement(PersonImage, {
|
|
7042
|
-
src: personImage,
|
|
7043
|
-
alt: image ? name : "Placeholder image for " + name,
|
|
7044
|
-
draggable: false,
|
|
7045
|
-
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7046
|
-
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7047
|
-
isSelected: isSelected
|
|
7048
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7049
|
-
iconName: "Confirm",
|
|
7050
|
-
color: "white"
|
|
7051
|
-
}))), /*#__PURE__*/React__default.createElement(PersonName, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7052
|
-
size: "medium"
|
|
7053
|
-
}, name)));
|
|
7054
|
-
});
|
|
7055
|
-
};
|
|
7056
|
-
return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper, {
|
|
7057
|
-
className: className
|
|
7058
|
-
}, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, headingText && (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
7059
|
-
columnStartDesktop: 1,
|
|
7060
|
-
columnSpanDesktop: 10,
|
|
7061
|
-
columnStartDevice: 1,
|
|
7062
|
-
columnSpanDevice: 9
|
|
7063
|
-
}, /*#__PURE__*/React__default.createElement(HeadingTextWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7064
|
-
size: "large"
|
|
7065
|
-
}, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
7066
|
-
columnStartDesktop: 16,
|
|
7067
|
-
columnSpanDesktop: 2
|
|
7068
|
-
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
7069
|
-
size: "small",
|
|
7070
|
-
onClickNext: onNext,
|
|
7071
|
-
onClickPrev: onPrev,
|
|
7072
|
-
availablePrev: availablePrev,
|
|
7073
|
-
availableNext: availableNext
|
|
7074
|
-
})))), /*#__PURE__*/React__default.createElement(CastWrapper, {
|
|
7075
|
-
ref: castWrapperRef,
|
|
7076
|
-
role: "listbox",
|
|
7077
|
-
"aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
|
|
7078
|
-
"aria-label": "filter list",
|
|
7079
|
-
"aria-multiselectable": true,
|
|
7080
|
-
onMouseDown: handleMouseDown,
|
|
7081
|
-
onMouseMove: handleMouseMove,
|
|
7082
|
-
onMouseUp: handleMouseUp,
|
|
7083
|
-
onMouseLeave: handleMouseLeave
|
|
7084
|
-
}, isMobile ? getPersonCards() : (/*#__PURE__*/React__default.createElement(Swipe, {
|
|
7085
|
-
onIndexChange: onIndexChangeHandler,
|
|
7086
|
-
"data-testid": "cast-filter-swipe",
|
|
7087
|
-
ref: swipeRef,
|
|
7088
|
-
onOverflowChange: handleOverflowChange
|
|
7089
|
-
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7090
|
-
size: "medium",
|
|
7091
|
-
className: "mobile-only"
|
|
7092
|
-
}, 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, {
|
|
7093
|
-
onClick: function onClick() {
|
|
7094
|
-
return onApply(selectedIndices);
|
|
7095
|
-
}
|
|
7096
|
-
}, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
|
|
7097
|
-
tabIndex: 0,
|
|
7098
|
-
role: "button",
|
|
7099
|
-
onClick: onClear,
|
|
7100
|
-
onKeyDown: handleClearKeydown
|
|
7101
|
-
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7102
|
-
};
|
|
7103
|
-
|
|
7104
|
-
var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
|
|
7105
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7106
|
-
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);
|
|
7107
|
-
var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7108
|
-
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7109
|
-
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);
|
|
7110
|
-
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);
|
|
7111
|
-
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);
|
|
7112
|
-
|
|
7113
|
-
var ContactCard = function ContactCard(_ref) {
|
|
7114
|
-
var title = _ref.title,
|
|
7115
|
-
titleSuffix = _ref.titleSuffix,
|
|
7116
|
-
description = _ref.description,
|
|
7117
|
-
email = _ref.email,
|
|
7118
|
-
phone = _ref.phone,
|
|
7119
|
-
website = _ref.website,
|
|
7120
|
-
address = _ref.address,
|
|
7121
|
-
className = _ref.className;
|
|
7122
|
-
var hasDetails = email || phone || website;
|
|
7123
|
-
var addressString = address == null ? void 0 : address.substring(0, 110);
|
|
7124
|
-
var descriptionText = description == null ? void 0 : description.substring(0, 110);
|
|
7125
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
7126
|
-
className: className
|
|
7127
|
-
}, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
7128
|
-
columnStartDesktop: 3,
|
|
7129
|
-
columnSpanDesktop: 12,
|
|
7130
|
-
columnStartDevice: 1,
|
|
7131
|
-
columnSpanDevice: 14
|
|
7132
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
7133
|
-
"data-testid": "contact-card-wrapper"
|
|
7134
|
-
}, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
7135
|
-
size: "large"
|
|
7136
|
-
}, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7137
|
-
size: "small"
|
|
7138
|
-
}, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
7139
|
-
size: "small"
|
|
7140
|
-
}, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
7141
|
-
size: "large"
|
|
7142
|
-
}, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
|
|
7143
|
-
"data-testid": "contact-card-details-block"
|
|
7144
|
-
}, email && (/*#__PURE__*/React__default.createElement("a", {
|
|
7145
|
-
tabIndex: 0,
|
|
7146
|
-
href: "mailto:" + email
|
|
7147
|
-
}, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
|
|
7148
|
-
tabIndex: 0,
|
|
7149
|
-
href: "tel:" + phone
|
|
7150
|
-
}, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
|
|
7151
|
-
tabIndex: 0,
|
|
7152
|
-
href: website,
|
|
7153
|
-
target: "_blank",
|
|
7154
|
-
rel: "noreferrer"
|
|
7155
|
-
}, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
|
|
7156
|
-
"data-testid": "contact-card-address-block"
|
|
7157
|
-
}, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7158
|
-
size: "large"
|
|
7159
|
-
}, addressString)))))))));
|
|
7160
|
-
};
|
|
7161
|
-
|
|
7162
|
-
var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$c;
|
|
7163
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7164
|
-
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) {
|
|
7165
|
-
return props.clickable ? 'pointer' : 'default';
|
|
7166
|
-
}, devices.mobile);
|
|
7167
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7168
|
-
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) {
|
|
7169
|
-
return props.showImage ? 2 : '1 / span 4';
|
|
7170
|
-
}, devices.mobile);
|
|
7171
|
-
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7172
|
-
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) {
|
|
7173
|
-
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 ";
|
|
7174
|
-
});
|
|
7175
|
-
|
|
7176
|
-
/* eslint-disable no-shadow */
|
|
7177
|
-
(function (CarouselType) {
|
|
7178
|
-
CarouselType["Image"] = "image";
|
|
7179
|
-
CarouselType["SmallCard"] = "SmallCard";
|
|
7180
|
-
CarouselType["LargeCard"] = "LargeCard";
|
|
7181
|
-
CarouselType["PersonCard"] = "PersonCard";
|
|
7182
|
-
})(exports.CarouselType || (exports.CarouselType = {}));
|
|
7183
|
-
|
|
7184
|
-
var clickHandler = function clickHandler(link) {
|
|
7185
|
-
if (link != null && link.href && document) {
|
|
7186
|
-
document.location.href = link.href;
|
|
7187
|
-
}
|
|
7188
|
-
};
|
|
7189
|
-
var ContentSummary = function ContentSummary(_ref) {
|
|
7190
|
-
var title = _ref.title,
|
|
7191
|
-
subtitle = _ref.subtitle,
|
|
7192
|
-
bodyText = _ref.bodyText,
|
|
7193
|
-
link = _ref.link,
|
|
7194
|
-
image = _ref.image,
|
|
7195
|
-
_ref$largeTitle = _ref.largeTitle,
|
|
7196
|
-
largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
|
|
7197
|
-
_ref$showImage = _ref.showImage,
|
|
7198
|
-
showImage = _ref$showImage === void 0 ? false : _ref$showImage,
|
|
7199
|
-
_ref$truncate = _ref.truncate,
|
|
7200
|
-
truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
|
|
7201
|
-
_ref$fullyClickable = _ref.fullyClickable,
|
|
7202
|
-
fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
|
|
7203
|
-
_ref$headerSemanticLe = _ref.headerSemanticLevel,
|
|
7204
|
-
headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
|
|
7205
|
-
className = _ref.className;
|
|
7206
|
-
return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
|
|
7207
|
-
className: className,
|
|
7208
|
-
onClick: function onClick() {
|
|
7209
|
-
if (fullyClickable) {
|
|
7210
|
-
clickHandler(link);
|
|
7211
|
-
}
|
|
7212
|
-
},
|
|
7213
|
-
clickable: fullyClickable,
|
|
7214
|
-
"data-roh": "content-summary-item"
|
|
7215
|
-
}, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
|
|
7216
|
-
"data-testid": "image-wrapper"
|
|
7217
|
-
}, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
|
|
7218
|
-
href: link.href
|
|
7219
|
-
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
7220
|
-
aspectRatio: exports.AspectRatio['4:3']
|
|
7221
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
7222
|
-
src: image.src,
|
|
7223
|
-
alt: image.alt
|
|
7224
|
-
})))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
7225
|
-
aspectRatio: exports.AspectRatio['4:3']
|
|
7226
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
7227
|
-
src: image.src,
|
|
7228
|
-
alt: image.alt
|
|
7229
|
-
}))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
|
|
7230
|
-
showImage: showImage
|
|
7231
|
-
}, title && (/*#__PURE__*/React__default.createElement("div", {
|
|
7232
|
-
"data-testid": largeTitle ? 'large-title' : 'default-title'
|
|
7233
|
-
}, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
7234
|
-
size: "large",
|
|
7235
|
-
hierarchy: headerSemanticLevel
|
|
7236
|
-
}, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
7237
|
-
size: "medium",
|
|
7238
|
-
hierarchy: headerSemanticLevel
|
|
7239
|
-
}, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
7240
|
-
size: "large"
|
|
7241
|
-
}, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
|
|
7242
|
-
size: "large"
|
|
7243
|
-
}, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
|
|
7244
|
-
truncate: truncate,
|
|
7245
|
-
dangerouslySetInnerHTML: {
|
|
7246
|
-
__html: bodyText
|
|
7247
|
-
},
|
|
7248
|
-
"data-testid": "body-text"
|
|
7249
|
-
})))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
|
|
7250
|
-
className: "content-summary-text-link"
|
|
7251
|
-
}), link.text))));
|
|
7252
|
-
};
|
|
7253
|
-
|
|
7254
|
-
var _templateObject$N, _templateObject2$B, _templateObject3$p, _templateObject4$m, _templateObject5$i;
|
|
7255
|
-
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) {
|
|
7256
|
-
var imageToLeft = _ref.imageToLeft;
|
|
7257
|
-
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7258
|
-
}, devices.mobile);
|
|
7259
|
-
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) {
|
|
7260
|
-
var imageToLeft = _ref2.imageToLeft;
|
|
7261
|
-
return imageToLeft ? 'left' : 'right';
|
|
7262
|
-
}, devices.mobile);
|
|
7263
|
-
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) {
|
|
7264
|
-
var imageToLeft = _ref3.imageToLeft;
|
|
7265
|
-
return imageToLeft ? 'right' : 'left';
|
|
7266
|
-
}, devices.mobile);
|
|
7267
|
-
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"])));
|
|
7268
|
-
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"])));
|
|
7269
|
-
|
|
7270
|
-
var Editorial = function Editorial(_ref) {
|
|
7271
|
-
var _ref$imagePosition = _ref.imagePosition,
|
|
7272
|
-
imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
|
|
7273
|
-
subtitle = _ref.subtitle,
|
|
7274
|
-
text = _ref.text,
|
|
7275
|
-
children = _ref.children,
|
|
7276
|
-
className = _ref.className;
|
|
7277
|
-
var imageToLeft = imagePosition === 'left';
|
|
7278
|
-
return /*#__PURE__*/React__default.createElement(Grid, {
|
|
7279
|
-
className: className,
|
|
7280
|
-
"data-testid": "editorial-component"
|
|
7281
|
-
}, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
7282
|
-
columnStartDesktop: 3,
|
|
7283
|
-
columnSpanDesktop: 12,
|
|
7284
|
-
columnStartDevice: 2,
|
|
7285
|
-
columnSpanDevice: 12
|
|
7286
|
-
}, /*#__PURE__*/React__default.createElement(EditorialGrid, {
|
|
7287
|
-
imageToLeft: imageToLeft
|
|
7288
|
-
}, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
|
|
7289
|
-
"data-testid": "image-wrapper",
|
|
7290
|
-
imageToLeft: imageToLeft
|
|
7291
|
-
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
7292
|
-
aspectRatio: exports.AspectRatio['1:1']
|
|
7293
|
-
}, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
|
|
7294
|
-
"data-testid": "text-wrapper",
|
|
7295
|
-
imageToLeft: imageToLeft
|
|
7296
|
-
}, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
|
|
7297
|
-
tag: "span"
|
|
7298
|
-
}, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
|
|
7299
|
-
tag: "div",
|
|
7300
|
-
size: "large",
|
|
7301
|
-
dangerouslySetInnerHTML: {
|
|
7302
|
-
__html: text
|
|
7303
|
-
}
|
|
7304
|
-
})))));
|
|
7305
|
-
};
|
|
6666
|
+
var _templateObject$M, _templateObject2$A, _templateObject3$p;
|
|
6667
|
+
var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
6668
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
6669
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
|
|
7306
6670
|
|
|
7307
|
-
var
|
|
7308
|
-
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"])));
|
|
7309
|
-
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);
|
|
7310
|
-
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"])));
|
|
7311
|
-
|
|
7312
|
-
var _excluded$j = ["text", "onClick"];
|
|
6671
|
+
var _excluded$h = ["text", "onClick"];
|
|
7313
6672
|
var HotFilters = function HotFilters(_ref) {
|
|
7314
6673
|
var items = _ref.items,
|
|
7315
6674
|
className = _ref.className,
|
|
@@ -7325,7 +6684,7 @@ var HotFilters = function HotFilters(_ref) {
|
|
|
7325
6684
|
}, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
|
|
7326
6685
|
var text = item.text,
|
|
7327
6686
|
_onClick = item.onClick,
|
|
7328
|
-
rest = _objectWithoutPropertiesLoose(item, _excluded$
|
|
6687
|
+
rest = _objectWithoutPropertiesLoose(item, _excluded$h);
|
|
7329
6688
|
var isSelected = index === selectedIndex;
|
|
7330
6689
|
return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
|
|
7331
6690
|
key: index,
|
|
@@ -7371,10 +6730,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7371
6730
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7372
6731
|
};
|
|
7373
6732
|
|
|
7374
|
-
var _templateObject$
|
|
7375
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7376
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
7377
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
6733
|
+
var _templateObject$N, _templateObject2$B, _templateObject3$q, _templateObject4$m;
|
|
6734
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
|
|
6735
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
6736
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
|
|
7378
6737
|
var variant = _ref.variant,
|
|
7379
6738
|
theme = _ref.theme;
|
|
7380
6739
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7417,7 +6776,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$r || (
|
|
|
7417
6776
|
theme = _ref10.theme;
|
|
7418
6777
|
return getTextColor$4(variant, theme, COLORS$4.pressed);
|
|
7419
6778
|
});
|
|
7420
|
-
var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$
|
|
6779
|
+
var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--information-panel-color);\n\n a {\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n color: var(--information-panel-color);\n }\n\n @media ", " {\n padding-top: 4px;\n }\n"])), devices.mobile);
|
|
7421
6780
|
|
|
7422
6781
|
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
7423
6782
|
|
|
@@ -7597,33 +6956,33 @@ var Information = function Information(_ref) {
|
|
|
7597
6956
|
})))));
|
|
7598
6957
|
};
|
|
7599
6958
|
|
|
7600
|
-
var _templateObject$
|
|
7601
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
6959
|
+
var _templateObject$O, _templateObject2$C, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$c, _templateObject7$8, _templateObject8$4;
|
|
6960
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7602
6961
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7603
6962
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7604
6963
|
}, devices.mobile);
|
|
7605
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
7606
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6964
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
6965
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
7607
6966
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7608
6967
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7609
6968
|
});
|
|
7610
|
-
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6969
|
+
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
|
|
7611
6970
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7612
6971
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7613
6972
|
}, devices.mobile);
|
|
7614
|
-
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6973
|
+
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref4) {
|
|
7615
6974
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7616
6975
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7617
6976
|
}, devices.mobile);
|
|
7618
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7619
|
-
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
6977
|
+
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
6978
|
+
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
|
|
7620
6979
|
var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
|
|
7621
6980
|
return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
|
|
7622
6981
|
}, devices.mobile, function (_ref6) {
|
|
7623
6982
|
var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
|
|
7624
6983
|
return isPageHeadingWithoutTitle && "\n margin-top: 15px;\n ";
|
|
7625
6984
|
});
|
|
7626
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
6985
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
7627
6986
|
|
|
7628
6987
|
var PageHeading = function PageHeading(_ref) {
|
|
7629
6988
|
var title = _ref.title,
|
|
@@ -7693,17 +7052,17 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7693
7052
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7694
7053
|
};
|
|
7695
7054
|
|
|
7696
|
-
var _templateObject$
|
|
7697
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7698
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7699
|
-
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
7700
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7701
|
-
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7702
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7703
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
7704
|
-
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
7055
|
+
var _templateObject$P, _templateObject2$D, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
|
|
7056
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
7057
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
7058
|
+
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7059
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7060
|
+
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7061
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7062
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
7063
|
+
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7705
7064
|
|
|
7706
|
-
var _excluded$
|
|
7065
|
+
var _excluded$i = ["text"];
|
|
7707
7066
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
7708
7067
|
var children = _ref.children,
|
|
7709
7068
|
text = _ref.text,
|
|
@@ -7721,7 +7080,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7721
7080
|
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
7722
7081
|
var _ref2 = link || {},
|
|
7723
7082
|
linkText = _ref2.text,
|
|
7724
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7083
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
|
|
7725
7084
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
7726
7085
|
bgUrlDesktop: bgUrlDesktop,
|
|
7727
7086
|
bgUrlDevice: bgUrlDevice,
|
|
@@ -7764,21 +7123,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7764
7123
|
}, "Scroll Down"))) : null);
|
|
7765
7124
|
};
|
|
7766
7125
|
|
|
7767
|
-
var _templateObject$
|
|
7768
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7126
|
+
var _templateObject$Q, _templateObject2$E, _templateObject3$t, _templateObject4$p, _templateObject5$k;
|
|
7127
|
+
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
7769
7128
|
var color = _ref.color;
|
|
7770
7129
|
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 ";
|
|
7771
7130
|
}, devices.mobileAndTablet);
|
|
7772
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7131
|
+
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
7773
7132
|
var hasImage = _ref2.hasImage;
|
|
7774
7133
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7775
7134
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7776
7135
|
var hasImage = _ref3.hasImage;
|
|
7777
7136
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7778
7137
|
});
|
|
7779
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7780
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7781
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7138
|
+
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
7139
|
+
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
7140
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7782
7141
|
|
|
7783
7142
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7784
7143
|
var _image$src, _image$alt;
|
|
@@ -7808,36 +7167,36 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7808
7167
|
})))));
|
|
7809
7168
|
};
|
|
7810
7169
|
|
|
7811
|
-
var _templateObject$
|
|
7812
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$
|
|
7813
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7814
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7815
|
-
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7816
|
-
var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7170
|
+
var _templateObject$R, _templateObject2$F, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$e, _templateObject7$a, _templateObject8$6, _templateObject9$3, _templateObject0$3, _templateObject1$2;
|
|
7171
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
7172
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
7173
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7174
|
+
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
7175
|
+
var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
|
|
7817
7176
|
var theme = _ref.theme;
|
|
7818
7177
|
return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
7819
7178
|
}, function (_ref2) {
|
|
7820
7179
|
var showBlock = _ref2.showBlock;
|
|
7821
7180
|
return showBlock ? 'block' : 'none';
|
|
7822
7181
|
}, devices.mobile);
|
|
7823
|
-
var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7824
|
-
var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
7182
|
+
var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
|
|
7183
|
+
var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
|
|
7825
7184
|
var isBadgePresent = _ref3.isBadgePresent;
|
|
7826
7185
|
return isBadgePresent ? '1' : '4';
|
|
7827
7186
|
});
|
|
7828
|
-
var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
7187
|
+
var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: end;\n width: 200px;\n\n @media ", " {\n margin-bottom: ", ";\n width: 100%;\n order: 3;\n }\n"])), devices.mobile, function (_ref4) {
|
|
7829
7188
|
var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
|
|
7830
7189
|
return isAdditionalButtonPresent ? '20px' : '0';
|
|
7831
7190
|
});
|
|
7832
|
-
var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
7833
|
-
var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
7191
|
+
var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
|
|
7192
|
+
var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 10px 0;\n\n h1,\n h2,\n h3 {\n color: ", ";\n }\n\n @media ", " {\n padding: 0;\n order: 2;\n margin-bottom: ", ";\n }\n"])), function (_ref5) {
|
|
7834
7193
|
var theme = _ref5.theme;
|
|
7835
7194
|
return theme == exports.ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
|
|
7836
7195
|
}, devices.mobile, function (_ref6) {
|
|
7837
7196
|
var isButtonPresent = _ref6.isButtonPresent;
|
|
7838
7197
|
return isButtonPresent ? '20px' : '0';
|
|
7839
7198
|
});
|
|
7840
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$
|
|
7199
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n min-height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
|
|
7841
7200
|
|
|
7842
7201
|
var PageHeadingPromoBadge;
|
|
7843
7202
|
(function (PageHeadingPromoBadge) {
|
|
@@ -8022,7 +7381,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8022
7381
|
})))))))))));
|
|
8023
7382
|
};
|
|
8024
7383
|
|
|
8025
|
-
var _templateObject$
|
|
7384
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$v, _templateObject4$r;
|
|
8026
7385
|
var GRID = {
|
|
8027
7386
|
desktop: {
|
|
8028
7387
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8035,19 +7394,19 @@ var GRID = {
|
|
|
8035
7394
|
right: '2 / 1 / 3 / 15'
|
|
8036
7395
|
}
|
|
8037
7396
|
};
|
|
8038
|
-
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7397
|
+
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8039
7398
|
var $background = _ref.$background;
|
|
8040
7399
|
return "var(--color-" + $background + ")";
|
|
8041
7400
|
});
|
|
8042
|
-
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7401
|
+
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8043
7402
|
var hasImage = _ref2.hasImage;
|
|
8044
7403
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8045
7404
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8046
7405
|
var hasImage = _ref3.hasImage;
|
|
8047
7406
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8048
7407
|
});
|
|
8049
|
-
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8050
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7408
|
+
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
7409
|
+
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8051
7410
|
|
|
8052
7411
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
8053
7412
|
var _image$src, _image$alt;
|
|
@@ -8070,12 +7429,12 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8070
7429
|
})))));
|
|
8071
7430
|
};
|
|
8072
7431
|
|
|
8073
|
-
var _templateObject$
|
|
8074
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8075
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8076
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8077
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8078
|
-
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$
|
|
7432
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$w, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4;
|
|
7433
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
7434
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
7435
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
7436
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
7437
|
+
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8079
7438
|
var invert = _ref.invert,
|
|
8080
7439
|
theme = _ref.theme;
|
|
8081
7440
|
return invert ? theme.colors.white : theme.colors.primary;
|
|
@@ -8091,10 +7450,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
|
|
|
8091
7450
|
var theme = _ref4.theme;
|
|
8092
7451
|
return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
|
|
8093
7452
|
}, devices.tablet, devices.mobile);
|
|
8094
|
-
var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
8095
|
-
var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
8096
|
-
var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
8097
|
-
var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$
|
|
7453
|
+
var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
|
|
7454
|
+
var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
|
|
7455
|
+
var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
|
|
7456
|
+
var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$4 || (_templateObject0$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
|
|
8098
7457
|
var invert = _ref5.invert,
|
|
8099
7458
|
theme = _ref5.theme;
|
|
8100
7459
|
return invert ? theme.colors.primary : theme.colors.white;
|
|
@@ -8174,173 +7533,562 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
|
|
|
8174
7533
|
return null;
|
|
8175
7534
|
}
|
|
8176
7535
|
};
|
|
8177
|
-
var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
8178
|
-
var brandingStyle = _ref.brandingStyle,
|
|
8179
|
-
_ref$invert = _ref.invert,
|
|
8180
|
-
invert = _ref$invert === void 0 ? false : _ref$invert,
|
|
8181
|
-
brandingText = _ref.brandingText,
|
|
8182
|
-
brandingLink = _ref.brandingLink;
|
|
8183
|
-
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
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;
|
|
8184
7748
|
};
|
|
8185
7749
|
|
|
8186
|
-
var _excluded$
|
|
8187
|
-
var
|
|
8188
|
-
|
|
8189
|
-
|
|
8190
|
-
|
|
8191
|
-
|
|
8192
|
-
|
|
8193
|
-
|
|
8194
|
-
|
|
8195
|
-
var
|
|
8196
|
-
|
|
8197
|
-
|
|
8198
|
-
|
|
7750
|
+
var _excluded$k = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
|
|
7751
|
+
var MAX_CLONES_NUMBER = 6;
|
|
7752
|
+
var CLICK_DRAG_THRESHOLD = 10;
|
|
7753
|
+
var getClonesCount = function getClonesCount(infinite, childrenLength) {
|
|
7754
|
+
if (!infinite) return 0;
|
|
7755
|
+
return Math.min(childrenLength, MAX_CLONES_NUMBER);
|
|
7756
|
+
};
|
|
7757
|
+
var getSlidedWidth = function getSlidedWidth(slide) {
|
|
7758
|
+
if (!slide) return 0;
|
|
7759
|
+
var style = window.getComputedStyle(slide);
|
|
7760
|
+
var marginLeft = parseFloat(style.marginLeft) || 0;
|
|
7761
|
+
var marginRight = parseFloat(style.marginRight) || 0;
|
|
7762
|
+
return slide.getBoundingClientRect().width + marginLeft + marginRight;
|
|
7763
|
+
};
|
|
7764
|
+
var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
7765
|
+
var children = _ref.children,
|
|
7766
|
+
_ref$infinite = _ref.infinite,
|
|
7767
|
+
infinite = _ref$infinite === void 0 ? false : _ref$infinite,
|
|
7768
|
+
onIndexChange = _ref.onIndexChange,
|
|
7769
|
+
_ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
|
|
7770
|
+
slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
|
|
7771
|
+
_ref$slidesAriaHidden = _ref.slidesAriaHidden,
|
|
7772
|
+
slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
|
|
7773
|
+
onActiveChange = _ref.onActiveChange,
|
|
7774
|
+
onOverflowChange = _ref.onOverflowChange,
|
|
7775
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
|
|
7776
|
+
var containerRef = React.useRef(null);
|
|
7777
|
+
var childRefs = React.useRef([]);
|
|
7778
|
+
var startX = React.useRef(0);
|
|
7779
|
+
var currentTranslate = React.useRef(0);
|
|
7780
|
+
var isDragging = React.useRef(false);
|
|
7781
|
+
var isMouseDown = React.useRef(false);
|
|
7782
|
+
var isActive = React.useRef(false);
|
|
7783
|
+
var isClickPrevented = React.useRef(false);
|
|
7784
|
+
var uniqueIdRef = React.useRef(generateDomElementId());
|
|
7785
|
+
var _useState = React.useState(null),
|
|
7786
|
+
dragTranslateX = _useState[0],
|
|
7787
|
+
setDragTranslateX = _useState[1];
|
|
7788
|
+
var _useState2 = React.useState(false),
|
|
7789
|
+
transitioning = _useState2[0],
|
|
7790
|
+
setTransitioning = _useState2[1];
|
|
7791
|
+
var _useState3 = React.useState([]),
|
|
7792
|
+
slideWidths = _useState3[0],
|
|
7793
|
+
setSlideWidths = _useState3[1];
|
|
7794
|
+
var _useState4 = React.useState(0),
|
|
7795
|
+
containerWidth = _useState4[0],
|
|
7796
|
+
setContainerWidth = _useState4[1];
|
|
7797
|
+
var _useMemo = React.useMemo(function () {
|
|
7798
|
+
var count = getClonesCount(infinite, children.length);
|
|
7799
|
+
var leftClones = infinite ? children.slice(-count) : [];
|
|
7800
|
+
var rightClones = infinite ? children.slice(0, count) : [];
|
|
7801
|
+
var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
|
|
7802
|
+
return {
|
|
7803
|
+
slides: allSlides,
|
|
7804
|
+
clonesCount: count
|
|
7805
|
+
};
|
|
7806
|
+
}, [children, infinite]),
|
|
7807
|
+
slides = _useMemo.slides,
|
|
7808
|
+
clonesCount = _useMemo.clonesCount;
|
|
7809
|
+
var _useState5 = React.useState(infinite ? clonesCount : 0),
|
|
7810
|
+
currentIndex = _useState5[0],
|
|
7811
|
+
setCurrentIndex = _useState5[1];
|
|
8199
7812
|
React.useEffect(function () {
|
|
8200
|
-
|
|
8201
|
-
|
|
8202
|
-
|
|
8203
|
-
|
|
8204
|
-
|
|
8205
|
-
|
|
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
|
+
});
|
|
8206
7958
|
};
|
|
8207
|
-
|
|
8208
|
-
|
|
8209
|
-
|
|
8210
|
-
|
|
8211
|
-
|
|
8212
|
-
|
|
8213
|
-
|
|
8214
|
-
|
|
8215
|
-
|
|
8216
|
-
|
|
8217
|
-
|
|
8218
|
-
|
|
8219
|
-
|
|
8220
|
-
|
|
8221
|
-
|
|
8222
|
-
"data-testid": "compact-video",
|
|
8223
|
-
playsInline: true
|
|
8224
|
-
}, /*#__PURE__*/React__default.createElement("source", {
|
|
8225
|
-
src: videoUrl
|
|
8226
|
-
}), /*#__PURE__*/React__default.createElement("img", {
|
|
8227
|
-
src: posterUrl,
|
|
8228
|
-
alt: poster.alt,
|
|
8229
|
-
"data-testid": "compact-image"
|
|
8230
|
-
})), /*#__PURE__*/React__default.createElement(VideoControls, {
|
|
8231
|
-
loop: true,
|
|
8232
|
-
videoElementId: video.elementId,
|
|
8233
|
-
muted: true,
|
|
8234
|
-
autoPlay: false,
|
|
8235
|
-
soundControl: !isIOS
|
|
8236
|
-
}));
|
|
8237
|
-
};
|
|
8238
|
-
var CompactHeaderImage = function CompactHeaderImage(_ref2) {
|
|
8239
|
-
var mobile = _ref2.mobile,
|
|
8240
|
-
desktop = _ref2.desktop,
|
|
8241
|
-
alt = _ref2.alt;
|
|
8242
|
-
return /*#__PURE__*/React__default.createElement("picture", {
|
|
8243
|
-
"data-testid": "compact-picture"
|
|
8244
|
-
}, mobile && /*#__PURE__*/React__default.createElement("source", {
|
|
8245
|
-
srcSet: mobile,
|
|
8246
|
-
media: "" + devices.mobile,
|
|
8247
|
-
"data-testid": "compact-mobile-image-source"
|
|
8248
|
-
}), /*#__PURE__*/React__default.createElement("source", {
|
|
8249
|
-
srcSet: desktop,
|
|
8250
|
-
media: "" + devices.desktop,
|
|
8251
|
-
"data-testid": "compact-desktop-image-source"
|
|
8252
|
-
}), /*#__PURE__*/React__default.createElement("img", {
|
|
8253
|
-
src: desktop,
|
|
8254
|
-
alt: alt,
|
|
8255
|
-
"data-testid": "compact-image"
|
|
8256
|
-
}));
|
|
8257
|
-
};
|
|
8258
|
-
var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
|
|
8259
|
-
var video = _ref3.video,
|
|
8260
|
-
poster = _ref3.poster;
|
|
8261
|
-
if (!video.desktop && !video.mobile) {
|
|
8262
|
-
return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
|
|
8263
|
-
}
|
|
8264
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8265
|
-
video: video,
|
|
8266
|
-
poster: poster
|
|
7959
|
+
React.useImperativeHandle(ref, function () {
|
|
7960
|
+
return {
|
|
7961
|
+
nextSlide: goToNext,
|
|
7962
|
+
prevSlide: goToPrev,
|
|
7963
|
+
hasOverflow: function hasOverflow() {
|
|
7964
|
+
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
7965
|
+
return acc + w;
|
|
7966
|
+
}, 0);
|
|
7967
|
+
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
7968
|
+
return totalWidth > Math.max(0, visibleSpace);
|
|
7969
|
+
},
|
|
7970
|
+
hasNext: function hasNext() {
|
|
7971
|
+
return canMoveNext();
|
|
7972
|
+
}
|
|
7973
|
+
};
|
|
8267
7974
|
});
|
|
8268
|
-
|
|
8269
|
-
|
|
8270
|
-
|
|
8271
|
-
|
|
8272
|
-
|
|
8273
|
-
|
|
8274
|
-
customSponsorImage = _ref4.customSponsorImage,
|
|
8275
|
-
bgUrlDesktop = _ref4.bgUrlDesktop,
|
|
8276
|
-
bgUrlDevice = _ref4.bgUrlDevice,
|
|
8277
|
-
videoUrlDesktop = _ref4.videoUrlDesktop,
|
|
8278
|
-
videoUrlMobile = _ref4.videoUrlMobile,
|
|
8279
|
-
_ref4$bgImageAltText = _ref4.bgImageAltText,
|
|
8280
|
-
bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
|
|
8281
|
-
_ref4$invert = _ref4.invert,
|
|
8282
|
-
invert = _ref4$invert === void 0 ? false : _ref4$invert,
|
|
8283
|
-
_ref4$brandingStyle = _ref4.brandingStyle,
|
|
8284
|
-
brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
|
|
8285
|
-
brandingText = _ref4.brandingText,
|
|
8286
|
-
brandingLink = _ref4.brandingLink,
|
|
8287
|
-
_ref4$showCopy = _ref4.showCopy,
|
|
8288
|
-
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
|
|
8289
|
-
var _ref5 = link || {},
|
|
8290
|
-
linkText = _ref5.text,
|
|
8291
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
|
|
8292
|
-
// const titleSize = title && title.length > 20 ? 4 : 3;
|
|
8293
|
-
var video = {
|
|
8294
|
-
elementId: 'compact-header-video',
|
|
8295
|
-
desktop: videoUrlDesktop,
|
|
8296
|
-
mobile: videoUrlMobile
|
|
7975
|
+
var handleTouchStart = function handleTouchStart(e) {
|
|
7976
|
+
setIsActive();
|
|
7977
|
+
startX.current = e.touches[0].clientX;
|
|
7978
|
+
isDragging.current = true;
|
|
7979
|
+
isClickPrevented.current = false;
|
|
7980
|
+
setTransitioning(false);
|
|
8297
7981
|
};
|
|
8298
|
-
var
|
|
8299
|
-
|
|
8300
|
-
|
|
8301
|
-
|
|
7982
|
+
var handleTouchMove = function handleTouchMove(e) {
|
|
7983
|
+
if (!isDragging.current) return;
|
|
7984
|
+
var deltaX = e.touches[0].clientX - startX.current;
|
|
7985
|
+
if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
|
|
7986
|
+
isClickPrevented.current = true;
|
|
7987
|
+
}
|
|
7988
|
+
var visualOffset = getTranslateX() + deltaX;
|
|
7989
|
+
currentTranslate.current = visualOffset;
|
|
7990
|
+
setDragTranslateX(visualOffset);
|
|
8302
7991
|
};
|
|
8303
|
-
|
|
8304
|
-
|
|
8305
|
-
|
|
8306
|
-
|
|
8307
|
-
|
|
8308
|
-
|
|
8309
|
-
|
|
8310
|
-
}
|
|
8311
|
-
|
|
8312
|
-
|
|
8313
|
-
|
|
8314
|
-
|
|
8315
|
-
|
|
8316
|
-
|
|
8317
|
-
|
|
8318
|
-
|
|
8319
|
-
|
|
8320
|
-
|
|
8321
|
-
|
|
8322
|
-
|
|
8323
|
-
|
|
8324
|
-
|
|
8325
|
-
|
|
7992
|
+
var handleTouchEnd = function handleTouchEnd() {
|
|
7993
|
+
isDragging.current = false;
|
|
7994
|
+
if (isClickPrevented.current) {
|
|
7995
|
+
navigateOnSwipeEnd();
|
|
7996
|
+
} else {
|
|
7997
|
+
setDragTranslateX(null);
|
|
7998
|
+
}
|
|
7999
|
+
};
|
|
8000
|
+
var handleMouseMove = function handleMouseMove(e) {
|
|
8001
|
+
if (!isDragging.current || !isMouseDown.current || transitioning) return;
|
|
8002
|
+
var deltaX = e.clientX - startX.current;
|
|
8003
|
+
if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
|
|
8004
|
+
isClickPrevented.current = true;
|
|
8005
|
+
}
|
|
8006
|
+
var visualOffset = getTranslateX() + deltaX;
|
|
8007
|
+
currentTranslate.current = visualOffset;
|
|
8008
|
+
setDragTranslateX(visualOffset);
|
|
8009
|
+
};
|
|
8010
|
+
var _handleMouseUp = function handleMouseUp() {
|
|
8011
|
+
if (!isMouseDown.current) return;
|
|
8012
|
+
isMouseDown.current = false;
|
|
8013
|
+
isDragging.current = false;
|
|
8014
|
+
if (isClickPrevented.current) {
|
|
8015
|
+
navigateOnSwipeEnd();
|
|
8016
|
+
} else {
|
|
8017
|
+
setDragTranslateX(null);
|
|
8018
|
+
}
|
|
8019
|
+
window.removeEventListener('mousemove', handleMouseMove);
|
|
8020
|
+
window.removeEventListener('mouseup', _handleMouseUp);
|
|
8021
|
+
};
|
|
8022
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
8023
|
+
if (transitioning || e.button !== 0) return;
|
|
8024
|
+
e.preventDefault();
|
|
8025
|
+
setIsActive();
|
|
8026
|
+
startX.current = e.clientX;
|
|
8027
|
+
isDragging.current = true;
|
|
8028
|
+
isMouseDown.current = true;
|
|
8029
|
+
isClickPrevented.current = false;
|
|
8030
|
+
setTransitioning(false);
|
|
8031
|
+
window.addEventListener('mousemove', handleMouseMove);
|
|
8032
|
+
window.addEventListener('mouseup', _handleMouseUp);
|
|
8033
|
+
};
|
|
8034
|
+
var onSlideFocus = function onSlideFocus(isVisible, index) {
|
|
8035
|
+
if (!isVisible) {
|
|
8036
|
+
setCurrentIndex(index);
|
|
8037
|
+
}
|
|
8038
|
+
};
|
|
8039
|
+
var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
8040
|
+
return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
|
|
8041
|
+
ref: containerRef,
|
|
8042
|
+
className: "swipe",
|
|
8043
|
+
onTouchStart: handleTouchStart,
|
|
8044
|
+
onTouchMove: handleTouchMove,
|
|
8045
|
+
onTouchEnd: handleTouchEnd,
|
|
8046
|
+
onMouseDown: handleMouseDown,
|
|
8047
|
+
"aria-roledescription": "carousel",
|
|
8048
|
+
role: "list"
|
|
8049
|
+
}, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
|
|
8050
|
+
className: "swipe-track-wrapper",
|
|
8051
|
+
translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
|
|
8052
|
+
transitioning: transitioning && dragTranslateX === null,
|
|
8053
|
+
onTransitionEnd: handleTransitionEnd
|
|
8054
|
+
}, slides.map(function (child, index) {
|
|
8055
|
+
var isVisible = visibleIndexes.includes(index);
|
|
8056
|
+
var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
|
|
8057
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
8058
|
+
key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
|
|
8059
|
+
className: SWIPE_SLIDE_CLASS_NAME,
|
|
8060
|
+
"aria-hidden": slidesAriaHidden || isClone,
|
|
8061
|
+
"aria-roledescription": "slide",
|
|
8062
|
+
role: "listitem",
|
|
8063
|
+
ref: function ref(el) {
|
|
8064
|
+
childRefs.current[index] = el;
|
|
8065
|
+
disableTabbingInside(el, isClone);
|
|
8066
|
+
},
|
|
8067
|
+
onFocus: function onFocus() {
|
|
8068
|
+
return onSlideFocus(isVisible, index);
|
|
8069
|
+
}
|
|
8070
|
+
}, child);
|
|
8071
|
+
})));
|
|
8072
|
+
});
|
|
8073
|
+
Swipe.displayName = 'Swipe';
|
|
8326
8074
|
|
|
8327
|
-
var _templateObject$
|
|
8328
|
-
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8329
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8330
|
-
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8331
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8075
|
+
var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$g, _templateObject7$c;
|
|
8076
|
+
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8077
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8078
|
+
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8079
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8332
8080
|
var hasImages = _ref.hasImages;
|
|
8333
8081
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8334
8082
|
}, devices.mobile, function (_ref2) {
|
|
8335
8083
|
var hasImages = _ref2.hasImages;
|
|
8336
8084
|
return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8337
8085
|
});
|
|
8338
|
-
var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8086
|
+
var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n .swipe-slide {\n ", "\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), function (_ref3) {
|
|
8339
8087
|
var hasMultipleImages = _ref3.hasMultipleImages;
|
|
8340
8088
|
return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
|
|
8341
8089
|
}, devices.mobile);
|
|
8342
|
-
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8343
|
-
var RotatorButtonsWrapper
|
|
8090
|
+
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin-top: 8px;\n margin-bottom: 8px;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white) !important;\n }\n\n & {\n display: flex;\n margin-left: 100px;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
|
|
8091
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
8344
8092
|
|
|
8345
8093
|
/* eslint-disable react/no-danger */
|
|
8346
8094
|
var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
@@ -8383,7 +8131,7 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8383
8131
|
}
|
|
8384
8132
|
})))) : null), hasImages && (/*#__PURE__*/React__default.createElement(HighlightsCarouselWrapper, {
|
|
8385
8133
|
hasMultipleImages: hasMultipleImages
|
|
8386
|
-
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper
|
|
8134
|
+
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
8387
8135
|
"data-testid": "rotator-buttons"
|
|
8388
8136
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
8389
8137
|
onClickNext: onNext,
|
|
@@ -8403,14 +8151,14 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8403
8151
|
}))))));
|
|
8404
8152
|
};
|
|
8405
8153
|
|
|
8406
|
-
var _templateObject$
|
|
8407
|
-
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8408
|
-
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
8409
|
-
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8410
|
-
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$
|
|
8411
|
-
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$
|
|
8412
|
-
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$
|
|
8413
|
-
var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$
|
|
8154
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$o, _templateObject6$h, _templateObject7$d, _templateObject8$8;
|
|
8155
|
+
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
8156
|
+
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8157
|
+
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8158
|
+
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
8159
|
+
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8160
|
+
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8161
|
+
var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
|
|
8414
8162
|
var active = _ref.active;
|
|
8415
8163
|
return active ? "var(--color-primary-red)" : 'inherit';
|
|
8416
8164
|
}, function (_ref2) {
|
|
@@ -8562,16 +8310,16 @@ var Pagination = function Pagination(_ref) {
|
|
|
8562
8310
|
}))))));
|
|
8563
8311
|
};
|
|
8564
8312
|
|
|
8565
|
-
var _templateObject$
|
|
8566
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8313
|
+
var _templateObject$X;
|
|
8314
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8567
8315
|
|
|
8568
|
-
var _templateObject$
|
|
8569
|
-
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8570
|
-
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$
|
|
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"])));
|
|
8571
8319
|
|
|
8572
|
-
var _templateObject$
|
|
8573
|
-
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$
|
|
8574
|
-
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
8320
|
+
var _templateObject$Z, _templateObject2$M;
|
|
8321
|
+
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
|
|
8322
|
+
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8575
8323
|
|
|
8576
8324
|
var Person = function Person(_ref) {
|
|
8577
8325
|
var person = _ref.person,
|
|
@@ -8610,9 +8358,9 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8610
8358
|
})));
|
|
8611
8359
|
};
|
|
8612
8360
|
|
|
8613
|
-
var _templateObject
|
|
8614
|
-
var PersonWrapper
|
|
8615
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8361
|
+
var _templateObject$_, _templateObject2$N;
|
|
8362
|
+
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8363
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
|
|
8616
8364
|
|
|
8617
8365
|
var PersonCard = function PersonCard(_ref) {
|
|
8618
8366
|
var role = _ref.role,
|
|
@@ -8622,7 +8370,7 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8622
8370
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
8623
8371
|
return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
|
|
8624
8372
|
}, [role]);
|
|
8625
|
-
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper
|
|
8373
|
+
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper, {
|
|
8626
8374
|
className: className
|
|
8627
8375
|
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
|
|
8628
8376
|
src: role.people[0].headshot,
|
|
@@ -8650,14 +8398,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8650
8398
|
}));
|
|
8651
8399
|
};
|
|
8652
8400
|
|
|
8653
|
-
var _templateObject
|
|
8654
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8655
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
8401
|
+
var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$t;
|
|
8402
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8403
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8656
8404
|
var columnCount = _ref.columnCount;
|
|
8657
8405
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8658
8406
|
}, devices.mobile, devices.tablet);
|
|
8659
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8660
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8407
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
8408
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8661
8409
|
|
|
8662
8410
|
// Get the total character length of a property in an array of objects
|
|
8663
8411
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8784,8 +8532,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8784
8532
|
}, creditEntries);
|
|
8785
8533
|
};
|
|
8786
8534
|
|
|
8787
|
-
var _templateObject$
|
|
8788
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$
|
|
8535
|
+
var _templateObject$10;
|
|
8536
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
8789
8537
|
|
|
8790
8538
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
8791
8539
|
var items = _ref.items;
|
|
@@ -8803,14 +8551,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
8803
8551
|
}));
|
|
8804
8552
|
};
|
|
8805
8553
|
|
|
8806
|
-
var _templateObject$
|
|
8554
|
+
var _templateObject$11, _templateObject3$A, _templateObject4$u, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9, _templateObject9$5, _templateObject0$5, _templateObject1$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
8807
8555
|
var LENGTH_TEXT = 28;
|
|
8808
8556
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8809
8557
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8810
8558
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8811
8559
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8812
8560
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8813
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8561
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8814
8562
|
var imageToLeft = _ref.imageToLeft;
|
|
8815
8563
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8816
8564
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8820,7 +8568,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 ||
|
|
|
8820
8568
|
var asCard = _ref3.asCard;
|
|
8821
8569
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8822
8570
|
});
|
|
8823
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8571
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
8824
8572
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
8825
8573
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8826
8574
|
}, function (_ref5) {
|
|
@@ -8844,21 +8592,21 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$B ||
|
|
|
8844
8592
|
}
|
|
8845
8593
|
return '';
|
|
8846
8594
|
});
|
|
8847
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8595
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
8848
8596
|
var marginBottom = _ref7.marginBottom;
|
|
8849
8597
|
return marginBottom + "px";
|
|
8850
8598
|
}, function (_ref8) {
|
|
8851
8599
|
var mobileMarginBottom = _ref8.mobileMarginBottom;
|
|
8852
8600
|
return mobileMarginBottom && "\n @media " + devices.mobile + " {\n margin-bottom: " + mobileMarginBottom + "px;\n }\n ";
|
|
8853
8601
|
});
|
|
8854
|
-
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8855
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8856
|
-
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
8857
|
-
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
8858
|
-
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
8859
|
-
var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
8860
|
-
var asCardOverrides = /*#__PURE__*/styled.css(_templateObject1$
|
|
8861
|
-
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject10$
|
|
8602
|
+
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
8603
|
+
var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
8604
|
+
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
8605
|
+
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
8606
|
+
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
8607
|
+
var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
8608
|
+
var asCardOverrides = /*#__PURE__*/styled.css(_templateObject1$3 || (_templateObject1$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n"])), ButtonsContainer$2, devices.tablet);
|
|
8609
|
+
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref9) {
|
|
8862
8610
|
var imageToLeft = _ref9.imageToLeft;
|
|
8863
8611
|
return imageToLeft ? 'left' : 'right';
|
|
8864
8612
|
}, devices.mobile);
|
|
@@ -8879,12 +8627,12 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_te
|
|
|
8879
8627
|
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);
|
|
8880
8628
|
var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
8881
8629
|
|
|
8882
|
-
var _excluded$
|
|
8630
|
+
var _excluded$l = ["text"],
|
|
8883
8631
|
_excluded2$2 = ["text"],
|
|
8884
8632
|
_excluded3$1 = ["text"];
|
|
8885
8633
|
var _buttonTypeToButton$1;
|
|
8886
8634
|
var LENGTH_TEXT$1 = 28;
|
|
8887
|
-
var LENGTH_TEXT_PARAGRAPH =
|
|
8635
|
+
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
8888
8636
|
var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
|
|
8889
8637
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
8890
8638
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -8947,7 +8695,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8947
8695
|
var _ref2 = firstButton || {},
|
|
8948
8696
|
_ref2$text = _ref2.text,
|
|
8949
8697
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
8950
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
8698
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
8951
8699
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
8952
8700
|
var secondButton = links == null ? void 0 : links[1];
|
|
8953
8701
|
var _ref3 = secondButton || {},
|
|
@@ -9075,28 +8823,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9075
8823
|
}))));
|
|
9076
8824
|
};
|
|
9077
8825
|
|
|
9078
|
-
var _templateObject$
|
|
8826
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f;
|
|
9079
8827
|
var LENGTH_TEXT$2 = 28;
|
|
9080
8828
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9081
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8829
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9082
8830
|
var imageToLeft = _ref.imageToLeft;
|
|
9083
8831
|
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'";
|
|
9084
8832
|
}, devices.tablet, function (_ref2) {
|
|
9085
8833
|
var imageToLeft = _ref2.imageToLeft;
|
|
9086
8834
|
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'";
|
|
9087
8835
|
}, devices.mobile);
|
|
9088
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8836
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9089
8837
|
var imageToLeft = _ref3.imageToLeft;
|
|
9090
8838
|
return imageToLeft ? 'left' : 'right';
|
|
9091
8839
|
}, devices.mobile);
|
|
9092
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8840
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
9093
8841
|
var imageToLeft = _ref4.imageToLeft;
|
|
9094
8842
|
return imageToLeft ? 'right' : 'left';
|
|
9095
8843
|
}, devices.mobile);
|
|
9096
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$
|
|
9097
|
-
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$
|
|
9098
|
-
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$
|
|
9099
|
-
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
8844
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
8845
|
+
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
8846
|
+
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
8847
|
+
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
|
|
9100
8848
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
9101
8849
|
primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
|
|
9102
8850
|
_ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
|
|
@@ -9118,8 +8866,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
|
|
|
9118
8866
|
return '';
|
|
9119
8867
|
});
|
|
9120
8868
|
|
|
9121
|
-
var _templateObject$
|
|
9122
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8869
|
+
var _templateObject$13;
|
|
8870
|
+
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
9123
8871
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9124
8872
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9125
8873
|
return aspectRatio;
|
|
@@ -9231,7 +8979,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9231
8979
|
}));
|
|
9232
8980
|
};
|
|
9233
8981
|
|
|
9234
|
-
var _excluded$
|
|
8982
|
+
var _excluded$m = ["text"],
|
|
9235
8983
|
_excluded2$3 = ["text"];
|
|
9236
8984
|
var LENGTH_TEXT$3 = 28;
|
|
9237
8985
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
@@ -9258,7 +9006,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9258
9006
|
var _ref2 = primaryButton || {},
|
|
9259
9007
|
_ref2$text = _ref2.text,
|
|
9260
9008
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9261
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9009
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
|
|
9262
9010
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
9263
9011
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
9264
9012
|
var _ref3 = tertiaryButton || {},
|
|
@@ -9301,8 +9049,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9301
9049
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9302
9050
|
};
|
|
9303
9051
|
|
|
9304
|
-
var _templateObject$
|
|
9305
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9052
|
+
var _templateObject$14;
|
|
9053
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9306
9054
|
|
|
9307
9055
|
/**
|
|
9308
9056
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9357,9 +9105,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9357
9105
|
})));
|
|
9358
9106
|
};
|
|
9359
9107
|
|
|
9360
|
-
var _templateObject$
|
|
9361
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9362
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9108
|
+
var _templateObject$15, _templateObject2$Q, _templateObject3$C;
|
|
9109
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9110
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9363
9111
|
var horizontalMode = _ref.horizontalMode;
|
|
9364
9112
|
if (horizontalMode) return 'row';
|
|
9365
9113
|
return 'column';
|
|
@@ -9367,7 +9115,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_temp
|
|
|
9367
9115
|
var gap = _ref2.gap;
|
|
9368
9116
|
return gap + "px";
|
|
9369
9117
|
});
|
|
9370
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9118
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9371
9119
|
var darkMode = _ref3.darkMode;
|
|
9372
9120
|
if (darkMode) return 'var(--base-color-white)';
|
|
9373
9121
|
return 'var(--base-color-errorstate)';
|
|
@@ -9444,10 +9192,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9444
9192
|
}, error))));
|
|
9445
9193
|
};
|
|
9446
9194
|
|
|
9447
|
-
var _templateObject$
|
|
9448
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9449
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9450
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9195
|
+
var _templateObject$16, _templateObject2$R, _templateObject3$D;
|
|
9196
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9197
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9198
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9451
9199
|
|
|
9452
9200
|
/* eslint-disable react/no-danger */
|
|
9453
9201
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9503,8 +9251,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9503
9251
|
return null;
|
|
9504
9252
|
};
|
|
9505
9253
|
|
|
9506
|
-
var _templateObject$
|
|
9507
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9254
|
+
var _templateObject$17;
|
|
9255
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9508
9256
|
|
|
9509
9257
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9510
9258
|
var HarmonicSize = {
|
|
@@ -9546,8 +9294,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9546
9294
|
}, description)))));
|
|
9547
9295
|
};
|
|
9548
9296
|
|
|
9549
|
-
var _templateObject$
|
|
9550
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
9297
|
+
var _templateObject$18, _templateObject2$S, _templateObject3$E, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4;
|
|
9298
|
+
var stateStyles = /*#__PURE__*/styled.css(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
9551
9299
|
var theme = _ref.theme;
|
|
9552
9300
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9553
9301
|
}, function (_ref2) {
|
|
@@ -9557,12 +9305,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject
|
|
|
9557
9305
|
var theme = _ref3.theme;
|
|
9558
9306
|
return theme.colors.lightgrey;
|
|
9559
9307
|
});
|
|
9560
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
9308
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9561
9309
|
var theme = _ref4.theme;
|
|
9562
9310
|
return theme.colors.darkgrey;
|
|
9563
9311
|
});
|
|
9564
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
9565
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$
|
|
9312
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9313
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9566
9314
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
9567
9315
|
var theme = _ref5.theme;
|
|
9568
9316
|
return {
|
|
@@ -9570,11 +9318,11 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
9570
9318
|
color: theme.colors.black,
|
|
9571
9319
|
title: 'Select Arrow'
|
|
9572
9320
|
};
|
|
9573
|
-
})(_templateObject5$
|
|
9574
|
-
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
9575
|
-
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
9576
|
-
var Options = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
9577
|
-
var Option = /*#__PURE__*/styled__default.li(_templateObject9$
|
|
9321
|
+
})(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
9322
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9323
|
+
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9324
|
+
var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
9325
|
+
var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9578
9326
|
var theme = _ref6.theme,
|
|
9579
9327
|
hover = _ref6.hover;
|
|
9580
9328
|
var _theme$colors = theme.colors,
|
|
@@ -9584,9 +9332,9 @@ var Option = /*#__PURE__*/styled__default.li(_templateObject9$7 || (_templateObj
|
|
|
9584
9332
|
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
9585
9333
|
});
|
|
9586
9334
|
var selectStyles = function selectStyles(width, height) {
|
|
9587
|
-
return styled.css(_templateObject0$
|
|
9335
|
+
return styled.css(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
|
|
9588
9336
|
};
|
|
9589
|
-
var SelectList = /*#__PURE__*/styled__default.ul(_templateObject1$
|
|
9337
|
+
var SelectList = /*#__PURE__*/styled__default.ul(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
9590
9338
|
var width = _ref7.width,
|
|
9591
9339
|
height = _ref7.height;
|
|
9592
9340
|
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
@@ -9927,9 +9675,9 @@ function Select(_ref3) {
|
|
|
9927
9675
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9928
9676
|
}
|
|
9929
9677
|
|
|
9930
|
-
var _templateObject$
|
|
9931
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9932
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9678
|
+
var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x;
|
|
9679
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9680
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9933
9681
|
var width = _ref.width;
|
|
9934
9682
|
if (!width) return 'none';
|
|
9935
9683
|
return width + "px";
|
|
@@ -9946,18 +9694,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_t
|
|
|
9946
9694
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9947
9695
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9948
9696
|
});
|
|
9949
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9697
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9950
9698
|
var darkMode = _ref5.darkMode;
|
|
9951
9699
|
if (darkMode) return "var(--base-color-white)";
|
|
9952
9700
|
return "var(--base-color-black)";
|
|
9953
9701
|
});
|
|
9954
|
-
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9702
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9955
9703
|
var darkMode = _ref6.darkMode;
|
|
9956
9704
|
if (darkMode) return "var(--base-color-white)";
|
|
9957
9705
|
return "var(--base-color-errorstate)";
|
|
9958
9706
|
});
|
|
9959
9707
|
|
|
9960
|
-
var _excluded$
|
|
9708
|
+
var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
9961
9709
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
9962
9710
|
return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
9963
9711
|
iconName: "DropdownArrow"
|
|
@@ -10008,7 +9756,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10008
9756
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10009
9757
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10010
9758
|
components = _ref2.components,
|
|
10011
|
-
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9759
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
|
|
10012
9760
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10013
9761
|
label: label,
|
|
10014
9762
|
error: error,
|
|
@@ -10026,7 +9774,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10026
9774
|
})));
|
|
10027
9775
|
};
|
|
10028
9776
|
|
|
10029
|
-
var _excluded$
|
|
9777
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "components"];
|
|
10030
9778
|
/**
|
|
10031
9779
|
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
10032
9780
|
* component for select instead of regular react-select component. This can be used
|
|
@@ -10048,7 +9796,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10048
9796
|
_ref$darkMode = _ref.darkMode,
|
|
10049
9797
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
10050
9798
|
components = _ref.components,
|
|
10051
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9799
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
|
|
10052
9800
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10053
9801
|
label: label,
|
|
10054
9802
|
error: error,
|
|
@@ -10065,24 +9813,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10065
9813
|
})));
|
|
10066
9814
|
};
|
|
10067
9815
|
|
|
10068
|
-
var _templateObject$
|
|
10069
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10070
|
-
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$
|
|
10071
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9816
|
+
var _templateObject$1a, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
|
|
9817
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
9818
|
+
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
9819
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
10072
9820
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10073
9821
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10074
9822
|
}, function (_ref2) {
|
|
10075
9823
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
10076
9824
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
10077
9825
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
10078
|
-
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9826
|
+
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
|
|
10079
9827
|
var singleChild = _ref3.singleChild;
|
|
10080
9828
|
return singleChild ? '0' : '10px';
|
|
10081
9829
|
});
|
|
10082
|
-
var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$
|
|
10083
|
-
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10084
|
-
var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$
|
|
10085
|
-
var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$
|
|
9830
|
+
var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
9831
|
+
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
9832
|
+
var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
|
|
9833
|
+
var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
|
|
10086
9834
|
|
|
10087
9835
|
// Set max. character length
|
|
10088
9836
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -10171,8 +9919,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10171
9919
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10172
9920
|
};
|
|
10173
9921
|
|
|
10174
|
-
var _templateObject$
|
|
10175
|
-
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
9922
|
+
var _templateObject$1b, _templateObject2$U, _templateObject3$H;
|
|
9923
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
10176
9924
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10177
9925
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10178
9926
|
return aspectRatio;
|
|
@@ -10182,10 +9930,10 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_temp
|
|
|
10182
9930
|
height = _ref2.height;
|
|
10183
9931
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10184
9932
|
});
|
|
10185
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
10186
|
-
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$
|
|
9933
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
9934
|
+
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
10187
9935
|
|
|
10188
|
-
var _excluded$
|
|
9936
|
+
var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10189
9937
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
10190
9938
|
var caption = _ref.caption,
|
|
10191
9939
|
altText = _ref.altText,
|
|
@@ -10195,7 +9943,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10195
9943
|
loading = _ref.loading,
|
|
10196
9944
|
aspectRatio = _ref.aspectRatio,
|
|
10197
9945
|
className = _ref.className,
|
|
10198
|
-
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9946
|
+
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
|
|
10199
9947
|
return /*#__PURE__*/React__default.createElement(Wrapper$7, Object.assign({
|
|
10200
9948
|
aspectRatio: aspectRatio,
|
|
10201
9949
|
className: className
|
|
@@ -10216,13 +9964,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10216
9964
|
}, caption))));
|
|
10217
9965
|
};
|
|
10218
9966
|
|
|
10219
|
-
var _templateObject$
|
|
10220
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10221
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10222
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
10223
|
-
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10224
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10225
|
-
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
9967
|
+
var _templateObject$1c, _templateObject2$V, _templateObject3$I, _templateObject4$z, _templateObject5$t, _templateObject6$m;
|
|
9968
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
9969
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
9970
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
9971
|
+
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
9972
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
9973
|
+
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
10226
9974
|
|
|
10227
9975
|
var MiniCard = function MiniCard(_ref) {
|
|
10228
9976
|
var _ref$title = _ref.title,
|
|
@@ -10260,18 +10008,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10260
10008
|
}, title)))));
|
|
10261
10009
|
};
|
|
10262
10010
|
|
|
10263
|
-
var _templateObject$
|
|
10264
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10265
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10266
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10011
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u;
|
|
10012
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
10013
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
10014
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10267
10015
|
var isVisible = _ref.isVisible;
|
|
10268
10016
|
return isVisible ? 'visible' : 'hidden';
|
|
10269
10017
|
});
|
|
10270
|
-
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10018
|
+
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10271
10019
|
var isVisible = _ref2.isVisible;
|
|
10272
10020
|
return isVisible ? 'visible' : 'hidden';
|
|
10273
10021
|
});
|
|
10274
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10022
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
10275
10023
|
|
|
10276
10024
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10277
10025
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10352,15 +10100,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10352
10100
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10353
10101
|
};
|
|
10354
10102
|
|
|
10355
|
-
var _templateObject$
|
|
10356
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$
|
|
10357
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
10358
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
10359
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
10103
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
|
|
10104
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10105
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
|
|
10106
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
10107
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
|
|
10360
10108
|
var isActive = _ref.isActive;
|
|
10361
10109
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10362
10110
|
}, exports.Colors.MidGrey);
|
|
10363
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
10111
|
+
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10364
10112
|
var isOpen = _ref2.isOpen;
|
|
10365
10113
|
return isOpen ? 'block' : 'none';
|
|
10366
10114
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -10516,19 +10264,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10516
10264
|
});
|
|
10517
10265
|
};
|
|
10518
10266
|
|
|
10519
|
-
var _templateObject$
|
|
10520
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10521
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10522
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10267
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w, _templateObject6$n;
|
|
10268
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10269
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10270
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10523
10271
|
var color = _ref.color;
|
|
10524
10272
|
return "var(--base-color-" + color + ")";
|
|
10525
10273
|
});
|
|
10526
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10527
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10274
|
+
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10275
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10528
10276
|
var color = _ref2.color;
|
|
10529
10277
|
return "var(--base-color-" + color + ")";
|
|
10530
10278
|
});
|
|
10531
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
10279
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10532
10280
|
var color = _ref3.color;
|
|
10533
10281
|
return "var(--base-color-" + color + ")";
|
|
10534
10282
|
});
|
|
@@ -10610,19 +10358,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10610
10358
|
}, strengthLabel))));
|
|
10611
10359
|
};
|
|
10612
10360
|
|
|
10613
|
-
var _templateObject$
|
|
10614
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$
|
|
10615
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10616
|
-
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10617
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$
|
|
10361
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
|
|
10362
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10363
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10364
|
+
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10365
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10618
10366
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10619
10367
|
}, devices.tablet, devices.mobile);
|
|
10620
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
10368
|
+
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
10621
10369
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10622
10370
|
}, devices.mobile);
|
|
10623
|
-
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$
|
|
10624
|
-
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10625
|
-
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$
|
|
10371
|
+
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
|
|
10372
|
+
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
|
|
10373
|
+
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10626
10374
|
|
|
10627
10375
|
/* eslint-disable react/no-danger */
|
|
10628
10376
|
var Content = function Content(_ref) {
|
|
@@ -10825,25 +10573,25 @@ var Table = function Table(_ref) {
|
|
|
10825
10573
|
}))));
|
|
10826
10574
|
};
|
|
10827
10575
|
|
|
10828
|
-
var _templateObject$
|
|
10829
|
-
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
10576
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
10577
|
+
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10830
10578
|
var theme = _ref.theme;
|
|
10831
10579
|
return "var(--color-" + theme + ")";
|
|
10832
10580
|
}, function (_ref2) {
|
|
10833
10581
|
var theme = _ref2.theme;
|
|
10834
10582
|
return "var(--color-" + theme + ")";
|
|
10835
10583
|
});
|
|
10836
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2
|
|
10837
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
10838
|
-
var Error = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10839
|
-
var Form = /*#__PURE__*/styled__default.form(_templateObject5$
|
|
10840
|
-
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
10841
|
-
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10842
|
-
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$
|
|
10843
|
-
var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
10844
|
-
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
10845
|
-
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$
|
|
10846
|
-
var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$
|
|
10584
|
+
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
10585
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
10586
|
+
var Error = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10587
|
+
var Form = /*#__PURE__*/styled__default.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
10588
|
+
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
10589
|
+
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
10590
|
+
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
10591
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
10592
|
+
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
10593
|
+
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
10594
|
+
var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
10847
10595
|
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) {
|
|
10848
10596
|
var _ref3$isOpen = _ref3.isOpen,
|
|
10849
10597
|
isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
|
|
@@ -11250,13 +10998,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11250
10998
|
}))))));
|
|
11251
10999
|
};
|
|
11252
11000
|
|
|
11253
|
-
var _templateObject$
|
|
11254
|
-
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11001
|
+
var _templateObject$1i, _templateObject2$$, _templateObject4$F, _templateObject5$z;
|
|
11002
|
+
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
11255
11003
|
var withShadow = _ref.withShadow;
|
|
11256
|
-
return withShadow && styled.css(_templateObject2
|
|
11004
|
+
return withShadow && styled.css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11257
11005
|
}, devices.mobile);
|
|
11258
|
-
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
11259
|
-
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$
|
|
11006
|
+
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
11007
|
+
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11260
11008
|
|
|
11261
11009
|
var defaultGrid = {
|
|
11262
11010
|
columnStartDesktop: 2,
|
|
@@ -11314,12 +11062,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11314
11062
|
return null;
|
|
11315
11063
|
};
|
|
11316
11064
|
|
|
11317
|
-
var _templateObject$
|
|
11318
|
-
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$
|
|
11065
|
+
var _templateObject$1j, _templateObject2$10;
|
|
11066
|
+
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
11319
11067
|
var hide = _ref.hide;
|
|
11320
11068
|
return hide && "display: none;";
|
|
11321
11069
|
}, devices.mobileAndTablet);
|
|
11322
|
-
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11070
|
+
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
11323
11071
|
|
|
11324
11072
|
/**
|
|
11325
11073
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11411,8 +11159,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11411
11159
|
}));
|
|
11412
11160
|
};
|
|
11413
11161
|
|
|
11414
|
-
var _templateObject$
|
|
11415
|
-
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
11162
|
+
var _templateObject$1k;
|
|
11163
|
+
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
|
|
11416
11164
|
|
|
11417
11165
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11418
11166
|
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'] + "\">");
|
|
@@ -11447,9 +11195,14 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11447
11195
|
_ref2$renderGridItem = _ref2.renderGridItem,
|
|
11448
11196
|
renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
|
|
11449
11197
|
var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
|
|
11450
|
-
var content = /*#__PURE__*/React__default.createElement(
|
|
11198
|
+
var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
|
|
11199
|
+
tag: "div",
|
|
11200
|
+
size: "large",
|
|
11201
|
+
"data-testid": "text-container",
|
|
11451
11202
|
className: textContainerClassName,
|
|
11452
|
-
|
|
11203
|
+
dangerouslySetInnerHTML: {
|
|
11204
|
+
__html: addTypographyClasses(text)
|
|
11205
|
+
}
|
|
11453
11206
|
});
|
|
11454
11207
|
var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
11455
11208
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -11467,27 +11220,27 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11467
11220
|
}, gridItemOrContent);
|
|
11468
11221
|
};
|
|
11469
11222
|
|
|
11470
|
-
var _templateObject$
|
|
11223
|
+
var _templateObject$1l, _templateObject2$11, _templateObject3$O, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
|
|
11471
11224
|
var color = 'primary-black';
|
|
11472
11225
|
var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
11473
11226
|
borderColor: color,
|
|
11474
11227
|
hoveredColor: color,
|
|
11475
11228
|
pressedColor: color,
|
|
11476
11229
|
textColor: color
|
|
11477
|
-
})(_templateObject$
|
|
11478
|
-
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11479
|
-
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$
|
|
11230
|
+
})(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11231
|
+
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11232
|
+
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11480
11233
|
var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
|
|
11481
11234
|
serif: true,
|
|
11482
11235
|
size: 'medium'
|
|
11483
|
-
})(_templateObject4$
|
|
11236
|
+
})(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11484
11237
|
var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
|
|
11485
11238
|
size: 'large'
|
|
11486
|
-
})(_templateObject5$
|
|
11487
|
-
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$
|
|
11239
|
+
})(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11240
|
+
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11488
11241
|
var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
|
|
11489
11242
|
size: 'large'
|
|
11490
|
-
})(_templateObject7$
|
|
11243
|
+
})(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11491
11244
|
|
|
11492
11245
|
var Paywall = function Paywall(_ref) {
|
|
11493
11246
|
var className = _ref.className,
|
|
@@ -11680,14 +11433,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11680
11433
|
})))))));
|
|
11681
11434
|
};
|
|
11682
11435
|
|
|
11683
|
-
var _templateObject$
|
|
11684
|
-
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11685
|
-
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
11686
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$
|
|
11687
|
-
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11688
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
11689
|
-
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11690
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$
|
|
11436
|
+
var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11437
|
+
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
11438
|
+
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
11439
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
11440
|
+
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11441
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11442
|
+
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11443
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
11691
11444
|
|
|
11692
11445
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11693
11446
|
var Footer = function Footer(_ref) {
|
|
@@ -11745,18 +11498,18 @@ var Footer = function Footer(_ref) {
|
|
|
11745
11498
|
}, additionalInfo))));
|
|
11746
11499
|
};
|
|
11747
11500
|
|
|
11748
|
-
var _templateObject$
|
|
11501
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
|
|
11749
11502
|
var LIST_ITEM_GAP = 32;
|
|
11750
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11503
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
|
|
11751
11504
|
var bottomBorder = _ref.bottomBorder;
|
|
11752
11505
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11753
11506
|
}, zIndexes.anchor, function (_ref2) {
|
|
11754
11507
|
var withShadow = _ref2.withShadow;
|
|
11755
|
-
return withShadow && styled.css(_templateObject2$
|
|
11508
|
+
return withShadow && styled.css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11756
11509
|
});
|
|
11757
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
11758
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11759
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
11510
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
11511
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11512
|
+
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11760
11513
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11761
11514
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
11762
11515
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -11767,11 +11520,11 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateO
|
|
|
11767
11520
|
hasTwoArrows = _ref5.hasTwoArrows;
|
|
11768
11521
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
11769
11522
|
});
|
|
11770
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
11523
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
|
|
11771
11524
|
var withShadow = _ref7.withShadow;
|
|
11772
|
-
return withShadow && styled.css(_templateObject9$
|
|
11525
|
+
return withShadow && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11773
11526
|
});
|
|
11774
|
-
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11527
|
+
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
11775
11528
|
var disabled = _ref8.disabled;
|
|
11776
11529
|
return disabled ? 'not-allowed' : 'pointer';
|
|
11777
11530
|
}, function (_ref9) {
|
|
@@ -11782,7 +11535,7 @@ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_temp
|
|
|
11782
11535
|
return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
|
|
11783
11536
|
});
|
|
11784
11537
|
|
|
11785
|
-
var _excluded$
|
|
11538
|
+
var _excluded$q = ["id", "text"];
|
|
11786
11539
|
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
11787
11540
|
var tabs = _ref.tabs,
|
|
11788
11541
|
onTabClick = _ref.onTabClick,
|
|
@@ -11993,7 +11746,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
11993
11746
|
}, tabs.map(function (_ref4) {
|
|
11994
11747
|
var id = _ref4.id,
|
|
11995
11748
|
text = _ref4.text,
|
|
11996
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
11749
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$q);
|
|
11997
11750
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
11998
11751
|
key: id
|
|
11999
11752
|
}, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
|
|
@@ -12026,20 +11779,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12026
11779
|
})))) : null))));
|
|
12027
11780
|
};
|
|
12028
11781
|
|
|
12029
|
-
var _templateObject$
|
|
12030
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11782
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11783
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12031
11784
|
var sticky = _ref.sticky;
|
|
12032
11785
|
return sticky ? 'sticky' : 'initial';
|
|
12033
11786
|
}, zIndexes.anchor);
|
|
12034
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
12035
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11787
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
11788
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
12036
11789
|
var title = _ref2.title;
|
|
12037
11790
|
return title ? 'row' : 'row-reverse';
|
|
12038
11791
|
}, devices.tablet, devices.mobile);
|
|
12039
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12040
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12041
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12042
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$
|
|
11792
|
+
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
11793
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
11794
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
11795
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
12043
11796
|
var theme = _ref3.theme;
|
|
12044
11797
|
return theme.colors.primaryButtonReverseBg;
|
|
12045
11798
|
}, function (_ref4) {
|
|
@@ -12052,10 +11805,10 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
12052
11805
|
var theme = _ref6.theme;
|
|
12053
11806
|
return theme.colors.primaryButtonReverse;
|
|
12054
11807
|
});
|
|
12055
|
-
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
12056
|
-
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11808
|
+
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
11809
|
+
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
12057
11810
|
|
|
12058
|
-
var _excluded$
|
|
11811
|
+
var _excluded$r = ["text"],
|
|
12059
11812
|
_excluded2$4 = ["text"];
|
|
12060
11813
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
12061
11814
|
var title = _ref.title,
|
|
@@ -12065,7 +11818,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12065
11818
|
message = _ref.message;
|
|
12066
11819
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
12067
11820
|
primaryButtonText = _ref2.text,
|
|
12068
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
11821
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
|
|
12069
11822
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
12070
11823
|
secondaryButtonText = _ref3.text,
|
|
12071
11824
|
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
|
|
@@ -12086,14 +11839,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12086
11839
|
}, message))));
|
|
12087
11840
|
};
|
|
12088
11841
|
|
|
12089
|
-
var _templateObject$
|
|
12090
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12091
|
-
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$
|
|
12092
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12093
|
-
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$
|
|
11842
|
+
var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K;
|
|
11843
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
|
|
11844
|
+
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
|
|
11845
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
11846
|
+
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
12094
11847
|
|
|
12095
|
-
var _templateObject$
|
|
12096
|
-
var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11848
|
+
var _templateObject$1q;
|
|
11849
|
+
var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
|
|
12097
11850
|
|
|
12098
11851
|
var UpsellCards = function UpsellCards(_ref) {
|
|
12099
11852
|
var upsellCards = _ref.upsellCards;
|
|
@@ -12155,9 +11908,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12155
11908
|
})))));
|
|
12156
11909
|
};
|
|
12157
11910
|
|
|
12158
|
-
var _templateObject$
|
|
12159
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12160
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11911
|
+
var _templateObject$1r, _templateObject2$16;
|
|
11912
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
11913
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
12161
11914
|
var bottomBorder = _ref.bottomBorder;
|
|
12162
11915
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12163
11916
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12188,13 +11941,13 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12188
11941
|
}, children)));
|
|
12189
11942
|
};
|
|
12190
11943
|
|
|
12191
|
-
var _templateObject$
|
|
12192
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12193
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
12194
|
-
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12195
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
11944
|
+
var _templateObject$1s, _templateObject2$17, _templateObject3$T, _templateObject4$L;
|
|
11945
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
11946
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
11947
|
+
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11948
|
+
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
12196
11949
|
|
|
12197
|
-
var _excluded$
|
|
11950
|
+
var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12198
11951
|
var MAX_Z_INDEX = 9999999999;
|
|
12199
11952
|
if (Modal.defaultStyles.content) {
|
|
12200
11953
|
Modal.defaultStyles.content.position = 'static';
|
|
@@ -12268,7 +12021,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
12268
12021
|
setIsOpen = _ref.setIsOpen,
|
|
12269
12022
|
children = _ref.children,
|
|
12270
12023
|
appElementId = _ref.appElementId,
|
|
12271
|
-
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12024
|
+
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
|
|
12272
12025
|
var isMobile = useMobile();
|
|
12273
12026
|
var customStyles = {
|
|
12274
12027
|
overlay: {
|
|
@@ -12396,29 +12149,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12396
12149
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12397
12150
|
};
|
|
12398
12151
|
|
|
12399
|
-
var _templateObject$
|
|
12400
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12152
|
+
var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
|
|
12153
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
12401
12154
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12402
12155
|
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 }";
|
|
12403
12156
|
}, devices.mobile, function (_ref2) {
|
|
12404
12157
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12405
12158
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12406
12159
|
});
|
|
12407
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12160
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12408
12161
|
var type = _ref3.type,
|
|
12409
12162
|
isActive = _ref3.isActive;
|
|
12410
12163
|
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 ";
|
|
12411
12164
|
});
|
|
12412
|
-
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
12413
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12414
|
-
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12165
|
+
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
12166
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12167
|
+
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12415
12168
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12416
12169
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12417
12170
|
});
|
|
12418
|
-
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$
|
|
12419
|
-
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12420
|
-
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$
|
|
12421
|
-
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$
|
|
12171
|
+
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
|
|
12172
|
+
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
12173
|
+
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12174
|
+
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12422
12175
|
var active = _ref5.active;
|
|
12423
12176
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
12424
12177
|
}, devices.tablet, function (_ref6) {
|
|
@@ -12661,19 +12414,19 @@ var Carousel = function Carousel(_ref) {
|
|
|
12661
12414
|
}, children))));
|
|
12662
12415
|
};
|
|
12663
12416
|
|
|
12664
|
-
var _templateObject$
|
|
12665
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
12666
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12667
|
-
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12668
|
-
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12669
|
-
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12670
|
-
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12671
|
-
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12672
|
-
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
12673
|
-
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
12674
|
-
var RotatorButtonsWrapper$
|
|
12675
|
-
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$
|
|
12676
|
-
var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$
|
|
12417
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
12418
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
12419
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12420
|
+
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12421
|
+
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12422
|
+
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12423
|
+
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12424
|
+
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12425
|
+
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
12426
|
+
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12427
|
+
var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12428
|
+
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12429
|
+
var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
12677
12430
|
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);
|
|
12678
12431
|
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);
|
|
12679
12432
|
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);
|
|
@@ -12684,7 +12437,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject1
|
|
|
12684
12437
|
}, devices.mobile);
|
|
12685
12438
|
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);
|
|
12686
12439
|
|
|
12687
|
-
var _excluded$
|
|
12440
|
+
var _excluded$t = ["text"],
|
|
12688
12441
|
_excluded2$5 = ["text"];
|
|
12689
12442
|
var _buttonTypeToButton$2;
|
|
12690
12443
|
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);
|
|
@@ -12695,7 +12448,7 @@ var Buttons = function Buttons(_ref) {
|
|
|
12695
12448
|
var _ref2 = firstButton || {},
|
|
12696
12449
|
_ref2$text = _ref2.text,
|
|
12697
12450
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
12698
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
12451
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
|
|
12699
12452
|
var secondButton = links == null ? void 0 : links[1];
|
|
12700
12453
|
var _ref3 = secondButton || {},
|
|
12701
12454
|
_ref3$text = _ref3.text,
|
|
@@ -12910,7 +12663,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12910
12663
|
auxiliaryCTA: auxiliaryCTA
|
|
12911
12664
|
})), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
|
|
12912
12665
|
"data-testid": "carousel-wrapper"
|
|
12913
|
-
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$
|
|
12666
|
+
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
|
|
12914
12667
|
"data-testid": "rotator-buttons"
|
|
12915
12668
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12916
12669
|
onClickNext: onNext,
|
|
@@ -12927,11 +12680,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12927
12680
|
})));
|
|
12928
12681
|
};
|
|
12929
12682
|
|
|
12930
|
-
var _excluded$
|
|
12683
|
+
var _excluded$u = ["logo", "slides"];
|
|
12931
12684
|
var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
12932
12685
|
var logo = _ref.logo,
|
|
12933
12686
|
slides = _ref.slides,
|
|
12934
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12687
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
|
|
12935
12688
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12936
12689
|
var links = processSlideLinks(slide.links);
|
|
12937
12690
|
return _extends({}, slide, {
|
|
@@ -12948,10 +12701,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
|
12948
12701
|
})));
|
|
12949
12702
|
};
|
|
12950
12703
|
|
|
12951
|
-
var _excluded$
|
|
12704
|
+
var _excluded$v = ["slides"];
|
|
12952
12705
|
var HighlightsCore = function HighlightsCore(_ref) {
|
|
12953
12706
|
var slides = _ref.slides,
|
|
12954
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12707
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
|
|
12955
12708
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12956
12709
|
var links = processSlideLinks(slide.links);
|
|
12957
12710
|
return _extends({}, slide, {
|
|
@@ -12965,11 +12718,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
|
|
|
12965
12718
|
})));
|
|
12966
12719
|
};
|
|
12967
12720
|
|
|
12968
|
-
var _excluded$
|
|
12721
|
+
var _excluded$w = ["logo", "slides"];
|
|
12969
12722
|
var HighlightsStream = function HighlightsStream(_ref) {
|
|
12970
12723
|
var logo = _ref.logo,
|
|
12971
12724
|
slides = _ref.slides,
|
|
12972
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12725
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
|
|
12973
12726
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12974
12727
|
var links = processSlideLinks(slide.links);
|
|
12975
12728
|
return _extends({}, slide, {
|
|
@@ -12986,9 +12739,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
12986
12739
|
})));
|
|
12987
12740
|
};
|
|
12988
12741
|
|
|
12989
|
-
var _templateObject$
|
|
12990
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12991
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12742
|
+
var _templateObject$1v, _templateObject3$W;
|
|
12743
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
12744
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
12992
12745
|
|
|
12993
12746
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
12994
12747
|
var children = _ref.children;
|
|
@@ -13583,8 +13336,8 @@ var Theme = function Theme(_ref) {
|
|
|
13583
13336
|
}, children);
|
|
13584
13337
|
};
|
|
13585
13338
|
|
|
13586
|
-
var _templateObject$
|
|
13587
|
-
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) {
|
|
13339
|
+
var _templateObject$1w;
|
|
13340
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13588
13341
|
var theme = _ref.theme;
|
|
13589
13342
|
return theme.colors.primary;
|
|
13590
13343
|
}, function (_ref2) {
|
|
@@ -14531,10 +14284,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1x || (
|
|
|
14531
14284
|
return theme.footer.tablet.paddingBottom;
|
|
14532
14285
|
}, devices.desktop, devices.largeDesktop);
|
|
14533
14286
|
|
|
14534
|
-
var _templateObject$
|
|
14535
|
-
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
14536
|
-
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$
|
|
14537
|
-
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$
|
|
14287
|
+
var _templateObject$1x, _templateObject2$1a, _templateObject3$X;
|
|
14288
|
+
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14289
|
+
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14290
|
+
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
14538
14291
|
|
|
14539
14292
|
/* eslint-disable react/no-danger */
|
|
14540
14293
|
var Quote = function Quote(_ref) {
|
|
@@ -14580,7 +14333,6 @@ exports.Caption = Caption;
|
|
|
14580
14333
|
exports.Card = Card;
|
|
14581
14334
|
exports.Cards = Cards;
|
|
14582
14335
|
exports.Carousel = Carousel;
|
|
14583
|
-
exports.CastFilter = CastFilters;
|
|
14584
14336
|
exports.CinemaBadge = CinemaBadge;
|
|
14585
14337
|
exports.ContactCard = ContactCard;
|
|
14586
14338
|
exports.ContentSummary = ContentSummary;
|