@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
package/dist/harmonic.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React__default, { createElement, memo, useCallback, useRef, useImperativeHandle, useMemo, useEffect, useState, forwardRef, cloneElement, useLayoutEffect } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
|
-
import
|
|
3
|
+
import moment from 'moment';
|
|
4
4
|
import { renderToString } from 'react-dom/server';
|
|
5
5
|
import Select$1, { components } from 'react-select';
|
|
6
6
|
import Select$2 from 'react-select/async';
|
|
@@ -3848,7 +3848,6 @@ var Tab = function Tab(_ref) {
|
|
|
3848
3848
|
className = _ref.className,
|
|
3849
3849
|
role = _ref.role,
|
|
3850
3850
|
ariaLabel = _ref.ariaLabel,
|
|
3851
|
-
tabLinkId = _ref.tabLinkId,
|
|
3852
3851
|
color = _ref.color,
|
|
3853
3852
|
dataTestId = _ref.dataTestId,
|
|
3854
3853
|
isOpen = _ref.isOpen;
|
|
@@ -3883,9 +3882,8 @@ var Tab = function Tab(_ref) {
|
|
|
3883
3882
|
className: className,
|
|
3884
3883
|
"data-testid": dataTestId
|
|
3885
3884
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
3886
|
-
id: tabLinkId,
|
|
3887
|
-
trimText: trimText,
|
|
3888
3885
|
color: color,
|
|
3886
|
+
trimText: trimText,
|
|
3889
3887
|
withTextInMobile: withTextInMobile,
|
|
3890
3888
|
"aria-hidden": "true"
|
|
3891
3889
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -4571,31 +4569,6 @@ var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templa
|
|
|
4571
4569
|
var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4572
4570
|
var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4573
4571
|
|
|
4574
|
-
var pad = function pad(num) {
|
|
4575
|
-
return String(num || 0).padStart(2, '0');
|
|
4576
|
-
};
|
|
4577
|
-
var renderTimerValue = function renderTimerValue(value, label, separator) {
|
|
4578
|
-
if (separator === void 0) {
|
|
4579
|
-
separator = true;
|
|
4580
|
-
}
|
|
4581
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
|
|
4582
|
-
className: "harmonic-timer-value"
|
|
4583
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4584
|
-
color: "inherit",
|
|
4585
|
-
hierarchy: "h3",
|
|
4586
|
-
size: "medium",
|
|
4587
|
-
"data-testid": label
|
|
4588
|
-
}, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
|
|
4589
|
-
className: "harmonic-timer-label"
|
|
4590
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4591
|
-
color: "inherit",
|
|
4592
|
-
size: "large"
|
|
4593
|
-
}, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4594
|
-
color: "inherit",
|
|
4595
|
-
hierarchy: "h3",
|
|
4596
|
-
size: "medium"
|
|
4597
|
-
}, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
|
|
4598
|
-
};
|
|
4599
4572
|
var Timer = function Timer(_ref) {
|
|
4600
4573
|
var endDate = _ref.endDate,
|
|
4601
4574
|
title = _ref.title,
|
|
@@ -4604,22 +4577,43 @@ var Timer = function Timer(_ref) {
|
|
|
4604
4577
|
bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
|
|
4605
4578
|
_ref$color = _ref.color,
|
|
4606
4579
|
color = _ref$color === void 0 ? ThemeColor['base-black'] : _ref$color;
|
|
4607
|
-
var
|
|
4608
|
-
seconds =
|
|
4609
|
-
setSeconds =
|
|
4610
|
-
var
|
|
4611
|
-
minutes =
|
|
4612
|
-
setMinutes =
|
|
4613
|
-
var
|
|
4614
|
-
hours =
|
|
4615
|
-
setHours =
|
|
4616
|
-
var
|
|
4617
|
-
days =
|
|
4618
|
-
setDays =
|
|
4619
|
-
var
|
|
4620
|
-
isEndDateReached =
|
|
4621
|
-
setIsEndDateReached =
|
|
4622
|
-
|
|
4580
|
+
var _React$useState = React__default.useState('00'),
|
|
4581
|
+
seconds = _React$useState[0],
|
|
4582
|
+
setSeconds = _React$useState[1];
|
|
4583
|
+
var _React$useState2 = React__default.useState('00'),
|
|
4584
|
+
minutes = _React$useState2[0],
|
|
4585
|
+
setMinutes = _React$useState2[1];
|
|
4586
|
+
var _React$useState3 = React__default.useState('00'),
|
|
4587
|
+
hours = _React$useState3[0],
|
|
4588
|
+
setHours = _React$useState3[1];
|
|
4589
|
+
var _React$useState4 = React__default.useState('00'),
|
|
4590
|
+
days = _React$useState4[0],
|
|
4591
|
+
setDays = _React$useState4[1];
|
|
4592
|
+
var _React$useState5 = React__default.useState(false),
|
|
4593
|
+
isEndDateReached = _React$useState5[0],
|
|
4594
|
+
setIsEndDateReached = _React$useState5[1];
|
|
4595
|
+
var renderTimerValue = function renderTimerValue(value, label, separator) {
|
|
4596
|
+
if (separator === void 0) {
|
|
4597
|
+
separator = true;
|
|
4598
|
+
}
|
|
4599
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
|
|
4600
|
+
className: "harmonic-timer-value"
|
|
4601
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4602
|
+
color: "inherit",
|
|
4603
|
+
hierarchy: "h3",
|
|
4604
|
+
size: "medium"
|
|
4605
|
+
}, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
|
|
4606
|
+
className: "harmonic-timer-label"
|
|
4607
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4608
|
+
color: "inherit",
|
|
4609
|
+
size: "large"
|
|
4610
|
+
}, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4611
|
+
color: "inherit",
|
|
4612
|
+
hierarchy: "h3",
|
|
4613
|
+
size: "medium"
|
|
4614
|
+
}, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
|
|
4615
|
+
};
|
|
4616
|
+
React__default.useEffect(function () {
|
|
4623
4617
|
if (isEndDateReached) return undefined;
|
|
4624
4618
|
// We use this to set values for the timer immediately
|
|
4625
4619
|
var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
|
|
@@ -4627,21 +4621,19 @@ var Timer = function Timer(_ref) {
|
|
|
4627
4621
|
return setInterval(fn, delay);
|
|
4628
4622
|
};
|
|
4629
4623
|
var updateValues = function updateValues() {
|
|
4630
|
-
var futureDate =
|
|
4631
|
-
var nowDate =
|
|
4632
|
-
var
|
|
4633
|
-
|
|
4624
|
+
var futureDate = moment(endDate);
|
|
4625
|
+
var nowDate = moment();
|
|
4626
|
+
var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
|
|
4627
|
+
var difference = moment(differenceInMilliseconds).utc();
|
|
4628
|
+
if (differenceInMilliseconds < 0) {
|
|
4634
4629
|
setIsEndDateReached(true);
|
|
4635
4630
|
if (endDateHandler) endDateHandler();
|
|
4636
4631
|
} else {
|
|
4637
|
-
var
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
|
|
4641
|
-
var
|
|
4642
|
-
var hoursDiff = pad(duration.hours);
|
|
4643
|
-
var minutesDiff = pad(duration.minutes);
|
|
4644
|
-
var secondsDiff = pad(duration.seconds);
|
|
4632
|
+
var fullDaysLeft = Math.floor(futureDate.diff(nowDate, 'days', true));
|
|
4633
|
+
var daysDiff = fullDaysLeft < 10 ? "0" + fullDaysLeft : fullDaysLeft.toString();
|
|
4634
|
+
var hoursDiff = difference.format('HH');
|
|
4635
|
+
var minutesDiff = difference.format('mm');
|
|
4636
|
+
var secondsDiff = difference.format('ss');
|
|
4645
4637
|
setDays(daysDiff);
|
|
4646
4638
|
setHours(hoursDiff);
|
|
4647
4639
|
setMinutes(minutesDiff);
|
|
@@ -4653,7 +4645,7 @@ var Timer = function Timer(_ref) {
|
|
|
4653
4645
|
clearInterval(interval);
|
|
4654
4646
|
};
|
|
4655
4647
|
});
|
|
4656
|
-
var hideTimer =
|
|
4648
|
+
var hideTimer = moment(endDate).isBefore(moment());
|
|
4657
4649
|
if (hideTimer) return null;
|
|
4658
4650
|
return /*#__PURE__*/React__default.createElement(TimerWrapper, {
|
|
4659
4651
|
color: color
|
|
@@ -5371,7 +5363,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5371
5363
|
className = _ref.className,
|
|
5372
5364
|
role = _ref.role,
|
|
5373
5365
|
ariaLabel = _ref.ariaLabel,
|
|
5374
|
-
tabLinkId = _ref.tabLinkId,
|
|
5375
5366
|
trimTabText = _ref.trimTabText;
|
|
5376
5367
|
var node = useRef();
|
|
5377
5368
|
var _useState = useState(false),
|
|
@@ -5468,7 +5459,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5468
5459
|
};
|
|
5469
5460
|
var renderTab = function renderTab() {
|
|
5470
5461
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
5471
|
-
tabLinkId: tabLinkId,
|
|
5472
5462
|
trimText: trimTabText,
|
|
5473
5463
|
title: title,
|
|
5474
5464
|
titleLink: titleLink,
|
|
@@ -5548,8 +5538,7 @@ var Account = function Account(_ref) {
|
|
|
5548
5538
|
iconName: iconName,
|
|
5549
5539
|
withOptionsInMobile: false,
|
|
5550
5540
|
withIcon: "left",
|
|
5551
|
-
className: className
|
|
5552
|
-
tabLinkId: "account-link"
|
|
5541
|
+
className: className
|
|
5553
5542
|
});
|
|
5554
5543
|
};
|
|
5555
5544
|
|
|
@@ -5968,7 +5957,6 @@ var Accordion = function Accordion(_ref) {
|
|
|
5968
5957
|
var toggleAccordion = function toggleAccordion() {
|
|
5969
5958
|
if (React__default.Children.count(children) === 0) return;
|
|
5970
5959
|
if (openAccordion) {
|
|
5971
|
-
setIcon(collapsedStateIconData);
|
|
5972
5960
|
setOpenAccordion(false);
|
|
5973
5961
|
setTextHeight('0px');
|
|
5974
5962
|
setIcon(collapsedStateIconData);
|
|
@@ -6498,845 +6486,216 @@ var Cards = function Cards(_ref) {
|
|
|
6498
6486
|
}));
|
|
6499
6487
|
};
|
|
6500
6488
|
|
|
6501
|
-
var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7
|
|
6502
|
-
var
|
|
6503
|
-
var
|
|
6504
|
-
var
|
|
6505
|
-
var
|
|
6506
|
-
var
|
|
6507
|
-
var
|
|
6508
|
-
var
|
|
6509
|
-
var PersonToggle = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n width: 86px;\n height: 86px;\n min-width: 86px;\n border: 4px solid;\n border-color: ", ";\n border-radius: 50%;\n background: var(--color-base-white);\n position: relative;\n box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
|
|
6510
|
-
var isSelected = _ref.isSelected;
|
|
6511
|
-
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
6512
|
-
});
|
|
6513
|
-
var PersonImage = /*#__PURE__*/styled.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n\n // This is really specific to the SVG that we have been provided\n // as a fallback person image. I don't think there's a simpler and\n // more general way to handle this, so if we're given a new placeholder\n // image later, we may have to change the scale here\n ", "\n"])), function (_ref2) {
|
|
6514
|
-
var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
|
|
6515
|
-
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6516
|
-
});
|
|
6517
|
-
var PersonName = /*#__PURE__*/styled.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n\n @media ", " {\n max-width: unset;\n text-align: left;\n font-size: 17px;\n line-height: 24px;\n }\n"])), devices.mobile);
|
|
6518
|
-
var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (_ref3) {
|
|
6519
|
-
var isSelected = _ref3.isSelected;
|
|
6520
|
-
return isSelected ? 'flex' : 'none';
|
|
6521
|
-
}, function (_ref4) {
|
|
6522
|
-
var isSelected = _ref4.isSelected;
|
|
6523
|
-
return isSelected ? 'flex' : 'none';
|
|
6524
|
-
});
|
|
6525
|
-
var EmptySelectionTextSpacer = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
|
|
6489
|
+
var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7;
|
|
6490
|
+
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
6491
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
|
|
6492
|
+
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
6493
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
6494
|
+
var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
6495
|
+
var DesktopSuffixWrapper = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6496
|
+
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
6526
6497
|
|
|
6527
|
-
var
|
|
6498
|
+
var ContactCard = function ContactCard(_ref) {
|
|
6499
|
+
var title = _ref.title,
|
|
6500
|
+
titleSuffix = _ref.titleSuffix,
|
|
6501
|
+
description = _ref.description,
|
|
6502
|
+
email = _ref.email,
|
|
6503
|
+
phone = _ref.phone,
|
|
6504
|
+
website = _ref.website,
|
|
6505
|
+
address = _ref.address,
|
|
6506
|
+
className = _ref.className;
|
|
6507
|
+
var hasDetails = email || phone || website;
|
|
6508
|
+
var addressString = address == null ? void 0 : address.substring(0, 110);
|
|
6509
|
+
var descriptionText = description == null ? void 0 : description.substring(0, 110);
|
|
6510
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
6511
|
+
className: className
|
|
6512
|
+
}, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
6513
|
+
columnStartDesktop: 3,
|
|
6514
|
+
columnSpanDesktop: 12,
|
|
6515
|
+
columnStartDevice: 1,
|
|
6516
|
+
columnSpanDevice: 14
|
|
6517
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
6518
|
+
"data-testid": "contact-card-wrapper"
|
|
6519
|
+
}, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
6520
|
+
size: "large"
|
|
6521
|
+
}, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
6522
|
+
size: "small"
|
|
6523
|
+
}, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
6524
|
+
size: "small"
|
|
6525
|
+
}, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
6526
|
+
size: "large"
|
|
6527
|
+
}, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
|
|
6528
|
+
"data-testid": "contact-card-details-block"
|
|
6529
|
+
}, email && (/*#__PURE__*/React__default.createElement("a", {
|
|
6530
|
+
tabIndex: 0,
|
|
6531
|
+
href: "mailto:" + email
|
|
6532
|
+
}, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
|
|
6533
|
+
tabIndex: 0,
|
|
6534
|
+
href: "tel:" + phone
|
|
6535
|
+
}, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
|
|
6536
|
+
tabIndex: 0,
|
|
6537
|
+
href: website,
|
|
6538
|
+
target: "_blank",
|
|
6539
|
+
rel: "noreferrer"
|
|
6540
|
+
}, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
|
|
6541
|
+
"data-testid": "contact-card-address-block"
|
|
6542
|
+
}, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
6543
|
+
size: "large"
|
|
6544
|
+
}, addressString)))))))));
|
|
6545
|
+
};
|
|
6528
6546
|
|
|
6529
|
-
var _templateObject$K, _templateObject2$y;
|
|
6530
|
-
var
|
|
6531
|
-
var
|
|
6532
|
-
|
|
6533
|
-
|
|
6534
|
-
|
|
6535
|
-
}, function (
|
|
6536
|
-
|
|
6537
|
-
|
|
6538
|
-
|
|
6547
|
+
var _templateObject$K, _templateObject2$y, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b;
|
|
6548
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6549
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
6550
|
+
return props.clickable ? 'pointer' : 'default';
|
|
6551
|
+
}, devices.mobile);
|
|
6552
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
6553
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
6554
|
+
return props.showImage ? 2 : '1 / span 4';
|
|
6555
|
+
}, devices.mobile);
|
|
6556
|
+
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
6557
|
+
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
6558
|
+
return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
|
|
6559
|
+
});
|
|
6539
6560
|
|
|
6540
|
-
|
|
6541
|
-
|
|
6542
|
-
|
|
6543
|
-
|
|
6544
|
-
|
|
6545
|
-
|
|
6546
|
-
|
|
6547
|
-
|
|
6548
|
-
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
6549
|
-
var datePart = Date.now().toString().slice(-3);
|
|
6550
|
-
return randomPart + "-" + datePart;
|
|
6551
|
-
};
|
|
6561
|
+
/* eslint-disable no-shadow */
|
|
6562
|
+
var CarouselType;
|
|
6563
|
+
(function (CarouselType) {
|
|
6564
|
+
CarouselType["Image"] = "image";
|
|
6565
|
+
CarouselType["SmallCard"] = "SmallCard";
|
|
6566
|
+
CarouselType["LargeCard"] = "LargeCard";
|
|
6567
|
+
CarouselType["PersonCard"] = "PersonCard";
|
|
6568
|
+
})(CarouselType || (CarouselType = {}));
|
|
6552
6569
|
|
|
6553
|
-
var
|
|
6554
|
-
|
|
6555
|
-
|
|
6556
|
-
var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
|
|
6557
|
-
focusables.forEach(function (el) {
|
|
6558
|
-
if (shouldDisable) el.setAttribute('tabindex', '-1');
|
|
6559
|
-
});
|
|
6560
|
-
};
|
|
6561
|
-
var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
|
|
6562
|
-
return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
|
|
6563
|
-
};
|
|
6564
|
-
var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
|
|
6565
|
-
var widthSoFar = 0;
|
|
6566
|
-
var visible = [];
|
|
6567
|
-
for (var i = currentIndex; i < slidesLength; i++) {
|
|
6568
|
-
var _slideWidths$i;
|
|
6569
|
-
var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
|
|
6570
|
-
if (widthSoFar + width > containerWidth) break;
|
|
6571
|
-
visible.push(i);
|
|
6572
|
-
widthSoFar += width;
|
|
6570
|
+
var clickHandler = function clickHandler(link) {
|
|
6571
|
+
if (link != null && link.href && document) {
|
|
6572
|
+
document.location.href = link.href;
|
|
6573
6573
|
}
|
|
6574
|
-
return visible;
|
|
6575
6574
|
};
|
|
6576
|
-
var
|
|
6577
|
-
var
|
|
6578
|
-
|
|
6579
|
-
|
|
6580
|
-
|
|
6581
|
-
|
|
6582
|
-
|
|
6583
|
-
|
|
6584
|
-
|
|
6585
|
-
|
|
6586
|
-
|
|
6587
|
-
|
|
6575
|
+
var ContentSummary = function ContentSummary(_ref) {
|
|
6576
|
+
var title = _ref.title,
|
|
6577
|
+
subtitle = _ref.subtitle,
|
|
6578
|
+
bodyText = _ref.bodyText,
|
|
6579
|
+
link = _ref.link,
|
|
6580
|
+
image = _ref.image,
|
|
6581
|
+
_ref$largeTitle = _ref.largeTitle,
|
|
6582
|
+
largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
|
|
6583
|
+
_ref$showImage = _ref.showImage,
|
|
6584
|
+
showImage = _ref$showImage === void 0 ? false : _ref$showImage,
|
|
6585
|
+
_ref$truncate = _ref.truncate,
|
|
6586
|
+
truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
|
|
6587
|
+
_ref$fullyClickable = _ref.fullyClickable,
|
|
6588
|
+
fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
|
|
6589
|
+
_ref$headerSemanticLe = _ref.headerSemanticLevel,
|
|
6590
|
+
headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
|
|
6591
|
+
className = _ref.className;
|
|
6592
|
+
return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
|
|
6593
|
+
className: className,
|
|
6594
|
+
onClick: function onClick() {
|
|
6595
|
+
if (fullyClickable) {
|
|
6596
|
+
clickHandler(link);
|
|
6597
|
+
}
|
|
6598
|
+
},
|
|
6599
|
+
clickable: fullyClickable,
|
|
6600
|
+
"data-roh": "content-summary-item"
|
|
6601
|
+
}, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
|
|
6602
|
+
"data-testid": "image-wrapper"
|
|
6603
|
+
}, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
|
|
6604
|
+
href: link.href
|
|
6605
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
6606
|
+
aspectRatio: AspectRatio['4:3']
|
|
6607
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
6608
|
+
src: image.src,
|
|
6609
|
+
alt: image.alt
|
|
6610
|
+
})))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
6611
|
+
aspectRatio: AspectRatio['4:3']
|
|
6612
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
6613
|
+
src: image.src,
|
|
6614
|
+
alt: image.alt
|
|
6615
|
+
}))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
|
|
6616
|
+
showImage: showImage
|
|
6617
|
+
}, title && (/*#__PURE__*/React__default.createElement("div", {
|
|
6618
|
+
"data-testid": largeTitle ? 'large-title' : 'default-title'
|
|
6619
|
+
}, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
6620
|
+
size: "large",
|
|
6621
|
+
hierarchy: headerSemanticLevel
|
|
6622
|
+
}, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
6623
|
+
size: "medium",
|
|
6624
|
+
hierarchy: headerSemanticLevel
|
|
6625
|
+
}, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
6626
|
+
size: "large"
|
|
6627
|
+
}, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
|
|
6628
|
+
size: "large"
|
|
6629
|
+
}, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
|
|
6630
|
+
truncate: truncate,
|
|
6631
|
+
dangerouslySetInnerHTML: {
|
|
6632
|
+
__html: bodyText
|
|
6633
|
+
},
|
|
6634
|
+
"data-testid": "body-text"
|
|
6635
|
+
})))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
|
|
6636
|
+
className: "content-summary-text-link"
|
|
6637
|
+
}), link.text))));
|
|
6638
|
+
};
|
|
6639
|
+
|
|
6640
|
+
var _templateObject$L, _templateObject2$z, _templateObject3$o, _templateObject4$l, _templateObject5$h;
|
|
6641
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
6642
|
+
var imageToLeft = _ref.imageToLeft;
|
|
6643
|
+
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
6644
|
+
}, devices.mobile);
|
|
6645
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
6646
|
+
var imageToLeft = _ref2.imageToLeft;
|
|
6647
|
+
return imageToLeft ? 'left' : 'right';
|
|
6648
|
+
}, devices.mobile);
|
|
6649
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
6650
|
+
var imageToLeft = _ref3.imageToLeft;
|
|
6651
|
+
return imageToLeft ? 'right' : 'left';
|
|
6652
|
+
}, devices.mobile);
|
|
6653
|
+
var EditorialSubtitle = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-subtitle);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
6654
|
+
var EditorialText = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
6655
|
+
|
|
6656
|
+
var Editorial = function Editorial(_ref) {
|
|
6657
|
+
var _ref$imagePosition = _ref.imagePosition,
|
|
6658
|
+
imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
|
|
6659
|
+
subtitle = _ref.subtitle,
|
|
6660
|
+
text = _ref.text,
|
|
6661
|
+
children = _ref.children,
|
|
6662
|
+
className = _ref.className;
|
|
6663
|
+
var imageToLeft = imagePosition === 'left';
|
|
6664
|
+
return /*#__PURE__*/React__default.createElement(Grid, {
|
|
6665
|
+
className: className,
|
|
6666
|
+
"data-testid": "editorial-component"
|
|
6667
|
+
}, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
6668
|
+
columnStartDesktop: 3,
|
|
6669
|
+
columnSpanDesktop: 12,
|
|
6670
|
+
columnStartDevice: 2,
|
|
6671
|
+
columnSpanDevice: 12
|
|
6672
|
+
}, /*#__PURE__*/React__default.createElement(EditorialGrid, {
|
|
6673
|
+
imageToLeft: imageToLeft
|
|
6674
|
+
}, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
|
|
6675
|
+
"data-testid": "image-wrapper",
|
|
6676
|
+
imageToLeft: imageToLeft
|
|
6677
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
6678
|
+
aspectRatio: AspectRatio['1:1']
|
|
6679
|
+
}, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
|
|
6680
|
+
"data-testid": "text-wrapper",
|
|
6681
|
+
imageToLeft: imageToLeft
|
|
6682
|
+
}, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
|
|
6683
|
+
tag: "span"
|
|
6684
|
+
}, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
|
|
6685
|
+
tag: "div",
|
|
6686
|
+
size: "large",
|
|
6687
|
+
dangerouslySetInnerHTML: {
|
|
6688
|
+
__html: text
|
|
6588
6689
|
}
|
|
6589
|
-
}
|
|
6590
|
-
return movedSlides;
|
|
6690
|
+
})))));
|
|
6591
6691
|
};
|
|
6592
6692
|
|
|
6593
|
-
var
|
|
6594
|
-
var
|
|
6595
|
-
var
|
|
6596
|
-
var
|
|
6597
|
-
if (!infinite) return 0;
|
|
6598
|
-
return Math.min(childrenLength, MAX_CLONES_NUMBER);
|
|
6599
|
-
};
|
|
6600
|
-
var getSlidedWidth = function getSlidedWidth(slide) {
|
|
6601
|
-
if (!slide) return 0;
|
|
6602
|
-
var style = window.getComputedStyle(slide);
|
|
6603
|
-
var marginLeft = parseFloat(style.marginLeft) || 0;
|
|
6604
|
-
var marginRight = parseFloat(style.marginRight) || 0;
|
|
6605
|
-
return slide.getBoundingClientRect().width + marginLeft + marginRight;
|
|
6606
|
-
};
|
|
6607
|
-
var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
6608
|
-
var children = _ref.children,
|
|
6609
|
-
_ref$infinite = _ref.infinite,
|
|
6610
|
-
infinite = _ref$infinite === void 0 ? false : _ref$infinite,
|
|
6611
|
-
onIndexChange = _ref.onIndexChange,
|
|
6612
|
-
_ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
|
|
6613
|
-
slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
|
|
6614
|
-
_ref$slidesAriaHidden = _ref.slidesAriaHidden,
|
|
6615
|
-
slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
|
|
6616
|
-
onActiveChange = _ref.onActiveChange,
|
|
6617
|
-
onOverflowChange = _ref.onOverflowChange,
|
|
6618
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
6619
|
-
var containerRef = useRef(null);
|
|
6620
|
-
var childRefs = useRef([]);
|
|
6621
|
-
var startX = useRef(0);
|
|
6622
|
-
var currentTranslate = useRef(0);
|
|
6623
|
-
var isDragging = useRef(false);
|
|
6624
|
-
var isMouseDown = useRef(false);
|
|
6625
|
-
var isActive = useRef(false);
|
|
6626
|
-
var isClickPrevented = useRef(false);
|
|
6627
|
-
var uniqueIdRef = useRef(generateDomElementId());
|
|
6628
|
-
var _useState = useState(null),
|
|
6629
|
-
dragTranslateX = _useState[0],
|
|
6630
|
-
setDragTranslateX = _useState[1];
|
|
6631
|
-
var _useState2 = useState(false),
|
|
6632
|
-
transitioning = _useState2[0],
|
|
6633
|
-
setTransitioning = _useState2[1];
|
|
6634
|
-
var _useState3 = useState([]),
|
|
6635
|
-
slideWidths = _useState3[0],
|
|
6636
|
-
setSlideWidths = _useState3[1];
|
|
6637
|
-
var _useState4 = useState(0),
|
|
6638
|
-
containerWidth = _useState4[0],
|
|
6639
|
-
setContainerWidth = _useState4[1];
|
|
6640
|
-
var _useMemo = useMemo(function () {
|
|
6641
|
-
var count = getClonesCount(infinite, children.length);
|
|
6642
|
-
var leftClones = infinite ? children.slice(-count) : [];
|
|
6643
|
-
var rightClones = infinite ? children.slice(0, count) : [];
|
|
6644
|
-
var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
|
|
6645
|
-
return {
|
|
6646
|
-
slides: allSlides,
|
|
6647
|
-
clonesCount: count
|
|
6648
|
-
};
|
|
6649
|
-
}, [children, infinite]),
|
|
6650
|
-
slides = _useMemo.slides,
|
|
6651
|
-
clonesCount = _useMemo.clonesCount;
|
|
6652
|
-
var _useState5 = useState(infinite ? clonesCount : 0),
|
|
6653
|
-
currentIndex = _useState5[0],
|
|
6654
|
-
setCurrentIndex = _useState5[1];
|
|
6655
|
-
useEffect(function () {
|
|
6656
|
-
var handler = function handler(e) {
|
|
6657
|
-
if (isClickPrevented.current) {
|
|
6658
|
-
e.preventDefault();
|
|
6659
|
-
e.stopPropagation();
|
|
6660
|
-
}
|
|
6661
|
-
};
|
|
6662
|
-
var containerElement = containerRef.current;
|
|
6663
|
-
containerElement == null || containerElement.addEventListener('click', handler, true);
|
|
6664
|
-
return function () {
|
|
6665
|
-
return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
|
|
6666
|
-
};
|
|
6667
|
-
}, []);
|
|
6668
|
-
useEffect(function () {
|
|
6669
|
-
if (!onIndexChange) return;
|
|
6670
|
-
if (!infinite) {
|
|
6671
|
-
onIndexChange(currentIndex);
|
|
6672
|
-
} else {
|
|
6673
|
-
var offset = currentIndex - clonesCount + children.length;
|
|
6674
|
-
var realIndex = offset % children.length;
|
|
6675
|
-
onIndexChange(realIndex);
|
|
6676
|
-
}
|
|
6677
|
-
}, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
|
|
6678
|
-
var updateDimensions = useCallback(function () {
|
|
6679
|
-
var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
|
|
6680
|
-
var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
|
|
6681
|
-
setContainerWidth(cw);
|
|
6682
|
-
setSlideWidths(widths);
|
|
6683
|
-
if (!infinite) {
|
|
6684
|
-
var totalWidth = widths.reduce(function (acc, w) {
|
|
6685
|
-
return acc + w;
|
|
6686
|
-
}, 0);
|
|
6687
|
-
var visibleSpace = cw - (slidesOffsetBefore || 0);
|
|
6688
|
-
var overflow = totalWidth > Math.max(0, visibleSpace);
|
|
6689
|
-
onOverflowChange == null || onOverflowChange(overflow);
|
|
6690
|
-
}
|
|
6691
|
-
}, []);
|
|
6692
|
-
useEffect(function () {
|
|
6693
|
-
var animationFrameRequestId = requestAnimationFrame(updateDimensions);
|
|
6694
|
-
return function () {
|
|
6695
|
-
return cancelAnimationFrame(animationFrameRequestId);
|
|
6696
|
-
};
|
|
6697
|
-
}, [children]);
|
|
6698
|
-
useEffect(function () {
|
|
6699
|
-
var observer = new ResizeObserver(updateDimensions);
|
|
6700
|
-
if (containerRef.current) observer.observe(containerRef.current);
|
|
6701
|
-
return function () {
|
|
6702
|
-
return observer.disconnect();
|
|
6703
|
-
};
|
|
6704
|
-
}, [children]);
|
|
6705
|
-
var setIsActive = function setIsActive() {
|
|
6706
|
-
if (!isActive.current) {
|
|
6707
|
-
isActive.current = true;
|
|
6708
|
-
onActiveChange == null || onActiveChange(true);
|
|
6709
|
-
}
|
|
6710
|
-
};
|
|
6711
|
-
var getTranslateX = function getTranslateX() {
|
|
6712
|
-
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
|
|
6713
|
-
return acc + width;
|
|
6714
|
-
}, 0);
|
|
6715
|
-
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
6716
|
-
};
|
|
6717
|
-
var getTranslateForIndex = function getTranslateForIndex(index) {
|
|
6718
|
-
var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
|
|
6719
|
-
return acc + width;
|
|
6720
|
-
}, 0);
|
|
6721
|
-
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
6722
|
-
};
|
|
6723
|
-
var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
|
|
6724
|
-
var delta = currentTranslate.current - getTranslateX();
|
|
6725
|
-
var direction = delta > 0 ? -1 : 1;
|
|
6726
|
-
var movedSlides = getMovedSlides(delta, slideWidths);
|
|
6727
|
-
if (Math.abs(delta) > 20) {
|
|
6728
|
-
movedSlides = Math.max(1, movedSlides);
|
|
6729
|
-
var targetIndex = currentIndex + direction * movedSlides;
|
|
6730
|
-
var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
|
|
6731
|
-
if (!infinite) {
|
|
6732
|
-
currentTranslate.current = getTranslateForIndex(finalIndex);
|
|
6733
|
-
setDragTranslateX(null);
|
|
6734
|
-
}
|
|
6735
|
-
setTransitioning(true);
|
|
6736
|
-
setCurrentIndex(finalIndex);
|
|
6737
|
-
} else {
|
|
6738
|
-
setTransitioning(true);
|
|
6739
|
-
setCurrentIndex(function (prev) {
|
|
6740
|
-
return prev;
|
|
6741
|
-
});
|
|
6742
|
-
}
|
|
6743
|
-
setDragTranslateX(null);
|
|
6744
|
-
};
|
|
6745
|
-
var canMoveNext = function canMoveNext() {
|
|
6746
|
-
if (infinite) return true;
|
|
6747
|
-
if (slideWidths.length === 0 || containerWidth === 0) return false;
|
|
6748
|
-
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
6749
|
-
return acc + w;
|
|
6750
|
-
}, 0);
|
|
6751
|
-
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
|
|
6752
|
-
return acc + w;
|
|
6753
|
-
}, 0);
|
|
6754
|
-
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
6755
|
-
var remainingToRight = totalWidth - widthsBefore - visibleSpace;
|
|
6756
|
-
var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
6757
|
-
var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
|
|
6758
|
-
var nextIndex = lastVisibleIndex + 1;
|
|
6759
|
-
if (nextIndex >= slideWidths.length) return false;
|
|
6760
|
-
var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
|
|
6761
|
-
if (nextSlideWidth === 0) return false;
|
|
6762
|
-
var EPS = 1; // pixel tolerance
|
|
6763
|
-
// full next slide fits
|
|
6764
|
-
if (remainingToRight + EPS >= nextSlideWidth) return true;
|
|
6765
|
-
return remainingToRight > 0;
|
|
6766
|
-
};
|
|
6767
|
-
var handleTransitionEnd = function handleTransitionEnd() {
|
|
6768
|
-
setTransitioning(false);
|
|
6769
|
-
if (!infinite) return;
|
|
6770
|
-
if (currentIndex >= children.length + clonesCount) {
|
|
6771
|
-
setCurrentIndex(clonesCount);
|
|
6772
|
-
} else if (currentIndex < clonesCount) {
|
|
6773
|
-
setCurrentIndex(children.length + currentIndex);
|
|
6774
|
-
}
|
|
6775
|
-
};
|
|
6776
|
-
var goToPrev = function goToPrev() {
|
|
6777
|
-
if (transitioning) return;
|
|
6778
|
-
setIsActive();
|
|
6779
|
-
setTransitioning(true);
|
|
6780
|
-
setCurrentIndex(function (prev) {
|
|
6781
|
-
var target = infinite ? prev - 1 : Math.max(0, prev - 1);
|
|
6782
|
-
if (!infinite) {
|
|
6783
|
-
currentTranslate.current = getTranslateForIndex(target);
|
|
6784
|
-
setDragTranslateX(null);
|
|
6785
|
-
}
|
|
6786
|
-
return target;
|
|
6787
|
-
});
|
|
6788
|
-
};
|
|
6789
|
-
var goToNext = function goToNext() {
|
|
6790
|
-
if (transitioning || !canMoveNext()) return;
|
|
6791
|
-
setIsActive();
|
|
6792
|
-
setTransitioning(true);
|
|
6793
|
-
setCurrentIndex(function (prev) {
|
|
6794
|
-
var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
|
|
6795
|
-
if (!infinite) {
|
|
6796
|
-
currentTranslate.current = getTranslateForIndex(target);
|
|
6797
|
-
setDragTranslateX(null);
|
|
6798
|
-
}
|
|
6799
|
-
return target;
|
|
6800
|
-
});
|
|
6801
|
-
};
|
|
6802
|
-
useImperativeHandle(ref, function () {
|
|
6803
|
-
return {
|
|
6804
|
-
nextSlide: goToNext,
|
|
6805
|
-
prevSlide: goToPrev,
|
|
6806
|
-
hasOverflow: function hasOverflow() {
|
|
6807
|
-
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
6808
|
-
return acc + w;
|
|
6809
|
-
}, 0);
|
|
6810
|
-
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
6811
|
-
return totalWidth > Math.max(0, visibleSpace);
|
|
6812
|
-
},
|
|
6813
|
-
hasNext: function hasNext() {
|
|
6814
|
-
return canMoveNext();
|
|
6815
|
-
}
|
|
6816
|
-
};
|
|
6817
|
-
});
|
|
6818
|
-
var handleTouchStart = function handleTouchStart(e) {
|
|
6819
|
-
setIsActive();
|
|
6820
|
-
startX.current = e.touches[0].clientX;
|
|
6821
|
-
isDragging.current = true;
|
|
6822
|
-
isClickPrevented.current = false;
|
|
6823
|
-
setTransitioning(false);
|
|
6824
|
-
};
|
|
6825
|
-
var handleTouchMove = function handleTouchMove(e) {
|
|
6826
|
-
if (!isDragging.current) return;
|
|
6827
|
-
var deltaX = e.touches[0].clientX - startX.current;
|
|
6828
|
-
if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
|
|
6829
|
-
isClickPrevented.current = true;
|
|
6830
|
-
}
|
|
6831
|
-
var visualOffset = getTranslateX() + deltaX;
|
|
6832
|
-
currentTranslate.current = visualOffset;
|
|
6833
|
-
setDragTranslateX(visualOffset);
|
|
6834
|
-
};
|
|
6835
|
-
var handleTouchEnd = function handleTouchEnd() {
|
|
6836
|
-
isDragging.current = false;
|
|
6837
|
-
if (isClickPrevented.current) {
|
|
6838
|
-
navigateOnSwipeEnd();
|
|
6839
|
-
} else {
|
|
6840
|
-
setDragTranslateX(null);
|
|
6841
|
-
}
|
|
6842
|
-
};
|
|
6843
|
-
var handleMouseMove = function handleMouseMove(e) {
|
|
6844
|
-
if (!isDragging.current || !isMouseDown.current || transitioning) return;
|
|
6845
|
-
var deltaX = e.clientX - startX.current;
|
|
6846
|
-
if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
|
|
6847
|
-
isClickPrevented.current = true;
|
|
6848
|
-
}
|
|
6849
|
-
var visualOffset = getTranslateX() + deltaX;
|
|
6850
|
-
currentTranslate.current = visualOffset;
|
|
6851
|
-
setDragTranslateX(visualOffset);
|
|
6852
|
-
};
|
|
6853
|
-
var _handleMouseUp = function handleMouseUp() {
|
|
6854
|
-
if (!isMouseDown.current) return;
|
|
6855
|
-
isMouseDown.current = false;
|
|
6856
|
-
isDragging.current = false;
|
|
6857
|
-
if (isClickPrevented.current) {
|
|
6858
|
-
navigateOnSwipeEnd();
|
|
6859
|
-
} else {
|
|
6860
|
-
setDragTranslateX(null);
|
|
6861
|
-
}
|
|
6862
|
-
window.removeEventListener('mousemove', handleMouseMove);
|
|
6863
|
-
window.removeEventListener('mouseup', _handleMouseUp);
|
|
6864
|
-
};
|
|
6865
|
-
var handleMouseDown = function handleMouseDown(e) {
|
|
6866
|
-
if (transitioning || e.button !== 0) return;
|
|
6867
|
-
e.preventDefault();
|
|
6868
|
-
setIsActive();
|
|
6869
|
-
startX.current = e.clientX;
|
|
6870
|
-
isDragging.current = true;
|
|
6871
|
-
isMouseDown.current = true;
|
|
6872
|
-
isClickPrevented.current = false;
|
|
6873
|
-
setTransitioning(false);
|
|
6874
|
-
window.addEventListener('mousemove', handleMouseMove);
|
|
6875
|
-
window.addEventListener('mouseup', _handleMouseUp);
|
|
6876
|
-
};
|
|
6877
|
-
var onSlideFocus = function onSlideFocus(isVisible, index) {
|
|
6878
|
-
if (!isVisible) {
|
|
6879
|
-
setCurrentIndex(index);
|
|
6880
|
-
}
|
|
6881
|
-
};
|
|
6882
|
-
var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
6883
|
-
return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
|
|
6884
|
-
ref: containerRef,
|
|
6885
|
-
className: "swipe",
|
|
6886
|
-
onTouchStart: handleTouchStart,
|
|
6887
|
-
onTouchMove: handleTouchMove,
|
|
6888
|
-
onTouchEnd: handleTouchEnd,
|
|
6889
|
-
onMouseDown: handleMouseDown,
|
|
6890
|
-
"aria-roledescription": "carousel",
|
|
6891
|
-
role: "list"
|
|
6892
|
-
}, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
|
|
6893
|
-
className: "swipe-track-wrapper",
|
|
6894
|
-
translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
|
|
6895
|
-
transitioning: transitioning && dragTranslateX === null,
|
|
6896
|
-
onTransitionEnd: handleTransitionEnd
|
|
6897
|
-
}, slides.map(function (child, index) {
|
|
6898
|
-
var isVisible = visibleIndexes.includes(index);
|
|
6899
|
-
var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
|
|
6900
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
6901
|
-
key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
|
|
6902
|
-
className: SWIPE_SLIDE_CLASS_NAME,
|
|
6903
|
-
"aria-hidden": slidesAriaHidden || isClone,
|
|
6904
|
-
"aria-roledescription": "slide",
|
|
6905
|
-
role: "listitem",
|
|
6906
|
-
ref: function ref(el) {
|
|
6907
|
-
childRefs.current[index] = el;
|
|
6908
|
-
disableTabbingInside(el, isClone);
|
|
6909
|
-
},
|
|
6910
|
-
onFocus: function onFocus() {
|
|
6911
|
-
return onSlideFocus(isVisible, index);
|
|
6912
|
-
}
|
|
6913
|
-
}, child);
|
|
6914
|
-
})));
|
|
6915
|
-
});
|
|
6916
|
-
Swipe.displayName = 'Swipe';
|
|
6917
|
-
|
|
6918
|
-
var _excluded$i = ["name", "image", "onClick"];
|
|
6919
|
-
var CastFilters = function CastFilters(_ref) {
|
|
6920
|
-
var cast = _ref.cast,
|
|
6921
|
-
headingText = _ref.headingText,
|
|
6922
|
-
ctaText = _ref.ctaText,
|
|
6923
|
-
textLinkText = _ref.textLinkText,
|
|
6924
|
-
emptySelectionText = _ref.emptySelectionText,
|
|
6925
|
-
placeholderImage = _ref.placeholderImage,
|
|
6926
|
-
listRoleDescription = _ref.listRoleDescription,
|
|
6927
|
-
className = _ref.className,
|
|
6928
|
-
onSelect = _ref.onSelect,
|
|
6929
|
-
onApply = _ref.onApply,
|
|
6930
|
-
onClear = _ref.onClear,
|
|
6931
|
-
_ref$selectedIndices = _ref.selectedIndices,
|
|
6932
|
-
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
6933
|
-
var _useViewport = useViewport(),
|
|
6934
|
-
isMobile = _useViewport.isMobile;
|
|
6935
|
-
var castWrapperRef = useRef(null);
|
|
6936
|
-
var isDraggingRef = useRef(false);
|
|
6937
|
-
var startXRef = useRef(0);
|
|
6938
|
-
var scrollStartRef = useRef(0);
|
|
6939
|
-
var hasDraggedRef = useRef(false);
|
|
6940
|
-
var swipeRef = useRef(null);
|
|
6941
|
-
var _useState = useState(false),
|
|
6942
|
-
availablePrev = _useState[0],
|
|
6943
|
-
setAvailablePrev = _useState[1];
|
|
6944
|
-
var _useState2 = useState(cast.length > 1),
|
|
6945
|
-
availableNext = _useState2[0],
|
|
6946
|
-
setAvailableNext = _useState2[1];
|
|
6947
|
-
var _useState3 = useState(true),
|
|
6948
|
-
showRotatorButtons = _useState3[0],
|
|
6949
|
-
setShowRotatorButtons = _useState3[1];
|
|
6950
|
-
var onIndexChangeHandler = function onIndexChangeHandler(index) {
|
|
6951
|
-
setAvailablePrev(index > 0);
|
|
6952
|
-
setAvailableNext(function () {
|
|
6953
|
-
var _swipeRef$current$has, _swipeRef$current;
|
|
6954
|
-
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);
|
|
6955
|
-
});
|
|
6956
|
-
};
|
|
6957
|
-
useEffect(function () {
|
|
6958
|
-
setAvailablePrev(false);
|
|
6959
|
-
setAvailableNext(function () {
|
|
6960
|
-
var _swipeRef$current$has2, _swipeRef$current2;
|
|
6961
|
-
return (_swipeRef$current$has2 = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext()) != null ? _swipeRef$current$has2 : cast.length > 1;
|
|
6962
|
-
});
|
|
6963
|
-
}, [cast.length]);
|
|
6964
|
-
var handleOverflowChange = function handleOverflowChange(overflow) {
|
|
6965
|
-
var _swipeRef$current3;
|
|
6966
|
-
setShowRotatorButtons(overflow);
|
|
6967
|
-
var hasNext = (_swipeRef$current3 = swipeRef.current) == null ? void 0 : _swipeRef$current3.hasNext();
|
|
6968
|
-
if (typeof hasNext === 'boolean') {
|
|
6969
|
-
setAvailableNext(hasNext);
|
|
6970
|
-
} else {
|
|
6971
|
-
setAvailableNext(overflow);
|
|
6972
|
-
}
|
|
6973
|
-
};
|
|
6974
|
-
var onNext = function onNext() {
|
|
6975
|
-
var _swipeRef$current4;
|
|
6976
|
-
return (_swipeRef$current4 = swipeRef.current) == null ? void 0 : _swipeRef$current4.nextSlide();
|
|
6977
|
-
};
|
|
6978
|
-
var onPrev = function onPrev() {
|
|
6979
|
-
var _swipeRef$current5;
|
|
6980
|
-
return (_swipeRef$current5 = swipeRef.current) == null ? void 0 : _swipeRef$current5.prevSlide();
|
|
6981
|
-
};
|
|
6982
|
-
useEffect(function () {
|
|
6983
|
-
var el = castWrapperRef.current;
|
|
6984
|
-
if (!el) return undefined;
|
|
6985
|
-
var handleKeydown = function handleKeydown(e) {
|
|
6986
|
-
if (!el.contains(document.activeElement)) return;
|
|
6987
|
-
if (e.key === 'ArrowRight') {
|
|
6988
|
-
var _swipeRef$current6;
|
|
6989
|
-
e.preventDefault();
|
|
6990
|
-
(_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.nextSlide();
|
|
6991
|
-
} else if (e.key === 'ArrowLeft') {
|
|
6992
|
-
var _swipeRef$current7;
|
|
6993
|
-
e.preventDefault();
|
|
6994
|
-
(_swipeRef$current7 = swipeRef.current) == null || _swipeRef$current7.prevSlide();
|
|
6995
|
-
}
|
|
6996
|
-
};
|
|
6997
|
-
el.addEventListener('keydown', handleKeydown);
|
|
6998
|
-
return function () {
|
|
6999
|
-
return el.removeEventListener('keydown', handleKeydown);
|
|
7000
|
-
};
|
|
7001
|
-
}, []);
|
|
7002
|
-
var handleMouseDown = useCallback(function (e) {
|
|
7003
|
-
if (!castWrapperRef.current) return;
|
|
7004
|
-
isDraggingRef.current = true;
|
|
7005
|
-
hasDraggedRef.current = false;
|
|
7006
|
-
startXRef.current = e.clientX;
|
|
7007
|
-
scrollStartRef.current = castWrapperRef.current.scrollLeft;
|
|
7008
|
-
if (e.target === castWrapperRef.current) e.preventDefault();
|
|
7009
|
-
}, []);
|
|
7010
|
-
var handleMouseMove = useCallback(function (e) {
|
|
7011
|
-
if (!isDraggingRef.current || !castWrapperRef.current) return;
|
|
7012
|
-
var deltaX = e.clientX - startXRef.current;
|
|
7013
|
-
var threshold = 5;
|
|
7014
|
-
if (Math.abs(deltaX) > threshold) {
|
|
7015
|
-
hasDraggedRef.current = true;
|
|
7016
|
-
e.preventDefault();
|
|
7017
|
-
castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
|
|
7018
|
-
}
|
|
7019
|
-
}, []);
|
|
7020
|
-
var handleMouseUp = useCallback(function () {
|
|
7021
|
-
isDraggingRef.current = false;
|
|
7022
|
-
setTimeout(function () {
|
|
7023
|
-
hasDraggedRef.current = false;
|
|
7024
|
-
}, 0);
|
|
7025
|
-
}, []);
|
|
7026
|
-
var handleMouseLeave = useCallback(function () {
|
|
7027
|
-
isDraggingRef.current = false;
|
|
7028
|
-
hasDraggedRef.current = false;
|
|
7029
|
-
}, []);
|
|
7030
|
-
var handleClick = React__default.useCallback(function (index, onClick) {
|
|
7031
|
-
if (hasDraggedRef.current) return;
|
|
7032
|
-
if (onSelect) onSelect(index);
|
|
7033
|
-
if (onClick) onClick();
|
|
7034
|
-
}, [onSelect]);
|
|
7035
|
-
var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
|
|
7036
|
-
if (e.key === 'Enter') {
|
|
7037
|
-
handleClick(index, onClick);
|
|
7038
|
-
}
|
|
7039
|
-
}, [handleClick]);
|
|
7040
|
-
var handleClearKeydown = React__default.useCallback(function (e) {
|
|
7041
|
-
if (e.key === 'Enter' && onClear) {
|
|
7042
|
-
onClear();
|
|
7043
|
-
}
|
|
7044
|
-
}, [onClear]);
|
|
7045
|
-
var showActionButtonsSection = onApply || onClear || emptySelectionText;
|
|
7046
|
-
var getPersonCards = function getPersonCards() {
|
|
7047
|
-
return cast.map(function (person, index) {
|
|
7048
|
-
var name = person.name,
|
|
7049
|
-
image = person.image,
|
|
7050
|
-
_onClick = person.onClick,
|
|
7051
|
-
rest = _objectWithoutPropertiesLoose(person, _excluded$i);
|
|
7052
|
-
var isSelected = selectedIndices.includes(index);
|
|
7053
|
-
var personImage = image || placeholderImage || defaultPlaceholderImage;
|
|
7054
|
-
return /*#__PURE__*/React__default.createElement(PersonWrapper, {
|
|
7055
|
-
key: index,
|
|
7056
|
-
"aria-selected": isSelected,
|
|
7057
|
-
role: "option",
|
|
7058
|
-
tabIndex: 0,
|
|
7059
|
-
onKeyDown: function onKeyDown(e) {
|
|
7060
|
-
return handlePersonKeydown(e, index, _onClick);
|
|
7061
|
-
}
|
|
7062
|
-
}, /*#__PURE__*/React__default.createElement(PersonToggle, Object.assign({
|
|
7063
|
-
isSelected: isSelected,
|
|
7064
|
-
onClick: function onClick() {
|
|
7065
|
-
return handleClick(index, _onClick);
|
|
7066
|
-
}
|
|
7067
|
-
}, rest), /*#__PURE__*/React__default.createElement(PersonImage, {
|
|
7068
|
-
src: personImage,
|
|
7069
|
-
alt: image ? name : "Placeholder image for " + name,
|
|
7070
|
-
draggable: false,
|
|
7071
|
-
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7072
|
-
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7073
|
-
isSelected: isSelected
|
|
7074
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7075
|
-
iconName: "Confirm",
|
|
7076
|
-
color: "white"
|
|
7077
|
-
}))), /*#__PURE__*/React__default.createElement(PersonName, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7078
|
-
size: "medium"
|
|
7079
|
-
}, name)));
|
|
7080
|
-
});
|
|
7081
|
-
};
|
|
7082
|
-
return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper, {
|
|
7083
|
-
className: className
|
|
7084
|
-
}, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, headingText && (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
7085
|
-
columnStartDesktop: 1,
|
|
7086
|
-
columnSpanDesktop: 10,
|
|
7087
|
-
columnStartDevice: 1,
|
|
7088
|
-
columnSpanDevice: 9
|
|
7089
|
-
}, /*#__PURE__*/React__default.createElement(HeadingTextWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7090
|
-
size: "large"
|
|
7091
|
-
}, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
7092
|
-
columnStartDesktop: 16,
|
|
7093
|
-
columnSpanDesktop: 2
|
|
7094
|
-
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
7095
|
-
size: "small",
|
|
7096
|
-
onClickNext: onNext,
|
|
7097
|
-
onClickPrev: onPrev,
|
|
7098
|
-
availablePrev: availablePrev,
|
|
7099
|
-
availableNext: availableNext
|
|
7100
|
-
})))), /*#__PURE__*/React__default.createElement(CastWrapper, {
|
|
7101
|
-
ref: castWrapperRef,
|
|
7102
|
-
role: "listbox",
|
|
7103
|
-
"aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
|
|
7104
|
-
"aria-label": "filter list",
|
|
7105
|
-
"aria-multiselectable": true,
|
|
7106
|
-
onMouseDown: handleMouseDown,
|
|
7107
|
-
onMouseMove: handleMouseMove,
|
|
7108
|
-
onMouseUp: handleMouseUp,
|
|
7109
|
-
onMouseLeave: handleMouseLeave
|
|
7110
|
-
}, isMobile ? getPersonCards() : (/*#__PURE__*/React__default.createElement(Swipe, {
|
|
7111
|
-
onIndexChange: onIndexChangeHandler,
|
|
7112
|
-
"data-testid": "cast-filter-swipe",
|
|
7113
|
-
ref: swipeRef,
|
|
7114
|
-
onOverflowChange: handleOverflowChange
|
|
7115
|
-
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7116
|
-
size: "medium",
|
|
7117
|
-
className: "mobile-only"
|
|
7118
|
-
}, 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, {
|
|
7119
|
-
onClick: function onClick() {
|
|
7120
|
-
return onApply(selectedIndices);
|
|
7121
|
-
}
|
|
7122
|
-
}, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
|
|
7123
|
-
tabIndex: 0,
|
|
7124
|
-
role: "button",
|
|
7125
|
-
onClick: onClear,
|
|
7126
|
-
onKeyDown: handleClearKeydown
|
|
7127
|
-
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7128
|
-
};
|
|
7129
|
-
|
|
7130
|
-
var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
|
|
7131
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7132
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
|
|
7133
|
-
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7134
|
-
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7135
|
-
var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7136
|
-
var DesktopSuffixWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7137
|
-
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
7138
|
-
|
|
7139
|
-
var ContactCard = function ContactCard(_ref) {
|
|
7140
|
-
var title = _ref.title,
|
|
7141
|
-
titleSuffix = _ref.titleSuffix,
|
|
7142
|
-
description = _ref.description,
|
|
7143
|
-
email = _ref.email,
|
|
7144
|
-
phone = _ref.phone,
|
|
7145
|
-
website = _ref.website,
|
|
7146
|
-
address = _ref.address,
|
|
7147
|
-
className = _ref.className;
|
|
7148
|
-
var hasDetails = email || phone || website;
|
|
7149
|
-
var addressString = address == null ? void 0 : address.substring(0, 110);
|
|
7150
|
-
var descriptionText = description == null ? void 0 : description.substring(0, 110);
|
|
7151
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
7152
|
-
className: className
|
|
7153
|
-
}, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
7154
|
-
columnStartDesktop: 3,
|
|
7155
|
-
columnSpanDesktop: 12,
|
|
7156
|
-
columnStartDevice: 1,
|
|
7157
|
-
columnSpanDevice: 14
|
|
7158
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
7159
|
-
"data-testid": "contact-card-wrapper"
|
|
7160
|
-
}, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
7161
|
-
size: "large"
|
|
7162
|
-
}, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7163
|
-
size: "small"
|
|
7164
|
-
}, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
7165
|
-
size: "small"
|
|
7166
|
-
}, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
7167
|
-
size: "large"
|
|
7168
|
-
}, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
|
|
7169
|
-
"data-testid": "contact-card-details-block"
|
|
7170
|
-
}, email && (/*#__PURE__*/React__default.createElement("a", {
|
|
7171
|
-
tabIndex: 0,
|
|
7172
|
-
href: "mailto:" + email
|
|
7173
|
-
}, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
|
|
7174
|
-
tabIndex: 0,
|
|
7175
|
-
href: "tel:" + phone
|
|
7176
|
-
}, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
|
|
7177
|
-
tabIndex: 0,
|
|
7178
|
-
href: website,
|
|
7179
|
-
target: "_blank",
|
|
7180
|
-
rel: "noreferrer"
|
|
7181
|
-
}, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
|
|
7182
|
-
"data-testid": "contact-card-address-block"
|
|
7183
|
-
}, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7184
|
-
size: "large"
|
|
7185
|
-
}, addressString)))))))));
|
|
7186
|
-
};
|
|
7187
|
-
|
|
7188
|
-
var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$c;
|
|
7189
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7190
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7191
|
-
return props.clickable ? 'pointer' : 'default';
|
|
7192
|
-
}, devices.mobile);
|
|
7193
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7194
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7195
|
-
return props.showImage ? 2 : '1 / span 4';
|
|
7196
|
-
}, devices.mobile);
|
|
7197
|
-
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7198
|
-
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
7199
|
-
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 ";
|
|
7200
|
-
});
|
|
7201
|
-
|
|
7202
|
-
/* eslint-disable no-shadow */
|
|
7203
|
-
var CarouselType;
|
|
7204
|
-
(function (CarouselType) {
|
|
7205
|
-
CarouselType["Image"] = "image";
|
|
7206
|
-
CarouselType["SmallCard"] = "SmallCard";
|
|
7207
|
-
CarouselType["LargeCard"] = "LargeCard";
|
|
7208
|
-
CarouselType["PersonCard"] = "PersonCard";
|
|
7209
|
-
})(CarouselType || (CarouselType = {}));
|
|
7210
|
-
|
|
7211
|
-
var clickHandler = function clickHandler(link) {
|
|
7212
|
-
if (link != null && link.href && document) {
|
|
7213
|
-
document.location.href = link.href;
|
|
7214
|
-
}
|
|
7215
|
-
};
|
|
7216
|
-
var ContentSummary = function ContentSummary(_ref) {
|
|
7217
|
-
var title = _ref.title,
|
|
7218
|
-
subtitle = _ref.subtitle,
|
|
7219
|
-
bodyText = _ref.bodyText,
|
|
7220
|
-
link = _ref.link,
|
|
7221
|
-
image = _ref.image,
|
|
7222
|
-
_ref$largeTitle = _ref.largeTitle,
|
|
7223
|
-
largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
|
|
7224
|
-
_ref$showImage = _ref.showImage,
|
|
7225
|
-
showImage = _ref$showImage === void 0 ? false : _ref$showImage,
|
|
7226
|
-
_ref$truncate = _ref.truncate,
|
|
7227
|
-
truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
|
|
7228
|
-
_ref$fullyClickable = _ref.fullyClickable,
|
|
7229
|
-
fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
|
|
7230
|
-
_ref$headerSemanticLe = _ref.headerSemanticLevel,
|
|
7231
|
-
headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
|
|
7232
|
-
className = _ref.className;
|
|
7233
|
-
return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
|
|
7234
|
-
className: className,
|
|
7235
|
-
onClick: function onClick() {
|
|
7236
|
-
if (fullyClickable) {
|
|
7237
|
-
clickHandler(link);
|
|
7238
|
-
}
|
|
7239
|
-
},
|
|
7240
|
-
clickable: fullyClickable,
|
|
7241
|
-
"data-roh": "content-summary-item"
|
|
7242
|
-
}, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
|
|
7243
|
-
"data-testid": "image-wrapper"
|
|
7244
|
-
}, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
|
|
7245
|
-
href: link.href
|
|
7246
|
-
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
7247
|
-
aspectRatio: AspectRatio['4:3']
|
|
7248
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
7249
|
-
src: image.src,
|
|
7250
|
-
alt: image.alt
|
|
7251
|
-
})))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
7252
|
-
aspectRatio: AspectRatio['4:3']
|
|
7253
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
7254
|
-
src: image.src,
|
|
7255
|
-
alt: image.alt
|
|
7256
|
-
}))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
|
|
7257
|
-
showImage: showImage
|
|
7258
|
-
}, title && (/*#__PURE__*/React__default.createElement("div", {
|
|
7259
|
-
"data-testid": largeTitle ? 'large-title' : 'default-title'
|
|
7260
|
-
}, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
7261
|
-
size: "large",
|
|
7262
|
-
hierarchy: headerSemanticLevel
|
|
7263
|
-
}, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
7264
|
-
size: "medium",
|
|
7265
|
-
hierarchy: headerSemanticLevel
|
|
7266
|
-
}, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
7267
|
-
size: "large"
|
|
7268
|
-
}, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
|
|
7269
|
-
size: "large"
|
|
7270
|
-
}, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
|
|
7271
|
-
truncate: truncate,
|
|
7272
|
-
dangerouslySetInnerHTML: {
|
|
7273
|
-
__html: bodyText
|
|
7274
|
-
},
|
|
7275
|
-
"data-testid": "body-text"
|
|
7276
|
-
})))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
|
|
7277
|
-
className: "content-summary-text-link"
|
|
7278
|
-
}), link.text))));
|
|
7279
|
-
};
|
|
7280
|
-
|
|
7281
|
-
var _templateObject$N, _templateObject2$B, _templateObject3$p, _templateObject4$m, _templateObject5$i;
|
|
7282
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7283
|
-
var imageToLeft = _ref.imageToLeft;
|
|
7284
|
-
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7285
|
-
}, devices.mobile);
|
|
7286
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7287
|
-
var imageToLeft = _ref2.imageToLeft;
|
|
7288
|
-
return imageToLeft ? 'left' : 'right';
|
|
7289
|
-
}, devices.mobile);
|
|
7290
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7291
|
-
var imageToLeft = _ref3.imageToLeft;
|
|
7292
|
-
return imageToLeft ? 'right' : 'left';
|
|
7293
|
-
}, devices.mobile);
|
|
7294
|
-
var EditorialSubtitle = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-subtitle);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
7295
|
-
var EditorialText = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
7296
|
-
|
|
7297
|
-
var Editorial = function Editorial(_ref) {
|
|
7298
|
-
var _ref$imagePosition = _ref.imagePosition,
|
|
7299
|
-
imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
|
|
7300
|
-
subtitle = _ref.subtitle,
|
|
7301
|
-
text = _ref.text,
|
|
7302
|
-
children = _ref.children,
|
|
7303
|
-
className = _ref.className;
|
|
7304
|
-
var imageToLeft = imagePosition === 'left';
|
|
7305
|
-
return /*#__PURE__*/React__default.createElement(Grid, {
|
|
7306
|
-
className: className,
|
|
7307
|
-
"data-testid": "editorial-component"
|
|
7308
|
-
}, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
7309
|
-
columnStartDesktop: 3,
|
|
7310
|
-
columnSpanDesktop: 12,
|
|
7311
|
-
columnStartDevice: 2,
|
|
7312
|
-
columnSpanDevice: 12
|
|
7313
|
-
}, /*#__PURE__*/React__default.createElement(EditorialGrid, {
|
|
7314
|
-
imageToLeft: imageToLeft
|
|
7315
|
-
}, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
|
|
7316
|
-
"data-testid": "image-wrapper",
|
|
7317
|
-
imageToLeft: imageToLeft
|
|
7318
|
-
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
7319
|
-
aspectRatio: AspectRatio['1:1']
|
|
7320
|
-
}, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
|
|
7321
|
-
"data-testid": "text-wrapper",
|
|
7322
|
-
imageToLeft: imageToLeft
|
|
7323
|
-
}, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
|
|
7324
|
-
tag: "span"
|
|
7325
|
-
}, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
|
|
7326
|
-
tag: "div",
|
|
7327
|
-
size: "large",
|
|
7328
|
-
dangerouslySetInnerHTML: {
|
|
7329
|
-
__html: text
|
|
7330
|
-
}
|
|
7331
|
-
})))));
|
|
7332
|
-
};
|
|
7333
|
-
|
|
7334
|
-
var _templateObject$O, _templateObject2$C, _templateObject3$q;
|
|
7335
|
-
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
7336
|
-
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
7337
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
|
|
6693
|
+
var _templateObject$M, _templateObject2$A, _templateObject3$p;
|
|
6694
|
+
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
6695
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
6696
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
|
|
7338
6697
|
|
|
7339
|
-
var _excluded$
|
|
6698
|
+
var _excluded$h = ["text", "onClick"];
|
|
7340
6699
|
var HotFilters = function HotFilters(_ref) {
|
|
7341
6700
|
var items = _ref.items,
|
|
7342
6701
|
className = _ref.className,
|
|
@@ -7352,7 +6711,7 @@ var HotFilters = function HotFilters(_ref) {
|
|
|
7352
6711
|
}, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
|
|
7353
6712
|
var text = item.text,
|
|
7354
6713
|
_onClick = item.onClick,
|
|
7355
|
-
rest = _objectWithoutPropertiesLoose(item, _excluded$
|
|
6714
|
+
rest = _objectWithoutPropertiesLoose(item, _excluded$h);
|
|
7356
6715
|
var isSelected = index === selectedIndex;
|
|
7357
6716
|
return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
|
|
7358
6717
|
key: index,
|
|
@@ -7398,10 +6757,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7398
6757
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7399
6758
|
};
|
|
7400
6759
|
|
|
7401
|
-
var _templateObject$
|
|
7402
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7403
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7404
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
6760
|
+
var _templateObject$N, _templateObject2$B, _templateObject3$q, _templateObject4$m;
|
|
6761
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
|
|
6762
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
6763
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
|
|
7405
6764
|
var variant = _ref.variant,
|
|
7406
6765
|
theme = _ref.theme;
|
|
7407
6766
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7444,29 +6803,26 @@ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$r || (_template
|
|
|
7444
6803
|
theme = _ref10.theme;
|
|
7445
6804
|
return getTextColor$4(variant, theme, COLORS$4.pressed);
|
|
7446
6805
|
});
|
|
7447
|
-
var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$
|
|
6806
|
+
var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--information-panel-color);\n\n a {\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n color: var(--information-panel-color);\n }\n\n @media ", " {\n padding-top: 4px;\n }\n"])), devices.mobile);
|
|
7448
6807
|
|
|
7449
6808
|
var css_248z$1 = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2') format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
|
|
7450
6809
|
styleInject(css_248z$1);
|
|
7451
6810
|
|
|
7452
|
-
var css_248z$2 = "/* ~~~~~ General Styling Classes ~~~~~ */\n.typography_color-primary__LOfDi {\n color: var(--color-primary);\n}\n\n.typography_color-black__6MHRL {\n color: var(--color-base-black);\n}\n\n.typography_color-white__PfW5s {\n color: var(--color-base-white);\n}\n\n.typography_color-red__iPlbG {\n color: var(--color-primary-red);\n}\n\n.typography_color-grey__GA1c2 {\n color: var(--color-base-dark-grey);\n}\n\n.typography_color-inherit__RDd0Y {\n color: inherit;\n}\n\n.typography_em__E6tX- {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.typography_display__-F3p4 {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.typography_large__uq0zC {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -3px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.typography_header__BexiD {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.typography_subtitle__aoFTV {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.typography_bodycopy__vYtQ8 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.typography_overline__EnUK3 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.typography_large__uq0zC {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.typography_small__wfQ0K {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.typography_buttontext__vcxNi {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n font-weight: 400;\n\n @media (max-width: 699px) {\n font-weight: 500;\n line-height: 17px;\n }\n}\n\n/* Caption Text */\n.typography_captiontext__91UFb {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n\n @media (max-width: 699px) {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n}\n\n/* Navigation Text */\n.typography_navigationtext__YfGf7 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n font-weight: 500;\n\n @media (max-width: 699px) {\n font-size: 17px;\n line-height: 17px;\n }\n}\n";
|
|
7453
|
-
styleInject(css_248z$2);
|
|
7454
|
-
|
|
7455
|
-
var css_248z$3 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Shadows */\n --shadow-floating: 0px 4px 38px 0px #0000000a;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n --button-anchor-tab-color: var(--color-primary-red);\n\n /* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-small-width: 44px;\n --rotator-button-small-icon-width: 28px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-margin: 12px;\n\n --line-height-listing: 36px;\n\n --upsell-border-color: var(--color-primary-red);\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n\n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n\n --line-height-listing: 34px;\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n }\n\n /* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n --page-header-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
|
|
6811
|
+
var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Shadows */\n --shadow-floating: 0px 4px 38px 0px #0000000a;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n --button-anchor-tab-color: var(--color-primary-red);\n\n /* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-small-width: 44px;\n --rotator-button-small-icon-width: 28px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-margin: 12px;\n\n --line-height-listing: 36px;\n\n --upsell-border-color: var(--color-primary-red);\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n\n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n\n --line-height-listing: 34px;\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n }\n\n /* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n --page-header-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
|
|
7456
6812
|
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
7457
|
-
styleInject(css_248z$
|
|
6813
|
+
styleInject(css_248z$2);
|
|
7458
6814
|
|
|
7459
|
-
var css_248z$
|
|
6815
|
+
var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n /* Stream theme overrides */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-background: #1a1a1a;\n --color-primary-button: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-anchor-tab-color: var(--color-primary-black);\n\n --rotator-button-color: var(--color-base-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-black);\n\n --heading-promo-bg-color: var(--color-base-black);\n --page-header-bg-color: var(--color-primary-black);\n\n --upsell-border-color: var(--color-primary-black);\n}\n";
|
|
7460
6816
|
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
7461
|
-
styleInject(css_248z$
|
|
6817
|
+
styleInject(css_248z$3);
|
|
7462
6818
|
|
|
7463
|
-
var css_248z$
|
|
6819
|
+
var css_248z$4 = ".cinema-theme-module_cinemaTheme__f5QFs {\n /* White */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-button: #ffffff;\n --color-primary-background: #1a1a1a;\n --color-primary-button-reverse-bg: #ffffff;\n --color-primary-button-reverse: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n --button-color: var(--color-primary-black);\n --button-bg-color: var(--color-base-white);\n --button-hover-color: var(--color-white-hovered);\n --button-pressed-color: var(--color-white-pressed);\n --button-secondary-color: var(--color-base-white);\n --button-secondary-hover-color: var(--color-white-hovered);\n --button-secondary-pressed-color: var(--color-white-pressed);\n --button-tertiary-color: var(--color-base-white);\n --button-tertiary-hover-color: var(--color-white-hovered);\n --button-tertiary-pressed-color: var(--color-white-pressed);\n --button-anchor-tab-color: var(--color-primary-black);\n\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-primary-red);\n --announcement-banner-bg-color: var(--color-base-white);\n --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n --information-panel-color: var(--color-primary-black);\n --information-panel-bg-color: var(--color-base-white);\n --information-panel-button-color: var(--color-base-white);\n --information-panel-button-bg-color: var(--color-primary-red);\n --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n --heading-promo-bg-color: var(--color-base-white);\n --page-header-bg-color: var(--color-primary-black);\n\n --upsell-border-color: var(--color-primary-black);\n}\n";
|
|
7464
6820
|
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
7465
|
-
styleInject(css_248z$
|
|
6821
|
+
styleInject(css_248z$4);
|
|
7466
6822
|
|
|
7467
|
-
var css_248z$
|
|
6823
|
+
var css_248z$5 = ".schools-theme-module_schoolsTheme__CWHba {\n /* Schools theme overrides */\n --base-color-primary: #c8102e;\n --color-primary: #c8102e;\n --color-primary-button: #c8102e;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n\n @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n }\n}\n";
|
|
7468
6824
|
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
7469
|
-
styleInject(css_248z$
|
|
6825
|
+
styleInject(css_248z$5);
|
|
7470
6826
|
|
|
7471
6827
|
/* eslint-disable react/jsx-no-useless-fragment */
|
|
7472
6828
|
var DEFAULT_THEME = ThemeType.Core;
|
|
@@ -7638,33 +6994,33 @@ var Information = function Information(_ref) {
|
|
|
7638
6994
|
})))));
|
|
7639
6995
|
};
|
|
7640
6996
|
|
|
7641
|
-
var _templateObject$
|
|
7642
|
-
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$
|
|
6997
|
+
var _templateObject$O, _templateObject2$C, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$c, _templateObject7$8, _templateObject8$4;
|
|
6998
|
+
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7643
6999
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7644
7000
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7645
7001
|
}, devices.mobile);
|
|
7646
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
7647
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7002
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
7003
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
7648
7004
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7649
7005
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7650
7006
|
});
|
|
7651
|
-
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7007
|
+
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
|
|
7652
7008
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7653
7009
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7654
7010
|
}, devices.mobile);
|
|
7655
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7011
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref4) {
|
|
7656
7012
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7657
7013
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7658
7014
|
}, devices.mobile);
|
|
7659
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
7660
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
7015
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
7016
|
+
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
|
|
7661
7017
|
var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
|
|
7662
7018
|
return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
|
|
7663
7019
|
}, devices.mobile, function (_ref6) {
|
|
7664
7020
|
var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
|
|
7665
7021
|
return isPageHeadingWithoutTitle && "\n margin-top: 15px;\n ";
|
|
7666
7022
|
});
|
|
7667
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$
|
|
7023
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
7668
7024
|
|
|
7669
7025
|
var PageHeading = function PageHeading(_ref) {
|
|
7670
7026
|
var title = _ref.title,
|
|
@@ -7734,17 +7090,17 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7734
7090
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7735
7091
|
};
|
|
7736
7092
|
|
|
7737
|
-
var _templateObject$
|
|
7738
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7739
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7740
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
7741
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7742
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7743
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
7744
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$
|
|
7745
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
7093
|
+
var _templateObject$P, _templateObject2$D, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
|
|
7094
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
7095
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
7096
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7097
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7098
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7099
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7100
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
7101
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7746
7102
|
|
|
7747
|
-
var _excluded$
|
|
7103
|
+
var _excluded$i = ["text"];
|
|
7748
7104
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
7749
7105
|
var children = _ref.children,
|
|
7750
7106
|
text = _ref.text,
|
|
@@ -7762,7 +7118,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7762
7118
|
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
7763
7119
|
var _ref2 = link || {},
|
|
7764
7120
|
linkText = _ref2.text,
|
|
7765
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7121
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
|
|
7766
7122
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
7767
7123
|
bgUrlDesktop: bgUrlDesktop,
|
|
7768
7124
|
bgUrlDevice: bgUrlDevice,
|
|
@@ -7805,21 +7161,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7805
7161
|
}, "Scroll Down"))) : null);
|
|
7806
7162
|
};
|
|
7807
7163
|
|
|
7808
|
-
var _templateObject$
|
|
7809
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7164
|
+
var _templateObject$Q, _templateObject2$E, _templateObject3$t, _templateObject4$p, _templateObject5$k;
|
|
7165
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
7810
7166
|
var color = _ref.color;
|
|
7811
7167
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
7812
7168
|
}, devices.mobileAndTablet);
|
|
7813
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
7169
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
7814
7170
|
var hasImage = _ref2.hasImage;
|
|
7815
7171
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7816
7172
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7817
7173
|
var hasImage = _ref3.hasImage;
|
|
7818
7174
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7819
7175
|
});
|
|
7820
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
7821
|
-
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7822
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7176
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
7177
|
+
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
7178
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7823
7179
|
|
|
7824
7180
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7825
7181
|
var _image$src, _image$alt;
|
|
@@ -7849,36 +7205,36 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7849
7205
|
})))));
|
|
7850
7206
|
};
|
|
7851
7207
|
|
|
7852
|
-
var _templateObject$
|
|
7853
|
-
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$
|
|
7854
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7855
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7856
|
-
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7857
|
-
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$
|
|
7208
|
+
var _templateObject$R, _templateObject2$F, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$e, _templateObject7$a, _templateObject8$6, _templateObject9$3, _templateObject0$3, _templateObject1$2;
|
|
7209
|
+
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
7210
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
7211
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7212
|
+
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
7213
|
+
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
|
|
7858
7214
|
var theme = _ref.theme;
|
|
7859
7215
|
return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
7860
7216
|
}, function (_ref2) {
|
|
7861
7217
|
var showBlock = _ref2.showBlock;
|
|
7862
7218
|
return showBlock ? 'block' : 'none';
|
|
7863
7219
|
}, devices.mobile);
|
|
7864
|
-
var BadgeWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$
|
|
7865
|
-
var AdditionalContentWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
7220
|
+
var BadgeWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
|
|
7221
|
+
var AdditionalContentWrapper = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
|
|
7866
7222
|
var isBadgePresent = _ref3.isBadgePresent;
|
|
7867
7223
|
return isBadgePresent ? '1' : '4';
|
|
7868
7224
|
});
|
|
7869
|
-
var MainButtonWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
7225
|
+
var MainButtonWrapper = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: end;\n width: 200px;\n\n @media ", " {\n margin-bottom: ", ";\n width: 100%;\n order: 3;\n }\n"])), devices.mobile, function (_ref4) {
|
|
7870
7226
|
var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
|
|
7871
7227
|
return isAdditionalButtonPresent ? '20px' : '0';
|
|
7872
7228
|
});
|
|
7873
|
-
var AdditionalButtonWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
7874
|
-
var TitleWrapper$3 = /*#__PURE__*/styled.div(_templateObject0$
|
|
7229
|
+
var AdditionalButtonWrapper = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
|
|
7230
|
+
var TitleWrapper$3 = /*#__PURE__*/styled.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 10px 0;\n\n h1,\n h2,\n h3 {\n color: ", ";\n }\n\n @media ", " {\n padding: 0;\n order: 2;\n margin-bottom: ", ";\n }\n"])), function (_ref5) {
|
|
7875
7231
|
var theme = _ref5.theme;
|
|
7876
7232
|
return theme == ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
|
|
7877
7233
|
}, devices.mobile, function (_ref6) {
|
|
7878
7234
|
var isButtonPresent = _ref6.isButtonPresent;
|
|
7879
7235
|
return isButtonPresent ? '20px' : '0';
|
|
7880
7236
|
});
|
|
7881
|
-
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject1$
|
|
7237
|
+
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n min-height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
|
|
7882
7238
|
|
|
7883
7239
|
var PageHeadingPromoBadge;
|
|
7884
7240
|
(function (PageHeadingPromoBadge) {
|
|
@@ -8063,7 +7419,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8063
7419
|
})))))))))));
|
|
8064
7420
|
};
|
|
8065
7421
|
|
|
8066
|
-
var _templateObject$
|
|
7422
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$v, _templateObject4$r;
|
|
8067
7423
|
var GRID = {
|
|
8068
7424
|
desktop: {
|
|
8069
7425
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8076,19 +7432,19 @@ var GRID = {
|
|
|
8076
7432
|
right: '2 / 1 / 3 / 15'
|
|
8077
7433
|
}
|
|
8078
7434
|
};
|
|
8079
|
-
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7435
|
+
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8080
7436
|
var $background = _ref.$background;
|
|
8081
7437
|
return "var(--color-" + $background + ")";
|
|
8082
7438
|
});
|
|
8083
|
-
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7439
|
+
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8084
7440
|
var hasImage = _ref2.hasImage;
|
|
8085
7441
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8086
7442
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8087
7443
|
var hasImage = _ref3.hasImage;
|
|
8088
7444
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8089
7445
|
});
|
|
8090
|
-
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8091
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7446
|
+
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
7447
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8092
7448
|
|
|
8093
7449
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
8094
7450
|
var _image$src, _image$alt;
|
|
@@ -8111,12 +7467,12 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8111
7467
|
})))));
|
|
8112
7468
|
};
|
|
8113
7469
|
|
|
8114
|
-
var _templateObject$
|
|
8115
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
8116
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
8117
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8118
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8119
|
-
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$
|
|
7470
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$w, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4;
|
|
7471
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
7472
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
7473
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
7474
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
7475
|
+
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8120
7476
|
var invert = _ref.invert,
|
|
8121
7477
|
theme = _ref.theme;
|
|
8122
7478
|
return invert ? theme.colors.white : theme.colors.primary;
|
|
@@ -8132,10 +7488,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (
|
|
|
8132
7488
|
var theme = _ref4.theme;
|
|
8133
7489
|
return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
|
|
8134
7490
|
}, devices.tablet, devices.mobile);
|
|
8135
|
-
var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
8136
|
-
var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
8137
|
-
var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
8138
|
-
var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject0$
|
|
7491
|
+
var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
|
|
7492
|
+
var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
|
|
7493
|
+
var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
|
|
7494
|
+
var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject0$4 || (_templateObject0$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
|
|
8139
7495
|
var invert = _ref5.invert,
|
|
8140
7496
|
theme = _ref5.theme;
|
|
8141
7497
|
return invert ? theme.colors.primary : theme.colors.white;
|
|
@@ -8215,173 +7571,562 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
|
|
|
8215
7571
|
return null;
|
|
8216
7572
|
}
|
|
8217
7573
|
};
|
|
8218
|
-
var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
8219
|
-
var brandingStyle = _ref.brandingStyle,
|
|
8220
|
-
_ref$invert = _ref.invert,
|
|
8221
|
-
invert = _ref$invert === void 0 ? false : _ref$invert,
|
|
8222
|
-
brandingText = _ref.brandingText,
|
|
8223
|
-
brandingLink = _ref.brandingLink;
|
|
8224
|
-
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
7574
|
+
var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
7575
|
+
var brandingStyle = _ref.brandingStyle,
|
|
7576
|
+
_ref$invert = _ref.invert,
|
|
7577
|
+
invert = _ref$invert === void 0 ? false : _ref$invert,
|
|
7578
|
+
brandingText = _ref.brandingText,
|
|
7579
|
+
brandingLink = _ref.brandingLink;
|
|
7580
|
+
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
7581
|
+
};
|
|
7582
|
+
|
|
7583
|
+
var _excluded$j = ["text"];
|
|
7584
|
+
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7585
|
+
var mobileVideo = video.mobile || video.desktop;
|
|
7586
|
+
var desktopVideo = video.desktop || video.mobile;
|
|
7587
|
+
var mobilePoster = poster.mobile || poster.desktop;
|
|
7588
|
+
var desktopPoster = poster.desktop || poster.mobile;
|
|
7589
|
+
var _useState = useState(desktopPoster),
|
|
7590
|
+
posterUrl = _useState[0],
|
|
7591
|
+
setPoster = _useState[1];
|
|
7592
|
+
var _useState2 = useState(desktopVideo),
|
|
7593
|
+
videoUrl = _useState2[0],
|
|
7594
|
+
setVideoUrl = _useState2[1];
|
|
7595
|
+
var isMobile = useMobile();
|
|
7596
|
+
useEffect(function () {
|
|
7597
|
+
setPoster(isMobile ? mobilePoster : desktopPoster);
|
|
7598
|
+
setVideoUrl(isMobile ? mobileVideo : desktopVideo);
|
|
7599
|
+
}, [isMobile]);
|
|
7600
|
+
return {
|
|
7601
|
+
posterUrl: posterUrl,
|
|
7602
|
+
videoUrl: videoUrl
|
|
7603
|
+
};
|
|
7604
|
+
};
|
|
7605
|
+
var VideoWithControls = function VideoWithControls(_ref) {
|
|
7606
|
+
var video = _ref.video,
|
|
7607
|
+
poster = _ref.poster;
|
|
7608
|
+
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
7609
|
+
posterUrl = _useResponsiveVideo.posterUrl,
|
|
7610
|
+
videoUrl = _useResponsiveVideo.videoUrl;
|
|
7611
|
+
var isIOS = useIOS();
|
|
7612
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
|
|
7613
|
+
id: video.elementId,
|
|
7614
|
+
width: "100%",
|
|
7615
|
+
height: "100%",
|
|
7616
|
+
muted: true,
|
|
7617
|
+
poster: posterUrl,
|
|
7618
|
+
src: videoUrl,
|
|
7619
|
+
"data-testid": "compact-video",
|
|
7620
|
+
playsInline: true
|
|
7621
|
+
}, /*#__PURE__*/React__default.createElement("source", {
|
|
7622
|
+
src: videoUrl
|
|
7623
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7624
|
+
src: posterUrl,
|
|
7625
|
+
alt: poster.alt,
|
|
7626
|
+
"data-testid": "compact-image"
|
|
7627
|
+
})), /*#__PURE__*/React__default.createElement(VideoControls, {
|
|
7628
|
+
loop: true,
|
|
7629
|
+
videoElementId: video.elementId,
|
|
7630
|
+
muted: true,
|
|
7631
|
+
autoPlay: false,
|
|
7632
|
+
soundControl: !isIOS
|
|
7633
|
+
}));
|
|
7634
|
+
};
|
|
7635
|
+
var CompactHeaderImage = function CompactHeaderImage(_ref2) {
|
|
7636
|
+
var mobile = _ref2.mobile,
|
|
7637
|
+
desktop = _ref2.desktop,
|
|
7638
|
+
alt = _ref2.alt;
|
|
7639
|
+
return /*#__PURE__*/React__default.createElement("picture", {
|
|
7640
|
+
"data-testid": "compact-picture"
|
|
7641
|
+
}, mobile && /*#__PURE__*/React__default.createElement("source", {
|
|
7642
|
+
srcSet: mobile,
|
|
7643
|
+
media: "" + devices.mobile,
|
|
7644
|
+
"data-testid": "compact-mobile-image-source"
|
|
7645
|
+
}), /*#__PURE__*/React__default.createElement("source", {
|
|
7646
|
+
srcSet: desktop,
|
|
7647
|
+
media: "" + devices.desktop,
|
|
7648
|
+
"data-testid": "compact-desktop-image-source"
|
|
7649
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7650
|
+
src: desktop,
|
|
7651
|
+
alt: alt,
|
|
7652
|
+
"data-testid": "compact-image"
|
|
7653
|
+
}));
|
|
7654
|
+
};
|
|
7655
|
+
var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
|
|
7656
|
+
var video = _ref3.video,
|
|
7657
|
+
poster = _ref3.poster;
|
|
7658
|
+
if (!video.desktop && !video.mobile) {
|
|
7659
|
+
return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
|
|
7660
|
+
}
|
|
7661
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
7662
|
+
video: video,
|
|
7663
|
+
poster: poster
|
|
7664
|
+
});
|
|
7665
|
+
};
|
|
7666
|
+
var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
7667
|
+
var title = _ref4.title,
|
|
7668
|
+
link = _ref4.link,
|
|
7669
|
+
_ref4$sponsor = _ref4.sponsor,
|
|
7670
|
+
sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
|
|
7671
|
+
customSponsorImage = _ref4.customSponsorImage,
|
|
7672
|
+
bgUrlDesktop = _ref4.bgUrlDesktop,
|
|
7673
|
+
bgUrlDevice = _ref4.bgUrlDevice,
|
|
7674
|
+
videoUrlDesktop = _ref4.videoUrlDesktop,
|
|
7675
|
+
videoUrlMobile = _ref4.videoUrlMobile,
|
|
7676
|
+
_ref4$bgImageAltText = _ref4.bgImageAltText,
|
|
7677
|
+
bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
|
|
7678
|
+
_ref4$invert = _ref4.invert,
|
|
7679
|
+
invert = _ref4$invert === void 0 ? false : _ref4$invert,
|
|
7680
|
+
_ref4$brandingStyle = _ref4.brandingStyle,
|
|
7681
|
+
brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
|
|
7682
|
+
brandingText = _ref4.brandingText,
|
|
7683
|
+
brandingLink = _ref4.brandingLink,
|
|
7684
|
+
_ref4$showCopy = _ref4.showCopy,
|
|
7685
|
+
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
|
|
7686
|
+
var _ref5 = link || {},
|
|
7687
|
+
linkText = _ref5.text,
|
|
7688
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
|
|
7689
|
+
// const titleSize = title && title.length > 20 ? 4 : 3;
|
|
7690
|
+
var video = {
|
|
7691
|
+
elementId: 'compact-header-video',
|
|
7692
|
+
desktop: videoUrlDesktop,
|
|
7693
|
+
mobile: videoUrlMobile
|
|
7694
|
+
};
|
|
7695
|
+
var poster = {
|
|
7696
|
+
desktop: bgUrlDesktop,
|
|
7697
|
+
mobile: bgUrlDevice,
|
|
7698
|
+
alt: bgImageAltText
|
|
7699
|
+
};
|
|
7700
|
+
return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
7701
|
+
"data-testid": "compact-sponsor"
|
|
7702
|
+
}, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
7703
|
+
"data-testid": "compact-custom-sponsor"
|
|
7704
|
+
}, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
|
|
7705
|
+
video: video,
|
|
7706
|
+
poster: poster
|
|
7707
|
+
})), showCopy && (/*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
7708
|
+
className: "page-heading-compact__background",
|
|
7709
|
+
invert: invert
|
|
7710
|
+
}, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
|
|
7711
|
+
brandingStyle: brandingStyle,
|
|
7712
|
+
brandingText: brandingText,
|
|
7713
|
+
brandingLink: brandingLink,
|
|
7714
|
+
invert: invert
|
|
7715
|
+
}), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
7716
|
+
size: "large",
|
|
7717
|
+
hierarchy: "h1"
|
|
7718
|
+
}, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
|
|
7719
|
+
invert: invert,
|
|
7720
|
+
className: "page-heading-compact__button"
|
|
7721
|
+
}), linkText))))));
|
|
7722
|
+
};
|
|
7723
|
+
|
|
7724
|
+
var _templateObject$U, _templateObject2$I;
|
|
7725
|
+
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
7726
|
+
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
7727
|
+
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
7728
|
+
var transitioning = _ref.transitioning;
|
|
7729
|
+
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
7730
|
+
}, function (_ref2) {
|
|
7731
|
+
var translateX = _ref2.translateX;
|
|
7732
|
+
return translateX + "px";
|
|
7733
|
+
}, SWIPE_SLIDE_CLASS_NAME);
|
|
7734
|
+
|
|
7735
|
+
/**
|
|
7736
|
+
* Generates a random string in the format XXX-XXX.
|
|
7737
|
+
* Does not meet UUID standards.
|
|
7738
|
+
* To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
7739
|
+
*
|
|
7740
|
+
* @return {string} A random string in the format XXX-XXX.
|
|
7741
|
+
*/
|
|
7742
|
+
var generateDomElementId = function generateDomElementId() {
|
|
7743
|
+
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
7744
|
+
var datePart = Date.now().toString().slice(-3);
|
|
7745
|
+
return randomPart + "-" + datePart;
|
|
7746
|
+
};
|
|
7747
|
+
|
|
7748
|
+
var DISABLED_TABBING_TAGS = 'a, button';
|
|
7749
|
+
var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
|
|
7750
|
+
if (!element) return;
|
|
7751
|
+
var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
|
|
7752
|
+
focusables.forEach(function (el) {
|
|
7753
|
+
if (shouldDisable) el.setAttribute('tabindex', '-1');
|
|
7754
|
+
});
|
|
7755
|
+
};
|
|
7756
|
+
var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
|
|
7757
|
+
return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
|
|
7758
|
+
};
|
|
7759
|
+
var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
|
|
7760
|
+
var widthSoFar = 0;
|
|
7761
|
+
var visible = [];
|
|
7762
|
+
for (var i = currentIndex; i < slidesLength; i++) {
|
|
7763
|
+
var _slideWidths$i;
|
|
7764
|
+
var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
|
|
7765
|
+
if (widthSoFar + width > containerWidth) break;
|
|
7766
|
+
visible.push(i);
|
|
7767
|
+
widthSoFar += width;
|
|
7768
|
+
}
|
|
7769
|
+
return visible;
|
|
7770
|
+
};
|
|
7771
|
+
var getMovedSlides = function getMovedSlides(delta, slideWidths) {
|
|
7772
|
+
var absDelta = Math.abs(delta);
|
|
7773
|
+
var movedSlides = 0;
|
|
7774
|
+
var accumulated = 0;
|
|
7775
|
+
for (var i = 0; i < slideWidths.length; i++) {
|
|
7776
|
+
accumulated += slideWidths[i];
|
|
7777
|
+
// Allow partial slide (e.g. 50% of next slide) to count
|
|
7778
|
+
var partialThreshold = slideWidths[i] * 0.5;
|
|
7779
|
+
if (absDelta > accumulated - partialThreshold) {
|
|
7780
|
+
movedSlides++;
|
|
7781
|
+
} else {
|
|
7782
|
+
break;
|
|
7783
|
+
}
|
|
7784
|
+
}
|
|
7785
|
+
return movedSlides;
|
|
8225
7786
|
};
|
|
8226
7787
|
|
|
8227
|
-
var _excluded$
|
|
8228
|
-
var
|
|
8229
|
-
|
|
8230
|
-
|
|
8231
|
-
|
|
8232
|
-
|
|
8233
|
-
|
|
8234
|
-
|
|
8235
|
-
|
|
8236
|
-
var
|
|
8237
|
-
|
|
8238
|
-
|
|
8239
|
-
|
|
7788
|
+
var _excluded$k = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
|
|
7789
|
+
var MAX_CLONES_NUMBER = 6;
|
|
7790
|
+
var CLICK_DRAG_THRESHOLD = 10;
|
|
7791
|
+
var getClonesCount = function getClonesCount(infinite, childrenLength) {
|
|
7792
|
+
if (!infinite) return 0;
|
|
7793
|
+
return Math.min(childrenLength, MAX_CLONES_NUMBER);
|
|
7794
|
+
};
|
|
7795
|
+
var getSlidedWidth = function getSlidedWidth(slide) {
|
|
7796
|
+
if (!slide) return 0;
|
|
7797
|
+
var style = window.getComputedStyle(slide);
|
|
7798
|
+
var marginLeft = parseFloat(style.marginLeft) || 0;
|
|
7799
|
+
var marginRight = parseFloat(style.marginRight) || 0;
|
|
7800
|
+
return slide.getBoundingClientRect().width + marginLeft + marginRight;
|
|
7801
|
+
};
|
|
7802
|
+
var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
7803
|
+
var children = _ref.children,
|
|
7804
|
+
_ref$infinite = _ref.infinite,
|
|
7805
|
+
infinite = _ref$infinite === void 0 ? false : _ref$infinite,
|
|
7806
|
+
onIndexChange = _ref.onIndexChange,
|
|
7807
|
+
_ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
|
|
7808
|
+
slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
|
|
7809
|
+
_ref$slidesAriaHidden = _ref.slidesAriaHidden,
|
|
7810
|
+
slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
|
|
7811
|
+
onActiveChange = _ref.onActiveChange,
|
|
7812
|
+
onOverflowChange = _ref.onOverflowChange,
|
|
7813
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
|
|
7814
|
+
var containerRef = useRef(null);
|
|
7815
|
+
var childRefs = useRef([]);
|
|
7816
|
+
var startX = useRef(0);
|
|
7817
|
+
var currentTranslate = useRef(0);
|
|
7818
|
+
var isDragging = useRef(false);
|
|
7819
|
+
var isMouseDown = useRef(false);
|
|
7820
|
+
var isActive = useRef(false);
|
|
7821
|
+
var isClickPrevented = useRef(false);
|
|
7822
|
+
var uniqueIdRef = useRef(generateDomElementId());
|
|
7823
|
+
var _useState = useState(null),
|
|
7824
|
+
dragTranslateX = _useState[0],
|
|
7825
|
+
setDragTranslateX = _useState[1];
|
|
7826
|
+
var _useState2 = useState(false),
|
|
7827
|
+
transitioning = _useState2[0],
|
|
7828
|
+
setTransitioning = _useState2[1];
|
|
7829
|
+
var _useState3 = useState([]),
|
|
7830
|
+
slideWidths = _useState3[0],
|
|
7831
|
+
setSlideWidths = _useState3[1];
|
|
7832
|
+
var _useState4 = useState(0),
|
|
7833
|
+
containerWidth = _useState4[0],
|
|
7834
|
+
setContainerWidth = _useState4[1];
|
|
7835
|
+
var _useMemo = useMemo(function () {
|
|
7836
|
+
var count = getClonesCount(infinite, children.length);
|
|
7837
|
+
var leftClones = infinite ? children.slice(-count) : [];
|
|
7838
|
+
var rightClones = infinite ? children.slice(0, count) : [];
|
|
7839
|
+
var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
|
|
7840
|
+
return {
|
|
7841
|
+
slides: allSlides,
|
|
7842
|
+
clonesCount: count
|
|
7843
|
+
};
|
|
7844
|
+
}, [children, infinite]),
|
|
7845
|
+
slides = _useMemo.slides,
|
|
7846
|
+
clonesCount = _useMemo.clonesCount;
|
|
7847
|
+
var _useState5 = useState(infinite ? clonesCount : 0),
|
|
7848
|
+
currentIndex = _useState5[0],
|
|
7849
|
+
setCurrentIndex = _useState5[1];
|
|
8240
7850
|
useEffect(function () {
|
|
8241
|
-
|
|
8242
|
-
|
|
8243
|
-
|
|
8244
|
-
|
|
8245
|
-
|
|
8246
|
-
|
|
7851
|
+
var handler = function handler(e) {
|
|
7852
|
+
if (isClickPrevented.current) {
|
|
7853
|
+
e.preventDefault();
|
|
7854
|
+
e.stopPropagation();
|
|
7855
|
+
}
|
|
7856
|
+
};
|
|
7857
|
+
var containerElement = containerRef.current;
|
|
7858
|
+
containerElement == null || containerElement.addEventListener('click', handler, true);
|
|
7859
|
+
return function () {
|
|
7860
|
+
return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
|
|
7861
|
+
};
|
|
7862
|
+
}, []);
|
|
7863
|
+
useEffect(function () {
|
|
7864
|
+
if (!onIndexChange) return;
|
|
7865
|
+
if (!infinite) {
|
|
7866
|
+
onIndexChange(currentIndex);
|
|
7867
|
+
} else {
|
|
7868
|
+
var offset = currentIndex - clonesCount + children.length;
|
|
7869
|
+
var realIndex = offset % children.length;
|
|
7870
|
+
onIndexChange(realIndex);
|
|
7871
|
+
}
|
|
7872
|
+
}, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
|
|
7873
|
+
var updateDimensions = useCallback(function () {
|
|
7874
|
+
var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
|
|
7875
|
+
var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
|
|
7876
|
+
setContainerWidth(cw);
|
|
7877
|
+
setSlideWidths(widths);
|
|
7878
|
+
if (!infinite) {
|
|
7879
|
+
var totalWidth = widths.reduce(function (acc, w) {
|
|
7880
|
+
return acc + w;
|
|
7881
|
+
}, 0);
|
|
7882
|
+
var visibleSpace = cw - (slidesOffsetBefore || 0);
|
|
7883
|
+
var overflow = totalWidth > Math.max(0, visibleSpace);
|
|
7884
|
+
onOverflowChange == null || onOverflowChange(overflow);
|
|
7885
|
+
}
|
|
7886
|
+
}, []);
|
|
7887
|
+
useEffect(function () {
|
|
7888
|
+
var animationFrameRequestId = requestAnimationFrame(updateDimensions);
|
|
7889
|
+
return function () {
|
|
7890
|
+
return cancelAnimationFrame(animationFrameRequestId);
|
|
7891
|
+
};
|
|
7892
|
+
}, [children]);
|
|
7893
|
+
useEffect(function () {
|
|
7894
|
+
var observer = new ResizeObserver(updateDimensions);
|
|
7895
|
+
if (containerRef.current) observer.observe(containerRef.current);
|
|
7896
|
+
return function () {
|
|
7897
|
+
return observer.disconnect();
|
|
7898
|
+
};
|
|
7899
|
+
}, [children]);
|
|
7900
|
+
var setIsActive = function setIsActive() {
|
|
7901
|
+
if (!isActive.current) {
|
|
7902
|
+
isActive.current = true;
|
|
7903
|
+
onActiveChange == null || onActiveChange(true);
|
|
7904
|
+
}
|
|
7905
|
+
};
|
|
7906
|
+
var getTranslateX = function getTranslateX() {
|
|
7907
|
+
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
|
|
7908
|
+
return acc + width;
|
|
7909
|
+
}, 0);
|
|
7910
|
+
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
7911
|
+
};
|
|
7912
|
+
var getTranslateForIndex = function getTranslateForIndex(index) {
|
|
7913
|
+
var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
|
|
7914
|
+
return acc + width;
|
|
7915
|
+
}, 0);
|
|
7916
|
+
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
7917
|
+
};
|
|
7918
|
+
var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
|
|
7919
|
+
var delta = currentTranslate.current - getTranslateX();
|
|
7920
|
+
var direction = delta > 0 ? -1 : 1;
|
|
7921
|
+
var movedSlides = getMovedSlides(delta, slideWidths);
|
|
7922
|
+
if (Math.abs(delta) > 20) {
|
|
7923
|
+
movedSlides = Math.max(1, movedSlides);
|
|
7924
|
+
var targetIndex = currentIndex + direction * movedSlides;
|
|
7925
|
+
var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
|
|
7926
|
+
if (!infinite) {
|
|
7927
|
+
currentTranslate.current = getTranslateForIndex(finalIndex);
|
|
7928
|
+
setDragTranslateX(null);
|
|
7929
|
+
}
|
|
7930
|
+
setTransitioning(true);
|
|
7931
|
+
setCurrentIndex(finalIndex);
|
|
7932
|
+
} else {
|
|
7933
|
+
setTransitioning(true);
|
|
7934
|
+
setCurrentIndex(function (prev) {
|
|
7935
|
+
return prev;
|
|
7936
|
+
});
|
|
7937
|
+
}
|
|
7938
|
+
setDragTranslateX(null);
|
|
7939
|
+
};
|
|
7940
|
+
var canMoveNext = function canMoveNext() {
|
|
7941
|
+
if (infinite) return true;
|
|
7942
|
+
if (slideWidths.length === 0 || containerWidth === 0) return false;
|
|
7943
|
+
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
7944
|
+
return acc + w;
|
|
7945
|
+
}, 0);
|
|
7946
|
+
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
|
|
7947
|
+
return acc + w;
|
|
7948
|
+
}, 0);
|
|
7949
|
+
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
7950
|
+
var remainingToRight = totalWidth - widthsBefore - visibleSpace;
|
|
7951
|
+
var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
7952
|
+
var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
|
|
7953
|
+
var nextIndex = lastVisibleIndex + 1;
|
|
7954
|
+
if (nextIndex >= slideWidths.length) return false;
|
|
7955
|
+
var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
|
|
7956
|
+
if (nextSlideWidth === 0) return false;
|
|
7957
|
+
var EPS = 1; // pixel tolerance
|
|
7958
|
+
// full next slide fits
|
|
7959
|
+
if (remainingToRight + EPS >= nextSlideWidth) return true;
|
|
7960
|
+
return remainingToRight > 0;
|
|
7961
|
+
};
|
|
7962
|
+
var handleTransitionEnd = function handleTransitionEnd() {
|
|
7963
|
+
setTransitioning(false);
|
|
7964
|
+
if (!infinite) return;
|
|
7965
|
+
if (currentIndex >= children.length + clonesCount) {
|
|
7966
|
+
setCurrentIndex(clonesCount);
|
|
7967
|
+
} else if (currentIndex < clonesCount) {
|
|
7968
|
+
setCurrentIndex(children.length + currentIndex);
|
|
7969
|
+
}
|
|
7970
|
+
};
|
|
7971
|
+
var goToPrev = function goToPrev() {
|
|
7972
|
+
if (transitioning) return;
|
|
7973
|
+
setIsActive();
|
|
7974
|
+
setTransitioning(true);
|
|
7975
|
+
setCurrentIndex(function (prev) {
|
|
7976
|
+
var target = infinite ? prev - 1 : Math.max(0, prev - 1);
|
|
7977
|
+
if (!infinite) {
|
|
7978
|
+
currentTranslate.current = getTranslateForIndex(target);
|
|
7979
|
+
setDragTranslateX(null);
|
|
7980
|
+
}
|
|
7981
|
+
return target;
|
|
7982
|
+
});
|
|
7983
|
+
};
|
|
7984
|
+
var goToNext = function goToNext() {
|
|
7985
|
+
if (transitioning || !canMoveNext()) return;
|
|
7986
|
+
setIsActive();
|
|
7987
|
+
setTransitioning(true);
|
|
7988
|
+
setCurrentIndex(function (prev) {
|
|
7989
|
+
var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
|
|
7990
|
+
if (!infinite) {
|
|
7991
|
+
currentTranslate.current = getTranslateForIndex(target);
|
|
7992
|
+
setDragTranslateX(null);
|
|
7993
|
+
}
|
|
7994
|
+
return target;
|
|
7995
|
+
});
|
|
8247
7996
|
};
|
|
8248
|
-
|
|
8249
|
-
|
|
8250
|
-
|
|
8251
|
-
|
|
8252
|
-
|
|
8253
|
-
|
|
8254
|
-
|
|
8255
|
-
|
|
8256
|
-
|
|
8257
|
-
|
|
8258
|
-
|
|
8259
|
-
|
|
8260
|
-
|
|
8261
|
-
|
|
8262
|
-
|
|
8263
|
-
"data-testid": "compact-video",
|
|
8264
|
-
playsInline: true
|
|
8265
|
-
}, /*#__PURE__*/React__default.createElement("source", {
|
|
8266
|
-
src: videoUrl
|
|
8267
|
-
}), /*#__PURE__*/React__default.createElement("img", {
|
|
8268
|
-
src: posterUrl,
|
|
8269
|
-
alt: poster.alt,
|
|
8270
|
-
"data-testid": "compact-image"
|
|
8271
|
-
})), /*#__PURE__*/React__default.createElement(VideoControls, {
|
|
8272
|
-
loop: true,
|
|
8273
|
-
videoElementId: video.elementId,
|
|
8274
|
-
muted: true,
|
|
8275
|
-
autoPlay: false,
|
|
8276
|
-
soundControl: !isIOS
|
|
8277
|
-
}));
|
|
8278
|
-
};
|
|
8279
|
-
var CompactHeaderImage = function CompactHeaderImage(_ref2) {
|
|
8280
|
-
var mobile = _ref2.mobile,
|
|
8281
|
-
desktop = _ref2.desktop,
|
|
8282
|
-
alt = _ref2.alt;
|
|
8283
|
-
return /*#__PURE__*/React__default.createElement("picture", {
|
|
8284
|
-
"data-testid": "compact-picture"
|
|
8285
|
-
}, mobile && /*#__PURE__*/React__default.createElement("source", {
|
|
8286
|
-
srcSet: mobile,
|
|
8287
|
-
media: "" + devices.mobile,
|
|
8288
|
-
"data-testid": "compact-mobile-image-source"
|
|
8289
|
-
}), /*#__PURE__*/React__default.createElement("source", {
|
|
8290
|
-
srcSet: desktop,
|
|
8291
|
-
media: "" + devices.desktop,
|
|
8292
|
-
"data-testid": "compact-desktop-image-source"
|
|
8293
|
-
}), /*#__PURE__*/React__default.createElement("img", {
|
|
8294
|
-
src: desktop,
|
|
8295
|
-
alt: alt,
|
|
8296
|
-
"data-testid": "compact-image"
|
|
8297
|
-
}));
|
|
8298
|
-
};
|
|
8299
|
-
var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
|
|
8300
|
-
var video = _ref3.video,
|
|
8301
|
-
poster = _ref3.poster;
|
|
8302
|
-
if (!video.desktop && !video.mobile) {
|
|
8303
|
-
return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
|
|
8304
|
-
}
|
|
8305
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8306
|
-
video: video,
|
|
8307
|
-
poster: poster
|
|
7997
|
+
useImperativeHandle(ref, function () {
|
|
7998
|
+
return {
|
|
7999
|
+
nextSlide: goToNext,
|
|
8000
|
+
prevSlide: goToPrev,
|
|
8001
|
+
hasOverflow: function hasOverflow() {
|
|
8002
|
+
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
8003
|
+
return acc + w;
|
|
8004
|
+
}, 0);
|
|
8005
|
+
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
8006
|
+
return totalWidth > Math.max(0, visibleSpace);
|
|
8007
|
+
},
|
|
8008
|
+
hasNext: function hasNext() {
|
|
8009
|
+
return canMoveNext();
|
|
8010
|
+
}
|
|
8011
|
+
};
|
|
8308
8012
|
});
|
|
8309
|
-
|
|
8310
|
-
|
|
8311
|
-
|
|
8312
|
-
|
|
8313
|
-
|
|
8314
|
-
|
|
8315
|
-
customSponsorImage = _ref4.customSponsorImage,
|
|
8316
|
-
bgUrlDesktop = _ref4.bgUrlDesktop,
|
|
8317
|
-
bgUrlDevice = _ref4.bgUrlDevice,
|
|
8318
|
-
videoUrlDesktop = _ref4.videoUrlDesktop,
|
|
8319
|
-
videoUrlMobile = _ref4.videoUrlMobile,
|
|
8320
|
-
_ref4$bgImageAltText = _ref4.bgImageAltText,
|
|
8321
|
-
bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
|
|
8322
|
-
_ref4$invert = _ref4.invert,
|
|
8323
|
-
invert = _ref4$invert === void 0 ? false : _ref4$invert,
|
|
8324
|
-
_ref4$brandingStyle = _ref4.brandingStyle,
|
|
8325
|
-
brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
|
|
8326
|
-
brandingText = _ref4.brandingText,
|
|
8327
|
-
brandingLink = _ref4.brandingLink,
|
|
8328
|
-
_ref4$showCopy = _ref4.showCopy,
|
|
8329
|
-
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
|
|
8330
|
-
var _ref5 = link || {},
|
|
8331
|
-
linkText = _ref5.text,
|
|
8332
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
|
|
8333
|
-
// const titleSize = title && title.length > 20 ? 4 : 3;
|
|
8334
|
-
var video = {
|
|
8335
|
-
elementId: 'compact-header-video',
|
|
8336
|
-
desktop: videoUrlDesktop,
|
|
8337
|
-
mobile: videoUrlMobile
|
|
8013
|
+
var handleTouchStart = function handleTouchStart(e) {
|
|
8014
|
+
setIsActive();
|
|
8015
|
+
startX.current = e.touches[0].clientX;
|
|
8016
|
+
isDragging.current = true;
|
|
8017
|
+
isClickPrevented.current = false;
|
|
8018
|
+
setTransitioning(false);
|
|
8338
8019
|
};
|
|
8339
|
-
var
|
|
8340
|
-
|
|
8341
|
-
|
|
8342
|
-
|
|
8020
|
+
var handleTouchMove = function handleTouchMove(e) {
|
|
8021
|
+
if (!isDragging.current) return;
|
|
8022
|
+
var deltaX = e.touches[0].clientX - startX.current;
|
|
8023
|
+
if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
|
|
8024
|
+
isClickPrevented.current = true;
|
|
8025
|
+
}
|
|
8026
|
+
var visualOffset = getTranslateX() + deltaX;
|
|
8027
|
+
currentTranslate.current = visualOffset;
|
|
8028
|
+
setDragTranslateX(visualOffset);
|
|
8343
8029
|
};
|
|
8344
|
-
|
|
8345
|
-
|
|
8346
|
-
|
|
8347
|
-
|
|
8348
|
-
|
|
8349
|
-
|
|
8350
|
-
|
|
8351
|
-
}
|
|
8352
|
-
|
|
8353
|
-
|
|
8354
|
-
|
|
8355
|
-
|
|
8356
|
-
|
|
8357
|
-
|
|
8358
|
-
|
|
8359
|
-
|
|
8360
|
-
|
|
8361
|
-
|
|
8362
|
-
|
|
8363
|
-
|
|
8364
|
-
|
|
8365
|
-
|
|
8366
|
-
|
|
8030
|
+
var handleTouchEnd = function handleTouchEnd() {
|
|
8031
|
+
isDragging.current = false;
|
|
8032
|
+
if (isClickPrevented.current) {
|
|
8033
|
+
navigateOnSwipeEnd();
|
|
8034
|
+
} else {
|
|
8035
|
+
setDragTranslateX(null);
|
|
8036
|
+
}
|
|
8037
|
+
};
|
|
8038
|
+
var handleMouseMove = function handleMouseMove(e) {
|
|
8039
|
+
if (!isDragging.current || !isMouseDown.current || transitioning) return;
|
|
8040
|
+
var deltaX = e.clientX - startX.current;
|
|
8041
|
+
if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
|
|
8042
|
+
isClickPrevented.current = true;
|
|
8043
|
+
}
|
|
8044
|
+
var visualOffset = getTranslateX() + deltaX;
|
|
8045
|
+
currentTranslate.current = visualOffset;
|
|
8046
|
+
setDragTranslateX(visualOffset);
|
|
8047
|
+
};
|
|
8048
|
+
var _handleMouseUp = function handleMouseUp() {
|
|
8049
|
+
if (!isMouseDown.current) return;
|
|
8050
|
+
isMouseDown.current = false;
|
|
8051
|
+
isDragging.current = false;
|
|
8052
|
+
if (isClickPrevented.current) {
|
|
8053
|
+
navigateOnSwipeEnd();
|
|
8054
|
+
} else {
|
|
8055
|
+
setDragTranslateX(null);
|
|
8056
|
+
}
|
|
8057
|
+
window.removeEventListener('mousemove', handleMouseMove);
|
|
8058
|
+
window.removeEventListener('mouseup', _handleMouseUp);
|
|
8059
|
+
};
|
|
8060
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
8061
|
+
if (transitioning || e.button !== 0) return;
|
|
8062
|
+
e.preventDefault();
|
|
8063
|
+
setIsActive();
|
|
8064
|
+
startX.current = e.clientX;
|
|
8065
|
+
isDragging.current = true;
|
|
8066
|
+
isMouseDown.current = true;
|
|
8067
|
+
isClickPrevented.current = false;
|
|
8068
|
+
setTransitioning(false);
|
|
8069
|
+
window.addEventListener('mousemove', handleMouseMove);
|
|
8070
|
+
window.addEventListener('mouseup', _handleMouseUp);
|
|
8071
|
+
};
|
|
8072
|
+
var onSlideFocus = function onSlideFocus(isVisible, index) {
|
|
8073
|
+
if (!isVisible) {
|
|
8074
|
+
setCurrentIndex(index);
|
|
8075
|
+
}
|
|
8076
|
+
};
|
|
8077
|
+
var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
8078
|
+
return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
|
|
8079
|
+
ref: containerRef,
|
|
8080
|
+
className: "swipe",
|
|
8081
|
+
onTouchStart: handleTouchStart,
|
|
8082
|
+
onTouchMove: handleTouchMove,
|
|
8083
|
+
onTouchEnd: handleTouchEnd,
|
|
8084
|
+
onMouseDown: handleMouseDown,
|
|
8085
|
+
"aria-roledescription": "carousel",
|
|
8086
|
+
role: "list"
|
|
8087
|
+
}, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
|
|
8088
|
+
className: "swipe-track-wrapper",
|
|
8089
|
+
translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
|
|
8090
|
+
transitioning: transitioning && dragTranslateX === null,
|
|
8091
|
+
onTransitionEnd: handleTransitionEnd
|
|
8092
|
+
}, slides.map(function (child, index) {
|
|
8093
|
+
var isVisible = visibleIndexes.includes(index);
|
|
8094
|
+
var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
|
|
8095
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
8096
|
+
key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
|
|
8097
|
+
className: SWIPE_SLIDE_CLASS_NAME,
|
|
8098
|
+
"aria-hidden": slidesAriaHidden || isClone,
|
|
8099
|
+
"aria-roledescription": "slide",
|
|
8100
|
+
role: "listitem",
|
|
8101
|
+
ref: function ref(el) {
|
|
8102
|
+
childRefs.current[index] = el;
|
|
8103
|
+
disableTabbingInside(el, isClone);
|
|
8104
|
+
},
|
|
8105
|
+
onFocus: function onFocus() {
|
|
8106
|
+
return onSlideFocus(isVisible, index);
|
|
8107
|
+
}
|
|
8108
|
+
}, child);
|
|
8109
|
+
})));
|
|
8110
|
+
});
|
|
8111
|
+
Swipe.displayName = 'Swipe';
|
|
8367
8112
|
|
|
8368
|
-
var _templateObject$
|
|
8369
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8370
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8371
|
-
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8372
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8113
|
+
var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$g, _templateObject7$c;
|
|
8114
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8115
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8116
|
+
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8117
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8373
8118
|
var hasImages = _ref.hasImages;
|
|
8374
8119
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8375
8120
|
}, devices.mobile, function (_ref2) {
|
|
8376
8121
|
var hasImages = _ref2.hasImages;
|
|
8377
8122
|
return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8378
8123
|
});
|
|
8379
|
-
var HighlightsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8124
|
+
var HighlightsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n .swipe-slide {\n ", "\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), function (_ref3) {
|
|
8380
8125
|
var hasMultipleImages = _ref3.hasMultipleImages;
|
|
8381
8126
|
return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
|
|
8382
8127
|
}, devices.mobile);
|
|
8383
|
-
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject6$
|
|
8384
|
-
var RotatorButtonsWrapper
|
|
8128
|
+
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin-top: 8px;\n margin-bottom: 8px;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white) !important;\n }\n\n & {\n display: flex;\n margin-left: 100px;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
|
|
8129
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
8385
8130
|
|
|
8386
8131
|
/* eslint-disable react/no-danger */
|
|
8387
8132
|
var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
@@ -8424,7 +8169,7 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8424
8169
|
}
|
|
8425
8170
|
})))) : null), hasImages && (/*#__PURE__*/React__default.createElement(HighlightsCarouselWrapper, {
|
|
8426
8171
|
hasMultipleImages: hasMultipleImages
|
|
8427
|
-
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper
|
|
8172
|
+
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
8428
8173
|
"data-testid": "rotator-buttons"
|
|
8429
8174
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
8430
8175
|
onClickNext: onNext,
|
|
@@ -8444,14 +8189,14 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8444
8189
|
}))))));
|
|
8445
8190
|
};
|
|
8446
8191
|
|
|
8447
|
-
var _templateObject$
|
|
8448
|
-
var linkButtonStyles = /*#__PURE__*/css(_templateObject$
|
|
8449
|
-
var PageNav = /*#__PURE__*/styled.a(_templateObject2$
|
|
8450
|
-
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
8451
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$
|
|
8452
|
-
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$
|
|
8453
|
-
var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$
|
|
8454
|
-
var TextLinkPagination = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject8$
|
|
8192
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$o, _templateObject6$h, _templateObject7$d, _templateObject8$8;
|
|
8193
|
+
var linkButtonStyles = /*#__PURE__*/css(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
8194
|
+
var PageNav = /*#__PURE__*/styled.a(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8195
|
+
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8196
|
+
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
8197
|
+
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8198
|
+
var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8199
|
+
var TextLinkPagination = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
|
|
8455
8200
|
var active = _ref.active;
|
|
8456
8201
|
return active ? "var(--color-primary-red)" : 'inherit';
|
|
8457
8202
|
}, function (_ref2) {
|
|
@@ -8603,16 +8348,16 @@ var Pagination = function Pagination(_ref) {
|
|
|
8603
8348
|
}))))));
|
|
8604
8349
|
};
|
|
8605
8350
|
|
|
8606
|
-
var _templateObject$
|
|
8607
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8351
|
+
var _templateObject$X;
|
|
8352
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8608
8353
|
|
|
8609
|
-
var _templateObject$
|
|
8610
|
-
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
8611
|
-
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$
|
|
8354
|
+
var _templateObject$Y, _templateObject2$L;
|
|
8355
|
+
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8356
|
+
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8612
8357
|
|
|
8613
|
-
var _templateObject$
|
|
8614
|
-
var PersonLink = /*#__PURE__*/styled.a(_templateObject$
|
|
8615
|
-
var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$
|
|
8358
|
+
var _templateObject$Z, _templateObject2$M;
|
|
8359
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
|
|
8360
|
+
var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8616
8361
|
|
|
8617
8362
|
var Person = function Person(_ref) {
|
|
8618
8363
|
var person = _ref.person,
|
|
@@ -8651,9 +8396,9 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8651
8396
|
})));
|
|
8652
8397
|
};
|
|
8653
8398
|
|
|
8654
|
-
var _templateObject
|
|
8655
|
-
var PersonWrapper
|
|
8656
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8399
|
+
var _templateObject$_, _templateObject2$N;
|
|
8400
|
+
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8401
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
|
|
8657
8402
|
|
|
8658
8403
|
var PersonCard = function PersonCard(_ref) {
|
|
8659
8404
|
var role = _ref.role,
|
|
@@ -8663,7 +8408,7 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8663
8408
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
8664
8409
|
return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
|
|
8665
8410
|
}, [role]);
|
|
8666
|
-
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper
|
|
8411
|
+
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper, {
|
|
8667
8412
|
className: className
|
|
8668
8413
|
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
|
|
8669
8414
|
src: role.people[0].headshot,
|
|
@@ -8691,14 +8436,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8691
8436
|
}));
|
|
8692
8437
|
};
|
|
8693
8438
|
|
|
8694
|
-
var _templateObject
|
|
8695
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8696
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
8439
|
+
var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$t;
|
|
8440
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8441
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8697
8442
|
var columnCount = _ref.columnCount;
|
|
8698
8443
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8699
8444
|
}, devices.mobile, devices.tablet);
|
|
8700
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8701
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8445
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
8446
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8702
8447
|
|
|
8703
8448
|
// Get the total character length of a property in an array of objects
|
|
8704
8449
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8825,8 +8570,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8825
8570
|
}, creditEntries);
|
|
8826
8571
|
};
|
|
8827
8572
|
|
|
8828
|
-
var _templateObject$
|
|
8829
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$
|
|
8573
|
+
var _templateObject$10;
|
|
8574
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
8830
8575
|
|
|
8831
8576
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
8832
8577
|
var items = _ref.items;
|
|
@@ -8844,14 +8589,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
8844
8589
|
}));
|
|
8845
8590
|
};
|
|
8846
8591
|
|
|
8847
|
-
var _templateObject$
|
|
8592
|
+
var _templateObject$11, _templateObject3$A, _templateObject4$u, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9, _templateObject9$5, _templateObject0$5, _templateObject1$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
8848
8593
|
var LENGTH_TEXT = 28;
|
|
8849
8594
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8850
8595
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8851
8596
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8852
8597
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8853
8598
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8854
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8599
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8855
8600
|
var imageToLeft = _ref.imageToLeft;
|
|
8856
8601
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8857
8602
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8861,7 +8606,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templa
|
|
|
8861
8606
|
var asCard = _ref3.asCard;
|
|
8862
8607
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8863
8608
|
});
|
|
8864
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8609
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
8865
8610
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
8866
8611
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8867
8612
|
}, function (_ref5) {
|
|
@@ -8885,21 +8630,21 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$B || (_templat
|
|
|
8885
8630
|
}
|
|
8886
8631
|
return '';
|
|
8887
8632
|
});
|
|
8888
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8633
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
8889
8634
|
var marginBottom = _ref7.marginBottom;
|
|
8890
8635
|
return marginBottom + "px";
|
|
8891
8636
|
}, function (_ref8) {
|
|
8892
8637
|
var mobileMarginBottom = _ref8.mobileMarginBottom;
|
|
8893
8638
|
return mobileMarginBottom && "\n @media " + devices.mobile + " {\n margin-bottom: " + mobileMarginBottom + "px;\n }\n ";
|
|
8894
8639
|
});
|
|
8895
|
-
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
8896
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$
|
|
8897
|
-
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
8898
|
-
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$
|
|
8899
|
-
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
8900
|
-
var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
8901
|
-
var asCardOverrides = /*#__PURE__*/css(_templateObject1$
|
|
8902
|
-
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject10$
|
|
8640
|
+
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
8641
|
+
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
8642
|
+
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
8643
|
+
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
8644
|
+
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
8645
|
+
var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
8646
|
+
var asCardOverrides = /*#__PURE__*/css(_templateObject1$3 || (_templateObject1$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n"])), ButtonsContainer$2, devices.tablet);
|
|
8647
|
+
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref9) {
|
|
8903
8648
|
var imageToLeft = _ref9.imageToLeft;
|
|
8904
8649
|
return imageToLeft ? 'left' : 'right';
|
|
8905
8650
|
}, devices.mobile);
|
|
@@ -8920,12 +8665,12 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObj
|
|
|
8920
8665
|
var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
8921
8666
|
var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
8922
8667
|
|
|
8923
|
-
var _excluded$
|
|
8668
|
+
var _excluded$l = ["text"],
|
|
8924
8669
|
_excluded2$2 = ["text"],
|
|
8925
8670
|
_excluded3$1 = ["text"];
|
|
8926
8671
|
var _buttonTypeToButton$1;
|
|
8927
8672
|
var LENGTH_TEXT$1 = 28;
|
|
8928
|
-
var LENGTH_TEXT_PARAGRAPH =
|
|
8673
|
+
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
8929
8674
|
var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
|
|
8930
8675
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
8931
8676
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -8988,7 +8733,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8988
8733
|
var _ref2 = firstButton || {},
|
|
8989
8734
|
_ref2$text = _ref2.text,
|
|
8990
8735
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
8991
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
8736
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
8992
8737
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
8993
8738
|
var secondButton = links == null ? void 0 : links[1];
|
|
8994
8739
|
var _ref3 = secondButton || {},
|
|
@@ -9116,28 +8861,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9116
8861
|
}))));
|
|
9117
8862
|
};
|
|
9118
8863
|
|
|
9119
|
-
var _templateObject$
|
|
8864
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f;
|
|
9120
8865
|
var LENGTH_TEXT$2 = 28;
|
|
9121
8866
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9122
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8867
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9123
8868
|
var imageToLeft = _ref.imageToLeft;
|
|
9124
8869
|
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'";
|
|
9125
8870
|
}, devices.tablet, function (_ref2) {
|
|
9126
8871
|
var imageToLeft = _ref2.imageToLeft;
|
|
9127
8872
|
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'";
|
|
9128
8873
|
}, devices.mobile);
|
|
9129
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8874
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9130
8875
|
var imageToLeft = _ref3.imageToLeft;
|
|
9131
8876
|
return imageToLeft ? 'left' : 'right';
|
|
9132
8877
|
}, devices.mobile);
|
|
9133
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8878
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
9134
8879
|
var imageToLeft = _ref4.imageToLeft;
|
|
9135
8880
|
return imageToLeft ? 'right' : 'left';
|
|
9136
8881
|
}, devices.mobile);
|
|
9137
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$
|
|
9138
|
-
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$
|
|
9139
|
-
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$
|
|
9140
|
-
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$
|
|
8882
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
8883
|
+
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
8884
|
+
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
8885
|
+
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
|
|
9141
8886
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
9142
8887
|
primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
|
|
9143
8888
|
_ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
|
|
@@ -9159,8 +8904,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templat
|
|
|
9159
8904
|
return '';
|
|
9160
8905
|
});
|
|
9161
8906
|
|
|
9162
|
-
var _templateObject$
|
|
9163
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
8907
|
+
var _templateObject$13;
|
|
8908
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
9164
8909
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9165
8910
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9166
8911
|
return aspectRatio;
|
|
@@ -9272,7 +9017,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9272
9017
|
}));
|
|
9273
9018
|
};
|
|
9274
9019
|
|
|
9275
|
-
var _excluded$
|
|
9020
|
+
var _excluded$m = ["text"],
|
|
9276
9021
|
_excluded2$3 = ["text"];
|
|
9277
9022
|
var LENGTH_TEXT$3 = 28;
|
|
9278
9023
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
@@ -9299,7 +9044,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9299
9044
|
var _ref2 = primaryButton || {},
|
|
9300
9045
|
_ref2$text = _ref2.text,
|
|
9301
9046
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9302
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9047
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
|
|
9303
9048
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
9304
9049
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
9305
9050
|
var _ref3 = tertiaryButton || {},
|
|
@@ -9342,8 +9087,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9342
9087
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9343
9088
|
};
|
|
9344
9089
|
|
|
9345
|
-
var _templateObject$
|
|
9346
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9090
|
+
var _templateObject$14;
|
|
9091
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9347
9092
|
|
|
9348
9093
|
/**
|
|
9349
9094
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9398,9 +9143,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9398
9143
|
})));
|
|
9399
9144
|
};
|
|
9400
9145
|
|
|
9401
|
-
var _templateObject$
|
|
9402
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9403
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9146
|
+
var _templateObject$15, _templateObject2$Q, _templateObject3$C;
|
|
9147
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9148
|
+
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9404
9149
|
var horizontalMode = _ref.horizontalMode;
|
|
9405
9150
|
if (horizontalMode) return 'row';
|
|
9406
9151
|
return 'column';
|
|
@@ -9408,7 +9153,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObjec
|
|
|
9408
9153
|
var gap = _ref2.gap;
|
|
9409
9154
|
return gap + "px";
|
|
9410
9155
|
});
|
|
9411
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9156
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9412
9157
|
var darkMode = _ref3.darkMode;
|
|
9413
9158
|
if (darkMode) return 'var(--base-color-white)';
|
|
9414
9159
|
return 'var(--base-color-errorstate)';
|
|
@@ -9485,10 +9230,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9485
9230
|
}, error))));
|
|
9486
9231
|
};
|
|
9487
9232
|
|
|
9488
|
-
var _templateObject$
|
|
9489
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9490
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9491
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9233
|
+
var _templateObject$16, _templateObject2$R, _templateObject3$D;
|
|
9234
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9235
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9236
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9492
9237
|
|
|
9493
9238
|
/* eslint-disable react/no-danger */
|
|
9494
9239
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9544,8 +9289,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9544
9289
|
return null;
|
|
9545
9290
|
};
|
|
9546
9291
|
|
|
9547
|
-
var _templateObject$
|
|
9548
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9292
|
+
var _templateObject$17;
|
|
9293
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9549
9294
|
|
|
9550
9295
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9551
9296
|
var HarmonicSize = {
|
|
@@ -9587,8 +9332,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9587
9332
|
}, description)))));
|
|
9588
9333
|
};
|
|
9589
9334
|
|
|
9590
|
-
var _templateObject$
|
|
9591
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
9335
|
+
var _templateObject$18, _templateObject2$S, _templateObject3$E, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4;
|
|
9336
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
9592
9337
|
var theme = _ref.theme;
|
|
9593
9338
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9594
9339
|
}, function (_ref2) {
|
|
@@ -9598,12 +9343,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /
|
|
|
9598
9343
|
var theme = _ref3.theme;
|
|
9599
9344
|
return theme.colors.lightgrey;
|
|
9600
9345
|
});
|
|
9601
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
9346
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9602
9347
|
var theme = _ref4.theme;
|
|
9603
9348
|
return theme.colors.darkgrey;
|
|
9604
9349
|
});
|
|
9605
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
9606
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$
|
|
9350
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9351
|
+
var listItemStyles = /*#__PURE__*/css(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9607
9352
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9608
9353
|
var theme = _ref5.theme;
|
|
9609
9354
|
return {
|
|
@@ -9611,11 +9356,11 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
|
9611
9356
|
color: theme.colors.black,
|
|
9612
9357
|
title: 'Select Arrow'
|
|
9613
9358
|
};
|
|
9614
|
-
})(_templateObject5$
|
|
9615
|
-
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$
|
|
9616
|
-
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
9617
|
-
var Options = /*#__PURE__*/styled.div(_templateObject8$
|
|
9618
|
-
var Option = /*#__PURE__*/styled.li(_templateObject9$
|
|
9359
|
+
})(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
9360
|
+
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9361
|
+
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9362
|
+
var Options = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
9363
|
+
var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9619
9364
|
var theme = _ref6.theme,
|
|
9620
9365
|
hover = _ref6.hover;
|
|
9621
9366
|
var _theme$colors = theme.colors,
|
|
@@ -9625,9 +9370,9 @@ var Option = /*#__PURE__*/styled.li(_templateObject9$7 || (_templateObject9$7 =
|
|
|
9625
9370
|
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
9626
9371
|
});
|
|
9627
9372
|
var selectStyles = function selectStyles(width, height) {
|
|
9628
|
-
return css(_templateObject0$
|
|
9373
|
+
return css(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
|
|
9629
9374
|
};
|
|
9630
|
-
var SelectList = /*#__PURE__*/styled.ul(_templateObject1$
|
|
9375
|
+
var SelectList = /*#__PURE__*/styled.ul(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
9631
9376
|
var width = _ref7.width,
|
|
9632
9377
|
height = _ref7.height;
|
|
9633
9378
|
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
@@ -9968,9 +9713,9 @@ function Select(_ref3) {
|
|
|
9968
9713
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9969
9714
|
}
|
|
9970
9715
|
|
|
9971
|
-
var _templateObject$
|
|
9972
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
9973
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9716
|
+
var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x;
|
|
9717
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9718
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9974
9719
|
var width = _ref.width;
|
|
9975
9720
|
if (!width) return 'none';
|
|
9976
9721
|
return width + "px";
|
|
@@ -9987,18 +9732,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateOb
|
|
|
9987
9732
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9988
9733
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9989
9734
|
});
|
|
9990
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9735
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9991
9736
|
var darkMode = _ref5.darkMode;
|
|
9992
9737
|
if (darkMode) return "var(--base-color-white)";
|
|
9993
9738
|
return "var(--base-color-black)";
|
|
9994
9739
|
});
|
|
9995
|
-
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
9740
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9996
9741
|
var darkMode = _ref6.darkMode;
|
|
9997
9742
|
if (darkMode) return "var(--base-color-white)";
|
|
9998
9743
|
return "var(--base-color-errorstate)";
|
|
9999
9744
|
});
|
|
10000
9745
|
|
|
10001
|
-
var _excluded$
|
|
9746
|
+
var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10002
9747
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10003
9748
|
return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10004
9749
|
iconName: "DropdownArrow"
|
|
@@ -10049,7 +9794,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10049
9794
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10050
9795
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10051
9796
|
components = _ref2.components,
|
|
10052
|
-
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9797
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
|
|
10053
9798
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10054
9799
|
label: label,
|
|
10055
9800
|
error: error,
|
|
@@ -10067,7 +9812,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10067
9812
|
})));
|
|
10068
9813
|
};
|
|
10069
9814
|
|
|
10070
|
-
var _excluded$
|
|
9815
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "components"];
|
|
10071
9816
|
/**
|
|
10072
9817
|
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
10073
9818
|
* component for select instead of regular react-select component. This can be used
|
|
@@ -10089,7 +9834,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10089
9834
|
_ref$darkMode = _ref.darkMode,
|
|
10090
9835
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
10091
9836
|
components = _ref.components,
|
|
10092
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9837
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
|
|
10093
9838
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10094
9839
|
label: label,
|
|
10095
9840
|
error: error,
|
|
@@ -10106,24 +9851,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10106
9851
|
})));
|
|
10107
9852
|
};
|
|
10108
9853
|
|
|
10109
|
-
var _templateObject$
|
|
10110
|
-
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$
|
|
10111
|
-
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$
|
|
10112
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
9854
|
+
var _templateObject$1a, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
|
|
9855
|
+
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
9856
|
+
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
9857
|
+
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
10113
9858
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10114
9859
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10115
9860
|
}, function (_ref2) {
|
|
10116
9861
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
10117
9862
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
10118
9863
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
10119
|
-
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
9864
|
+
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
|
|
10120
9865
|
var singleChild = _ref3.singleChild;
|
|
10121
9866
|
return singleChild ? '0' : '10px';
|
|
10122
9867
|
});
|
|
10123
|
-
var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$
|
|
10124
|
-
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$
|
|
10125
|
-
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$
|
|
10126
|
-
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$
|
|
9868
|
+
var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
9869
|
+
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
9870
|
+
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
|
|
9871
|
+
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
|
|
10127
9872
|
|
|
10128
9873
|
// Set max. character length
|
|
10129
9874
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -10212,8 +9957,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10212
9957
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10213
9958
|
};
|
|
10214
9959
|
|
|
10215
|
-
var _templateObject$
|
|
10216
|
-
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$
|
|
9960
|
+
var _templateObject$1b, _templateObject2$U, _templateObject3$H;
|
|
9961
|
+
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
10217
9962
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10218
9963
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10219
9964
|
return aspectRatio;
|
|
@@ -10223,10 +9968,10 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1c || (_templateObjec
|
|
|
10223
9968
|
height = _ref2.height;
|
|
10224
9969
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10225
9970
|
});
|
|
10226
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
10227
|
-
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$
|
|
9971
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
9972
|
+
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
10228
9973
|
|
|
10229
|
-
var _excluded$
|
|
9974
|
+
var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10230
9975
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
10231
9976
|
var caption = _ref.caption,
|
|
10232
9977
|
altText = _ref.altText,
|
|
@@ -10236,7 +9981,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10236
9981
|
loading = _ref.loading,
|
|
10237
9982
|
aspectRatio = _ref.aspectRatio,
|
|
10238
9983
|
className = _ref.className,
|
|
10239
|
-
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9984
|
+
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
|
|
10240
9985
|
return /*#__PURE__*/React__default.createElement(Wrapper$7, Object.assign({
|
|
10241
9986
|
aspectRatio: aspectRatio,
|
|
10242
9987
|
className: className
|
|
@@ -10257,13 +10002,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10257
10002
|
}, caption))));
|
|
10258
10003
|
};
|
|
10259
10004
|
|
|
10260
|
-
var _templateObject$
|
|
10261
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10262
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10263
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
10264
|
-
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10265
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10266
|
-
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$
|
|
10005
|
+
var _templateObject$1c, _templateObject2$V, _templateObject3$I, _templateObject4$z, _templateObject5$t, _templateObject6$m;
|
|
10006
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
10007
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10008
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10009
|
+
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10010
|
+
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
10011
|
+
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
10267
10012
|
|
|
10268
10013
|
var MiniCard = function MiniCard(_ref) {
|
|
10269
10014
|
var _ref$title = _ref.title,
|
|
@@ -10301,18 +10046,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10301
10046
|
}, title)))));
|
|
10302
10047
|
};
|
|
10303
10048
|
|
|
10304
|
-
var _templateObject$
|
|
10305
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10306
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10307
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
10049
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u;
|
|
10050
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
10051
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
10052
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10308
10053
|
var isVisible = _ref.isVisible;
|
|
10309
10054
|
return isVisible ? 'visible' : 'hidden';
|
|
10310
10055
|
});
|
|
10311
|
-
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
10056
|
+
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10312
10057
|
var isVisible = _ref2.isVisible;
|
|
10313
10058
|
return isVisible ? 'visible' : 'hidden';
|
|
10314
10059
|
});
|
|
10315
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10060
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
10316
10061
|
|
|
10317
10062
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10318
10063
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10393,15 +10138,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10393
10138
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10394
10139
|
};
|
|
10395
10140
|
|
|
10396
|
-
var _templateObject$
|
|
10397
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
10398
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
10399
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
10400
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
10141
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
|
|
10142
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10143
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
|
|
10144
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
10145
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
10401
10146
|
var isActive = _ref.isActive;
|
|
10402
10147
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10403
10148
|
}, Colors.MidGrey);
|
|
10404
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
10149
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10405
10150
|
var isOpen = _ref2.isOpen;
|
|
10406
10151
|
return isOpen ? 'block' : 'none';
|
|
10407
10152
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -10557,19 +10302,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10557
10302
|
});
|
|
10558
10303
|
};
|
|
10559
10304
|
|
|
10560
|
-
var _templateObject$
|
|
10561
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10562
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
10563
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
10305
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w, _templateObject6$n;
|
|
10306
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10307
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10308
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10564
10309
|
var color = _ref.color;
|
|
10565
10310
|
return "var(--base-color-" + color + ")";
|
|
10566
10311
|
});
|
|
10567
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
10568
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$
|
|
10312
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10313
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10569
10314
|
var color = _ref2.color;
|
|
10570
10315
|
return "var(--base-color-" + color + ")";
|
|
10571
10316
|
});
|
|
10572
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$
|
|
10317
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10573
10318
|
var color = _ref3.color;
|
|
10574
10319
|
return "var(--base-color-" + color + ")";
|
|
10575
10320
|
});
|
|
@@ -10651,19 +10396,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10651
10396
|
}, strengthLabel))));
|
|
10652
10397
|
};
|
|
10653
10398
|
|
|
10654
|
-
var _templateObject$
|
|
10655
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
10656
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10657
|
-
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10658
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
10399
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
|
|
10400
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10401
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10402
|
+
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10403
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10659
10404
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10660
10405
|
}, devices.tablet, devices.mobile);
|
|
10661
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
10406
|
+
var TableCell = /*#__PURE__*/styled.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
10662
10407
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10663
10408
|
}, devices.mobile);
|
|
10664
|
-
var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$
|
|
10665
|
-
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$
|
|
10666
|
-
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$
|
|
10409
|
+
var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
|
|
10410
|
+
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
|
|
10411
|
+
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10667
10412
|
|
|
10668
10413
|
/* eslint-disable react/no-danger */
|
|
10669
10414
|
var Content = function Content(_ref) {
|
|
@@ -10866,25 +10611,25 @@ var Table = function Table(_ref) {
|
|
|
10866
10611
|
}))));
|
|
10867
10612
|
};
|
|
10868
10613
|
|
|
10869
|
-
var _templateObject$
|
|
10870
|
-
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$
|
|
10614
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
10615
|
+
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10871
10616
|
var theme = _ref.theme;
|
|
10872
10617
|
return "var(--color-" + theme + ")";
|
|
10873
10618
|
}, function (_ref2) {
|
|
10874
10619
|
var theme = _ref2.theme;
|
|
10875
10620
|
return "var(--color-" + theme + ")";
|
|
10876
10621
|
});
|
|
10877
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2
|
|
10878
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
10879
|
-
var Error = /*#__PURE__*/styled.div(_templateObject4$
|
|
10880
|
-
var Form = /*#__PURE__*/styled.form(_templateObject5$
|
|
10881
|
-
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
10882
|
-
var ServerError = /*#__PURE__*/styled.div(_templateObject7$
|
|
10883
|
-
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$
|
|
10884
|
-
var ButtonWrapper$3 = /*#__PURE__*/styled.div(_templateObject9$
|
|
10885
|
-
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
10886
|
-
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$
|
|
10887
|
-
var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject10$
|
|
10622
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
10623
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
10624
|
+
var Error = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10625
|
+
var Form = /*#__PURE__*/styled.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
10626
|
+
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
10627
|
+
var ServerError = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
10628
|
+
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
10629
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
10630
|
+
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
10631
|
+
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
10632
|
+
var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
10888
10633
|
var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
|
|
10889
10634
|
var _ref3$isOpen = _ref3.isOpen,
|
|
10890
10635
|
isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
|
|
@@ -11291,13 +11036,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11291
11036
|
}))))));
|
|
11292
11037
|
};
|
|
11293
11038
|
|
|
11294
|
-
var _templateObject$
|
|
11295
|
-
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11039
|
+
var _templateObject$1i, _templateObject2$$, _templateObject4$F, _templateObject5$z;
|
|
11040
|
+
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
11296
11041
|
var withShadow = _ref.withShadow;
|
|
11297
|
-
return withShadow && css(_templateObject2
|
|
11042
|
+
return withShadow && css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11298
11043
|
}, devices.mobile);
|
|
11299
|
-
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$
|
|
11300
|
-
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$
|
|
11044
|
+
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
11045
|
+
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11301
11046
|
|
|
11302
11047
|
var defaultGrid = {
|
|
11303
11048
|
columnStartDesktop: 2,
|
|
@@ -11355,12 +11100,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11355
11100
|
return null;
|
|
11356
11101
|
};
|
|
11357
11102
|
|
|
11358
|
-
var _templateObject$
|
|
11359
|
-
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$
|
|
11103
|
+
var _templateObject$1j, _templateObject2$10;
|
|
11104
|
+
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
11360
11105
|
var hide = _ref.hide;
|
|
11361
11106
|
return hide && "display: none;";
|
|
11362
11107
|
}, devices.mobileAndTablet);
|
|
11363
|
-
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$
|
|
11108
|
+
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
11364
11109
|
|
|
11365
11110
|
/**
|
|
11366
11111
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11452,8 +11197,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11452
11197
|
}));
|
|
11453
11198
|
};
|
|
11454
11199
|
|
|
11455
|
-
var _templateObject$
|
|
11456
|
-
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
11200
|
+
var _templateObject$1k;
|
|
11201
|
+
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
|
|
11457
11202
|
|
|
11458
11203
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11459
11204
|
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'] + "\">");
|
|
@@ -11488,9 +11233,14 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11488
11233
|
_ref2$renderGridItem = _ref2.renderGridItem,
|
|
11489
11234
|
renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
|
|
11490
11235
|
var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
|
|
11491
|
-
var content = /*#__PURE__*/React__default.createElement(
|
|
11236
|
+
var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
|
|
11237
|
+
tag: "div",
|
|
11238
|
+
size: "large",
|
|
11239
|
+
"data-testid": "text-container",
|
|
11492
11240
|
className: textContainerClassName,
|
|
11493
|
-
|
|
11241
|
+
dangerouslySetInnerHTML: {
|
|
11242
|
+
__html: addTypographyClasses(text)
|
|
11243
|
+
}
|
|
11494
11244
|
});
|
|
11495
11245
|
var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
11496
11246
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -11508,27 +11258,27 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11508
11258
|
}, gridItemOrContent);
|
|
11509
11259
|
};
|
|
11510
11260
|
|
|
11511
|
-
var _templateObject$
|
|
11261
|
+
var _templateObject$1l, _templateObject2$11, _templateObject3$O, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
|
|
11512
11262
|
var color = 'primary-black';
|
|
11513
11263
|
var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
|
|
11514
11264
|
borderColor: color,
|
|
11515
11265
|
hoveredColor: color,
|
|
11516
11266
|
pressedColor: color,
|
|
11517
11267
|
textColor: color
|
|
11518
|
-
})(_templateObject$
|
|
11519
|
-
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11520
|
-
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$
|
|
11268
|
+
})(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11269
|
+
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11270
|
+
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11521
11271
|
var Heading = /*#__PURE__*/styled(HarmonicHeader).attrs({
|
|
11522
11272
|
serif: true,
|
|
11523
11273
|
size: 'medium'
|
|
11524
|
-
})(_templateObject4$
|
|
11274
|
+
})(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11525
11275
|
var Intro = /*#__PURE__*/styled(HarmonicSubtitle).attrs({
|
|
11526
11276
|
size: 'large'
|
|
11527
|
-
})(_templateObject5$
|
|
11528
|
-
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$
|
|
11277
|
+
})(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11278
|
+
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11529
11279
|
var SignInPrompt = /*#__PURE__*/styled(BodyCopyHarmonic).attrs({
|
|
11530
11280
|
size: 'large'
|
|
11531
|
-
})(_templateObject7$
|
|
11281
|
+
})(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11532
11282
|
|
|
11533
11283
|
var Paywall = function Paywall(_ref) {
|
|
11534
11284
|
var className = _ref.className,
|
|
@@ -11721,14 +11471,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11721
11471
|
})))))));
|
|
11722
11472
|
};
|
|
11723
11473
|
|
|
11724
|
-
var _templateObject$
|
|
11725
|
-
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11726
|
-
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
11727
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$
|
|
11728
|
-
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11729
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
11730
|
-
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$
|
|
11731
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$
|
|
11474
|
+
var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11475
|
+
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
11476
|
+
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
11477
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
11478
|
+
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11479
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11480
|
+
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11481
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
11732
11482
|
|
|
11733
11483
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11734
11484
|
var Footer = function Footer(_ref) {
|
|
@@ -11786,18 +11536,18 @@ var Footer = function Footer(_ref) {
|
|
|
11786
11536
|
}, additionalInfo))));
|
|
11787
11537
|
};
|
|
11788
11538
|
|
|
11789
|
-
var _templateObject$
|
|
11539
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
|
|
11790
11540
|
var LIST_ITEM_GAP = 32;
|
|
11791
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
11541
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
|
|
11792
11542
|
var bottomBorder = _ref.bottomBorder;
|
|
11793
11543
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11794
11544
|
}, zIndexes.anchor, function (_ref2) {
|
|
11795
11545
|
var withShadow = _ref2.withShadow;
|
|
11796
|
-
return withShadow && css(_templateObject2$
|
|
11546
|
+
return withShadow && css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11797
11547
|
});
|
|
11798
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
11799
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11800
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
11548
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
11549
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11550
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11801
11551
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11802
11552
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
11803
11553
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -11808,11 +11558,11 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject5$D || (_templateObject5$D
|
|
|
11808
11558
|
hasTwoArrows = _ref5.hasTwoArrows;
|
|
11809
11559
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
11810
11560
|
});
|
|
11811
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject8$
|
|
11561
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
|
|
11812
11562
|
var withShadow = _ref7.withShadow;
|
|
11813
|
-
return withShadow && css(_templateObject9$
|
|
11563
|
+
return withShadow && css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11814
11564
|
});
|
|
11815
|
-
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
11565
|
+
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
11816
11566
|
var disabled = _ref8.disabled;
|
|
11817
11567
|
return disabled ? 'not-allowed' : 'pointer';
|
|
11818
11568
|
}, function (_ref9) {
|
|
@@ -11823,7 +11573,7 @@ var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$9 || (_templateObjec
|
|
|
11823
11573
|
return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
|
|
11824
11574
|
});
|
|
11825
11575
|
|
|
11826
|
-
var _excluded$
|
|
11576
|
+
var _excluded$q = ["id", "text"];
|
|
11827
11577
|
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
11828
11578
|
var tabs = _ref.tabs,
|
|
11829
11579
|
onTabClick = _ref.onTabClick,
|
|
@@ -12034,7 +11784,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12034
11784
|
}, tabs.map(function (_ref4) {
|
|
12035
11785
|
var id = _ref4.id,
|
|
12036
11786
|
text = _ref4.text,
|
|
12037
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
11787
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$q);
|
|
12038
11788
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
12039
11789
|
key: id
|
|
12040
11790
|
}, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
|
|
@@ -12067,20 +11817,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12067
11817
|
})))) : null))));
|
|
12068
11818
|
};
|
|
12069
11819
|
|
|
12070
|
-
var _templateObject$
|
|
12071
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
11820
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11821
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12072
11822
|
var sticky = _ref.sticky;
|
|
12073
11823
|
return sticky ? 'sticky' : 'initial';
|
|
12074
11824
|
}, zIndexes.anchor);
|
|
12075
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
12076
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
11825
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
11826
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
12077
11827
|
var title = _ref2.title;
|
|
12078
11828
|
return title ? 'row' : 'row-reverse';
|
|
12079
11829
|
}, devices.tablet, devices.mobile);
|
|
12080
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$
|
|
12081
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
12082
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12083
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$
|
|
11830
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
11831
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
11832
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
11833
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
12084
11834
|
var theme = _ref3.theme;
|
|
12085
11835
|
return theme.colors.primaryButtonReverseBg;
|
|
12086
11836
|
}, function (_ref4) {
|
|
@@ -12093,10 +11843,10 @@ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$g
|
|
|
12093
11843
|
var theme = _ref6.theme;
|
|
12094
11844
|
return theme.colors.primaryButtonReverse;
|
|
12095
11845
|
});
|
|
12096
|
-
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
12097
|
-
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject0$
|
|
11846
|
+
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
11847
|
+
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
12098
11848
|
|
|
12099
|
-
var _excluded$
|
|
11849
|
+
var _excluded$r = ["text"],
|
|
12100
11850
|
_excluded2$4 = ["text"];
|
|
12101
11851
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
12102
11852
|
var title = _ref.title,
|
|
@@ -12106,7 +11856,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12106
11856
|
message = _ref.message;
|
|
12107
11857
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
12108
11858
|
primaryButtonText = _ref2.text,
|
|
12109
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
11859
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
|
|
12110
11860
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
12111
11861
|
secondaryButtonText = _ref3.text,
|
|
12112
11862
|
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
|
|
@@ -12127,14 +11877,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12127
11877
|
}, message))));
|
|
12128
11878
|
};
|
|
12129
11879
|
|
|
12130
|
-
var _templateObject$
|
|
12131
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
12132
|
-
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$
|
|
12133
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12134
|
-
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$
|
|
11880
|
+
var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K;
|
|
11881
|
+
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
|
|
11882
|
+
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
|
|
11883
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
11884
|
+
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
12135
11885
|
|
|
12136
|
-
var _templateObject$
|
|
12137
|
-
var Wrapper$a = /*#__PURE__*/styled.div(_templateObject$
|
|
11886
|
+
var _templateObject$1q;
|
|
11887
|
+
var Wrapper$a = /*#__PURE__*/styled.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
|
|
12138
11888
|
|
|
12139
11889
|
var UpsellCards = function UpsellCards(_ref) {
|
|
12140
11890
|
var upsellCards = _ref.upsellCards;
|
|
@@ -12196,9 +11946,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12196
11946
|
})))));
|
|
12197
11947
|
};
|
|
12198
11948
|
|
|
12199
|
-
var _templateObject$
|
|
12200
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12201
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
11949
|
+
var _templateObject$1r, _templateObject2$16;
|
|
11950
|
+
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
11951
|
+
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
12202
11952
|
var bottomBorder = _ref.bottomBorder;
|
|
12203
11953
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12204
11954
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12229,13 +11979,13 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12229
11979
|
}, children)));
|
|
12230
11980
|
};
|
|
12231
11981
|
|
|
12232
|
-
var _templateObject$
|
|
12233
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
12234
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
12235
|
-
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12236
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
11982
|
+
var _templateObject$1s, _templateObject2$17, _templateObject3$T, _templateObject4$L;
|
|
11983
|
+
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
11984
|
+
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
11985
|
+
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11986
|
+
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
12237
11987
|
|
|
12238
|
-
var _excluded$
|
|
11988
|
+
var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12239
11989
|
var MAX_Z_INDEX = 9999999999;
|
|
12240
11990
|
if (Modal.defaultStyles.content) {
|
|
12241
11991
|
Modal.defaultStyles.content.position = 'static';
|
|
@@ -12309,7 +12059,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
12309
12059
|
setIsOpen = _ref.setIsOpen,
|
|
12310
12060
|
children = _ref.children,
|
|
12311
12061
|
appElementId = _ref.appElementId,
|
|
12312
|
-
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12062
|
+
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
|
|
12313
12063
|
var isMobile = useMobile();
|
|
12314
12064
|
var customStyles = {
|
|
12315
12065
|
overlay: {
|
|
@@ -12437,29 +12187,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12437
12187
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12438
12188
|
};
|
|
12439
12189
|
|
|
12440
|
-
var _templateObject$
|
|
12441
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12190
|
+
var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
|
|
12191
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
12442
12192
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12443
12193
|
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 }";
|
|
12444
12194
|
}, devices.mobile, function (_ref2) {
|
|
12445
12195
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12446
12196
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12447
12197
|
});
|
|
12448
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12198
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12449
12199
|
var type = _ref3.type,
|
|
12450
12200
|
isActive = _ref3.isActive;
|
|
12451
12201
|
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 ";
|
|
12452
12202
|
});
|
|
12453
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
12454
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12455
|
-
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
12203
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
12204
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12205
|
+
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12456
12206
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12457
12207
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12458
12208
|
});
|
|
12459
|
-
var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$
|
|
12460
|
-
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12461
|
-
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$
|
|
12462
|
-
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$
|
|
12209
|
+
var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
|
|
12210
|
+
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
12211
|
+
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12212
|
+
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12463
12213
|
var active = _ref5.active;
|
|
12464
12214
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
12465
12215
|
}, devices.tablet, function (_ref6) {
|
|
@@ -12702,19 +12452,19 @@ var Carousel = function Carousel(_ref) {
|
|
|
12702
12452
|
}, children))));
|
|
12703
12453
|
};
|
|
12704
12454
|
|
|
12705
|
-
var _templateObject$
|
|
12706
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
12707
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12708
|
-
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
12709
|
-
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
12710
|
-
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
12711
|
-
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
12712
|
-
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12713
|
-
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
12714
|
-
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
12715
|
-
var RotatorButtonsWrapper$
|
|
12716
|
-
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$
|
|
12717
|
-
var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject10$
|
|
12455
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
12456
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
12457
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12458
|
+
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12459
|
+
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12460
|
+
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12461
|
+
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12462
|
+
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12463
|
+
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
12464
|
+
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12465
|
+
var RotatorButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12466
|
+
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12467
|
+
var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
12718
12468
|
var FirstButtonComponentWrapper = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
12719
12469
|
var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
|
|
12720
12470
|
var AdditionalInfoWrapper = /*#__PURE__*/styled.div(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -12725,7 +12475,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled.div(_templateObject15$1 || (_
|
|
|
12725
12475
|
}, devices.mobile);
|
|
12726
12476
|
var ProgressContainer$1 = /*#__PURE__*/styled.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n p {\n margin-bottom: 16px;\n }\n\n @media ", " {\n margin-top: 20px;\n\n p {\n margin-bottom: 12px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12727
12477
|
|
|
12728
|
-
var _excluded$
|
|
12478
|
+
var _excluded$t = ["text"],
|
|
12729
12479
|
_excluded2$5 = ["text"];
|
|
12730
12480
|
var _buttonTypeToButton$2;
|
|
12731
12481
|
var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
|
|
@@ -12736,7 +12486,7 @@ var Buttons = function Buttons(_ref) {
|
|
|
12736
12486
|
var _ref2 = firstButton || {},
|
|
12737
12487
|
_ref2$text = _ref2.text,
|
|
12738
12488
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
12739
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
12489
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
|
|
12740
12490
|
var secondButton = links == null ? void 0 : links[1];
|
|
12741
12491
|
var _ref3 = secondButton || {},
|
|
12742
12492
|
_ref3$text = _ref3.text,
|
|
@@ -12951,7 +12701,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12951
12701
|
auxiliaryCTA: auxiliaryCTA
|
|
12952
12702
|
})), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
|
|
12953
12703
|
"data-testid": "carousel-wrapper"
|
|
12954
|
-
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$
|
|
12704
|
+
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
|
|
12955
12705
|
"data-testid": "rotator-buttons"
|
|
12956
12706
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12957
12707
|
onClickNext: onNext,
|
|
@@ -12968,11 +12718,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12968
12718
|
})));
|
|
12969
12719
|
};
|
|
12970
12720
|
|
|
12971
|
-
var _excluded$
|
|
12721
|
+
var _excluded$u = ["logo", "slides"];
|
|
12972
12722
|
var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
12973
12723
|
var logo = _ref.logo,
|
|
12974
12724
|
slides = _ref.slides,
|
|
12975
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12725
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
|
|
12976
12726
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12977
12727
|
var links = processSlideLinks(slide.links);
|
|
12978
12728
|
return _extends({}, slide, {
|
|
@@ -12989,10 +12739,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
|
12989
12739
|
})));
|
|
12990
12740
|
};
|
|
12991
12741
|
|
|
12992
|
-
var _excluded$
|
|
12742
|
+
var _excluded$v = ["slides"];
|
|
12993
12743
|
var HighlightsCore = function HighlightsCore(_ref) {
|
|
12994
12744
|
var slides = _ref.slides,
|
|
12995
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12745
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
|
|
12996
12746
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12997
12747
|
var links = processSlideLinks(slide.links);
|
|
12998
12748
|
return _extends({}, slide, {
|
|
@@ -13006,11 +12756,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
|
|
|
13006
12756
|
})));
|
|
13007
12757
|
};
|
|
13008
12758
|
|
|
13009
|
-
var _excluded$
|
|
12759
|
+
var _excluded$w = ["logo", "slides"];
|
|
13010
12760
|
var HighlightsStream = function HighlightsStream(_ref) {
|
|
13011
12761
|
var logo = _ref.logo,
|
|
13012
12762
|
slides = _ref.slides,
|
|
13013
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12763
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
|
|
13014
12764
|
var slidesWithLinks = slides.map(function (slide) {
|
|
13015
12765
|
var links = processSlideLinks(slide.links);
|
|
13016
12766
|
return _extends({}, slide, {
|
|
@@ -13027,9 +12777,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13027
12777
|
})));
|
|
13028
12778
|
};
|
|
13029
12779
|
|
|
13030
|
-
var _templateObject$
|
|
13031
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
13032
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12780
|
+
var _templateObject$1v, _templateObject3$W;
|
|
12781
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
12782
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13033
12783
|
|
|
13034
12784
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13035
12785
|
var children = _ref.children;
|
|
@@ -13624,8 +13374,8 @@ var Theme = function Theme(_ref) {
|
|
|
13624
13374
|
}, children);
|
|
13625
13375
|
};
|
|
13626
13376
|
|
|
13627
|
-
var _templateObject$
|
|
13628
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13377
|
+
var _templateObject$1w;
|
|
13378
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13629
13379
|
var theme = _ref.theme;
|
|
13630
13380
|
return theme.colors.primary;
|
|
13631
13381
|
}, function (_ref2) {
|
|
@@ -14572,10 +14322,10 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1x || (_templa
|
|
|
14572
14322
|
return theme.footer.tablet.paddingBottom;
|
|
14573
14323
|
}, devices.desktop, devices.largeDesktop);
|
|
14574
14324
|
|
|
14575
|
-
var _templateObject$
|
|
14576
|
-
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$
|
|
14577
|
-
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$
|
|
14578
|
-
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$
|
|
14325
|
+
var _templateObject$1x, _templateObject2$1a, _templateObject3$X;
|
|
14326
|
+
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14327
|
+
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14328
|
+
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
14579
14329
|
|
|
14580
14330
|
/* eslint-disable react/no-danger */
|
|
14581
14331
|
var Quote = function Quote(_ref) {
|
|
@@ -14605,5 +14355,5 @@ var Quote = function Quote(_ref) {
|
|
|
14605
14355
|
}, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
|
|
14606
14356
|
};
|
|
14607
14357
|
|
|
14608
|
-
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType,
|
|
14358
|
+
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
|
|
14609
14359
|
//# sourceMappingURL=harmonic.esm.js.map
|