@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.
@@ -8,7 +8,7 @@ var React = require('react');
8
8
  var React__default = _interopDefault(React);
9
9
  var styled = require('styled-components');
10
10
  var styled__default = _interopDefault(styled);
11
- var dateFns = require('date-fns');
11
+ var moment = _interopDefault(require('moment'));
12
12
  var server = require('react-dom/server');
13
13
  var Select$1 = require('react-select');
14
14
  var Select$1__default = _interopDefault(Select$1);
@@ -3824,7 +3824,6 @@ var Tab = function Tab(_ref) {
3824
3824
  className = _ref.className,
3825
3825
  role = _ref.role,
3826
3826
  ariaLabel = _ref.ariaLabel,
3827
- tabLinkId = _ref.tabLinkId,
3828
3827
  color = _ref.color,
3829
3828
  dataTestId = _ref.dataTestId,
3830
3829
  isOpen = _ref.isOpen;
@@ -3859,9 +3858,8 @@ var Tab = function Tab(_ref) {
3859
3858
  className: className,
3860
3859
  "data-testid": dataTestId
3861
3860
  }, /*#__PURE__*/React__default.createElement(TabText, {
3862
- id: tabLinkId,
3863
- trimText: trimText,
3864
3861
  color: color,
3862
+ trimText: trimText,
3865
3863
  withTextInMobile: withTextInMobile,
3866
3864
  "aria-hidden": "true"
3867
3865
  }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -4546,31 +4544,6 @@ var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 ||
4546
4544
  var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
4547
4545
  var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
4548
4546
 
4549
- var pad = function pad(num) {
4550
- return String(num || 0).padStart(2, '0');
4551
- };
4552
- var renderTimerValue = function renderTimerValue(value, label, separator) {
4553
- if (separator === void 0) {
4554
- separator = true;
4555
- }
4556
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
4557
- className: "harmonic-timer-value"
4558
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
4559
- color: "inherit",
4560
- hierarchy: "h3",
4561
- size: "medium",
4562
- "data-testid": label
4563
- }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
4564
- className: "harmonic-timer-label"
4565
- }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
4566
- color: "inherit",
4567
- size: "large"
4568
- }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
4569
- color: "inherit",
4570
- hierarchy: "h3",
4571
- size: "medium"
4572
- }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
4573
- };
4574
4547
  var Timer = function Timer(_ref) {
4575
4548
  var endDate = _ref.endDate,
4576
4549
  title = _ref.title,
@@ -4579,22 +4552,43 @@ var Timer = function Timer(_ref) {
4579
4552
  bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
4580
4553
  _ref$color = _ref.color,
4581
4554
  color = _ref$color === void 0 ? ThemeColor['base-black'] : _ref$color;
4582
- var _useState = React.useState('00'),
4583
- seconds = _useState[0],
4584
- setSeconds = _useState[1];
4585
- var _useState2 = React.useState('00'),
4586
- minutes = _useState2[0],
4587
- setMinutes = _useState2[1];
4588
- var _useState3 = React.useState('00'),
4589
- hours = _useState3[0],
4590
- setHours = _useState3[1];
4591
- var _useState4 = React.useState('00'),
4592
- days = _useState4[0],
4593
- setDays = _useState4[1];
4594
- var _useState5 = React.useState(false),
4595
- isEndDateReached = _useState5[0],
4596
- setIsEndDateReached = _useState5[1];
4597
- React.useEffect(function () {
4555
+ var _React$useState = React__default.useState('00'),
4556
+ seconds = _React$useState[0],
4557
+ setSeconds = _React$useState[1];
4558
+ var _React$useState2 = React__default.useState('00'),
4559
+ minutes = _React$useState2[0],
4560
+ setMinutes = _React$useState2[1];
4561
+ var _React$useState3 = React__default.useState('00'),
4562
+ hours = _React$useState3[0],
4563
+ setHours = _React$useState3[1];
4564
+ var _React$useState4 = React__default.useState('00'),
4565
+ days = _React$useState4[0],
4566
+ setDays = _React$useState4[1];
4567
+ var _React$useState5 = React__default.useState(false),
4568
+ isEndDateReached = _React$useState5[0],
4569
+ setIsEndDateReached = _React$useState5[1];
4570
+ var renderTimerValue = function renderTimerValue(value, label, separator) {
4571
+ if (separator === void 0) {
4572
+ separator = true;
4573
+ }
4574
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
4575
+ className: "harmonic-timer-value"
4576
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
4577
+ color: "inherit",
4578
+ hierarchy: "h3",
4579
+ size: "medium"
4580
+ }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
4581
+ className: "harmonic-timer-label"
4582
+ }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
4583
+ color: "inherit",
4584
+ size: "large"
4585
+ }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
4586
+ color: "inherit",
4587
+ hierarchy: "h3",
4588
+ size: "medium"
4589
+ }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
4590
+ };
4591
+ React__default.useEffect(function () {
4598
4592
  if (isEndDateReached) return undefined;
4599
4593
  // We use this to set values for the timer immediately
4600
4594
  var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
@@ -4602,21 +4596,19 @@ var Timer = function Timer(_ref) {
4602
4596
  return setInterval(fn, delay);
4603
4597
  };
4604
4598
  var updateValues = function updateValues() {
4605
- var futureDate = new Date(endDate);
4606
- var nowDate = new Date();
4607
- var diffInMs = futureDate.getTime() - nowDate.getTime();
4608
- if (diffInMs < 0) {
4599
+ var futureDate = moment(endDate);
4600
+ var nowDate = moment();
4601
+ var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
4602
+ var difference = moment(differenceInMilliseconds).utc();
4603
+ if (differenceInMilliseconds < 0) {
4609
4604
  setIsEndDateReached(true);
4610
4605
  if (endDateHandler) endDateHandler();
4611
4606
  } else {
4612
- var duration = dateFns.intervalToDuration({
4613
- start: nowDate,
4614
- end: futureDate
4615
- });
4616
- var daysDiff = pad(dateFns.differenceInDays(futureDate, nowDate));
4617
- var hoursDiff = pad(duration.hours);
4618
- var minutesDiff = pad(duration.minutes);
4619
- var secondsDiff = pad(duration.seconds);
4607
+ var fullDaysLeft = Math.floor(futureDate.diff(nowDate, 'days', true));
4608
+ var daysDiff = fullDaysLeft < 10 ? "0" + fullDaysLeft : fullDaysLeft.toString();
4609
+ var hoursDiff = difference.format('HH');
4610
+ var minutesDiff = difference.format('mm');
4611
+ var secondsDiff = difference.format('ss');
4620
4612
  setDays(daysDiff);
4621
4613
  setHours(hoursDiff);
4622
4614
  setMinutes(minutesDiff);
@@ -4628,7 +4620,7 @@ var Timer = function Timer(_ref) {
4628
4620
  clearInterval(interval);
4629
4621
  };
4630
4622
  });
4631
- var hideTimer = dateFns.isPast(new Date(endDate));
4623
+ var hideTimer = moment(endDate).isBefore(moment());
4632
4624
  if (hideTimer) return null;
4633
4625
  return /*#__PURE__*/React__default.createElement(TimerWrapper, {
4634
4626
  color: color
@@ -5346,7 +5338,6 @@ var Dropdown = function Dropdown(_ref) {
5346
5338
  className = _ref.className,
5347
5339
  role = _ref.role,
5348
5340
  ariaLabel = _ref.ariaLabel,
5349
- tabLinkId = _ref.tabLinkId,
5350
5341
  trimTabText = _ref.trimTabText;
5351
5342
  var node = React.useRef();
5352
5343
  var _useState = React.useState(false),
@@ -5443,7 +5434,6 @@ var Dropdown = function Dropdown(_ref) {
5443
5434
  };
5444
5435
  var renderTab = function renderTab() {
5445
5436
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
5446
- tabLinkId: tabLinkId,
5447
5437
  trimText: trimTabText,
5448
5438
  title: title,
5449
5439
  titleLink: titleLink,
@@ -5523,8 +5513,7 @@ var Account = function Account(_ref) {
5523
5513
  iconName: iconName,
5524
5514
  withOptionsInMobile: false,
5525
5515
  withIcon: "left",
5526
- className: className,
5527
- tabLinkId: "account-link"
5516
+ className: className
5528
5517
  });
5529
5518
  };
5530
5519
 
@@ -5943,7 +5932,6 @@ var Accordion = function Accordion(_ref) {
5943
5932
  var toggleAccordion = function toggleAccordion() {
5944
5933
  if (React__default.Children.count(children) === 0) return;
5945
5934
  if (openAccordion) {
5946
- setIcon(collapsedStateIconData);
5947
5935
  setOpenAccordion(false);
5948
5936
  setTextHeight('0px');
5949
5937
  setIcon(collapsedStateIconData);
@@ -6472,844 +6460,215 @@ var Cards = function Cards(_ref) {
6472
6460
  }));
6473
6461
  };
6474
6462
 
6475
- var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
6476
- var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n flex-direction: column-reverse;\n gap: 15px;\n }\n"])), devices.mobile);
6477
- var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
6478
- var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
6479
- var RotatorButtonsWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
6480
- var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n @media ", " {\n flex-direction: column;\n gap: 10px;\n }\n"])), devices.mobile);
6481
- var ActionButtons = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n gap: 32px;\n\n .mobile-only {\n visibility: hidden;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n }\n\n @media ", " {\n .mobile-only {\n visibility: visible;\n padding-block: 24px;\n font-size: 17px;\n line-height: 24px;\n }\n\n flex-direction: row-reverse;\n gap: unset;\n justify-content: space-between;\n border-block-end: 2px solid var(--base-color-light-grey);\n\n :has(.mobile-only) {\n justify-content: left;\n }\n\n :not(:has(.mobile-only)) {\n padding-block: 12px;\n }\n\n a {\n width: fit-content;\n }\n }\n"])), devices.mobile);
6482
- var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n margin-block-start: 2px;\n margin-inline: 2px;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n\n :focus-visible {\n outline: none;\n\n & > div:first-child {\n outline: 2px solid var(--color-base-black);\n }\n }\n\n @media ", " {\n flex-direction: row;\n gap: 20px;\n margin-block-end: 2px;\n margin-inline-end: unset;\n\n p {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
6483
- var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n width: 86px;\n height: 86px;\n min-width: 86px;\n border: 4px solid;\n border-color: ", ";\n border-radius: 50%;\n background: var(--color-base-white);\n position: relative;\n box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
6484
- var isSelected = _ref.isSelected;
6485
- return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
6486
- });
6487
- var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n\n // This is really specific to the SVG that we have been provided\n // as a fallback person image. I don't think there's a simpler and\n // more general way to handle this, so if we're given a new placeholder\n // image later, we may have to change the scale here\n ", "\n"])), function (_ref2) {
6488
- var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
6489
- return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
6490
- });
6491
- var PersonName = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n\n @media ", " {\n max-width: unset;\n text-align: left;\n font-size: 17px;\n line-height: 24px;\n }\n"])), devices.mobile);
6492
- var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (_ref3) {
6493
- var isSelected = _ref3.isSelected;
6494
- return isSelected ? 'flex' : 'none';
6495
- }, function (_ref4) {
6496
- var isSelected = _ref4.isSelected;
6497
- return isSelected ? 'flex' : 'none';
6498
- });
6499
- var EmptySelectionTextSpacer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
6463
+ var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7;
6464
+ var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
6465
+ var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
6466
+ var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
6467
+ var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
6468
+ var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
6469
+ var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
6470
+ var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
6500
6471
 
6501
- var defaultPlaceholderImage = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c9c9c9%3Bstroke%3A%23c9c9c9%3B%7D.cls-1%2C.cls-2%2C.cls-3%7Bstroke-miterlimit%3A10%3B%7D.cls-2%7Bfill-rule%3Aevenodd%3B%7D.cls-2%2C.cls-3%7Bfill%3A%2372767c%3Bstroke%3A%2372767c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M50.42%2C89.58c21.86%2C0%2C39.58-17.72%2C39.58-39.58S72.28%2C10.42%2C50.42%2C10.42%2C10.83%2C28.14%2C10.83%2C50s17.72%2C39.58%2C39.58%2C39.58Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M50.4%2C89.58c10.88%2C0%2C20.75-4.42%2C27.92-11.54-4.96-10.46-15.58-17.71-27.92-17.71s-22.96%2C7.25-27.92%2C17.71c7.17%2C7.12%2C17%2C11.54%2C27.92%2C11.54Z%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M50.4%2C55.67c8.05%2C0%2C14.58-6.53%2C14.58-14.58s-6.53-14.58-14.58-14.58-14.58%2C6.53-14.58%2C14.58%2C6.53%2C14.58%2C14.58%2C14.58Z%22%2F%3E%3C%2Fsvg%3E";
6472
+ var ContactCard = function ContactCard(_ref) {
6473
+ var title = _ref.title,
6474
+ titleSuffix = _ref.titleSuffix,
6475
+ description = _ref.description,
6476
+ email = _ref.email,
6477
+ phone = _ref.phone,
6478
+ website = _ref.website,
6479
+ address = _ref.address,
6480
+ className = _ref.className;
6481
+ var hasDetails = email || phone || website;
6482
+ var addressString = address == null ? void 0 : address.substring(0, 110);
6483
+ var descriptionText = description == null ? void 0 : description.substring(0, 110);
6484
+ return /*#__PURE__*/React__default.createElement("div", {
6485
+ className: className
6486
+ }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
6487
+ columnStartDesktop: 3,
6488
+ columnSpanDesktop: 12,
6489
+ columnStartDevice: 1,
6490
+ columnSpanDevice: 14
6491
+ }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
6492
+ "data-testid": "contact-card-wrapper"
6493
+ }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
6494
+ size: "large"
6495
+ }, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
6496
+ size: "small"
6497
+ }, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
6498
+ size: "small"
6499
+ }, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
6500
+ size: "large"
6501
+ }, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
6502
+ "data-testid": "contact-card-details-block"
6503
+ }, email && (/*#__PURE__*/React__default.createElement("a", {
6504
+ tabIndex: 0,
6505
+ href: "mailto:" + email
6506
+ }, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
6507
+ tabIndex: 0,
6508
+ href: "tel:" + phone
6509
+ }, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
6510
+ tabIndex: 0,
6511
+ href: website,
6512
+ target: "_blank",
6513
+ rel: "noreferrer"
6514
+ }, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
6515
+ "data-testid": "contact-card-address-block"
6516
+ }, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
6517
+ size: "large"
6518
+ }, addressString)))))))));
6519
+ };
6502
6520
 
6503
- var _templateObject$K, _templateObject2$y;
6504
- var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
6505
- var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
6506
- var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
6507
- var transitioning = _ref.transitioning;
6508
- return transitioning ? 'transform 0.3s ease' : 'none';
6509
- }, function (_ref2) {
6510
- var translateX = _ref2.translateX;
6511
- return translateX + "px";
6512
- }, SWIPE_SLIDE_CLASS_NAME);
6521
+ var _templateObject$K, _templateObject2$y, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b;
6522
+ var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
6523
+ var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
6524
+ return props.clickable ? 'pointer' : 'default';
6525
+ }, devices.mobile);
6526
+ var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
6527
+ var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
6528
+ return props.showImage ? 2 : '1 / span 4';
6529
+ }, devices.mobile);
6530
+ var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
6531
+ var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
6532
+ return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
6533
+ });
6513
6534
 
6514
- /**
6515
- * Generates a random string in the format XXX-XXX.
6516
- * Does not meet UUID standards.
6517
- * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
6518
- *
6519
- * @return {string} A random string in the format XXX-XXX.
6520
- */
6521
- var generateDomElementId = function generateDomElementId() {
6522
- var randomPart = Math.floor(100 + Math.random() * 900).toString();
6523
- var datePart = Date.now().toString().slice(-3);
6524
- return randomPart + "-" + datePart;
6525
- };
6535
+ /* eslint-disable no-shadow */
6536
+ (function (CarouselType) {
6537
+ CarouselType["Image"] = "image";
6538
+ CarouselType["SmallCard"] = "SmallCard";
6539
+ CarouselType["LargeCard"] = "LargeCard";
6540
+ CarouselType["PersonCard"] = "PersonCard";
6541
+ })(exports.CarouselType || (exports.CarouselType = {}));
6526
6542
 
6527
- var DISABLED_TABBING_TAGS = 'a, button';
6528
- var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
6529
- if (!element) return;
6530
- var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
6531
- focusables.forEach(function (el) {
6532
- if (shouldDisable) el.setAttribute('tabindex', '-1');
6533
- });
6534
- };
6535
- var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
6536
- return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
6537
- };
6538
- var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
6539
- var widthSoFar = 0;
6540
- var visible = [];
6541
- for (var i = currentIndex; i < slidesLength; i++) {
6542
- var _slideWidths$i;
6543
- var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
6544
- if (widthSoFar + width > containerWidth) break;
6545
- visible.push(i);
6546
- widthSoFar += width;
6543
+ var clickHandler = function clickHandler(link) {
6544
+ if (link != null && link.href && document) {
6545
+ document.location.href = link.href;
6547
6546
  }
6548
- return visible;
6549
6547
  };
6550
- var getMovedSlides = function getMovedSlides(delta, slideWidths) {
6551
- var absDelta = Math.abs(delta);
6552
- var movedSlides = 0;
6553
- var accumulated = 0;
6554
- for (var i = 0; i < slideWidths.length; i++) {
6555
- accumulated += slideWidths[i];
6556
- // Allow partial slide (e.g. 50% of next slide) to count
6557
- var partialThreshold = slideWidths[i] * 0.5;
6558
- if (absDelta > accumulated - partialThreshold) {
6559
- movedSlides++;
6560
- } else {
6561
- break;
6548
+ var ContentSummary = function ContentSummary(_ref) {
6549
+ var title = _ref.title,
6550
+ subtitle = _ref.subtitle,
6551
+ bodyText = _ref.bodyText,
6552
+ link = _ref.link,
6553
+ image = _ref.image,
6554
+ _ref$largeTitle = _ref.largeTitle,
6555
+ largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
6556
+ _ref$showImage = _ref.showImage,
6557
+ showImage = _ref$showImage === void 0 ? false : _ref$showImage,
6558
+ _ref$truncate = _ref.truncate,
6559
+ truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
6560
+ _ref$fullyClickable = _ref.fullyClickable,
6561
+ fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
6562
+ _ref$headerSemanticLe = _ref.headerSemanticLevel,
6563
+ headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
6564
+ className = _ref.className;
6565
+ return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
6566
+ className: className,
6567
+ onClick: function onClick() {
6568
+ if (fullyClickable) {
6569
+ clickHandler(link);
6570
+ }
6571
+ },
6572
+ clickable: fullyClickable,
6573
+ "data-roh": "content-summary-item"
6574
+ }, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
6575
+ "data-testid": "image-wrapper"
6576
+ }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
6577
+ href: link.href
6578
+ }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
6579
+ aspectRatio: exports.AspectRatio['4:3']
6580
+ }, /*#__PURE__*/React__default.createElement("img", {
6581
+ src: image.src,
6582
+ alt: image.alt
6583
+ })))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
6584
+ aspectRatio: exports.AspectRatio['4:3']
6585
+ }, /*#__PURE__*/React__default.createElement("img", {
6586
+ src: image.src,
6587
+ alt: image.alt
6588
+ }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
6589
+ showImage: showImage
6590
+ }, title && (/*#__PURE__*/React__default.createElement("div", {
6591
+ "data-testid": largeTitle ? 'large-title' : 'default-title'
6592
+ }, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
6593
+ size: "large",
6594
+ hierarchy: headerSemanticLevel
6595
+ }, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
6596
+ size: "medium",
6597
+ hierarchy: headerSemanticLevel
6598
+ }, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
6599
+ size: "large"
6600
+ }, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
6601
+ size: "large"
6602
+ }, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
6603
+ truncate: truncate,
6604
+ dangerouslySetInnerHTML: {
6605
+ __html: bodyText
6606
+ },
6607
+ "data-testid": "body-text"
6608
+ })))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
6609
+ className: "content-summary-text-link"
6610
+ }), link.text))));
6611
+ };
6612
+
6613
+ var _templateObject$L, _templateObject2$z, _templateObject3$o, _templateObject4$l, _templateObject5$h;
6614
+ var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
6615
+ var imageToLeft = _ref.imageToLeft;
6616
+ return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
6617
+ }, devices.mobile);
6618
+ var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
6619
+ var imageToLeft = _ref2.imageToLeft;
6620
+ return imageToLeft ? 'left' : 'right';
6621
+ }, devices.mobile);
6622
+ var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
6623
+ var imageToLeft = _ref3.imageToLeft;
6624
+ return imageToLeft ? 'right' : 'left';
6625
+ }, devices.mobile);
6626
+ var EditorialSubtitle = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-subtitle);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
6627
+ var EditorialText = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
6628
+
6629
+ var Editorial = function Editorial(_ref) {
6630
+ var _ref$imagePosition = _ref.imagePosition,
6631
+ imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
6632
+ subtitle = _ref.subtitle,
6633
+ text = _ref.text,
6634
+ children = _ref.children,
6635
+ className = _ref.className;
6636
+ var imageToLeft = imagePosition === 'left';
6637
+ return /*#__PURE__*/React__default.createElement(Grid, {
6638
+ className: className,
6639
+ "data-testid": "editorial-component"
6640
+ }, /*#__PURE__*/React__default.createElement(GridItem, {
6641
+ columnStartDesktop: 3,
6642
+ columnSpanDesktop: 12,
6643
+ columnStartDevice: 2,
6644
+ columnSpanDevice: 12
6645
+ }, /*#__PURE__*/React__default.createElement(EditorialGrid, {
6646
+ imageToLeft: imageToLeft
6647
+ }, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
6648
+ "data-testid": "image-wrapper",
6649
+ imageToLeft: imageToLeft
6650
+ }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
6651
+ aspectRatio: exports.AspectRatio['1:1']
6652
+ }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
6653
+ "data-testid": "text-wrapper",
6654
+ imageToLeft: imageToLeft
6655
+ }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
6656
+ tag: "span"
6657
+ }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
6658
+ tag: "div",
6659
+ size: "large",
6660
+ dangerouslySetInnerHTML: {
6661
+ __html: text
6562
6662
  }
6563
- }
6564
- return movedSlides;
6663
+ })))));
6565
6664
  };
6566
6665
 
6567
- var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
6568
- var MAX_CLONES_NUMBER = 6;
6569
- var CLICK_DRAG_THRESHOLD = 10;
6570
- var getClonesCount = function getClonesCount(infinite, childrenLength) {
6571
- if (!infinite) return 0;
6572
- return Math.min(childrenLength, MAX_CLONES_NUMBER);
6573
- };
6574
- var getSlidedWidth = function getSlidedWidth(slide) {
6575
- if (!slide) return 0;
6576
- var style = window.getComputedStyle(slide);
6577
- var marginLeft = parseFloat(style.marginLeft) || 0;
6578
- var marginRight = parseFloat(style.marginRight) || 0;
6579
- return slide.getBoundingClientRect().width + marginLeft + marginRight;
6580
- };
6581
- var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
6582
- var children = _ref.children,
6583
- _ref$infinite = _ref.infinite,
6584
- infinite = _ref$infinite === void 0 ? false : _ref$infinite,
6585
- onIndexChange = _ref.onIndexChange,
6586
- _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
6587
- slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
6588
- _ref$slidesAriaHidden = _ref.slidesAriaHidden,
6589
- slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
6590
- onActiveChange = _ref.onActiveChange,
6591
- onOverflowChange = _ref.onOverflowChange,
6592
- props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
6593
- var containerRef = React.useRef(null);
6594
- var childRefs = React.useRef([]);
6595
- var startX = React.useRef(0);
6596
- var currentTranslate = React.useRef(0);
6597
- var isDragging = React.useRef(false);
6598
- var isMouseDown = React.useRef(false);
6599
- var isActive = React.useRef(false);
6600
- var isClickPrevented = React.useRef(false);
6601
- var uniqueIdRef = React.useRef(generateDomElementId());
6602
- var _useState = React.useState(null),
6603
- dragTranslateX = _useState[0],
6604
- setDragTranslateX = _useState[1];
6605
- var _useState2 = React.useState(false),
6606
- transitioning = _useState2[0],
6607
- setTransitioning = _useState2[1];
6608
- var _useState3 = React.useState([]),
6609
- slideWidths = _useState3[0],
6610
- setSlideWidths = _useState3[1];
6611
- var _useState4 = React.useState(0),
6612
- containerWidth = _useState4[0],
6613
- setContainerWidth = _useState4[1];
6614
- var _useMemo = React.useMemo(function () {
6615
- var count = getClonesCount(infinite, children.length);
6616
- var leftClones = infinite ? children.slice(-count) : [];
6617
- var rightClones = infinite ? children.slice(0, count) : [];
6618
- var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
6619
- return {
6620
- slides: allSlides,
6621
- clonesCount: count
6622
- };
6623
- }, [children, infinite]),
6624
- slides = _useMemo.slides,
6625
- clonesCount = _useMemo.clonesCount;
6626
- var _useState5 = React.useState(infinite ? clonesCount : 0),
6627
- currentIndex = _useState5[0],
6628
- setCurrentIndex = _useState5[1];
6629
- React.useEffect(function () {
6630
- var handler = function handler(e) {
6631
- if (isClickPrevented.current) {
6632
- e.preventDefault();
6633
- e.stopPropagation();
6634
- }
6635
- };
6636
- var containerElement = containerRef.current;
6637
- containerElement == null || containerElement.addEventListener('click', handler, true);
6638
- return function () {
6639
- return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
6640
- };
6641
- }, []);
6642
- React.useEffect(function () {
6643
- if (!onIndexChange) return;
6644
- if (!infinite) {
6645
- onIndexChange(currentIndex);
6646
- } else {
6647
- var offset = currentIndex - clonesCount + children.length;
6648
- var realIndex = offset % children.length;
6649
- onIndexChange(realIndex);
6650
- }
6651
- }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
6652
- var updateDimensions = React.useCallback(function () {
6653
- var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
6654
- var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
6655
- setContainerWidth(cw);
6656
- setSlideWidths(widths);
6657
- if (!infinite) {
6658
- var totalWidth = widths.reduce(function (acc, w) {
6659
- return acc + w;
6660
- }, 0);
6661
- var visibleSpace = cw - (slidesOffsetBefore || 0);
6662
- var overflow = totalWidth > Math.max(0, visibleSpace);
6663
- onOverflowChange == null || onOverflowChange(overflow);
6664
- }
6665
- }, []);
6666
- React.useEffect(function () {
6667
- var animationFrameRequestId = requestAnimationFrame(updateDimensions);
6668
- return function () {
6669
- return cancelAnimationFrame(animationFrameRequestId);
6670
- };
6671
- }, [children]);
6672
- React.useEffect(function () {
6673
- var observer = new ResizeObserver(updateDimensions);
6674
- if (containerRef.current) observer.observe(containerRef.current);
6675
- return function () {
6676
- return observer.disconnect();
6677
- };
6678
- }, [children]);
6679
- var setIsActive = function setIsActive() {
6680
- if (!isActive.current) {
6681
- isActive.current = true;
6682
- onActiveChange == null || onActiveChange(true);
6683
- }
6684
- };
6685
- var getTranslateX = function getTranslateX() {
6686
- var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
6687
- return acc + width;
6688
- }, 0);
6689
- return (slidesOffsetBefore || 0) - widthsBefore;
6690
- };
6691
- var getTranslateForIndex = function getTranslateForIndex(index) {
6692
- var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
6693
- return acc + width;
6694
- }, 0);
6695
- return (slidesOffsetBefore || 0) - widthsBefore;
6696
- };
6697
- var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
6698
- var delta = currentTranslate.current - getTranslateX();
6699
- var direction = delta > 0 ? -1 : 1;
6700
- var movedSlides = getMovedSlides(delta, slideWidths);
6701
- if (Math.abs(delta) > 20) {
6702
- movedSlides = Math.max(1, movedSlides);
6703
- var targetIndex = currentIndex + direction * movedSlides;
6704
- var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
6705
- if (!infinite) {
6706
- currentTranslate.current = getTranslateForIndex(finalIndex);
6707
- setDragTranslateX(null);
6708
- }
6709
- setTransitioning(true);
6710
- setCurrentIndex(finalIndex);
6711
- } else {
6712
- setTransitioning(true);
6713
- setCurrentIndex(function (prev) {
6714
- return prev;
6715
- });
6716
- }
6717
- setDragTranslateX(null);
6718
- };
6719
- var canMoveNext = function canMoveNext() {
6720
- if (infinite) return true;
6721
- if (slideWidths.length === 0 || containerWidth === 0) return false;
6722
- var totalWidth = slideWidths.reduce(function (acc, w) {
6723
- return acc + w;
6724
- }, 0);
6725
- var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
6726
- return acc + w;
6727
- }, 0);
6728
- var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
6729
- var remainingToRight = totalWidth - widthsBefore - visibleSpace;
6730
- var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
6731
- var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
6732
- var nextIndex = lastVisibleIndex + 1;
6733
- if (nextIndex >= slideWidths.length) return false;
6734
- var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
6735
- if (nextSlideWidth === 0) return false;
6736
- var EPS = 1; // pixel tolerance
6737
- // full next slide fits
6738
- if (remainingToRight + EPS >= nextSlideWidth) return true;
6739
- return remainingToRight > 0;
6740
- };
6741
- var handleTransitionEnd = function handleTransitionEnd() {
6742
- setTransitioning(false);
6743
- if (!infinite) return;
6744
- if (currentIndex >= children.length + clonesCount) {
6745
- setCurrentIndex(clonesCount);
6746
- } else if (currentIndex < clonesCount) {
6747
- setCurrentIndex(children.length + currentIndex);
6748
- }
6749
- };
6750
- var goToPrev = function goToPrev() {
6751
- if (transitioning) return;
6752
- setIsActive();
6753
- setTransitioning(true);
6754
- setCurrentIndex(function (prev) {
6755
- var target = infinite ? prev - 1 : Math.max(0, prev - 1);
6756
- if (!infinite) {
6757
- currentTranslate.current = getTranslateForIndex(target);
6758
- setDragTranslateX(null);
6759
- }
6760
- return target;
6761
- });
6762
- };
6763
- var goToNext = function goToNext() {
6764
- if (transitioning || !canMoveNext()) return;
6765
- setIsActive();
6766
- setTransitioning(true);
6767
- setCurrentIndex(function (prev) {
6768
- var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
6769
- if (!infinite) {
6770
- currentTranslate.current = getTranslateForIndex(target);
6771
- setDragTranslateX(null);
6772
- }
6773
- return target;
6774
- });
6775
- };
6776
- React.useImperativeHandle(ref, function () {
6777
- return {
6778
- nextSlide: goToNext,
6779
- prevSlide: goToPrev,
6780
- hasOverflow: function hasOverflow() {
6781
- var totalWidth = slideWidths.reduce(function (acc, w) {
6782
- return acc + w;
6783
- }, 0);
6784
- var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
6785
- return totalWidth > Math.max(0, visibleSpace);
6786
- },
6787
- hasNext: function hasNext() {
6788
- return canMoveNext();
6789
- }
6790
- };
6791
- });
6792
- var handleTouchStart = function handleTouchStart(e) {
6793
- setIsActive();
6794
- startX.current = e.touches[0].clientX;
6795
- isDragging.current = true;
6796
- isClickPrevented.current = false;
6797
- setTransitioning(false);
6798
- };
6799
- var handleTouchMove = function handleTouchMove(e) {
6800
- if (!isDragging.current) return;
6801
- var deltaX = e.touches[0].clientX - startX.current;
6802
- if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
6803
- isClickPrevented.current = true;
6804
- }
6805
- var visualOffset = getTranslateX() + deltaX;
6806
- currentTranslate.current = visualOffset;
6807
- setDragTranslateX(visualOffset);
6808
- };
6809
- var handleTouchEnd = function handleTouchEnd() {
6810
- isDragging.current = false;
6811
- if (isClickPrevented.current) {
6812
- navigateOnSwipeEnd();
6813
- } else {
6814
- setDragTranslateX(null);
6815
- }
6816
- };
6817
- var handleMouseMove = function handleMouseMove(e) {
6818
- if (!isDragging.current || !isMouseDown.current || transitioning) return;
6819
- var deltaX = e.clientX - startX.current;
6820
- if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
6821
- isClickPrevented.current = true;
6822
- }
6823
- var visualOffset = getTranslateX() + deltaX;
6824
- currentTranslate.current = visualOffset;
6825
- setDragTranslateX(visualOffset);
6826
- };
6827
- var _handleMouseUp = function handleMouseUp() {
6828
- if (!isMouseDown.current) return;
6829
- isMouseDown.current = false;
6830
- isDragging.current = false;
6831
- if (isClickPrevented.current) {
6832
- navigateOnSwipeEnd();
6833
- } else {
6834
- setDragTranslateX(null);
6835
- }
6836
- window.removeEventListener('mousemove', handleMouseMove);
6837
- window.removeEventListener('mouseup', _handleMouseUp);
6838
- };
6839
- var handleMouseDown = function handleMouseDown(e) {
6840
- if (transitioning || e.button !== 0) return;
6841
- e.preventDefault();
6842
- setIsActive();
6843
- startX.current = e.clientX;
6844
- isDragging.current = true;
6845
- isMouseDown.current = true;
6846
- isClickPrevented.current = false;
6847
- setTransitioning(false);
6848
- window.addEventListener('mousemove', handleMouseMove);
6849
- window.addEventListener('mouseup', _handleMouseUp);
6850
- };
6851
- var onSlideFocus = function onSlideFocus(isVisible, index) {
6852
- if (!isVisible) {
6853
- setCurrentIndex(index);
6854
- }
6855
- };
6856
- var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
6857
- return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
6858
- ref: containerRef,
6859
- className: "swipe",
6860
- onTouchStart: handleTouchStart,
6861
- onTouchMove: handleTouchMove,
6862
- onTouchEnd: handleTouchEnd,
6863
- onMouseDown: handleMouseDown,
6864
- "aria-roledescription": "carousel",
6865
- role: "list"
6866
- }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
6867
- className: "swipe-track-wrapper",
6868
- translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
6869
- transitioning: transitioning && dragTranslateX === null,
6870
- onTransitionEnd: handleTransitionEnd
6871
- }, slides.map(function (child, index) {
6872
- var isVisible = visibleIndexes.includes(index);
6873
- var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
6874
- return /*#__PURE__*/React__default.createElement("div", {
6875
- key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
6876
- className: SWIPE_SLIDE_CLASS_NAME,
6877
- "aria-hidden": slidesAriaHidden || isClone,
6878
- "aria-roledescription": "slide",
6879
- role: "listitem",
6880
- ref: function ref(el) {
6881
- childRefs.current[index] = el;
6882
- disableTabbingInside(el, isClone);
6883
- },
6884
- onFocus: function onFocus() {
6885
- return onSlideFocus(isVisible, index);
6886
- }
6887
- }, child);
6888
- })));
6889
- });
6890
- Swipe.displayName = 'Swipe';
6891
-
6892
- var _excluded$i = ["name", "image", "onClick"];
6893
- var CastFilters = function CastFilters(_ref) {
6894
- var cast = _ref.cast,
6895
- headingText = _ref.headingText,
6896
- ctaText = _ref.ctaText,
6897
- textLinkText = _ref.textLinkText,
6898
- emptySelectionText = _ref.emptySelectionText,
6899
- placeholderImage = _ref.placeholderImage,
6900
- listRoleDescription = _ref.listRoleDescription,
6901
- className = _ref.className,
6902
- onSelect = _ref.onSelect,
6903
- onApply = _ref.onApply,
6904
- onClear = _ref.onClear,
6905
- _ref$selectedIndices = _ref.selectedIndices,
6906
- selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
6907
- var _useViewport = useViewport(),
6908
- isMobile = _useViewport.isMobile;
6909
- var castWrapperRef = React.useRef(null);
6910
- var isDraggingRef = React.useRef(false);
6911
- var startXRef = React.useRef(0);
6912
- var scrollStartRef = React.useRef(0);
6913
- var hasDraggedRef = React.useRef(false);
6914
- var swipeRef = React.useRef(null);
6915
- var _useState = React.useState(false),
6916
- availablePrev = _useState[0],
6917
- setAvailablePrev = _useState[1];
6918
- var _useState2 = React.useState(cast.length > 1),
6919
- availableNext = _useState2[0],
6920
- setAvailableNext = _useState2[1];
6921
- var _useState3 = React.useState(true),
6922
- showRotatorButtons = _useState3[0],
6923
- setShowRotatorButtons = _useState3[1];
6924
- var onIndexChangeHandler = function onIndexChangeHandler(index) {
6925
- setAvailablePrev(index > 0);
6926
- setAvailableNext(function () {
6927
- var _swipeRef$current$has, _swipeRef$current;
6928
- return (_swipeRef$current$has = (_swipeRef$current = swipeRef.current) == null ? void 0 : _swipeRef$current.hasNext()) != null ? _swipeRef$current$has : index < Math.max(0, cast.length - 1);
6929
- });
6930
- };
6931
- React.useEffect(function () {
6932
- setAvailablePrev(false);
6933
- setAvailableNext(function () {
6934
- var _swipeRef$current$has2, _swipeRef$current2;
6935
- return (_swipeRef$current$has2 = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext()) != null ? _swipeRef$current$has2 : cast.length > 1;
6936
- });
6937
- }, [cast.length]);
6938
- var handleOverflowChange = function handleOverflowChange(overflow) {
6939
- var _swipeRef$current3;
6940
- setShowRotatorButtons(overflow);
6941
- var hasNext = (_swipeRef$current3 = swipeRef.current) == null ? void 0 : _swipeRef$current3.hasNext();
6942
- if (typeof hasNext === 'boolean') {
6943
- setAvailableNext(hasNext);
6944
- } else {
6945
- setAvailableNext(overflow);
6946
- }
6947
- };
6948
- var onNext = function onNext() {
6949
- var _swipeRef$current4;
6950
- return (_swipeRef$current4 = swipeRef.current) == null ? void 0 : _swipeRef$current4.nextSlide();
6951
- };
6952
- var onPrev = function onPrev() {
6953
- var _swipeRef$current5;
6954
- return (_swipeRef$current5 = swipeRef.current) == null ? void 0 : _swipeRef$current5.prevSlide();
6955
- };
6956
- React.useEffect(function () {
6957
- var el = castWrapperRef.current;
6958
- if (!el) return undefined;
6959
- var handleKeydown = function handleKeydown(e) {
6960
- if (!el.contains(document.activeElement)) return;
6961
- if (e.key === 'ArrowRight') {
6962
- var _swipeRef$current6;
6963
- e.preventDefault();
6964
- (_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.nextSlide();
6965
- } else if (e.key === 'ArrowLeft') {
6966
- var _swipeRef$current7;
6967
- e.preventDefault();
6968
- (_swipeRef$current7 = swipeRef.current) == null || _swipeRef$current7.prevSlide();
6969
- }
6970
- };
6971
- el.addEventListener('keydown', handleKeydown);
6972
- return function () {
6973
- return el.removeEventListener('keydown', handleKeydown);
6974
- };
6975
- }, []);
6976
- var handleMouseDown = React.useCallback(function (e) {
6977
- if (!castWrapperRef.current) return;
6978
- isDraggingRef.current = true;
6979
- hasDraggedRef.current = false;
6980
- startXRef.current = e.clientX;
6981
- scrollStartRef.current = castWrapperRef.current.scrollLeft;
6982
- if (e.target === castWrapperRef.current) e.preventDefault();
6983
- }, []);
6984
- var handleMouseMove = React.useCallback(function (e) {
6985
- if (!isDraggingRef.current || !castWrapperRef.current) return;
6986
- var deltaX = e.clientX - startXRef.current;
6987
- var threshold = 5;
6988
- if (Math.abs(deltaX) > threshold) {
6989
- hasDraggedRef.current = true;
6990
- e.preventDefault();
6991
- castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
6992
- }
6993
- }, []);
6994
- var handleMouseUp = React.useCallback(function () {
6995
- isDraggingRef.current = false;
6996
- setTimeout(function () {
6997
- hasDraggedRef.current = false;
6998
- }, 0);
6999
- }, []);
7000
- var handleMouseLeave = React.useCallback(function () {
7001
- isDraggingRef.current = false;
7002
- hasDraggedRef.current = false;
7003
- }, []);
7004
- var handleClick = React__default.useCallback(function (index, onClick) {
7005
- if (hasDraggedRef.current) return;
7006
- if (onSelect) onSelect(index);
7007
- if (onClick) onClick();
7008
- }, [onSelect]);
7009
- var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
7010
- if (e.key === 'Enter') {
7011
- handleClick(index, onClick);
7012
- }
7013
- }, [handleClick]);
7014
- var handleClearKeydown = React__default.useCallback(function (e) {
7015
- if (e.key === 'Enter' && onClear) {
7016
- onClear();
7017
- }
7018
- }, [onClear]);
7019
- var showActionButtonsSection = onApply || onClear || emptySelectionText;
7020
- var getPersonCards = function getPersonCards() {
7021
- return cast.map(function (person, index) {
7022
- var name = person.name,
7023
- image = person.image,
7024
- _onClick = person.onClick,
7025
- rest = _objectWithoutPropertiesLoose(person, _excluded$i);
7026
- var isSelected = selectedIndices.includes(index);
7027
- var personImage = image || placeholderImage || defaultPlaceholderImage;
7028
- return /*#__PURE__*/React__default.createElement(PersonWrapper, {
7029
- key: index,
7030
- "aria-selected": isSelected,
7031
- role: "option",
7032
- tabIndex: 0,
7033
- onKeyDown: function onKeyDown(e) {
7034
- return handlePersonKeydown(e, index, _onClick);
7035
- }
7036
- }, /*#__PURE__*/React__default.createElement(PersonToggle, Object.assign({
7037
- isSelected: isSelected,
7038
- onClick: function onClick() {
7039
- return handleClick(index, _onClick);
7040
- }
7041
- }, rest), /*#__PURE__*/React__default.createElement(PersonImage, {
7042
- src: personImage,
7043
- alt: image ? name : "Placeholder image for " + name,
7044
- draggable: false,
7045
- isDefaultPlaceholder: !(!!image || !!placeholderImage)
7046
- }), /*#__PURE__*/React__default.createElement(Decal, {
7047
- isSelected: isSelected
7048
- }, /*#__PURE__*/React__default.createElement(Icon, {
7049
- iconName: "Confirm",
7050
- color: "white"
7051
- }))), /*#__PURE__*/React__default.createElement(PersonName, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7052
- size: "medium"
7053
- }, name)));
7054
- });
7055
- };
7056
- return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper, {
7057
- className: className
7058
- }, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, headingText && (/*#__PURE__*/React__default.createElement(GridItem, {
7059
- columnStartDesktop: 1,
7060
- columnSpanDesktop: 10,
7061
- columnStartDevice: 1,
7062
- columnSpanDevice: 9
7063
- }, /*#__PURE__*/React__default.createElement(HeadingTextWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7064
- size: "large"
7065
- }, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
7066
- columnStartDesktop: 16,
7067
- columnSpanDesktop: 2
7068
- }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
7069
- size: "small",
7070
- onClickNext: onNext,
7071
- onClickPrev: onPrev,
7072
- availablePrev: availablePrev,
7073
- availableNext: availableNext
7074
- })))), /*#__PURE__*/React__default.createElement(CastWrapper, {
7075
- ref: castWrapperRef,
7076
- role: "listbox",
7077
- "aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
7078
- "aria-label": "filter list",
7079
- "aria-multiselectable": true,
7080
- onMouseDown: handleMouseDown,
7081
- onMouseMove: handleMouseMove,
7082
- onMouseUp: handleMouseUp,
7083
- onMouseLeave: handleMouseLeave
7084
- }, isMobile ? getPersonCards() : (/*#__PURE__*/React__default.createElement(Swipe, {
7085
- onIndexChange: onIndexChangeHandler,
7086
- "data-testid": "cast-filter-swipe",
7087
- ref: swipeRef,
7088
- onOverflowChange: handleOverflowChange
7089
- }, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7090
- size: "medium",
7091
- className: "mobile-only"
7092
- }, emptySelectionText)), selectedIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, onApply && /*#__PURE__*/React__default.createElement(PrimaryButton, {
7093
- onClick: function onClick() {
7094
- return onApply(selectedIndices);
7095
- }
7096
- }, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
7097
- tabIndex: 0,
7098
- role: "button",
7099
- onClick: onClear,
7100
- onKeyDown: handleClearKeydown
7101
- }, textLinkText != null ? textLinkText : 'Clear')))))));
7102
- };
7103
-
7104
- var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
7105
- var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
7106
- var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
7107
- var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
7108
- var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
7109
- var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
7110
- var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
7111
- var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
7112
-
7113
- var ContactCard = function ContactCard(_ref) {
7114
- var title = _ref.title,
7115
- titleSuffix = _ref.titleSuffix,
7116
- description = _ref.description,
7117
- email = _ref.email,
7118
- phone = _ref.phone,
7119
- website = _ref.website,
7120
- address = _ref.address,
7121
- className = _ref.className;
7122
- var hasDetails = email || phone || website;
7123
- var addressString = address == null ? void 0 : address.substring(0, 110);
7124
- var descriptionText = description == null ? void 0 : description.substring(0, 110);
7125
- return /*#__PURE__*/React__default.createElement("div", {
7126
- className: className
7127
- }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
7128
- columnStartDesktop: 3,
7129
- columnSpanDesktop: 12,
7130
- columnStartDevice: 1,
7131
- columnSpanDevice: 14
7132
- }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
7133
- "data-testid": "contact-card-wrapper"
7134
- }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
7135
- size: "large"
7136
- }, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7137
- size: "small"
7138
- }, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
7139
- size: "small"
7140
- }, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
7141
- size: "large"
7142
- }, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
7143
- "data-testid": "contact-card-details-block"
7144
- }, email && (/*#__PURE__*/React__default.createElement("a", {
7145
- tabIndex: 0,
7146
- href: "mailto:" + email
7147
- }, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
7148
- tabIndex: 0,
7149
- href: "tel:" + phone
7150
- }, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
7151
- tabIndex: 0,
7152
- href: website,
7153
- target: "_blank",
7154
- rel: "noreferrer"
7155
- }, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
7156
- "data-testid": "contact-card-address-block"
7157
- }, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7158
- size: "large"
7159
- }, addressString)))))))));
7160
- };
7161
-
7162
- var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$c;
7163
- var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
7164
- var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
7165
- return props.clickable ? 'pointer' : 'default';
7166
- }, devices.mobile);
7167
- var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
7168
- var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
7169
- return props.showImage ? 2 : '1 / span 4';
7170
- }, devices.mobile);
7171
- var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
7172
- var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
7173
- return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
7174
- });
7175
-
7176
- /* eslint-disable no-shadow */
7177
- (function (CarouselType) {
7178
- CarouselType["Image"] = "image";
7179
- CarouselType["SmallCard"] = "SmallCard";
7180
- CarouselType["LargeCard"] = "LargeCard";
7181
- CarouselType["PersonCard"] = "PersonCard";
7182
- })(exports.CarouselType || (exports.CarouselType = {}));
7183
-
7184
- var clickHandler = function clickHandler(link) {
7185
- if (link != null && link.href && document) {
7186
- document.location.href = link.href;
7187
- }
7188
- };
7189
- var ContentSummary = function ContentSummary(_ref) {
7190
- var title = _ref.title,
7191
- subtitle = _ref.subtitle,
7192
- bodyText = _ref.bodyText,
7193
- link = _ref.link,
7194
- image = _ref.image,
7195
- _ref$largeTitle = _ref.largeTitle,
7196
- largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
7197
- _ref$showImage = _ref.showImage,
7198
- showImage = _ref$showImage === void 0 ? false : _ref$showImage,
7199
- _ref$truncate = _ref.truncate,
7200
- truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
7201
- _ref$fullyClickable = _ref.fullyClickable,
7202
- fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
7203
- _ref$headerSemanticLe = _ref.headerSemanticLevel,
7204
- headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
7205
- className = _ref.className;
7206
- return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
7207
- className: className,
7208
- onClick: function onClick() {
7209
- if (fullyClickable) {
7210
- clickHandler(link);
7211
- }
7212
- },
7213
- clickable: fullyClickable,
7214
- "data-roh": "content-summary-item"
7215
- }, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
7216
- "data-testid": "image-wrapper"
7217
- }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
7218
- href: link.href
7219
- }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
7220
- aspectRatio: exports.AspectRatio['4:3']
7221
- }, /*#__PURE__*/React__default.createElement("img", {
7222
- src: image.src,
7223
- alt: image.alt
7224
- })))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
7225
- aspectRatio: exports.AspectRatio['4:3']
7226
- }, /*#__PURE__*/React__default.createElement("img", {
7227
- src: image.src,
7228
- alt: image.alt
7229
- }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
7230
- showImage: showImage
7231
- }, title && (/*#__PURE__*/React__default.createElement("div", {
7232
- "data-testid": largeTitle ? 'large-title' : 'default-title'
7233
- }, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
7234
- size: "large",
7235
- hierarchy: headerSemanticLevel
7236
- }, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
7237
- size: "medium",
7238
- hierarchy: headerSemanticLevel
7239
- }, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
7240
- size: "large"
7241
- }, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
7242
- size: "large"
7243
- }, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
7244
- truncate: truncate,
7245
- dangerouslySetInnerHTML: {
7246
- __html: bodyText
7247
- },
7248
- "data-testid": "body-text"
7249
- })))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
7250
- className: "content-summary-text-link"
7251
- }), link.text))));
7252
- };
7253
-
7254
- var _templateObject$N, _templateObject2$B, _templateObject3$p, _templateObject4$m, _templateObject5$i;
7255
- var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
7256
- var imageToLeft = _ref.imageToLeft;
7257
- return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
7258
- }, devices.mobile);
7259
- var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
7260
- var imageToLeft = _ref2.imageToLeft;
7261
- return imageToLeft ? 'left' : 'right';
7262
- }, devices.mobile);
7263
- var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
7264
- var imageToLeft = _ref3.imageToLeft;
7265
- return imageToLeft ? 'right' : 'left';
7266
- }, devices.mobile);
7267
- var EditorialSubtitle = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-subtitle);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
7268
- var EditorialText = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
7269
-
7270
- var Editorial = function Editorial(_ref) {
7271
- var _ref$imagePosition = _ref.imagePosition,
7272
- imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
7273
- subtitle = _ref.subtitle,
7274
- text = _ref.text,
7275
- children = _ref.children,
7276
- className = _ref.className;
7277
- var imageToLeft = imagePosition === 'left';
7278
- return /*#__PURE__*/React__default.createElement(Grid, {
7279
- className: className,
7280
- "data-testid": "editorial-component"
7281
- }, /*#__PURE__*/React__default.createElement(GridItem, {
7282
- columnStartDesktop: 3,
7283
- columnSpanDesktop: 12,
7284
- columnStartDevice: 2,
7285
- columnSpanDevice: 12
7286
- }, /*#__PURE__*/React__default.createElement(EditorialGrid, {
7287
- imageToLeft: imageToLeft
7288
- }, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
7289
- "data-testid": "image-wrapper",
7290
- imageToLeft: imageToLeft
7291
- }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
7292
- aspectRatio: exports.AspectRatio['1:1']
7293
- }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
7294
- "data-testid": "text-wrapper",
7295
- imageToLeft: imageToLeft
7296
- }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
7297
- tag: "span"
7298
- }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
7299
- tag: "div",
7300
- size: "large",
7301
- dangerouslySetInnerHTML: {
7302
- __html: text
7303
- }
7304
- })))));
7305
- };
6666
+ var _templateObject$M, _templateObject2$A, _templateObject3$p;
6667
+ var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
6668
+ var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
6669
+ var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
7306
6670
 
7307
- var _templateObject$O, _templateObject2$C, _templateObject3$q;
7308
- var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
7309
- var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
7310
- var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
7311
-
7312
- var _excluded$j = ["text", "onClick"];
6671
+ var _excluded$h = ["text", "onClick"];
7313
6672
  var HotFilters = function HotFilters(_ref) {
7314
6673
  var items = _ref.items,
7315
6674
  className = _ref.className,
@@ -7325,7 +6684,7 @@ var HotFilters = function HotFilters(_ref) {
7325
6684
  }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
7326
6685
  var text = item.text,
7327
6686
  _onClick = item.onClick,
7328
- rest = _objectWithoutPropertiesLoose(item, _excluded$j);
6687
+ rest = _objectWithoutPropertiesLoose(item, _excluded$h);
7329
6688
  var isSelected = index === selectedIndex;
7330
6689
  return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
7331
6690
  key: index,
@@ -7371,10 +6730,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
7371
6730
  return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
7372
6731
  };
7373
6732
 
7374
- var _templateObject$P, _templateObject2$D, _templateObject3$r, _templateObject4$n;
7375
- var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
7376
- var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
7377
- var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
6733
+ var _templateObject$N, _templateObject2$B, _templateObject3$q, _templateObject4$m;
6734
+ var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
6735
+ var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
6736
+ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
7378
6737
  var variant = _ref.variant,
7379
6738
  theme = _ref.theme;
7380
6739
  return getTextColor$4(variant, theme, COLORS$4.background);
@@ -7417,7 +6776,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$r || (
7417
6776
  theme = _ref10.theme;
7418
6777
  return getTextColor$4(variant, theme, COLORS$4.pressed);
7419
6778
  });
7420
- var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--information-panel-color);\n\n a {\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n color: var(--information-panel-color);\n }\n\n @media ", " {\n padding-top: 4px;\n }\n"])), devices.mobile);
6779
+ var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--information-panel-color);\n\n a {\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n color: var(--information-panel-color);\n }\n\n @media ", " {\n padding-top: 4px;\n }\n"])), devices.mobile);
7421
6780
 
7422
6781
  var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
7423
6782
 
@@ -7597,33 +6956,33 @@ var Information = function Information(_ref) {
7597
6956
  })))));
7598
6957
  };
7599
6958
 
7600
- var _templateObject$Q, _templateObject2$E, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
7601
- var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
6959
+ var _templateObject$O, _templateObject2$C, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$c, _templateObject7$8, _templateObject8$4;
6960
+ var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
7602
6961
  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
7603
6962
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
7604
6963
  }, devices.mobile);
7605
- var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
7606
- var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
6964
+ var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
6965
+ var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
7607
6966
  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
7608
6967
  return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
7609
6968
  });
7610
- var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
6969
+ var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
7611
6970
  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
7612
6971
  return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
7613
6972
  }, devices.mobile);
7614
- var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref4) {
6973
+ var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref4) {
7615
6974
  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
7616
6975
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
7617
6976
  }, devices.mobile);
7618
- var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
7619
- var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
6977
+ var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
6978
+ var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
7620
6979
  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
7621
6980
  return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
7622
6981
  }, devices.mobile, function (_ref6) {
7623
6982
  var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
7624
6983
  return isPageHeadingWithoutTitle && "\n margin-top: 15px;\n ";
7625
6984
  });
7626
- var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
6985
+ var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
7627
6986
 
7628
6987
  var PageHeading = function PageHeading(_ref) {
7629
6988
  var title = _ref.title,
@@ -7693,17 +7052,17 @@ var PageHeading = function PageHeading(_ref) {
7693
7052
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
7694
7053
  };
7695
7054
 
7696
- var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
7697
- var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
7698
- var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
7699
- var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
7700
- var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
7701
- var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
7702
- var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
7703
- var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
7704
- var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
7055
+ var _templateObject$P, _templateObject2$D, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
7056
+ var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
7057
+ var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
7058
+ var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
7059
+ var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
7060
+ var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
7061
+ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
7062
+ var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
7063
+ var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
7705
7064
 
7706
- var _excluded$k = ["text"];
7065
+ var _excluded$i = ["text"];
7707
7066
  var PageHeadingImpact = function PageHeadingImpact(_ref) {
7708
7067
  var children = _ref.children,
7709
7068
  text = _ref.text,
@@ -7721,7 +7080,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
7721
7080
  var truncatedText = text == null ? void 0 : text.substring(0, 75);
7722
7081
  var _ref2 = link || {},
7723
7082
  linkText = _ref2.text,
7724
- restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
7083
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
7725
7084
  return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
7726
7085
  bgUrlDesktop: bgUrlDesktop,
7727
7086
  bgUrlDevice: bgUrlDevice,
@@ -7764,21 +7123,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
7764
7123
  }, "Scroll Down"))) : null);
7765
7124
  };
7766
7125
 
7767
- var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q, _templateObject5$l;
7768
- var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
7126
+ var _templateObject$Q, _templateObject2$E, _templateObject3$t, _templateObject4$p, _templateObject5$k;
7127
+ var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
7769
7128
  var color = _ref.color;
7770
7129
  return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
7771
7130
  }, devices.mobileAndTablet);
7772
- var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
7131
+ var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
7773
7132
  var hasImage = _ref2.hasImage;
7774
7133
  return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
7775
7134
  }, devices.mobileAndTablet, function (_ref3) {
7776
7135
  var hasImage = _ref3.hasImage;
7777
7136
  return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
7778
7137
  });
7779
- var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
7780
- var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
7781
- var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
7138
+ var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
7139
+ var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
7140
+ var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
7782
7141
 
7783
7142
  var PageHeadingPanel = function PageHeadingPanel(_ref) {
7784
7143
  var _image$src, _image$alt;
@@ -7808,36 +7167,36 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
7808
7167
  })))));
7809
7168
  };
7810
7169
 
7811
- var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
7812
- var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
7813
- var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
7814
- var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
7815
- var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
7816
- var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
7170
+ var _templateObject$R, _templateObject2$F, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$e, _templateObject7$a, _templateObject8$6, _templateObject9$3, _templateObject0$3, _templateObject1$2;
7171
+ var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
7172
+ var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
7173
+ var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
7174
+ var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
7175
+ var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
7817
7176
  var theme = _ref.theme;
7818
7177
  return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
7819
7178
  }, function (_ref2) {
7820
7179
  var showBlock = _ref2.showBlock;
7821
7180
  return showBlock ? 'block' : 'none';
7822
7181
  }, devices.mobile);
7823
- var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
7824
- var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
7182
+ var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
7183
+ var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
7825
7184
  var isBadgePresent = _ref3.isBadgePresent;
7826
7185
  return isBadgePresent ? '1' : '4';
7827
7186
  });
7828
- var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: end;\n width: 200px;\n\n @media ", " {\n margin-bottom: ", ";\n width: 100%;\n order: 3;\n }\n"])), devices.mobile, function (_ref4) {
7187
+ var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: end;\n width: 200px;\n\n @media ", " {\n margin-bottom: ", ";\n width: 100%;\n order: 3;\n }\n"])), devices.mobile, function (_ref4) {
7829
7188
  var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
7830
7189
  return isAdditionalButtonPresent ? '20px' : '0';
7831
7190
  });
7832
- var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
7833
- var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$4 || (_templateObject0$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 10px 0;\n\n h1,\n h2,\n h3 {\n color: ", ";\n }\n\n @media ", " {\n padding: 0;\n order: 2;\n margin-bottom: ", ";\n }\n"])), function (_ref5) {
7191
+ var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
7192
+ var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 10px 0;\n\n h1,\n h2,\n h3 {\n color: ", ";\n }\n\n @media ", " {\n padding: 0;\n order: 2;\n margin-bottom: ", ";\n }\n"])), function (_ref5) {
7834
7193
  var theme = _ref5.theme;
7835
7194
  return theme == exports.ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
7836
7195
  }, devices.mobile, function (_ref6) {
7837
7196
  var isButtonPresent = _ref6.isButtonPresent;
7838
7197
  return isButtonPresent ? '20px' : '0';
7839
7198
  });
7840
- var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$3 || (_templateObject1$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n min-height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
7199
+ var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n min-height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
7841
7200
 
7842
7201
  var PageHeadingPromoBadge;
7843
7202
  (function (PageHeadingPromoBadge) {
@@ -8022,7 +7381,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
8022
7381
  })))))))))));
8023
7382
  };
8024
7383
 
8025
- var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s;
7384
+ var _templateObject$S, _templateObject2$G, _templateObject3$v, _templateObject4$r;
8026
7385
  var GRID = {
8027
7386
  desktop: {
8028
7387
  leftWithImage: '1 / 1 / 3 / 7',
@@ -8035,19 +7394,19 @@ var GRID = {
8035
7394
  right: '2 / 1 / 3 / 15'
8036
7395
  }
8037
7396
  };
8038
- var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
7397
+ var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
8039
7398
  var $background = _ref.$background;
8040
7399
  return "var(--color-" + $background + ")";
8041
7400
  });
8042
- var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
7401
+ var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
8043
7402
  var hasImage = _ref2.hasImage;
8044
7403
  return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
8045
7404
  }, devices.mobileAndTablet, function (_ref3) {
8046
7405
  var hasImage = _ref3.hasImage;
8047
7406
  return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
8048
7407
  });
8049
- var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
8050
- var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
7408
+ var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
7409
+ var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
8051
7410
 
8052
7411
  var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
8053
7412
  var _image$src, _image$alt;
@@ -8070,12 +7429,12 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
8070
7429
  })))));
8071
7430
  };
8072
7431
 
8073
- var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
8074
- var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
8075
- var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
8076
- var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
8077
- var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
8078
- var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
7432
+ var _templateObject$T, _templateObject2$H, _templateObject3$w, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4;
7433
+ var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
7434
+ var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
7435
+ var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
7436
+ var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
7437
+ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
8079
7438
  var invert = _ref.invert,
8080
7439
  theme = _ref.theme;
8081
7440
  return invert ? theme.colors.white : theme.colors.primary;
@@ -8091,10 +7450,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
8091
7450
  var theme = _ref4.theme;
8092
7451
  return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
8093
7452
  }, devices.tablet, devices.mobile);
8094
- var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
8095
- var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
8096
- var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
8097
- var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
7453
+ var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
7454
+ var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
7455
+ var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
7456
+ var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$4 || (_templateObject0$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
8098
7457
  var invert = _ref5.invert,
8099
7458
  theme = _ref5.theme;
8100
7459
  return invert ? theme.colors.primary : theme.colors.white;
@@ -8174,173 +7533,562 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
8174
7533
  return null;
8175
7534
  }
8176
7535
  };
8177
- var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
8178
- var brandingStyle = _ref.brandingStyle,
8179
- _ref$invert = _ref.invert,
8180
- invert = _ref$invert === void 0 ? false : _ref$invert,
8181
- brandingText = _ref.brandingText,
8182
- brandingLink = _ref.brandingLink;
8183
- return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
7536
+ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
7537
+ var brandingStyle = _ref.brandingStyle,
7538
+ _ref$invert = _ref.invert,
7539
+ invert = _ref$invert === void 0 ? false : _ref$invert,
7540
+ brandingText = _ref.brandingText,
7541
+ brandingLink = _ref.brandingLink;
7542
+ return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
7543
+ };
7544
+
7545
+ var _excluded$j = ["text"];
7546
+ var useResponsiveVideo = function useResponsiveVideo(video, poster) {
7547
+ var mobileVideo = video.mobile || video.desktop;
7548
+ var desktopVideo = video.desktop || video.mobile;
7549
+ var mobilePoster = poster.mobile || poster.desktop;
7550
+ var desktopPoster = poster.desktop || poster.mobile;
7551
+ var _useState = React.useState(desktopPoster),
7552
+ posterUrl = _useState[0],
7553
+ setPoster = _useState[1];
7554
+ var _useState2 = React.useState(desktopVideo),
7555
+ videoUrl = _useState2[0],
7556
+ setVideoUrl = _useState2[1];
7557
+ var isMobile = useMobile();
7558
+ React.useEffect(function () {
7559
+ setPoster(isMobile ? mobilePoster : desktopPoster);
7560
+ setVideoUrl(isMobile ? mobileVideo : desktopVideo);
7561
+ }, [isMobile]);
7562
+ return {
7563
+ posterUrl: posterUrl,
7564
+ videoUrl: videoUrl
7565
+ };
7566
+ };
7567
+ var VideoWithControls = function VideoWithControls(_ref) {
7568
+ var video = _ref.video,
7569
+ poster = _ref.poster;
7570
+ var _useResponsiveVideo = useResponsiveVideo(video, poster),
7571
+ posterUrl = _useResponsiveVideo.posterUrl,
7572
+ videoUrl = _useResponsiveVideo.videoUrl;
7573
+ var isIOS = useIOS();
7574
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
7575
+ id: video.elementId,
7576
+ width: "100%",
7577
+ height: "100%",
7578
+ muted: true,
7579
+ poster: posterUrl,
7580
+ src: videoUrl,
7581
+ "data-testid": "compact-video",
7582
+ playsInline: true
7583
+ }, /*#__PURE__*/React__default.createElement("source", {
7584
+ src: videoUrl
7585
+ }), /*#__PURE__*/React__default.createElement("img", {
7586
+ src: posterUrl,
7587
+ alt: poster.alt,
7588
+ "data-testid": "compact-image"
7589
+ })), /*#__PURE__*/React__default.createElement(VideoControls, {
7590
+ loop: true,
7591
+ videoElementId: video.elementId,
7592
+ muted: true,
7593
+ autoPlay: false,
7594
+ soundControl: !isIOS
7595
+ }));
7596
+ };
7597
+ var CompactHeaderImage = function CompactHeaderImage(_ref2) {
7598
+ var mobile = _ref2.mobile,
7599
+ desktop = _ref2.desktop,
7600
+ alt = _ref2.alt;
7601
+ return /*#__PURE__*/React__default.createElement("picture", {
7602
+ "data-testid": "compact-picture"
7603
+ }, mobile && /*#__PURE__*/React__default.createElement("source", {
7604
+ srcSet: mobile,
7605
+ media: "" + devices.mobile,
7606
+ "data-testid": "compact-mobile-image-source"
7607
+ }), /*#__PURE__*/React__default.createElement("source", {
7608
+ srcSet: desktop,
7609
+ media: "" + devices.desktop,
7610
+ "data-testid": "compact-desktop-image-source"
7611
+ }), /*#__PURE__*/React__default.createElement("img", {
7612
+ src: desktop,
7613
+ alt: alt,
7614
+ "data-testid": "compact-image"
7615
+ }));
7616
+ };
7617
+ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
7618
+ var video = _ref3.video,
7619
+ poster = _ref3.poster;
7620
+ if (!video.desktop && !video.mobile) {
7621
+ return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
7622
+ }
7623
+ return /*#__PURE__*/React__default.createElement(VideoWithControls, {
7624
+ video: video,
7625
+ poster: poster
7626
+ });
7627
+ };
7628
+ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
7629
+ var title = _ref4.title,
7630
+ link = _ref4.link,
7631
+ _ref4$sponsor = _ref4.sponsor,
7632
+ sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
7633
+ customSponsorImage = _ref4.customSponsorImage,
7634
+ bgUrlDesktop = _ref4.bgUrlDesktop,
7635
+ bgUrlDevice = _ref4.bgUrlDevice,
7636
+ videoUrlDesktop = _ref4.videoUrlDesktop,
7637
+ videoUrlMobile = _ref4.videoUrlMobile,
7638
+ _ref4$bgImageAltText = _ref4.bgImageAltText,
7639
+ bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
7640
+ _ref4$invert = _ref4.invert,
7641
+ invert = _ref4$invert === void 0 ? false : _ref4$invert,
7642
+ _ref4$brandingStyle = _ref4.brandingStyle,
7643
+ brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
7644
+ brandingText = _ref4.brandingText,
7645
+ brandingLink = _ref4.brandingLink,
7646
+ _ref4$showCopy = _ref4.showCopy,
7647
+ showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
7648
+ var _ref5 = link || {},
7649
+ linkText = _ref5.text,
7650
+ restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
7651
+ // const titleSize = title && title.length > 20 ? 4 : 3;
7652
+ var video = {
7653
+ elementId: 'compact-header-video',
7654
+ desktop: videoUrlDesktop,
7655
+ mobile: videoUrlMobile
7656
+ };
7657
+ var poster = {
7658
+ desktop: bgUrlDesktop,
7659
+ mobile: bgUrlDevice,
7660
+ alt: bgImageAltText
7661
+ };
7662
+ return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
7663
+ "data-testid": "compact-sponsor"
7664
+ }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
7665
+ "data-testid": "compact-custom-sponsor"
7666
+ }, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
7667
+ video: video,
7668
+ poster: poster
7669
+ })), showCopy && (/*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
7670
+ className: "page-heading-compact__background",
7671
+ invert: invert
7672
+ }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
7673
+ brandingStyle: brandingStyle,
7674
+ brandingText: brandingText,
7675
+ brandingLink: brandingLink,
7676
+ invert: invert
7677
+ }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
7678
+ size: "large",
7679
+ hierarchy: "h1"
7680
+ }, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
7681
+ invert: invert,
7682
+ className: "page-heading-compact__button"
7683
+ }), linkText))))));
7684
+ };
7685
+
7686
+ var _templateObject$U, _templateObject2$I;
7687
+ var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
7688
+ var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
7689
+ var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
7690
+ var transitioning = _ref.transitioning;
7691
+ return transitioning ? 'transform 0.3s ease' : 'none';
7692
+ }, function (_ref2) {
7693
+ var translateX = _ref2.translateX;
7694
+ return translateX + "px";
7695
+ }, SWIPE_SLIDE_CLASS_NAME);
7696
+
7697
+ /**
7698
+ * Generates a random string in the format XXX-XXX.
7699
+ * Does not meet UUID standards.
7700
+ * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
7701
+ *
7702
+ * @return {string} A random string in the format XXX-XXX.
7703
+ */
7704
+ var generateDomElementId = function generateDomElementId() {
7705
+ var randomPart = Math.floor(100 + Math.random() * 900).toString();
7706
+ var datePart = Date.now().toString().slice(-3);
7707
+ return randomPart + "-" + datePart;
7708
+ };
7709
+
7710
+ var DISABLED_TABBING_TAGS = 'a, button';
7711
+ var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
7712
+ if (!element) return;
7713
+ var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
7714
+ focusables.forEach(function (el) {
7715
+ if (shouldDisable) el.setAttribute('tabindex', '-1');
7716
+ });
7717
+ };
7718
+ var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
7719
+ return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
7720
+ };
7721
+ var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
7722
+ var widthSoFar = 0;
7723
+ var visible = [];
7724
+ for (var i = currentIndex; i < slidesLength; i++) {
7725
+ var _slideWidths$i;
7726
+ var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
7727
+ if (widthSoFar + width > containerWidth) break;
7728
+ visible.push(i);
7729
+ widthSoFar += width;
7730
+ }
7731
+ return visible;
7732
+ };
7733
+ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
7734
+ var absDelta = Math.abs(delta);
7735
+ var movedSlides = 0;
7736
+ var accumulated = 0;
7737
+ for (var i = 0; i < slideWidths.length; i++) {
7738
+ accumulated += slideWidths[i];
7739
+ // Allow partial slide (e.g. 50% of next slide) to count
7740
+ var partialThreshold = slideWidths[i] * 0.5;
7741
+ if (absDelta > accumulated - partialThreshold) {
7742
+ movedSlides++;
7743
+ } else {
7744
+ break;
7745
+ }
7746
+ }
7747
+ return movedSlides;
8184
7748
  };
8185
7749
 
8186
- var _excluded$l = ["text"];
8187
- var useResponsiveVideo = function useResponsiveVideo(video, poster) {
8188
- var mobileVideo = video.mobile || video.desktop;
8189
- var desktopVideo = video.desktop || video.mobile;
8190
- var mobilePoster = poster.mobile || poster.desktop;
8191
- var desktopPoster = poster.desktop || poster.mobile;
8192
- var _useState = React.useState(desktopPoster),
8193
- posterUrl = _useState[0],
8194
- setPoster = _useState[1];
8195
- var _useState2 = React.useState(desktopVideo),
8196
- videoUrl = _useState2[0],
8197
- setVideoUrl = _useState2[1];
8198
- var isMobile = useMobile();
7750
+ var _excluded$k = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
7751
+ var MAX_CLONES_NUMBER = 6;
7752
+ var CLICK_DRAG_THRESHOLD = 10;
7753
+ var getClonesCount = function getClonesCount(infinite, childrenLength) {
7754
+ if (!infinite) return 0;
7755
+ return Math.min(childrenLength, MAX_CLONES_NUMBER);
7756
+ };
7757
+ var getSlidedWidth = function getSlidedWidth(slide) {
7758
+ if (!slide) return 0;
7759
+ var style = window.getComputedStyle(slide);
7760
+ var marginLeft = parseFloat(style.marginLeft) || 0;
7761
+ var marginRight = parseFloat(style.marginRight) || 0;
7762
+ return slide.getBoundingClientRect().width + marginLeft + marginRight;
7763
+ };
7764
+ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
7765
+ var children = _ref.children,
7766
+ _ref$infinite = _ref.infinite,
7767
+ infinite = _ref$infinite === void 0 ? false : _ref$infinite,
7768
+ onIndexChange = _ref.onIndexChange,
7769
+ _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
7770
+ slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
7771
+ _ref$slidesAriaHidden = _ref.slidesAriaHidden,
7772
+ slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
7773
+ onActiveChange = _ref.onActiveChange,
7774
+ onOverflowChange = _ref.onOverflowChange,
7775
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
7776
+ var containerRef = React.useRef(null);
7777
+ var childRefs = React.useRef([]);
7778
+ var startX = React.useRef(0);
7779
+ var currentTranslate = React.useRef(0);
7780
+ var isDragging = React.useRef(false);
7781
+ var isMouseDown = React.useRef(false);
7782
+ var isActive = React.useRef(false);
7783
+ var isClickPrevented = React.useRef(false);
7784
+ var uniqueIdRef = React.useRef(generateDomElementId());
7785
+ var _useState = React.useState(null),
7786
+ dragTranslateX = _useState[0],
7787
+ setDragTranslateX = _useState[1];
7788
+ var _useState2 = React.useState(false),
7789
+ transitioning = _useState2[0],
7790
+ setTransitioning = _useState2[1];
7791
+ var _useState3 = React.useState([]),
7792
+ slideWidths = _useState3[0],
7793
+ setSlideWidths = _useState3[1];
7794
+ var _useState4 = React.useState(0),
7795
+ containerWidth = _useState4[0],
7796
+ setContainerWidth = _useState4[1];
7797
+ var _useMemo = React.useMemo(function () {
7798
+ var count = getClonesCount(infinite, children.length);
7799
+ var leftClones = infinite ? children.slice(-count) : [];
7800
+ var rightClones = infinite ? children.slice(0, count) : [];
7801
+ var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
7802
+ return {
7803
+ slides: allSlides,
7804
+ clonesCount: count
7805
+ };
7806
+ }, [children, infinite]),
7807
+ slides = _useMemo.slides,
7808
+ clonesCount = _useMemo.clonesCount;
7809
+ var _useState5 = React.useState(infinite ? clonesCount : 0),
7810
+ currentIndex = _useState5[0],
7811
+ setCurrentIndex = _useState5[1];
8199
7812
  React.useEffect(function () {
8200
- setPoster(isMobile ? mobilePoster : desktopPoster);
8201
- setVideoUrl(isMobile ? mobileVideo : desktopVideo);
8202
- }, [isMobile]);
8203
- return {
8204
- posterUrl: posterUrl,
8205
- videoUrl: videoUrl
7813
+ var handler = function handler(e) {
7814
+ if (isClickPrevented.current) {
7815
+ e.preventDefault();
7816
+ e.stopPropagation();
7817
+ }
7818
+ };
7819
+ var containerElement = containerRef.current;
7820
+ containerElement == null || containerElement.addEventListener('click', handler, true);
7821
+ return function () {
7822
+ return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
7823
+ };
7824
+ }, []);
7825
+ React.useEffect(function () {
7826
+ if (!onIndexChange) return;
7827
+ if (!infinite) {
7828
+ onIndexChange(currentIndex);
7829
+ } else {
7830
+ var offset = currentIndex - clonesCount + children.length;
7831
+ var realIndex = offset % children.length;
7832
+ onIndexChange(realIndex);
7833
+ }
7834
+ }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
7835
+ var updateDimensions = React.useCallback(function () {
7836
+ var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
7837
+ var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
7838
+ setContainerWidth(cw);
7839
+ setSlideWidths(widths);
7840
+ if (!infinite) {
7841
+ var totalWidth = widths.reduce(function (acc, w) {
7842
+ return acc + w;
7843
+ }, 0);
7844
+ var visibleSpace = cw - (slidesOffsetBefore || 0);
7845
+ var overflow = totalWidth > Math.max(0, visibleSpace);
7846
+ onOverflowChange == null || onOverflowChange(overflow);
7847
+ }
7848
+ }, []);
7849
+ React.useEffect(function () {
7850
+ var animationFrameRequestId = requestAnimationFrame(updateDimensions);
7851
+ return function () {
7852
+ return cancelAnimationFrame(animationFrameRequestId);
7853
+ };
7854
+ }, [children]);
7855
+ React.useEffect(function () {
7856
+ var observer = new ResizeObserver(updateDimensions);
7857
+ if (containerRef.current) observer.observe(containerRef.current);
7858
+ return function () {
7859
+ return observer.disconnect();
7860
+ };
7861
+ }, [children]);
7862
+ var setIsActive = function setIsActive() {
7863
+ if (!isActive.current) {
7864
+ isActive.current = true;
7865
+ onActiveChange == null || onActiveChange(true);
7866
+ }
7867
+ };
7868
+ var getTranslateX = function getTranslateX() {
7869
+ var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
7870
+ return acc + width;
7871
+ }, 0);
7872
+ return (slidesOffsetBefore || 0) - widthsBefore;
7873
+ };
7874
+ var getTranslateForIndex = function getTranslateForIndex(index) {
7875
+ var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
7876
+ return acc + width;
7877
+ }, 0);
7878
+ return (slidesOffsetBefore || 0) - widthsBefore;
7879
+ };
7880
+ var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
7881
+ var delta = currentTranslate.current - getTranslateX();
7882
+ var direction = delta > 0 ? -1 : 1;
7883
+ var movedSlides = getMovedSlides(delta, slideWidths);
7884
+ if (Math.abs(delta) > 20) {
7885
+ movedSlides = Math.max(1, movedSlides);
7886
+ var targetIndex = currentIndex + direction * movedSlides;
7887
+ var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
7888
+ if (!infinite) {
7889
+ currentTranslate.current = getTranslateForIndex(finalIndex);
7890
+ setDragTranslateX(null);
7891
+ }
7892
+ setTransitioning(true);
7893
+ setCurrentIndex(finalIndex);
7894
+ } else {
7895
+ setTransitioning(true);
7896
+ setCurrentIndex(function (prev) {
7897
+ return prev;
7898
+ });
7899
+ }
7900
+ setDragTranslateX(null);
7901
+ };
7902
+ var canMoveNext = function canMoveNext() {
7903
+ if (infinite) return true;
7904
+ if (slideWidths.length === 0 || containerWidth === 0) return false;
7905
+ var totalWidth = slideWidths.reduce(function (acc, w) {
7906
+ return acc + w;
7907
+ }, 0);
7908
+ var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
7909
+ return acc + w;
7910
+ }, 0);
7911
+ var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
7912
+ var remainingToRight = totalWidth - widthsBefore - visibleSpace;
7913
+ var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
7914
+ var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
7915
+ var nextIndex = lastVisibleIndex + 1;
7916
+ if (nextIndex >= slideWidths.length) return false;
7917
+ var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
7918
+ if (nextSlideWidth === 0) return false;
7919
+ var EPS = 1; // pixel tolerance
7920
+ // full next slide fits
7921
+ if (remainingToRight + EPS >= nextSlideWidth) return true;
7922
+ return remainingToRight > 0;
7923
+ };
7924
+ var handleTransitionEnd = function handleTransitionEnd() {
7925
+ setTransitioning(false);
7926
+ if (!infinite) return;
7927
+ if (currentIndex >= children.length + clonesCount) {
7928
+ setCurrentIndex(clonesCount);
7929
+ } else if (currentIndex < clonesCount) {
7930
+ setCurrentIndex(children.length + currentIndex);
7931
+ }
7932
+ };
7933
+ var goToPrev = function goToPrev() {
7934
+ if (transitioning) return;
7935
+ setIsActive();
7936
+ setTransitioning(true);
7937
+ setCurrentIndex(function (prev) {
7938
+ var target = infinite ? prev - 1 : Math.max(0, prev - 1);
7939
+ if (!infinite) {
7940
+ currentTranslate.current = getTranslateForIndex(target);
7941
+ setDragTranslateX(null);
7942
+ }
7943
+ return target;
7944
+ });
7945
+ };
7946
+ var goToNext = function goToNext() {
7947
+ if (transitioning || !canMoveNext()) return;
7948
+ setIsActive();
7949
+ setTransitioning(true);
7950
+ setCurrentIndex(function (prev) {
7951
+ var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
7952
+ if (!infinite) {
7953
+ currentTranslate.current = getTranslateForIndex(target);
7954
+ setDragTranslateX(null);
7955
+ }
7956
+ return target;
7957
+ });
8206
7958
  };
8207
- };
8208
- var VideoWithControls = function VideoWithControls(_ref) {
8209
- var video = _ref.video,
8210
- poster = _ref.poster;
8211
- var _useResponsiveVideo = useResponsiveVideo(video, poster),
8212
- posterUrl = _useResponsiveVideo.posterUrl,
8213
- videoUrl = _useResponsiveVideo.videoUrl;
8214
- var isIOS = useIOS();
8215
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
8216
- id: video.elementId,
8217
- width: "100%",
8218
- height: "100%",
8219
- muted: true,
8220
- poster: posterUrl,
8221
- src: videoUrl,
8222
- "data-testid": "compact-video",
8223
- playsInline: true
8224
- }, /*#__PURE__*/React__default.createElement("source", {
8225
- src: videoUrl
8226
- }), /*#__PURE__*/React__default.createElement("img", {
8227
- src: posterUrl,
8228
- alt: poster.alt,
8229
- "data-testid": "compact-image"
8230
- })), /*#__PURE__*/React__default.createElement(VideoControls, {
8231
- loop: true,
8232
- videoElementId: video.elementId,
8233
- muted: true,
8234
- autoPlay: false,
8235
- soundControl: !isIOS
8236
- }));
8237
- };
8238
- var CompactHeaderImage = function CompactHeaderImage(_ref2) {
8239
- var mobile = _ref2.mobile,
8240
- desktop = _ref2.desktop,
8241
- alt = _ref2.alt;
8242
- return /*#__PURE__*/React__default.createElement("picture", {
8243
- "data-testid": "compact-picture"
8244
- }, mobile && /*#__PURE__*/React__default.createElement("source", {
8245
- srcSet: mobile,
8246
- media: "" + devices.mobile,
8247
- "data-testid": "compact-mobile-image-source"
8248
- }), /*#__PURE__*/React__default.createElement("source", {
8249
- srcSet: desktop,
8250
- media: "" + devices.desktop,
8251
- "data-testid": "compact-desktop-image-source"
8252
- }), /*#__PURE__*/React__default.createElement("img", {
8253
- src: desktop,
8254
- alt: alt,
8255
- "data-testid": "compact-image"
8256
- }));
8257
- };
8258
- var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
8259
- var video = _ref3.video,
8260
- poster = _ref3.poster;
8261
- if (!video.desktop && !video.mobile) {
8262
- return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
8263
- }
8264
- return /*#__PURE__*/React__default.createElement(VideoWithControls, {
8265
- video: video,
8266
- poster: poster
7959
+ React.useImperativeHandle(ref, function () {
7960
+ return {
7961
+ nextSlide: goToNext,
7962
+ prevSlide: goToPrev,
7963
+ hasOverflow: function hasOverflow() {
7964
+ var totalWidth = slideWidths.reduce(function (acc, w) {
7965
+ return acc + w;
7966
+ }, 0);
7967
+ var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
7968
+ return totalWidth > Math.max(0, visibleSpace);
7969
+ },
7970
+ hasNext: function hasNext() {
7971
+ return canMoveNext();
7972
+ }
7973
+ };
8267
7974
  });
8268
- };
8269
- var PageHeadingCompact = function PageHeadingCompact(_ref4) {
8270
- var title = _ref4.title,
8271
- link = _ref4.link,
8272
- _ref4$sponsor = _ref4.sponsor,
8273
- sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
8274
- customSponsorImage = _ref4.customSponsorImage,
8275
- bgUrlDesktop = _ref4.bgUrlDesktop,
8276
- bgUrlDevice = _ref4.bgUrlDevice,
8277
- videoUrlDesktop = _ref4.videoUrlDesktop,
8278
- videoUrlMobile = _ref4.videoUrlMobile,
8279
- _ref4$bgImageAltText = _ref4.bgImageAltText,
8280
- bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
8281
- _ref4$invert = _ref4.invert,
8282
- invert = _ref4$invert === void 0 ? false : _ref4$invert,
8283
- _ref4$brandingStyle = _ref4.brandingStyle,
8284
- brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
8285
- brandingText = _ref4.brandingText,
8286
- brandingLink = _ref4.brandingLink,
8287
- _ref4$showCopy = _ref4.showCopy,
8288
- showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
8289
- var _ref5 = link || {},
8290
- linkText = _ref5.text,
8291
- restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
8292
- // const titleSize = title && title.length > 20 ? 4 : 3;
8293
- var video = {
8294
- elementId: 'compact-header-video',
8295
- desktop: videoUrlDesktop,
8296
- mobile: videoUrlMobile
7975
+ var handleTouchStart = function handleTouchStart(e) {
7976
+ setIsActive();
7977
+ startX.current = e.touches[0].clientX;
7978
+ isDragging.current = true;
7979
+ isClickPrevented.current = false;
7980
+ setTransitioning(false);
8297
7981
  };
8298
- var poster = {
8299
- desktop: bgUrlDesktop,
8300
- mobile: bgUrlDevice,
8301
- alt: bgImageAltText
7982
+ var handleTouchMove = function handleTouchMove(e) {
7983
+ if (!isDragging.current) return;
7984
+ var deltaX = e.touches[0].clientX - startX.current;
7985
+ if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
7986
+ isClickPrevented.current = true;
7987
+ }
7988
+ var visualOffset = getTranslateX() + deltaX;
7989
+ currentTranslate.current = visualOffset;
7990
+ setDragTranslateX(visualOffset);
8302
7991
  };
8303
- return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
8304
- "data-testid": "compact-sponsor"
8305
- }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
8306
- "data-testid": "compact-custom-sponsor"
8307
- }, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
8308
- video: video,
8309
- poster: poster
8310
- })), showCopy && (/*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
8311
- className: "page-heading-compact__background",
8312
- invert: invert
8313
- }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
8314
- brandingStyle: brandingStyle,
8315
- brandingText: brandingText,
8316
- brandingLink: brandingLink,
8317
- invert: invert
8318
- }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8319
- size: "large",
8320
- hierarchy: "h1"
8321
- }, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
8322
- invert: invert,
8323
- className: "page-heading-compact__button"
8324
- }), linkText))))));
8325
- };
7992
+ var handleTouchEnd = function handleTouchEnd() {
7993
+ isDragging.current = false;
7994
+ if (isClickPrevented.current) {
7995
+ navigateOnSwipeEnd();
7996
+ } else {
7997
+ setDragTranslateX(null);
7998
+ }
7999
+ };
8000
+ var handleMouseMove = function handleMouseMove(e) {
8001
+ if (!isDragging.current || !isMouseDown.current || transitioning) return;
8002
+ var deltaX = e.clientX - startX.current;
8003
+ if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
8004
+ isClickPrevented.current = true;
8005
+ }
8006
+ var visualOffset = getTranslateX() + deltaX;
8007
+ currentTranslate.current = visualOffset;
8008
+ setDragTranslateX(visualOffset);
8009
+ };
8010
+ var _handleMouseUp = function handleMouseUp() {
8011
+ if (!isMouseDown.current) return;
8012
+ isMouseDown.current = false;
8013
+ isDragging.current = false;
8014
+ if (isClickPrevented.current) {
8015
+ navigateOnSwipeEnd();
8016
+ } else {
8017
+ setDragTranslateX(null);
8018
+ }
8019
+ window.removeEventListener('mousemove', handleMouseMove);
8020
+ window.removeEventListener('mouseup', _handleMouseUp);
8021
+ };
8022
+ var handleMouseDown = function handleMouseDown(e) {
8023
+ if (transitioning || e.button !== 0) return;
8024
+ e.preventDefault();
8025
+ setIsActive();
8026
+ startX.current = e.clientX;
8027
+ isDragging.current = true;
8028
+ isMouseDown.current = true;
8029
+ isClickPrevented.current = false;
8030
+ setTransitioning(false);
8031
+ window.addEventListener('mousemove', handleMouseMove);
8032
+ window.addEventListener('mouseup', _handleMouseUp);
8033
+ };
8034
+ var onSlideFocus = function onSlideFocus(isVisible, index) {
8035
+ if (!isVisible) {
8036
+ setCurrentIndex(index);
8037
+ }
8038
+ };
8039
+ var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
8040
+ return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
8041
+ ref: containerRef,
8042
+ className: "swipe",
8043
+ onTouchStart: handleTouchStart,
8044
+ onTouchMove: handleTouchMove,
8045
+ onTouchEnd: handleTouchEnd,
8046
+ onMouseDown: handleMouseDown,
8047
+ "aria-roledescription": "carousel",
8048
+ role: "list"
8049
+ }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
8050
+ className: "swipe-track-wrapper",
8051
+ translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
8052
+ transitioning: transitioning && dragTranslateX === null,
8053
+ onTransitionEnd: handleTransitionEnd
8054
+ }, slides.map(function (child, index) {
8055
+ var isVisible = visibleIndexes.includes(index);
8056
+ var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
8057
+ return /*#__PURE__*/React__default.createElement("div", {
8058
+ key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
8059
+ className: SWIPE_SLIDE_CLASS_NAME,
8060
+ "aria-hidden": slidesAriaHidden || isClone,
8061
+ "aria-roledescription": "slide",
8062
+ role: "listitem",
8063
+ ref: function ref(el) {
8064
+ childRefs.current[index] = el;
8065
+ disableTabbingInside(el, isClone);
8066
+ },
8067
+ onFocus: function onFocus() {
8068
+ return onSlideFocus(isVisible, index);
8069
+ }
8070
+ }, child);
8071
+ })));
8072
+ });
8073
+ Swipe.displayName = 'Swipe';
8326
8074
 
8327
- var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$d;
8328
- var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
8329
- var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
8330
- var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
8331
- var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
8075
+ var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$g, _templateObject7$c;
8076
+ var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
8077
+ var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
8078
+ var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
8079
+ var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
8332
8080
  var hasImages = _ref.hasImages;
8333
8081
  return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
8334
8082
  }, devices.mobile, function (_ref2) {
8335
8083
  var hasImages = _ref2.hasImages;
8336
8084
  return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
8337
8085
  });
8338
- var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n .swipe-slide {\n ", "\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), function (_ref3) {
8086
+ var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n .swipe-slide {\n ", "\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), function (_ref3) {
8339
8087
  var hasMultipleImages = _ref3.hasMultipleImages;
8340
8088
  return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
8341
8089
  }, devices.mobile);
8342
- var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin-top: 8px;\n margin-bottom: 8px;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white) !important;\n }\n\n & {\n display: flex;\n margin-left: 100px;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
8343
- var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
8090
+ var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin-top: 8px;\n margin-bottom: 8px;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white) !important;\n }\n\n & {\n display: flex;\n margin-left: 100px;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
8091
+ var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
8344
8092
 
8345
8093
  /* eslint-disable react/no-danger */
8346
8094
  var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
@@ -8383,7 +8131,7 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
8383
8131
  }
8384
8132
  })))) : null), hasImages && (/*#__PURE__*/React__default.createElement(HighlightsCarouselWrapper, {
8385
8133
  hasMultipleImages: hasMultipleImages
8386
- }, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
8134
+ }, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
8387
8135
  "data-testid": "rotator-buttons"
8388
8136
  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
8389
8137
  onClickNext: onNext,
@@ -8403,14 +8151,14 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
8403
8151
  }))))));
8404
8152
  };
8405
8153
 
8406
- var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
8407
- var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
8408
- var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8409
- var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8410
- var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
8411
- var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8412
- var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8413
- var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
8154
+ var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$o, _templateObject6$h, _templateObject7$d, _templateObject8$8;
8155
+ var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
8156
+ var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8157
+ var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8158
+ var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
8159
+ var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8160
+ var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8161
+ var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
8414
8162
  var active = _ref.active;
8415
8163
  return active ? "var(--color-primary-red)" : 'inherit';
8416
8164
  }, function (_ref2) {
@@ -8562,16 +8310,16 @@ var Pagination = function Pagination(_ref) {
8562
8310
  }))))));
8563
8311
  };
8564
8312
 
8565
- var _templateObject$Y;
8566
- var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
8313
+ var _templateObject$X;
8314
+ var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
8567
8315
 
8568
- var _templateObject$Z, _templateObject2$M;
8569
- var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
8570
- var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
8316
+ var _templateObject$Y, _templateObject2$L;
8317
+ var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
8318
+ var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
8571
8319
 
8572
- var _templateObject$_, _templateObject2$N;
8573
- var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
8574
- var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
8320
+ var _templateObject$Z, _templateObject2$M;
8321
+ var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
8322
+ var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
8575
8323
 
8576
8324
  var Person = function Person(_ref) {
8577
8325
  var person = _ref.person,
@@ -8610,9 +8358,9 @@ var PersonDetails = function PersonDetails(_ref) {
8610
8358
  })));
8611
8359
  };
8612
8360
 
8613
- var _templateObject$$, _templateObject2$O;
8614
- var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
8615
- var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
8361
+ var _templateObject$_, _templateObject2$N;
8362
+ var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
8363
+ var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
8616
8364
 
8617
8365
  var PersonCard = function PersonCard(_ref) {
8618
8366
  var role = _ref.role,
@@ -8622,7 +8370,7 @@ var PersonCard = function PersonCard(_ref) {
8622
8370
  var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
8623
8371
  return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
8624
8372
  }, [role]);
8625
- if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
8373
+ if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper, {
8626
8374
  className: className
8627
8375
  }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
8628
8376
  src: role.people[0].headshot,
@@ -8650,14 +8398,14 @@ var PeopleListing = function PeopleListing(_ref) {
8650
8398
  }));
8651
8399
  };
8652
8400
 
8653
- var _templateObject$10, _templateObject2$P, _templateObject3$A, _templateObject4$u;
8654
- var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8655
- var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
8401
+ var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$t;
8402
+ var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8403
+ var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
8656
8404
  var columnCount = _ref.columnCount;
8657
8405
  return "repeat(" + columnCount + ", 1fr)";
8658
8406
  }, devices.mobile, devices.tablet);
8659
- var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
8660
- var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
8407
+ var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
8408
+ var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
8661
8409
 
8662
8410
  // Get the total character length of a property in an array of objects
8663
8411
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -8784,8 +8532,8 @@ var CreditListing = function CreditListing(_ref) {
8784
8532
  }, creditEntries);
8785
8533
  };
8786
8534
 
8787
- var _templateObject$11;
8788
- var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
8535
+ var _templateObject$10;
8536
+ var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
8789
8537
 
8790
8538
  var PolicyLinks = function PolicyLinks(_ref) {
8791
8539
  var items = _ref.items;
@@ -8803,14 +8551,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
8803
8551
  }));
8804
8552
  };
8805
8553
 
8806
- var _templateObject$12, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
8554
+ var _templateObject$11, _templateObject3$A, _templateObject4$u, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9, _templateObject9$5, _templateObject0$5, _templateObject1$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
8807
8555
  var LENGTH_TEXT = 28;
8808
8556
  var LENGTH_TEXT_TABLET$1 = 12;
8809
8557
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
8810
8558
  var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
8811
8559
  var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
8812
8560
  var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
8813
- var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
8561
+ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
8814
8562
  var imageToLeft = _ref.imageToLeft;
8815
8563
  return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
8816
8564
  }, devices.tablet, function (_ref2) {
@@ -8820,7 +8568,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 ||
8820
8568
  var asCard = _ref3.asCard;
8821
8569
  return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
8822
8570
  });
8823
- var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
8571
+ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
8824
8572
  var hasTextLinks = _ref4.hasTextLinks;
8825
8573
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
8826
8574
  }, function (_ref5) {
@@ -8844,21 +8592,21 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$B ||
8844
8592
  }
8845
8593
  return '';
8846
8594
  });
8847
- var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
8595
+ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
8848
8596
  var marginBottom = _ref7.marginBottom;
8849
8597
  return marginBottom + "px";
8850
8598
  }, function (_ref8) {
8851
8599
  var mobileMarginBottom = _ref8.mobileMarginBottom;
8852
8600
  return mobileMarginBottom && "\n @media " + devices.mobile + " {\n margin-bottom: " + mobileMarginBottom + "px;\n }\n ";
8853
8601
  });
8854
- var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
8855
- var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
8856
- var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
8857
- var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
8858
- var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
8859
- var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$6 || (_templateObject0$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
8860
- var asCardOverrides = /*#__PURE__*/styled.css(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n"])), ButtonsContainer$2, devices.tablet);
8861
- var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref9) {
8602
+ var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
8603
+ var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
8604
+ var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
8605
+ var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
8606
+ var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
8607
+ var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
8608
+ var asCardOverrides = /*#__PURE__*/styled.css(_templateObject1$3 || (_templateObject1$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n"])), ButtonsContainer$2, devices.tablet);
8609
+ var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref9) {
8862
8610
  var imageToLeft = _ref9.imageToLeft;
8863
8611
  return imageToLeft ? 'left' : 'right';
8864
8612
  }, devices.mobile);
@@ -8879,12 +8627,12 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_te
8879
8627
  var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
8880
8628
  var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
8881
8629
 
8882
- var _excluded$m = ["text"],
8630
+ var _excluded$l = ["text"],
8883
8631
  _excluded2$2 = ["text"],
8884
8632
  _excluded3$1 = ["text"];
8885
8633
  var _buttonTypeToButton$1;
8886
8634
  var LENGTH_TEXT$1 = 28;
8887
- var LENGTH_TEXT_PARAGRAPH = 185;
8635
+ var LENGTH_TEXT_PARAGRAPH = 130;
8888
8636
  var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
8889
8637
  var PromoWithTags = function PromoWithTags(_ref) {
8890
8638
  var _ref$imagePosition = _ref.imagePosition,
@@ -8947,7 +8695,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
8947
8695
  var _ref2 = firstButton || {},
8948
8696
  _ref2$text = _ref2.text,
8949
8697
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
8950
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
8698
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
8951
8699
  var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
8952
8700
  var secondButton = links == null ? void 0 : links[1];
8953
8701
  var _ref3 = secondButton || {},
@@ -9075,28 +8823,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
9075
8823
  }))));
9076
8824
  };
9077
8825
 
9078
- var _templateObject$13, _templateObject2$Q, _templateObject3$C, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
8826
+ var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f;
9079
8827
  var LENGTH_TEXT$2 = 28;
9080
8828
  var LENGTH_TEXT_TABLET$2 = 10;
9081
- var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
8829
+ var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
9082
8830
  var imageToLeft = _ref.imageToLeft;
9083
8831
  return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
9084
8832
  }, devices.tablet, function (_ref2) {
9085
8833
  var imageToLeft = _ref2.imageToLeft;
9086
8834
  return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
9087
8835
  }, devices.mobile);
9088
- var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
8836
+ var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
9089
8837
  var imageToLeft = _ref3.imageToLeft;
9090
8838
  return imageToLeft ? 'left' : 'right';
9091
8839
  }, devices.mobile);
9092
- var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
8840
+ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
9093
8841
  var imageToLeft = _ref4.imageToLeft;
9094
8842
  return imageToLeft ? 'right' : 'left';
9095
8843
  }, devices.mobile);
9096
- var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
9097
- var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
9098
- var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
9099
- var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
8844
+ var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
8845
+ var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
8846
+ var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
8847
+ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
9100
8848
  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
9101
8849
  primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
9102
8850
  _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -9118,8 +8866,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
9118
8866
  return '';
9119
8867
  });
9120
8868
 
9121
- var _templateObject$14;
9122
- var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
8869
+ var _templateObject$13;
8870
+ var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
9123
8871
  var _ref$aspectRatio = _ref.aspectRatio,
9124
8872
  aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
9125
8873
  return aspectRatio;
@@ -9231,7 +8979,7 @@ var PromoChild = function PromoChild(_ref) {
9231
8979
  }));
9232
8980
  };
9233
8981
 
9234
- var _excluded$n = ["text"],
8982
+ var _excluded$m = ["text"],
9235
8983
  _excluded2$3 = ["text"];
9236
8984
  var LENGTH_TEXT$3 = 28;
9237
8985
  var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -9258,7 +9006,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9258
9006
  var _ref2 = primaryButton || {},
9259
9007
  _ref2$text = _ref2.text,
9260
9008
  primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
9261
- restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
9009
+ restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
9262
9010
  var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
9263
9011
  var tertiaryButton = links == null ? void 0 : links[1];
9264
9012
  var _ref3 = tertiaryButton || {},
@@ -9301,8 +9049,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9301
9049
  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
9302
9050
  };
9303
9051
 
9304
- var _templateObject$15;
9305
- var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
9052
+ var _templateObject$14;
9053
+ var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
9306
9054
 
9307
9055
  /**
9308
9056
  * DEPRECATED. Use RadioGroup2 instead
@@ -9357,9 +9105,9 @@ var RadioGroup = function RadioGroup(_ref) {
9357
9105
  })));
9358
9106
  };
9359
9107
 
9360
- var _templateObject$16, _templateObject2$R, _templateObject3$D;
9361
- var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9362
- var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
9108
+ var _templateObject$15, _templateObject2$Q, _templateObject3$C;
9109
+ var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9110
+ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
9363
9111
  var horizontalMode = _ref.horizontalMode;
9364
9112
  if (horizontalMode) return 'row';
9365
9113
  return 'column';
@@ -9367,7 +9115,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_temp
9367
9115
  var gap = _ref2.gap;
9368
9116
  return gap + "px";
9369
9117
  });
9370
- var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
9118
+ var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
9371
9119
  var darkMode = _ref3.darkMode;
9372
9120
  if (darkMode) return 'var(--base-color-white)';
9373
9121
  return 'var(--base-color-errorstate)';
@@ -9444,10 +9192,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
9444
9192
  }, error))));
9445
9193
  };
9446
9194
 
9447
- var _templateObject$17, _templateObject2$S, _templateObject3$E;
9448
- var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
9449
- var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
9450
- var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
9195
+ var _templateObject$16, _templateObject2$R, _templateObject3$D;
9196
+ var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
9197
+ var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
9198
+ var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
9451
9199
 
9452
9200
  /* eslint-disable react/no-danger */
9453
9201
  var StatusBanner = function StatusBanner(_ref) {
@@ -9503,8 +9251,8 @@ var StatusBanner = function StatusBanner(_ref) {
9503
9251
  return null;
9504
9252
  };
9505
9253
 
9506
- var _templateObject$18;
9507
- var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
9254
+ var _templateObject$17;
9255
+ var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
9508
9256
 
9509
9257
  /* ~~~~~~~ new harmonic types ~~~~~~~ */
9510
9258
  var HarmonicSize = {
@@ -9546,8 +9294,8 @@ var SectionTitle = function SectionTitle(_ref) {
9546
9294
  }, description)))));
9547
9295
  };
9548
9296
 
9549
- var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7, _templateObject0$7, _templateObject1$5;
9550
- var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
9297
+ var _templateObject$18, _templateObject2$S, _templateObject3$E, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4;
9298
+ var stateStyles = /*#__PURE__*/styled.css(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
9551
9299
  var theme = _ref.theme;
9552
9300
  return "3px solid " + theme.colors.lapisLazuli;
9553
9301
  }, function (_ref2) {
@@ -9557,12 +9305,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject
9557
9305
  var theme = _ref3.theme;
9558
9306
  return theme.colors.lightgrey;
9559
9307
  });
9560
- var borderStyles = /*#__PURE__*/styled.css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
9308
+ var borderStyles = /*#__PURE__*/styled.css(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
9561
9309
  var theme = _ref4.theme;
9562
9310
  return theme.colors.darkgrey;
9563
9311
  });
9564
- var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
9565
- var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
9312
+ var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
9313
+ var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
9566
9314
  var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
9567
9315
  var theme = _ref5.theme;
9568
9316
  return {
@@ -9570,11 +9318,11 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
9570
9318
  color: theme.colors.black,
9571
9319
  title: 'Select Arrow'
9572
9320
  };
9573
- })(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
9574
- var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
9575
- var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
9576
- var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
9577
- var Option = /*#__PURE__*/styled__default.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
9321
+ })(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
9322
+ var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
9323
+ var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
9324
+ var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
9325
+ var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
9578
9326
  var theme = _ref6.theme,
9579
9327
  hover = _ref6.hover;
9580
9328
  var _theme$colors = theme.colors,
@@ -9584,9 +9332,9 @@ var Option = /*#__PURE__*/styled__default.li(_templateObject9$7 || (_templateObj
9584
9332
  return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
9585
9333
  });
9586
9334
  var selectStyles = function selectStyles(width, height) {
9587
- return styled.css(_templateObject0$7 || (_templateObject0$7 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
9335
+ return styled.css(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
9588
9336
  };
9589
- var SelectList = /*#__PURE__*/styled__default.ul(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
9337
+ var SelectList = /*#__PURE__*/styled__default.ul(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
9590
9338
  var width = _ref7.width,
9591
9339
  height = _ref7.height;
9592
9340
  return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
@@ -9927,9 +9675,9 @@ function Select(_ref3) {
9927
9675
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
9928
9676
  }
9929
9677
 
9930
- var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
9931
- var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9932
- var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
9678
+ var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x;
9679
+ var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9680
+ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
9933
9681
  var width = _ref.width;
9934
9682
  if (!width) return 'none';
9935
9683
  return width + "px";
@@ -9946,18 +9694,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_t
9946
9694
  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
9947
9695
  return "0 0 0 3px var(--base-color-lapislazuli)";
9948
9696
  });
9949
- var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
9697
+ var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
9950
9698
  var darkMode = _ref5.darkMode;
9951
9699
  if (darkMode) return "var(--base-color-white)";
9952
9700
  return "var(--base-color-black)";
9953
9701
  });
9954
- var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
9702
+ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
9955
9703
  var darkMode = _ref6.darkMode;
9956
9704
  if (darkMode) return "var(--base-color-white)";
9957
9705
  return "var(--base-color-errorstate)";
9958
9706
  });
9959
9707
 
9960
- var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
9708
+ var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components"];
9961
9709
  var DropdownIndicator = function DropdownIndicator(props) {
9962
9710
  return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
9963
9711
  iconName: "DropdownArrow"
@@ -10008,7 +9756,7 @@ var SelectComponent = function SelectComponent(_ref2) {
10008
9756
  _ref2$isSearchable = _ref2.isSearchable,
10009
9757
  isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
10010
9758
  components = _ref2.components,
10011
- selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
9759
+ selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
10012
9760
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
10013
9761
  label: label,
10014
9762
  error: error,
@@ -10026,7 +9774,7 @@ var SelectComponent = function SelectComponent(_ref2) {
10026
9774
  })));
10027
9775
  };
10028
9776
 
10029
- var _excluded$p = ["label", "error", "width", "darkMode", "components"];
9777
+ var _excluded$o = ["label", "error", "width", "darkMode", "components"];
10030
9778
  /**
10031
9779
  * The Select2Async component is similar to Select 2, but uses react-select async
10032
9780
  * component for select instead of regular react-select component. This can be used
@@ -10048,7 +9796,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
10048
9796
  _ref$darkMode = _ref.darkMode,
10049
9797
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
10050
9798
  components = _ref.components,
10051
- selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
9799
+ selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
10052
9800
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
10053
9801
  label: label,
10054
9802
  error: error,
@@ -10065,24 +9813,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
10065
9813
  })));
10066
9814
  };
10067
9815
 
10068
- var _templateObject$1b, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
10069
- var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
10070
- var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
10071
- var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
9816
+ var _templateObject$1a, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
9817
+ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
9818
+ var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
9819
+ var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
10072
9820
  var stackCtasEarly = _ref.stackCtasEarly;
10073
9821
  return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
10074
9822
  }, function (_ref2) {
10075
9823
  var stackCtasEarly = _ref2.stackCtasEarly;
10076
9824
  return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
10077
9825
  }, devices.smallDesktop, devices.mobileAndTablet);
10078
- var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
9826
+ var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
10079
9827
  var singleChild = _ref3.singleChild;
10080
9828
  return singleChild ? '0' : '10px';
10081
9829
  });
10082
- var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
10083
- var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
10084
- var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
10085
- var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
9830
+ var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
9831
+ var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
9832
+ var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
9833
+ var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
10086
9834
 
10087
9835
  // Set max. character length
10088
9836
  var setMaxCharLength = function setMaxCharLength(value, maxLength) {
@@ -10171,8 +9919,8 @@ var UpsellCard = function UpsellCard(_ref) {
10171
9919
  }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
10172
9920
  };
10173
9921
 
10174
- var _templateObject$1c, _templateObject2$V, _templateObject3$I;
10175
- var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
9922
+ var _templateObject$1b, _templateObject2$U, _templateObject3$H;
9923
+ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
10176
9924
  var _ref$aspectRatio = _ref.aspectRatio,
10177
9925
  aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
10178
9926
  return aspectRatio;
@@ -10182,10 +9930,10 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_temp
10182
9930
  height = _ref2.height;
10183
9931
  return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
10184
9932
  });
10185
- var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
10186
- var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
9933
+ var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
9934
+ var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
10187
9935
 
10188
- var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
9936
+ var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
10189
9937
  var ImageWithCaption = function ImageWithCaption(_ref) {
10190
9938
  var caption = _ref.caption,
10191
9939
  altText = _ref.altText,
@@ -10195,7 +9943,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
10195
9943
  loading = _ref.loading,
10196
9944
  aspectRatio = _ref.aspectRatio,
10197
9945
  className = _ref.className,
10198
- restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
9946
+ restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
10199
9947
  return /*#__PURE__*/React__default.createElement(Wrapper$7, Object.assign({
10200
9948
  aspectRatio: aspectRatio,
10201
9949
  className: className
@@ -10216,13 +9964,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
10216
9964
  }, caption))));
10217
9965
  };
10218
9966
 
10219
- var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u, _templateObject6$n;
10220
- var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
10221
- var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
10222
- var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
10223
- var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
10224
- var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
10225
- var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
9967
+ var _templateObject$1c, _templateObject2$V, _templateObject3$I, _templateObject4$z, _templateObject5$t, _templateObject6$m;
9968
+ var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
9969
+ var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
9970
+ var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
9971
+ var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
9972
+ var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
9973
+ var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
10226
9974
 
10227
9975
  var MiniCard = function MiniCard(_ref) {
10228
9976
  var _ref$title = _ref.title,
@@ -10260,18 +10008,18 @@ var MiniCard = function MiniCard(_ref) {
10260
10008
  }, title)))));
10261
10009
  };
10262
10010
 
10263
- var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
10264
- var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
10265
- var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
10266
- var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
10011
+ var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u;
10012
+ var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
10013
+ var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
10014
+ var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
10267
10015
  var isVisible = _ref.isVisible;
10268
10016
  return isVisible ? 'visible' : 'hidden';
10269
10017
  });
10270
- var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
10018
+ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
10271
10019
  var isVisible = _ref2.isVisible;
10272
10020
  return isVisible ? 'visible' : 'hidden';
10273
10021
  });
10274
- var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
10022
+ var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
10275
10023
 
10276
10024
  var keyDown = function keyDown(e, toggleFunction) {
10277
10025
  if (e.key === 'Enter' || e.key === 'Space') {
@@ -10352,15 +10100,15 @@ var ReadMore = function ReadMore(_ref) {
10352
10100
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
10353
10101
  };
10354
10102
 
10355
- var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w;
10356
- var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10357
- var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
10358
- var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
10359
- var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
10103
+ var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
10104
+ var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10105
+ var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
10106
+ var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
10107
+ var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
10360
10108
  var isActive = _ref.isActive;
10361
10109
  return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
10362
10110
  }, exports.Colors.MidGrey);
10363
- var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
10111
+ var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
10364
10112
  var isOpen = _ref2.isOpen;
10365
10113
  return isOpen ? 'block' : 'none';
10366
10114
  }, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
@@ -10516,19 +10264,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
10516
10264
  });
10517
10265
  };
10518
10266
 
10519
- var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o;
10520
- var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10521
- var Sections = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10522
- var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10267
+ var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w, _templateObject6$n;
10268
+ var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10269
+ var Sections = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10270
+ var Section = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10523
10271
  var color = _ref.color;
10524
10272
  return "var(--base-color-" + color + ")";
10525
10273
  });
10526
- var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
10527
- var Text = /*#__PURE__*/styled__default.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10274
+ var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
10275
+ var Text = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10528
10276
  var color = _ref2.color;
10529
10277
  return "var(--base-color-" + color + ")";
10530
10278
  });
10531
- var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10279
+ var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10532
10280
  var color = _ref3.color;
10533
10281
  return "var(--base-color-" + color + ")";
10534
10282
  });
@@ -10610,19 +10358,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
10610
10358
  }, strengthLabel))));
10611
10359
  };
10612
10360
 
10613
- var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
10614
- var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10615
- var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10616
- var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10617
- var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
10361
+ var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
10362
+ var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10363
+ var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10364
+ var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10365
+ var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
10618
10366
  return "calc(100% / " + (props.columns - 1) + ")";
10619
10367
  }, devices.tablet, devices.mobile);
10620
- var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
10368
+ var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
10621
10369
  return "calc(100% / " + (props.columns - 1) + ")";
10622
10370
  }, devices.mobile);
10623
- var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
10624
- var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
10625
- var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
10371
+ var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
10372
+ var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
10373
+ var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
10626
10374
 
10627
10375
  /* eslint-disable react/no-danger */
10628
10376
  var Content = function Content(_ref) {
@@ -10825,25 +10573,25 @@ var Table = function Table(_ref) {
10825
10573
  }))));
10826
10574
  };
10827
10575
 
10828
- var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
10829
- var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
10576
+ var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
10577
+ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
10830
10578
  var theme = _ref.theme;
10831
10579
  return "var(--color-" + theme + ")";
10832
10580
  }, function (_ref2) {
10833
10581
  var theme = _ref2.theme;
10834
10582
  return "var(--color-" + theme + ")";
10835
10583
  });
10836
- var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$$ || (_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);
10837
- var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
10838
- var Error = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
10839
- var Form = /*#__PURE__*/styled__default.form(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
10840
- var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
10841
- var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
10842
- var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
10843
- var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
10844
- var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
10845
- var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
10846
- var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
10584
+ var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
10585
+ var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
10586
+ var Error = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
10587
+ var Form = /*#__PURE__*/styled__default.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
10588
+ var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
10589
+ var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
10590
+ var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
10591
+ var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
10592
+ var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
10593
+ var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
10594
+ var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
10847
10595
  var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
10848
10596
  var _ref3$isOpen = _ref3.isOpen,
10849
10597
  isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
@@ -11250,13 +10998,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
11250
10998
  }))))));
11251
10999
  };
11252
11000
 
11253
- var _templateObject$1j, _templateObject2$10, _templateObject4$G, _templateObject5$A;
11254
- var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
11001
+ var _templateObject$1i, _templateObject2$$, _templateObject4$F, _templateObject5$z;
11002
+ var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
11255
11003
  var withShadow = _ref.withShadow;
11256
- return withShadow && styled.css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11004
+ return withShadow && styled.css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11257
11005
  }, devices.mobile);
11258
- var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
11259
- var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
11006
+ var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
11007
+ var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
11260
11008
 
11261
11009
  var defaultGrid = {
11262
11010
  columnStartDesktop: 2,
@@ -11314,12 +11062,12 @@ var AnchorBar = function AnchorBar(_ref) {
11314
11062
  return null;
11315
11063
  };
11316
11064
 
11317
- var _templateObject$1k, _templateObject2$11;
11318
- var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
11065
+ var _templateObject$1j, _templateObject2$10;
11066
+ var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
11319
11067
  var hide = _ref.hide;
11320
11068
  return hide && "display: none;";
11321
11069
  }, devices.mobileAndTablet);
11322
- var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
11070
+ var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
11323
11071
 
11324
11072
  /**
11325
11073
  * An accessible component which allows Assistive Technology users to move the focus
@@ -11411,8 +11159,8 @@ var SkipToMain = function SkipToMain(_ref) {
11411
11159
  }));
11412
11160
  };
11413
11161
 
11414
- var _templateObject$1l;
11415
- var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
11162
+ var _templateObject$1k;
11163
+ var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
11416
11164
 
11417
11165
  var addTypographyClasses = function addTypographyClasses(html) {
11418
11166
  return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
@@ -11447,9 +11195,14 @@ var BodyContent = function BodyContent(_ref2) {
11447
11195
  _ref2$renderGridItem = _ref2.renderGridItem,
11448
11196
  renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
11449
11197
  var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
11450
- var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
11198
+ var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
11199
+ tag: "div",
11200
+ size: "large",
11201
+ "data-testid": "text-container",
11451
11202
  className: textContainerClassName,
11452
- html: text
11203
+ dangerouslySetInnerHTML: {
11204
+ __html: addTypographyClasses(text)
11205
+ }
11453
11206
  });
11454
11207
  var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
11455
11208
  columnStartDesktop: columnStartDesktop,
@@ -11467,27 +11220,27 @@ var BodyContent = function BodyContent(_ref2) {
11467
11220
  }, gridItemOrContent);
11468
11221
  };
11469
11222
 
11470
- var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
11223
+ var _templateObject$1l, _templateObject2$11, _templateObject3$O, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
11471
11224
  var color = 'primary-black';
11472
11225
  var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
11473
11226
  borderColor: color,
11474
11227
  hoveredColor: color,
11475
11228
  pressedColor: color,
11476
11229
  textColor: color
11477
- })(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
11478
- var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
11479
- var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
11230
+ })(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
11231
+ var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
11232
+ var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
11480
11233
  var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
11481
11234
  serif: true,
11482
11235
  size: 'medium'
11483
- })(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
11236
+ })(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
11484
11237
  var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
11485
11238
  size: 'large'
11486
- })(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
11487
- var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
11239
+ })(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
11240
+ var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
11488
11241
  var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
11489
11242
  size: 'large'
11490
- })(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11243
+ })(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11491
11244
 
11492
11245
  var Paywall = function Paywall(_ref) {
11493
11246
  var className = _ref.className,
@@ -11680,14 +11433,14 @@ var Navigation = function Navigation(_ref) {
11680
11433
  })))))));
11681
11434
  };
11682
11435
 
11683
- var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject6$s, _templateObject7$m;
11684
- var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
11685
- var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
11686
- var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
11687
- var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
11688
- var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
11689
- var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
11690
- var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
11436
+ var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
11437
+ var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
11438
+ var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
11439
+ var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
11440
+ var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
11441
+ var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
11442
+ var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
11443
+ var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
11691
11444
 
11692
11445
  var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
11693
11446
  var Footer = function Footer(_ref) {
@@ -11745,18 +11498,18 @@ var Footer = function Footer(_ref) {
11745
11498
  }, additionalInfo))));
11746
11499
  };
11747
11500
 
11748
- var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
11501
+ var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
11749
11502
  var LIST_ITEM_GAP = 32;
11750
- var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
11503
+ var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
11751
11504
  var bottomBorder = _ref.bottomBorder;
11752
11505
  return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
11753
11506
  }, zIndexes.anchor, function (_ref2) {
11754
11507
  var withShadow = _ref2.withShadow;
11755
- return withShadow && styled.css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11508
+ return withShadow && styled.css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11756
11509
  });
11757
- var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
11758
- var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
11759
- var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
11510
+ var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
11511
+ var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
11512
+ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
11760
11513
  var tabsOverflow = _ref3.tabsOverflow;
11761
11514
  return tabsOverflow ? 'calc(100% - 74px)' : '100%';
11762
11515
  }, LIST_ITEM_GAP, function (_ref4) {
@@ -11767,11 +11520,11 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateO
11767
11520
  hasTwoArrows = _ref5.hasTwoArrows;
11768
11521
  return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
11769
11522
  });
11770
- var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
11523
+ var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
11771
11524
  var withShadow = _ref7.withShadow;
11772
- return withShadow && styled.css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11525
+ return withShadow && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11773
11526
  });
11774
- var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
11527
+ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
11775
11528
  var disabled = _ref8.disabled;
11776
11529
  return disabled ? 'not-allowed' : 'pointer';
11777
11530
  }, function (_ref9) {
@@ -11782,7 +11535,7 @@ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_temp
11782
11535
  return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
11783
11536
  });
11784
11537
 
11785
- var _excluded$r = ["id", "text"];
11538
+ var _excluded$q = ["id", "text"];
11786
11539
  var AnchorTabBar = function AnchorTabBar(_ref) {
11787
11540
  var tabs = _ref.tabs,
11788
11541
  onTabClick = _ref.onTabClick,
@@ -11993,7 +11746,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
11993
11746
  }, tabs.map(function (_ref4) {
11994
11747
  var id = _ref4.id,
11995
11748
  text = _ref4.text,
11996
- rest = _objectWithoutPropertiesLoose(_ref4, _excluded$r);
11749
+ rest = _objectWithoutPropertiesLoose(_ref4, _excluded$q);
11997
11750
  return /*#__PURE__*/React__default.createElement("li", {
11998
11751
  key: id
11999
11752
  }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
@@ -12026,20 +11779,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
12026
11779
  })))) : null))));
12027
11780
  };
12028
11781
 
12029
- var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
12030
- var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
11782
+ var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
11783
+ var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
12031
11784
  var sticky = _ref.sticky;
12032
11785
  return sticky ? 'sticky' : 'initial';
12033
11786
  }, zIndexes.anchor);
12034
- var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
12035
- var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
11787
+ var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
11788
+ var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
12036
11789
  var title = _ref2.title;
12037
11790
  return title ? 'row' : 'row-reverse';
12038
11791
  }, devices.tablet, devices.mobile);
12039
- var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
12040
- var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
12041
- var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
12042
- var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
11792
+ var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
11793
+ var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
11794
+ var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
11795
+ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
12043
11796
  var theme = _ref3.theme;
12044
11797
  return theme.colors.primaryButtonReverseBg;
12045
11798
  }, function (_ref4) {
@@ -12052,10 +11805,10 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
12052
11805
  var theme = _ref6.theme;
12053
11806
  return theme.colors.primaryButtonReverse;
12054
11807
  });
12055
- var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
12056
- var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
11808
+ var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
11809
+ var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
12057
11810
 
12058
- var _excluded$s = ["text"],
11811
+ var _excluded$r = ["text"],
12059
11812
  _excluded2$4 = ["text"];
12060
11813
  var TitleWithCTA = function TitleWithCTA(_ref) {
12061
11814
  var title = _ref.title,
@@ -12065,7 +11818,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
12065
11818
  message = _ref.message;
12066
11819
  var _ref2 = (links == null ? void 0 : links[0]) || {},
12067
11820
  primaryButtonText = _ref2.text,
12068
- primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
11821
+ primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
12069
11822
  var _ref3 = (links == null ? void 0 : links[1]) || {},
12070
11823
  secondaryButtonText = _ref3.text,
12071
11824
  secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
@@ -12086,14 +11839,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
12086
11839
  }, message))));
12087
11840
  };
12088
11841
 
12089
- var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L;
12090
- var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
12091
- var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
12092
- var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
12093
- var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
11842
+ var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K;
11843
+ var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
11844
+ var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
11845
+ var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
11846
+ var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
12094
11847
 
12095
- var _templateObject$1r;
12096
- var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
11848
+ var _templateObject$1q;
11849
+ var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
12097
11850
 
12098
11851
  var UpsellCards = function UpsellCards(_ref) {
12099
11852
  var upsellCards = _ref.upsellCards;
@@ -12155,9 +11908,9 @@ var UpsellSection = function UpsellSection(_ref) {
12155
11908
  })))));
12156
11909
  };
12157
11910
 
12158
- var _templateObject$1s, _templateObject2$17;
12159
- var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
12160
- var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
11911
+ var _templateObject$1r, _templateObject2$16;
11912
+ var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
11913
+ var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
12161
11914
  var bottomBorder = _ref.bottomBorder;
12162
11915
  return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
12163
11916
  }, devices.mobileAndTablet, devices.mobile);
@@ -12188,13 +11941,13 @@ var StickyBar = function StickyBar(_ref) {
12188
11941
  }, children)));
12189
11942
  };
12190
11943
 
12191
- var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M;
12192
- var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
12193
- var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
12194
- var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
12195
- var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
11944
+ var _templateObject$1s, _templateObject2$17, _templateObject3$T, _templateObject4$L;
11945
+ var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
11946
+ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
11947
+ var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11948
+ var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
12196
11949
 
12197
- var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
11950
+ var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
12198
11951
  var MAX_Z_INDEX = 9999999999;
12199
11952
  if (Modal.defaultStyles.content) {
12200
11953
  Modal.defaultStyles.content.position = 'static';
@@ -12268,7 +12021,7 @@ var ModalWindow = function ModalWindow(_ref) {
12268
12021
  setIsOpen = _ref.setIsOpen,
12269
12022
  children = _ref.children,
12270
12023
  appElementId = _ref.appElementId,
12271
- modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
12024
+ modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
12272
12025
  var isMobile = useMobile();
12273
12026
  var customStyles = {
12274
12027
  overlay: {
@@ -12396,29 +12149,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
12396
12149
  return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
12397
12150
  };
12398
12151
 
12399
- var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
12400
- var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
12152
+ var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
12153
+ var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
12401
12154
  var imagesHeightDesktop = _ref.imagesHeightDesktop;
12402
12155
  return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n\n > div {\n height: " + imagesHeightDesktop + "px;\n }\n }\n }\n }";
12403
12156
  }, devices.mobile, function (_ref2) {
12404
12157
  var imagesHeightDevice = _ref2.imagesHeightDevice;
12405
12158
  return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
12406
12159
  });
12407
- var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
12160
+ var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
12408
12161
  var type = _ref3.type,
12409
12162
  isActive = _ref3.isActive;
12410
12163
  return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n " + getCardSlideTabletStyles(type) + "\n }\n }\n }\n\n @media " + devices.mobile + " {\n && {\n .swipe-slide {\n " + getCardSlideMobileStyles(type) + "\n }\n }\n }\n ";
12411
12164
  });
12412
- var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
12413
- var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
12414
- var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
12165
+ var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
12166
+ var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
12167
+ var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
12415
12168
  var isDescriptionPresent = _ref4.isDescriptionPresent;
12416
12169
  return isDescriptionPresent && 'margin: 20px 0';
12417
12170
  });
12418
- var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
12419
- var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
12420
- var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
12421
- var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
12171
+ var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
12172
+ var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
12173
+ var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
12174
+ var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
12422
12175
  var active = _ref5.active;
12423
12176
  return active ? 'grid-column: 1 / span 16' : '';
12424
12177
  }, devices.tablet, function (_ref6) {
@@ -12661,19 +12414,19 @@ var Carousel = function Carousel(_ref) {
12661
12414
  }, children))));
12662
12415
  };
12663
12416
 
12664
- var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$d, _templateObject0$b, _templateObject1$7, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
12665
- var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
12666
- var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
12667
- var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
12668
- var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
12669
- var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
12670
- var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
12671
- var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$p || (_templateObject7$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
12672
- var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$i || (_templateObject8$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
12673
- var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$d || (_templateObject9$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
12674
- var RotatorButtonsWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$b || (_templateObject0$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
12675
- var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$7 || (_templateObject1$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
12676
- var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
12417
+ var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
12418
+ var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
12419
+ var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
12420
+ var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
12421
+ var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
12422
+ var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
12423
+ var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
12424
+ var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
12425
+ var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
12426
+ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
12427
+ var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
12428
+ var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
12429
+ var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
12677
12430
  var FirstButtonComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
12678
12431
  var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
12679
12432
  var AdditionalInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n"])), devices.mobileAndTablet);
@@ -12684,7 +12437,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject1
12684
12437
  }, devices.mobile);
12685
12438
  var ProgressContainer$1 = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n p {\n margin-bottom: 16px;\n }\n\n @media ", " {\n margin-top: 20px;\n\n p {\n margin-bottom: 12px;\n }\n }\n"])), devices.mobileAndTablet);
12686
12439
 
12687
- var _excluded$u = ["text"],
12440
+ var _excluded$t = ["text"],
12688
12441
  _excluded2$5 = ["text"];
12689
12442
  var _buttonTypeToButton$2;
12690
12443
  var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
@@ -12695,7 +12448,7 @@ var Buttons = function Buttons(_ref) {
12695
12448
  var _ref2 = firstButton || {},
12696
12449
  _ref2$text = _ref2.text,
12697
12450
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
12698
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$u);
12451
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
12699
12452
  var secondButton = links == null ? void 0 : links[1];
12700
12453
  var _ref3 = secondButton || {},
12701
12454
  _ref3$text = _ref3.text,
@@ -12910,7 +12663,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12910
12663
  auxiliaryCTA: auxiliaryCTA
12911
12664
  })), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
12912
12665
  "data-testid": "carousel-wrapper"
12913
- }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$2, {
12666
+ }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
12914
12667
  "data-testid": "rotator-buttons"
12915
12668
  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12916
12669
  onClickNext: onNext,
@@ -12927,11 +12680,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12927
12680
  })));
12928
12681
  };
12929
12682
 
12930
- var _excluded$v = ["logo", "slides"];
12683
+ var _excluded$u = ["logo", "slides"];
12931
12684
  var HighlightsCinema = function HighlightsCinema(_ref) {
12932
12685
  var logo = _ref.logo,
12933
12686
  slides = _ref.slides,
12934
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12687
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
12935
12688
  var slidesWithLinks = slides.map(function (slide) {
12936
12689
  var links = processSlideLinks(slide.links);
12937
12690
  return _extends({}, slide, {
@@ -12948,10 +12701,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
12948
12701
  })));
12949
12702
  };
12950
12703
 
12951
- var _excluded$w = ["slides"];
12704
+ var _excluded$v = ["slides"];
12952
12705
  var HighlightsCore = function HighlightsCore(_ref) {
12953
12706
  var slides = _ref.slides,
12954
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
12707
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12955
12708
  var slidesWithLinks = slides.map(function (slide) {
12956
12709
  var links = processSlideLinks(slide.links);
12957
12710
  return _extends({}, slide, {
@@ -12965,11 +12718,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
12965
12718
  })));
12966
12719
  };
12967
12720
 
12968
- var _excluded$x = ["logo", "slides"];
12721
+ var _excluded$w = ["logo", "slides"];
12969
12722
  var HighlightsStream = function HighlightsStream(_ref) {
12970
12723
  var logo = _ref.logo,
12971
12724
  slides = _ref.slides,
12972
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
12725
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
12973
12726
  var slidesWithLinks = slides.map(function (slide) {
12974
12727
  var links = processSlideLinks(slide.links);
12975
12728
  return _extends({}, slide, {
@@ -12986,9 +12739,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
12986
12739
  })));
12987
12740
  };
12988
12741
 
12989
- var _templateObject$1w, _templateObject3$X;
12990
- var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
12991
- var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
12742
+ var _templateObject$1v, _templateObject3$W;
12743
+ var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
12744
+ var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
12992
12745
 
12993
12746
  var MinimalCarousel = function MinimalCarousel(_ref) {
12994
12747
  var children = _ref.children;
@@ -13583,8 +13336,8 @@ var Theme = function Theme(_ref) {
13583
13336
  }, children);
13584
13337
  };
13585
13338
 
13586
- var _templateObject$1x;
13587
- var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
13339
+ var _templateObject$1w;
13340
+ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
13588
13341
  var theme = _ref.theme;
13589
13342
  return theme.colors.primary;
13590
13343
  }, function (_ref2) {
@@ -14531,10 +14284,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1x || (
14531
14284
  return theme.footer.tablet.paddingBottom;
14532
14285
  }, devices.desktop, devices.largeDesktop);
14533
14286
 
14534
- var _templateObject$1y, _templateObject2$1b, _templateObject3$Y;
14535
- var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14536
- var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14537
- var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
14287
+ var _templateObject$1x, _templateObject2$1a, _templateObject3$X;
14288
+ var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14289
+ var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14290
+ var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
14538
14291
 
14539
14292
  /* eslint-disable react/no-danger */
14540
14293
  var Quote = function Quote(_ref) {
@@ -14580,7 +14333,6 @@ exports.Caption = Caption;
14580
14333
  exports.Card = Card;
14581
14334
  exports.Cards = Cards;
14582
14335
  exports.Carousel = Carousel;
14583
- exports.CastFilter = CastFilters;
14584
14336
  exports.CinemaBadge = CinemaBadge;
14585
14337
  exports.ContactCard = ContactCard;
14586
14338
  exports.ContentSummary = ContentSummary;