@royaloperahouse/harmonic 1.0.8 → 1.0.9-a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -5
- package/dist/components/atoms/Buttons/Auxiliary/AuxiliaryButton.style.d.ts +1 -1
- package/dist/components/atoms/Buttons/Button.d.ts +1 -1
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.d.ts +1 -1
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.style.d.ts +1 -1
- package/dist/components/atoms/Buttons/Secondary/SecondaryButton.style.d.ts +1 -1
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/Icons/SvgIcons/16px/Expand.svg.d.ts +4 -0
- package/dist/components/atoms/Icons/SvgIcons/16px/Remove.svg.d.ts +4 -0
- package/dist/components/atoms/Icons/SvgIcons/index.d.ts +2 -0
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/Accordion/Accordion.style.d.ts +3 -1
- package/dist/components/molecules/CastFilter/{CastFilters.d.ts → Original/CastFilters.d.ts} +1 -1
- package/dist/components/molecules/CastFilter/Original/CastFilters.style.d.ts +5 -0
- package/dist/components/molecules/CastFilter/Original/index.d.ts +2 -0
- package/dist/components/molecules/CastFilter/Variant/CastFiltersVariant.d.ts +4 -0
- package/dist/components/molecules/CastFilter/Variant/index.d.ts +2 -0
- package/dist/components/molecules/CustomStrategyTabsFilter/CustomStrategyTabsFilter.d.ts +65 -1
- package/dist/components/molecules/CustomStrategyTabsFilter/styled.d.ts +1 -1
- package/dist/components/molecules/HotFilters/HotFilters.style.d.ts +1 -1
- package/dist/components/molecules/PageHeading/Compact/Compact.style.d.ts +1 -1
- package/dist/components/molecules/PageHeading/Impact/Impact.style.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +0 -1
- package/dist/components/molecules/ReadMore/ReadMoreTextLink.d.ts +4 -0
- package/dist/components/molecules/ReadMore/ReadMoreTextLink.style.d.ts +3 -0
- package/dist/components/molecules/index.d.ts +3 -2
- package/dist/components/organisms/Carousels/HighlightsCarousel/helper.d.ts +1 -1
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +1 -1
- package/dist/harmonic.cjs.development.css +319 -0
- package/dist/harmonic.cjs.development.js +792 -348
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +802 -357
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +1 -0
- package/dist/types/creditListing.d.ts +7 -6
- package/dist/types/types.d.ts +23 -3
- package/package.json +2 -2
- package/dist/components/molecules/CastFilter/index.d.ts +0 -2
|
@@ -208,6 +208,26 @@ var typographyStyles = {"display":"typography-module_display__ZHsz9","header":"t
|
|
|
208
208
|
var _excluded = ["children", "size", "em", "color", "serif", "hierarchy", "tag", "className"],
|
|
209
209
|
_excluded2 = ["children", "size", "color", "className", "bold", "tag"],
|
|
210
210
|
_excluded3 = ["children", "size", "color", "className"];
|
|
211
|
+
/* ~~~ Display - (use case) ~~~ */
|
|
212
|
+
var DisplayHeader = function DisplayHeader(_ref) {
|
|
213
|
+
var children = _ref.children,
|
|
214
|
+
size = _ref.size,
|
|
215
|
+
em = _ref.em,
|
|
216
|
+
_ref$color = _ref.color,
|
|
217
|
+
color = _ref$color === void 0 ? 'inherit' : _ref$color,
|
|
218
|
+
serif = _ref.serif,
|
|
219
|
+
className = _ref.className;
|
|
220
|
+
var classNames = createClassNames('display', {
|
|
221
|
+
size: size,
|
|
222
|
+
color: color,
|
|
223
|
+
serif: serif,
|
|
224
|
+
em: em,
|
|
225
|
+
className: className
|
|
226
|
+
}, typographyStyles);
|
|
227
|
+
return /*#__PURE__*/React__default.createElement("h1", {
|
|
228
|
+
className: classNames
|
|
229
|
+
}, children);
|
|
230
|
+
};
|
|
211
231
|
/* ~~~ Headers - size and hierarchy set separately ~~~ */
|
|
212
232
|
var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
213
233
|
var _ref3;
|
|
@@ -741,6 +761,40 @@ var Tick = (function (_ref) {
|
|
|
741
761
|
}));
|
|
742
762
|
});
|
|
743
763
|
|
|
764
|
+
var Expand16px = (function (_ref) {
|
|
765
|
+
var _ref$color = _ref.color,
|
|
766
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
|
|
767
|
+
ariaLabel = _ref.ariaLabel;
|
|
768
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
769
|
+
width: "16",
|
|
770
|
+
height: "16",
|
|
771
|
+
viewBox: "1.5 1.5 9.5 9.5",
|
|
772
|
+
fill: "none",
|
|
773
|
+
"aria-label": ariaLabel,
|
|
774
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
775
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
776
|
+
d: "M6.44531 6.08203V1.83203H5.94531V6.08203H1.69531V6.58203H5.94531V10.832H6.44531V6.58203H10.6953V6.08203H6.44531Z",
|
|
777
|
+
fill: color
|
|
778
|
+
}));
|
|
779
|
+
});
|
|
780
|
+
|
|
781
|
+
var Remove16px = (function (_ref) {
|
|
782
|
+
var _ref$color = _ref.color,
|
|
783
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
|
|
784
|
+
ariaLabel = _ref.ariaLabel;
|
|
785
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
786
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
787
|
+
viewBox: "1.5 1.2 10.5 10.5",
|
|
788
|
+
width: "16",
|
|
789
|
+
height: "16",
|
|
790
|
+
fill: "none",
|
|
791
|
+
"aria-label": ariaLabel
|
|
792
|
+
}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
|
|
793
|
+
d: "M7.75597 6.26964L11.6954 2.33019L10.6348 1.26953L6.69531 5.20898L2.75586 1.26953L1.6952 2.33019L5.63465 6.26964L1.63477 10.2695L2.69543 11.3302L6.69531 7.33031L10.6952 11.3302L11.7559 10.2695L7.75597 6.26964Z",
|
|
794
|
+
fill: color
|
|
795
|
+
})));
|
|
796
|
+
});
|
|
797
|
+
|
|
744
798
|
var AddToMyList = (function (_ref) {
|
|
745
799
|
var _ref$color = _ref.color,
|
|
746
800
|
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
|
|
@@ -2585,6 +2639,7 @@ var IconLibrary = {
|
|
|
2585
2639
|
Email: Email,
|
|
2586
2640
|
Expand: Expand,
|
|
2587
2641
|
Expand12px: Expand12px,
|
|
2642
|
+
Expand16px: Expand16px,
|
|
2588
2643
|
ExternalLink: ExternalLink,
|
|
2589
2644
|
Facebook: Facebook,
|
|
2590
2645
|
FamilyFriendly: FamilyFriendly,
|
|
@@ -2622,6 +2677,7 @@ var IconLibrary = {
|
|
|
2622
2677
|
Reminder: Reminder,
|
|
2623
2678
|
Remove: Remove,
|
|
2624
2679
|
Remove12px: Remove12px,
|
|
2680
|
+
Remove16px: Remove16px,
|
|
2625
2681
|
Restart: Restart,
|
|
2626
2682
|
Search: Search,
|
|
2627
2683
|
Seat: Seat,
|
|
@@ -2692,6 +2748,7 @@ var Tab = function Tab(_ref) {
|
|
|
2692
2748
|
className = _ref.className,
|
|
2693
2749
|
role = _ref.role,
|
|
2694
2750
|
ariaLabel = _ref.ariaLabel,
|
|
2751
|
+
tabLinkId = _ref.tabLinkId,
|
|
2695
2752
|
color = _ref.color,
|
|
2696
2753
|
dataTestId = _ref.dataTestId,
|
|
2697
2754
|
isOpen = _ref.isOpen;
|
|
@@ -2726,8 +2783,9 @@ var Tab = function Tab(_ref) {
|
|
|
2726
2783
|
className: className,
|
|
2727
2784
|
"data-testid": dataTestId
|
|
2728
2785
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
2729
|
-
|
|
2786
|
+
id: tabLinkId,
|
|
2730
2787
|
trimText: trimText,
|
|
2788
|
+
color: color,
|
|
2731
2789
|
withTextInMobile: withTextInMobile,
|
|
2732
2790
|
"aria-hidden": "true"
|
|
2733
2791
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -2757,6 +2815,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2757
2815
|
className = _ref.className,
|
|
2758
2816
|
role = _ref.role,
|
|
2759
2817
|
ariaLabel = _ref.ariaLabel,
|
|
2818
|
+
tabLinkId = _ref.tabLinkId,
|
|
2760
2819
|
trimTabText = _ref.trimTabText;
|
|
2761
2820
|
var node = React.useRef();
|
|
2762
2821
|
var _useState = React.useState(false),
|
|
@@ -2853,6 +2912,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2853
2912
|
};
|
|
2854
2913
|
var renderTab = function renderTab() {
|
|
2855
2914
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
2915
|
+
tabLinkId: tabLinkId,
|
|
2856
2916
|
trimText: trimTabText,
|
|
2857
2917
|
title: title,
|
|
2858
2918
|
titleLink: titleLink,
|
|
@@ -2932,7 +2992,8 @@ var Account = function Account(_ref) {
|
|
|
2932
2992
|
iconName: iconName,
|
|
2933
2993
|
withOptionsInMobile: false,
|
|
2934
2994
|
withIcon: "left",
|
|
2935
|
-
className: className
|
|
2995
|
+
className: className,
|
|
2996
|
+
tabLinkId: "account-link"
|
|
2936
2997
|
});
|
|
2937
2998
|
};
|
|
2938
2999
|
|
|
@@ -5493,22 +5554,28 @@ var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject12 || (_te
|
|
|
5493
5554
|
var NavTopContainerMobile = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n width: fit-content;\n align-items: center;\n height: 10%;\n margin-left: 20px;\n padding-bottom: 36px;\n }\n"])), devices.mobileAndTablet);
|
|
5494
5555
|
|
|
5495
5556
|
var _templateObject$B, _templateObject2$q, _templateObject3$f, _templateObject4$e, _templateObject5$a, _templateObject6$6, _templateObject7$4;
|
|
5496
|
-
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n border-top:
|
|
5497
|
-
var
|
|
5498
|
-
return
|
|
5557
|
+
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n border-top: ", ";\n border-bottom: ", ";\n"])), function (_ref) {
|
|
5558
|
+
var showTopLine = _ref.showTopLine;
|
|
5559
|
+
return showTopLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5560
|
+
}, function (_ref2) {
|
|
5561
|
+
var showBottomLine = _ref2.showBottomLine;
|
|
5562
|
+
return showBottomLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5499
5563
|
});
|
|
5500
|
-
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n opacity: ", ";\n transition: opacity 0.2s ease;\n pointer-events: ", ";\n\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (
|
|
5501
|
-
var isVisible = _ref2.isVisible;
|
|
5502
|
-
return isVisible ? 1 : 0;
|
|
5503
|
-
}, function (_ref3) {
|
|
5564
|
+
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n opacity: ", ";\n transition: opacity 0.2s ease;\n pointer-events: ", ";\n\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref3) {
|
|
5504
5565
|
var isVisible = _ref3.isVisible;
|
|
5566
|
+
return isVisible ? 1 : 0;
|
|
5567
|
+
}, function (_ref4) {
|
|
5568
|
+
var isVisible = _ref4.isVisible;
|
|
5505
5569
|
return isVisible ? 'auto' : 'none';
|
|
5506
5570
|
}, devices.mobile);
|
|
5507
|
-
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-top: 28px;\n padding-bottom: 28px;\n color: var(--color-primary-black);\n\n && svg {\n width: 24px;\n height: 24px;\n }\n\n :hover {\n cursor: ", ";\n pointer-events: ", ";\n }\n\n @media ", " {\n padding-top: 16px;\n padding-bottom: 16px;\n }\n"])), function (
|
|
5508
|
-
var
|
|
5571
|
+
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-top: 28px;\n padding-bottom: 28px;\n color: var(--color-primary-black);\n margin: ", ";\n\n && svg {\n width: 24px;\n height: 24px;\n }\n\n :hover {\n cursor: ", ";\n pointer-events: ", ";\n }\n\n @media ", " {\n padding-top: 16px;\n padding-bottom: 16px;\n margin: 0;\n }\n"])), function (_ref5) {
|
|
5572
|
+
var titleMargin = _ref5.titleMargin;
|
|
5573
|
+
return titleMargin || '0';
|
|
5574
|
+
}, function (_ref6) {
|
|
5575
|
+
var hasChildren = _ref6.hasChildren;
|
|
5509
5576
|
return hasChildren ? 'pointer' : 'default';
|
|
5510
|
-
}, function (
|
|
5511
|
-
var hasChildren =
|
|
5577
|
+
}, function (_ref7) {
|
|
5578
|
+
var hasChildren = _ref7.hasChildren;
|
|
5512
5579
|
return hasChildren ? 'auto' : 'none';
|
|
5513
5580
|
}, devices.mobile);
|
|
5514
5581
|
var TitleText = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: calc(100% - 32px);\n"])));
|
|
@@ -5517,14 +5584,14 @@ var ContentContainer = /*#__PURE__*/styled__default(ExtendedBodyCopyHarmonic).wi
|
|
|
5517
5584
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5518
5585
|
return prop !== 'textHeight';
|
|
5519
5586
|
}
|
|
5520
|
-
})(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n overflow: ", ";\n margin-bottom: ", ";\n\n @media print {\n max-height: max-content;\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\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (
|
|
5521
|
-
var textHeight =
|
|
5587
|
+
})(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n overflow: ", ";\n margin-bottom: ", ";\n\n @media print {\n max-height: max-content;\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\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref8) {
|
|
5588
|
+
var textHeight = _ref8.textHeight;
|
|
5522
5589
|
return textHeight;
|
|
5523
|
-
}, function (
|
|
5524
|
-
var textHeight =
|
|
5590
|
+
}, function (_ref9) {
|
|
5591
|
+
var textHeight = _ref9.textHeight;
|
|
5525
5592
|
return textHeight === '0px' ? 'hidden' : 'visible';
|
|
5526
|
-
}, function (
|
|
5527
|
-
var textHeight =
|
|
5593
|
+
}, function (_ref0) {
|
|
5594
|
+
var textHeight = _ref0.textHeight;
|
|
5528
5595
|
return textHeight === '0px' ? '0px' : '12px';
|
|
5529
5596
|
}, devices.mobile);
|
|
5530
5597
|
var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
@@ -5546,14 +5613,19 @@ var Accordion = function Accordion(_ref) {
|
|
|
5546
5613
|
var _expandedStateIcon$ic, _collapsedStateIcon$i;
|
|
5547
5614
|
var _ref$title = _ref.title,
|
|
5548
5615
|
title = _ref$title === void 0 ? '' : _ref$title,
|
|
5549
|
-
_ref$
|
|
5550
|
-
|
|
5616
|
+
_ref$showTopLine = _ref.showTopLine,
|
|
5617
|
+
showTopLine = _ref$showTopLine === void 0 ? true : _ref$showTopLine,
|
|
5618
|
+
_ref$showBottomLine = _ref.showBottomLine,
|
|
5619
|
+
showBottomLine = _ref$showBottomLine === void 0 ? true : _ref$showBottomLine,
|
|
5551
5620
|
children = _ref.children,
|
|
5621
|
+
visibleStandfirst = _ref.visibleStandfirst,
|
|
5552
5622
|
_ref$initOpen = _ref.initOpen,
|
|
5553
5623
|
initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
|
|
5554
5624
|
className = _ref.className,
|
|
5555
5625
|
expandedStateIcon = _ref.expandedStateIcon,
|
|
5556
|
-
collapsedStateIcon = _ref.collapsedStateIcon
|
|
5626
|
+
collapsedStateIcon = _ref.collapsedStateIcon,
|
|
5627
|
+
childrenContainerStyle = _ref.childrenContainerStyle,
|
|
5628
|
+
titleMargin = _ref.titleMargin;
|
|
5557
5629
|
var _useState = React.useState(initOpen),
|
|
5558
5630
|
openAccordion = _useState[0],
|
|
5559
5631
|
setOpenAccordion = _useState[1];
|
|
@@ -5664,6 +5736,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
5664
5736
|
var toggleAccordion = function toggleAccordion() {
|
|
5665
5737
|
if (React__default.Children.count(children) === 0) return;
|
|
5666
5738
|
if (openAccordion) {
|
|
5739
|
+
setIcon(collapsedStateIconData);
|
|
5667
5740
|
setOpenAccordion(false);
|
|
5668
5741
|
setTextHeight('0px');
|
|
5669
5742
|
setIcon(collapsedStateIconData);
|
|
@@ -5686,9 +5759,16 @@ var Accordion = function Accordion(_ref) {
|
|
|
5686
5759
|
toggleAccordion();
|
|
5687
5760
|
}
|
|
5688
5761
|
};
|
|
5762
|
+
var Standfirst = function Standfirst() {
|
|
5763
|
+
return visibleStandfirst ? (/*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
5764
|
+
style: childrenContainerStyle,
|
|
5765
|
+
isVisible: true
|
|
5766
|
+
}, visibleStandfirst))) : null;
|
|
5767
|
+
};
|
|
5689
5768
|
var contentContainerId = title + "-accordion-content";
|
|
5690
5769
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, {
|
|
5691
|
-
|
|
5770
|
+
showTopLine: showTopLine,
|
|
5771
|
+
showBottomLine: showBottomLine,
|
|
5692
5772
|
className: className
|
|
5693
5773
|
}, /*#__PURE__*/React__default.createElement(TitleContainer$1, {
|
|
5694
5774
|
onClick: toggleAccordion,
|
|
@@ -5698,8 +5778,9 @@ var Accordion = function Accordion(_ref) {
|
|
|
5698
5778
|
"aria-label": title,
|
|
5699
5779
|
"aria-expanded": openAccordion,
|
|
5700
5780
|
"aria-controls": contentContainerId,
|
|
5701
|
-
hasChildren: !!children
|
|
5702
|
-
|
|
5781
|
+
hasChildren: !!children,
|
|
5782
|
+
titleMargin: titleMargin
|
|
5783
|
+
}, /*#__PURE__*/React__default.createElement(TitleText, null, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, Object.assign({}, icon))))), visibleStandfirst && /*#__PURE__*/React__default.createElement(Standfirst, null), /*#__PURE__*/React__default.createElement(ContentContainer, {
|
|
5703
5784
|
"data-testid": "richcontainer",
|
|
5704
5785
|
ref: content,
|
|
5705
5786
|
textHeight: textHeight,
|
|
@@ -5707,9 +5788,10 @@ var Accordion = function Accordion(_ref) {
|
|
|
5707
5788
|
"aria-live": openAccordion ? 'polite' : 'off',
|
|
5708
5789
|
tag: "div",
|
|
5709
5790
|
size: "large"
|
|
5710
|
-
}, childrenVisibility && /*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
5711
|
-
isVisible: childrenVisibility
|
|
5712
|
-
|
|
5791
|
+
}, childrenVisibility && (/*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
5792
|
+
isVisible: childrenVisibility,
|
|
5793
|
+
style: childrenContainerStyle
|
|
5794
|
+
}, children))));
|
|
5713
5795
|
};
|
|
5714
5796
|
|
|
5715
5797
|
var _templateObject$C;
|
|
@@ -5728,9 +5810,12 @@ var Accordions = function Accordions(_ref) {
|
|
|
5728
5810
|
return /*#__PURE__*/React__default.createElement(Accordion, {
|
|
5729
5811
|
key: accordion.title + "-" + index,
|
|
5730
5812
|
title: accordion.title,
|
|
5731
|
-
|
|
5813
|
+
showBottomLine: isLastAccordion(index),
|
|
5732
5814
|
expandedStateIcon: accordion.expandedStateIcon,
|
|
5733
|
-
collapsedStateIcon: accordion.collapsedStateIcon
|
|
5815
|
+
collapsedStateIcon: accordion.collapsedStateIcon,
|
|
5816
|
+
visibleStandfirst: accordion.visibleStandfirst,
|
|
5817
|
+
titleMargin: accordion.titleMargin,
|
|
5818
|
+
childrenContainerStyle: accordion.childrenContainerStyle
|
|
5734
5819
|
}, accordion.children);
|
|
5735
5820
|
}));
|
|
5736
5821
|
};
|
|
@@ -6016,14 +6101,9 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
6016
6101
|
_ref2$renderGridItem = _ref2.renderGridItem,
|
|
6017
6102
|
renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
|
|
6018
6103
|
var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
|
|
6019
|
-
var content = /*#__PURE__*/React__default.createElement(
|
|
6020
|
-
tag: "div",
|
|
6021
|
-
size: "large",
|
|
6022
|
-
"data-testid": "text-container",
|
|
6104
|
+
var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
|
|
6023
6105
|
className: textContainerClassName,
|
|
6024
|
-
|
|
6025
|
-
__html: addTypographyClasses(text)
|
|
6026
|
-
}
|
|
6106
|
+
html: text
|
|
6027
6107
|
});
|
|
6028
6108
|
var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
6029
6109
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -6057,7 +6137,7 @@ var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$G || (_temp
|
|
|
6057
6137
|
return isCardClickable ? 'pointer' : 'default';
|
|
6058
6138
|
}, function (_ref2) {
|
|
6059
6139
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
6060
|
-
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between
|
|
6140
|
+
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n " : '';
|
|
6061
6141
|
});
|
|
6062
6142
|
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n background-color: var(--button-bg-color);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
6063
6143
|
var lineColor = _ref3.lineColor;
|
|
@@ -6090,7 +6170,7 @@ var ExtraActionsContainer = /*#__PURE__*/styled__default.div(_templateObject1$1
|
|
|
6090
6170
|
var fullWidth = _ref9.fullWidth;
|
|
6091
6171
|
return fullWidth ? '0' : '20px';
|
|
6092
6172
|
});
|
|
6093
|
-
var LabelElements = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 26px;\n padding: 0 8px;\n background-color: ", ";\n"])), function (_ref0) {
|
|
6173
|
+
var LabelElements = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 26px;\n padding: 0 8px;\n background-color: ", ";\n && * {\n text-transform: var(--text-transform-body);\n }\n"])), function (_ref0) {
|
|
6094
6174
|
var bgColor = _ref0.bgColor;
|
|
6095
6175
|
return bgColor ? "var(--color-base-" + bgColor + ")" : 'var(--color-primary-background)';
|
|
6096
6176
|
});
|
|
@@ -6389,13 +6469,13 @@ var Cards = function Cards(_ref) {
|
|
|
6389
6469
|
};
|
|
6390
6470
|
|
|
6391
6471
|
var _templateObject$I, _templateObject2$v, _templateObject3$j, _templateObject4$i, _templateObject5$e, _templateObject6$9, _templateObject7$6, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
|
|
6392
|
-
var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n
|
|
6472
|
+
var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6393
6473
|
var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6394
6474
|
var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
|
|
6395
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["
|
|
6475
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
6396
6476
|
var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: hidden;\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 overflow-x: scroll;\n }\n"])), devices.mobile);
|
|
6397
|
-
var ActionButtons = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__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
|
|
6398
|
-
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__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
|
|
6477
|
+
var ActionButtons = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__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 :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);
|
|
6478
|
+
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__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 p {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
6399
6479
|
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) {
|
|
6400
6480
|
var isSelected = _ref.isSelected;
|
|
6401
6481
|
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
@@ -6407,7 +6487,7 @@ var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templ
|
|
|
6407
6487
|
var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
|
|
6408
6488
|
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6409
6489
|
});
|
|
6410
|
-
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
|
|
6490
|
+
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"])));
|
|
6411
6491
|
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 (_ref4) {
|
|
6412
6492
|
var isSelected = _ref4.isSelected;
|
|
6413
6493
|
return isSelected ? 'flex' : 'none';
|
|
@@ -6417,12 +6497,18 @@ var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObj
|
|
|
6417
6497
|
});
|
|
6418
6498
|
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);
|
|
6419
6499
|
|
|
6500
|
+
var _templateObject$J, _templateObject2$w, _templateObject3$k, _templateObject5$f;
|
|
6501
|
+
var CastFiltersComponentWrapper$1 = /*#__PURE__*/styled__default(CastFiltersComponentWrapper)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n flex-direction: column-reverse;\n }\n"])), devices.mobile);
|
|
6502
|
+
var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default(RotatorButtonsWrapper)(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6503
|
+
var PersonWrapper$1 = /*#__PURE__*/styled__default(PersonWrapper)(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n flex-direction: row;\n gap: 20px;\n margin-block-end: 2px;\n margin-inline-end: unset;\n }\n"])), devices.mobile);
|
|
6504
|
+
var ActionButtons$1 = /*#__PURE__*/styled__default(ActionButtons)(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\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"])), devices.mobile);
|
|
6505
|
+
|
|
6420
6506
|
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";
|
|
6421
6507
|
|
|
6422
|
-
var _templateObject$
|
|
6508
|
+
var _templateObject$K, _templateObject2$x;
|
|
6423
6509
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
6424
|
-
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6425
|
-
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6510
|
+
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"])));
|
|
6511
|
+
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
6426
6512
|
var transitioning = _ref.transitioning;
|
|
6427
6513
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
6428
6514
|
}, function (_ref2) {
|
|
@@ -6995,6 +7081,269 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6995
7081
|
}
|
|
6996
7082
|
}, [onClear]);
|
|
6997
7083
|
var showActionButtonsSection = onApply || onClear || emptySelectionText;
|
|
7084
|
+
var getPersonCards = function getPersonCards() {
|
|
7085
|
+
return cast.map(function (person, index) {
|
|
7086
|
+
var name = person.name,
|
|
7087
|
+
image = person.image,
|
|
7088
|
+
_onClick = person.onClick,
|
|
7089
|
+
ariaLabel = person['aria-label'];
|
|
7090
|
+
var personSelectionId = getCastItemSelectionId(person);
|
|
7091
|
+
var isSelected = isIdSelectionMode ? selectedIdsSet.has(personSelectionId) : selectedIndices.includes(index);
|
|
7092
|
+
var personImage = image || placeholderImage || defaultPlaceholderImage;
|
|
7093
|
+
return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
7094
|
+
key: personSelectionId,
|
|
7095
|
+
"aria-selected": isSelected,
|
|
7096
|
+
"aria-label": ariaLabel != null ? ariaLabel : name,
|
|
7097
|
+
role: "option",
|
|
7098
|
+
tabIndex: 0,
|
|
7099
|
+
onClick: function onClick() {
|
|
7100
|
+
return handleClick(index, personSelectionId, _onClick);
|
|
7101
|
+
},
|
|
7102
|
+
onKeyDown: function onKeyDown(e) {
|
|
7103
|
+
return handlePersonKeydown(e, index, personSelectionId, _onClick);
|
|
7104
|
+
}
|
|
7105
|
+
}, /*#__PURE__*/React__default.createElement(PersonToggle, {
|
|
7106
|
+
isSelected: isSelected,
|
|
7107
|
+
"aria-hidden": "true"
|
|
7108
|
+
}, /*#__PURE__*/React__default.createElement(PersonImage, {
|
|
7109
|
+
src: personImage,
|
|
7110
|
+
alt: "",
|
|
7111
|
+
draggable: false,
|
|
7112
|
+
isDefaultPlaceholder: !(!!image || !!placeholderImage),
|
|
7113
|
+
greyscale: greyscale
|
|
7114
|
+
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7115
|
+
isSelected: isSelected
|
|
7116
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7117
|
+
iconName: "Confirm",
|
|
7118
|
+
color: "white"
|
|
7119
|
+
}))), /*#__PURE__*/React__default.createElement(PersonName, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7120
|
+
size: "medium"
|
|
7121
|
+
}, name)));
|
|
7122
|
+
});
|
|
7123
|
+
};
|
|
7124
|
+
return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper$1, {
|
|
7125
|
+
className: className
|
|
7126
|
+
}, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, headingText && (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
7127
|
+
columnStartDesktop: 1,
|
|
7128
|
+
columnSpanDesktop: 10,
|
|
7129
|
+
columnStartDevice: 1,
|
|
7130
|
+
columnSpanDevice: 9
|
|
7131
|
+
}, /*#__PURE__*/React__default.createElement(HeadingTextWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7132
|
+
size: "large"
|
|
7133
|
+
}, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
|
|
7134
|
+
columnStartDesktop: 16,
|
|
7135
|
+
columnSpanDesktop: 2
|
|
7136
|
+
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
7137
|
+
size: "small",
|
|
7138
|
+
onClickNext: onNext,
|
|
7139
|
+
onClickPrev: onPrev,
|
|
7140
|
+
availablePrev: availablePrev,
|
|
7141
|
+
availableNext: availableNext
|
|
7142
|
+
})))), /*#__PURE__*/React__default.createElement(CastWrapper, {
|
|
7143
|
+
ref: castWrapperRef,
|
|
7144
|
+
role: "listbox",
|
|
7145
|
+
"aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
|
|
7146
|
+
"aria-label": "filter list",
|
|
7147
|
+
"aria-multiselectable": "true",
|
|
7148
|
+
onMouseDown: handleMouseDown,
|
|
7149
|
+
onMouseMove: handleMouseMove,
|
|
7150
|
+
onMouseUp: handleMouseUp,
|
|
7151
|
+
onMouseLeave: handleMouseLeave
|
|
7152
|
+
}, isMobile ? getPersonCards() : (/*#__PURE__*/React__default.createElement(Swipe, {
|
|
7153
|
+
onIndexChange: onIndexChangeHandler,
|
|
7154
|
+
"data-testid": "cast-filter-swipe",
|
|
7155
|
+
ref: swipeRef,
|
|
7156
|
+
onOverflowChange: handleOverflowChange,
|
|
7157
|
+
limitDragToNavigableRange: true
|
|
7158
|
+
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons$1, null, selectedStateIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7159
|
+
size: "medium",
|
|
7160
|
+
className: "mobile-only"
|
|
7161
|
+
}, emptySelectionText)), selectedStateIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedStateIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (onApply || onApplyIds) && (/*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
7162
|
+
onClick: function onClick() {
|
|
7163
|
+
if (onApply) onApply(selectedStateIndices);
|
|
7164
|
+
if (onApplyIds) onApplyIds(selectedStateIds);
|
|
7165
|
+
}
|
|
7166
|
+
}, ctaText != null ? ctaText : 'Apply')), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
|
|
7167
|
+
tabIndex: 0,
|
|
7168
|
+
role: "button",
|
|
7169
|
+
onClick: onClear,
|
|
7170
|
+
onKeyDown: handleClearKeydown
|
|
7171
|
+
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7172
|
+
};
|
|
7173
|
+
|
|
7174
|
+
var CastFiltersVariant = function CastFiltersVariant(_ref) {
|
|
7175
|
+
var cast = _ref.cast,
|
|
7176
|
+
headingText = _ref.headingText,
|
|
7177
|
+
ctaText = _ref.ctaText,
|
|
7178
|
+
textLinkText = _ref.textLinkText,
|
|
7179
|
+
emptySelectionText = _ref.emptySelectionText,
|
|
7180
|
+
placeholderImage = _ref.placeholderImage,
|
|
7181
|
+
listRoleDescription = _ref.listRoleDescription,
|
|
7182
|
+
className = _ref.className,
|
|
7183
|
+
onSelect = _ref.onSelect,
|
|
7184
|
+
onSelectId = _ref.onSelectId,
|
|
7185
|
+
onApply = _ref.onApply,
|
|
7186
|
+
onApplyIds = _ref.onApplyIds,
|
|
7187
|
+
onClear = _ref.onClear,
|
|
7188
|
+
_ref$greyscale = _ref.greyscale,
|
|
7189
|
+
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
7190
|
+
_ref$selectedIndices = _ref.selectedIndices,
|
|
7191
|
+
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices,
|
|
7192
|
+
selectedIds = _ref.selectedIds;
|
|
7193
|
+
var _useViewport = useViewport(),
|
|
7194
|
+
isMobile = _useViewport.isMobile;
|
|
7195
|
+
var castWrapperRef = React.useRef(null);
|
|
7196
|
+
var isDraggingRef = React.useRef(false);
|
|
7197
|
+
var startXRef = React.useRef(0);
|
|
7198
|
+
var scrollStartRef = React.useRef(0);
|
|
7199
|
+
var hasDraggedRef = React.useRef(false);
|
|
7200
|
+
var swipeRef = React.useRef(null);
|
|
7201
|
+
var _useState = React.useState(false),
|
|
7202
|
+
availablePrev = _useState[0],
|
|
7203
|
+
setAvailablePrev = _useState[1];
|
|
7204
|
+
var _useState2 = React.useState(cast.length > 1),
|
|
7205
|
+
availableNext = _useState2[0],
|
|
7206
|
+
setAvailableNext = _useState2[1];
|
|
7207
|
+
var _useState3 = React.useState(true),
|
|
7208
|
+
showRotatorButtons = _useState3[0],
|
|
7209
|
+
setShowRotatorButtons = _useState3[1];
|
|
7210
|
+
var onIndexChangeHandler = function onIndexChangeHandler(index) {
|
|
7211
|
+
setAvailablePrev(index > 0);
|
|
7212
|
+
setAvailableNext(function () {
|
|
7213
|
+
var _swipeRef$current$has, _swipeRef$current;
|
|
7214
|
+
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);
|
|
7215
|
+
});
|
|
7216
|
+
};
|
|
7217
|
+
React.useEffect(function () {
|
|
7218
|
+
setAvailablePrev(false);
|
|
7219
|
+
setAvailableNext(function () {
|
|
7220
|
+
var _swipeRef$current$has2, _swipeRef$current2;
|
|
7221
|
+
return (_swipeRef$current$has2 = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext()) != null ? _swipeRef$current$has2 : cast.length > 1;
|
|
7222
|
+
});
|
|
7223
|
+
}, [cast.length]);
|
|
7224
|
+
var handleOverflowChange = function handleOverflowChange(overflow) {
|
|
7225
|
+
var _swipeRef$current3;
|
|
7226
|
+
setShowRotatorButtons(overflow);
|
|
7227
|
+
var hasNext = (_swipeRef$current3 = swipeRef.current) == null ? void 0 : _swipeRef$current3.hasNext();
|
|
7228
|
+
if (typeof hasNext === 'boolean') {
|
|
7229
|
+
setAvailableNext(hasNext);
|
|
7230
|
+
} else {
|
|
7231
|
+
setAvailableNext(overflow);
|
|
7232
|
+
}
|
|
7233
|
+
};
|
|
7234
|
+
var onNext = function onNext() {
|
|
7235
|
+
var _swipeRef$current4;
|
|
7236
|
+
if (!availableNext) return;
|
|
7237
|
+
(_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.nextSlide();
|
|
7238
|
+
};
|
|
7239
|
+
var onPrev = function onPrev() {
|
|
7240
|
+
var _swipeRef$current5;
|
|
7241
|
+
if (!availablePrev) return;
|
|
7242
|
+
(_swipeRef$current5 = swipeRef.current) == null || _swipeRef$current5.prevSlide();
|
|
7243
|
+
};
|
|
7244
|
+
React.useEffect(function () {
|
|
7245
|
+
var el = castWrapperRef.current;
|
|
7246
|
+
if (!el) return undefined;
|
|
7247
|
+
var handleKeydown = function handleKeydown(e) {
|
|
7248
|
+
if (!el.contains(document.activeElement)) return;
|
|
7249
|
+
if (e.key === 'ArrowRight') {
|
|
7250
|
+
var _swipeRef$current6;
|
|
7251
|
+
e.preventDefault();
|
|
7252
|
+
(_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.nextSlide();
|
|
7253
|
+
} else if (e.key === 'ArrowLeft') {
|
|
7254
|
+
var _swipeRef$current7;
|
|
7255
|
+
e.preventDefault();
|
|
7256
|
+
(_swipeRef$current7 = swipeRef.current) == null || _swipeRef$current7.prevSlide();
|
|
7257
|
+
}
|
|
7258
|
+
};
|
|
7259
|
+
el.addEventListener('keydown', handleKeydown);
|
|
7260
|
+
return function () {
|
|
7261
|
+
return el.removeEventListener('keydown', handleKeydown);
|
|
7262
|
+
};
|
|
7263
|
+
}, []);
|
|
7264
|
+
var handleMouseDown = React.useCallback(function (e) {
|
|
7265
|
+
if (!isMobile || !castWrapperRef.current) return;
|
|
7266
|
+
isDraggingRef.current = true;
|
|
7267
|
+
hasDraggedRef.current = false;
|
|
7268
|
+
startXRef.current = e.clientX;
|
|
7269
|
+
scrollStartRef.current = castWrapperRef.current.scrollLeft;
|
|
7270
|
+
if (e.target === castWrapperRef.current) e.preventDefault();
|
|
7271
|
+
}, [isMobile]);
|
|
7272
|
+
var handleMouseMove = React.useCallback(function (e) {
|
|
7273
|
+
if (!isMobile || !isDraggingRef.current || !castWrapperRef.current) return;
|
|
7274
|
+
var deltaX = e.clientX - startXRef.current;
|
|
7275
|
+
var threshold = 5;
|
|
7276
|
+
if (Math.abs(deltaX) > threshold) {
|
|
7277
|
+
hasDraggedRef.current = true;
|
|
7278
|
+
e.preventDefault();
|
|
7279
|
+
castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
|
|
7280
|
+
}
|
|
7281
|
+
}, [isMobile]);
|
|
7282
|
+
var handleMouseUp = React.useCallback(function () {
|
|
7283
|
+
if (!isMobile) return;
|
|
7284
|
+
isDraggingRef.current = false;
|
|
7285
|
+
setTimeout(function () {
|
|
7286
|
+
hasDraggedRef.current = false;
|
|
7287
|
+
}, 0);
|
|
7288
|
+
}, [isMobile]);
|
|
7289
|
+
var handleMouseLeave = React.useCallback(function () {
|
|
7290
|
+
if (!isMobile) return;
|
|
7291
|
+
isDraggingRef.current = false;
|
|
7292
|
+
hasDraggedRef.current = false;
|
|
7293
|
+
}, [isMobile]);
|
|
7294
|
+
var getCastItemSelectionId = React.useCallback(function (person) {
|
|
7295
|
+
if (person.id !== undefined && person.id !== null) return String(person.id);
|
|
7296
|
+
if (person.slug !== undefined && person.slug !== null) return String(person.slug);
|
|
7297
|
+
return person.name;
|
|
7298
|
+
}, []);
|
|
7299
|
+
var isIdSelectionMode = selectedIds !== undefined;
|
|
7300
|
+
var selectedIdsSet = React.useMemo(function () {
|
|
7301
|
+
var ids = selectedIds != null ? selectedIds : [];
|
|
7302
|
+
return new Set(ids.map(function (id) {
|
|
7303
|
+
return String(id);
|
|
7304
|
+
}));
|
|
7305
|
+
}, [selectedIds]);
|
|
7306
|
+
var selectedStateIndices = React.useMemo(function () {
|
|
7307
|
+
if (!isIdSelectionMode) return selectedIndices;
|
|
7308
|
+
return cast.flatMap(function (person, index) {
|
|
7309
|
+
var itemId = getCastItemSelectionId(person);
|
|
7310
|
+
return selectedIdsSet.has(itemId) ? [index] : [];
|
|
7311
|
+
});
|
|
7312
|
+
}, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
|
|
7313
|
+
var selectedStateIds = React.useMemo(function () {
|
|
7314
|
+
if (isIdSelectionMode) {
|
|
7315
|
+
return cast.filter(function (person) {
|
|
7316
|
+
return selectedIdsSet.has(getCastItemSelectionId(person));
|
|
7317
|
+
}).map(function (person) {
|
|
7318
|
+
return getCastItemSelectionId(person);
|
|
7319
|
+
});
|
|
7320
|
+
}
|
|
7321
|
+
return selectedIndices.map(function (index) {
|
|
7322
|
+
return cast[index];
|
|
7323
|
+
}).filter(function (person) {
|
|
7324
|
+
return person !== undefined;
|
|
7325
|
+
}).map(function (person) {
|
|
7326
|
+
return getCastItemSelectionId(person);
|
|
7327
|
+
});
|
|
7328
|
+
}, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
|
|
7329
|
+
var handleClick = React__default.useCallback(function (index, itemId, onClick) {
|
|
7330
|
+
if (hasDraggedRef.current) return;
|
|
7331
|
+
if (onSelectId) onSelectId(itemId);
|
|
7332
|
+
if (onSelect) onSelect(index);
|
|
7333
|
+
if (onClick) onClick();
|
|
7334
|
+
}, [onSelect, onSelectId]);
|
|
7335
|
+
var handlePersonKeydown = React__default.useCallback(function (e, index, itemId, onClick) {
|
|
7336
|
+
if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
|
|
7337
|
+
e.preventDefault();
|
|
7338
|
+
handleClick(index, itemId, onClick);
|
|
7339
|
+
}
|
|
7340
|
+
}, [handleClick]);
|
|
7341
|
+
var handleClearKeydown = React__default.useCallback(function (e) {
|
|
7342
|
+
if (e.key === 'Enter' && onClear) {
|
|
7343
|
+
onClear();
|
|
7344
|
+
}
|
|
7345
|
+
}, [onClear]);
|
|
7346
|
+
var showActionButtonsSection = onApply || onClear || emptySelectionText;
|
|
6998
7347
|
var getPersonCards = function getPersonCards() {
|
|
6999
7348
|
return cast.map(function (person, index) {
|
|
7000
7349
|
var name = person.name,
|
|
@@ -7065,13 +7414,13 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7065
7414
|
onMouseMove: handleMouseMove,
|
|
7066
7415
|
onMouseUp: handleMouseUp,
|
|
7067
7416
|
onMouseLeave: handleMouseLeave
|
|
7068
|
-
},
|
|
7417
|
+
}, /*#__PURE__*/React__default.createElement(Swipe, {
|
|
7069
7418
|
onIndexChange: onIndexChangeHandler,
|
|
7070
7419
|
"data-testid": "cast-filter-swipe",
|
|
7071
7420
|
ref: swipeRef,
|
|
7072
7421
|
onOverflowChange: handleOverflowChange,
|
|
7073
7422
|
limitDragToNavigableRange: true
|
|
7074
|
-
}, getPersonCards())))
|
|
7423
|
+
}, getPersonCards()))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedStateIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7075
7424
|
size: "medium",
|
|
7076
7425
|
className: "mobile-only"
|
|
7077
7426
|
}, emptySelectionText)), selectedStateIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedStateIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (onApply || onApplyIds) && (/*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
@@ -7087,12 +7436,12 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7087
7436
|
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7088
7437
|
};
|
|
7089
7438
|
|
|
7090
|
-
var _templateObject$
|
|
7091
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7092
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7093
|
-
var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7439
|
+
var _templateObject$L, _templateObject2$y, _templateObject3$l, _templateObject4$j, _templateObject5$g, _templateObject6$a, _templateObject7$7;
|
|
7440
|
+
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7441
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__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);
|
|
7442
|
+
var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7094
7443
|
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7095
|
-
var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7444
|
+
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);
|
|
7096
7445
|
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);
|
|
7097
7446
|
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);
|
|
7098
7447
|
|
|
@@ -7145,12 +7494,12 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7145
7494
|
}, addressString)))))))));
|
|
7146
7495
|
};
|
|
7147
7496
|
|
|
7148
|
-
var _templateObject$
|
|
7149
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7150
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7151
|
-
var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7497
|
+
var _templateObject$M, _templateObject2$z, _templateObject3$m, _templateObject4$k, _templateObject5$h, _templateObject6$b, _templateObject7$8, _templateObject8$5;
|
|
7498
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n grid-template-rows: 100px;\n gap: 0;\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content min-content;\n gap: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
7499
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
|
|
7500
|
+
var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
7152
7501
|
var SignUpText = /*#__PURE__*/styled__default.p(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
7153
|
-
var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7502
|
+
var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
7154
7503
|
var MediaLinksWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
7155
7504
|
var MediaIconWrapper$1 = /*#__PURE__*/styled__default.a(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
|
|
7156
7505
|
var TextLinkWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &&& {\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n }\n"])));
|
|
@@ -7178,16 +7527,16 @@ var ContactNewsletter = function ContactNewsletter(_ref) {
|
|
|
7178
7527
|
}, contact.title))));
|
|
7179
7528
|
};
|
|
7180
7529
|
|
|
7181
|
-
var _templateObject$
|
|
7182
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
7183
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$
|
|
7530
|
+
var _templateObject$N, _templateObject2$A, _templateObject3$n, _templateObject4$l, _templateObject5$i, _templateObject6$c;
|
|
7531
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7532
|
+
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) {
|
|
7184
7533
|
return props.clickable ? 'pointer' : 'default';
|
|
7185
7534
|
}, devices.mobile);
|
|
7186
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7535
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7187
7536
|
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) {
|
|
7188
7537
|
return props.showImage ? 2 : '1 / span 4';
|
|
7189
7538
|
}, devices.mobile);
|
|
7190
|
-
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7539
|
+
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7191
7540
|
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) {
|
|
7192
7541
|
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 ";
|
|
7193
7542
|
});
|
|
@@ -7270,21 +7619,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7270
7619
|
}), link.text))));
|
|
7271
7620
|
};
|
|
7272
7621
|
|
|
7273
|
-
var _templateObject$
|
|
7274
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7622
|
+
var _templateObject$O, _templateObject2$B, _templateObject3$o, _templateObject4$m, _templateObject5$j;
|
|
7623
|
+
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__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) {
|
|
7275
7624
|
var imageToLeft = _ref.imageToLeft;
|
|
7276
7625
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7277
7626
|
}, devices.mobile);
|
|
7278
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7627
|
+
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) {
|
|
7279
7628
|
var imageToLeft = _ref2.imageToLeft;
|
|
7280
7629
|
return imageToLeft ? 'left' : 'right';
|
|
7281
7630
|
}, devices.mobile);
|
|
7282
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7631
|
+
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) {
|
|
7283
7632
|
var imageToLeft = _ref3.imageToLeft;
|
|
7284
7633
|
return imageToLeft ? 'right' : 'left';
|
|
7285
7634
|
}, devices.mobile);
|
|
7286
7635
|
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"])));
|
|
7287
|
-
var EditorialText = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject5$
|
|
7636
|
+
var EditorialText = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject5$j || (_templateObject5$j = /*#__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"])));
|
|
7288
7637
|
|
|
7289
7638
|
var Editorial = function Editorial(_ref) {
|
|
7290
7639
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7323,10 +7672,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7323
7672
|
})))));
|
|
7324
7673
|
};
|
|
7325
7674
|
|
|
7326
|
-
var _templateObject$
|
|
7327
|
-
var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7328
|
-
var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7329
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$
|
|
7675
|
+
var _templateObject$P, _templateObject2$C, _templateObject3$p;
|
|
7676
|
+
var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__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"])));
|
|
7677
|
+
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);
|
|
7678
|
+
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 @media (hover: hover) and (pointer: fine) {\n :hover {\n color: var(--color-base-white);\n }\n }\n"])));
|
|
7330
7679
|
|
|
7331
7680
|
var _excluded$i = ["text", "onClick"];
|
|
7332
7681
|
var HotFilters = function HotFilters(_ref) {
|
|
@@ -7361,22 +7710,86 @@ var HotFilters = function HotFilters(_ref) {
|
|
|
7361
7710
|
})));
|
|
7362
7711
|
};
|
|
7363
7712
|
|
|
7364
|
-
var _templateObject$
|
|
7365
|
-
var ScrollContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7366
|
-
var TabsContainerWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7367
|
-
var StyledTab = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$
|
|
7713
|
+
var _templateObject$Q, _templateObject2$D, _templateObject3$q;
|
|
7714
|
+
var ScrollContainer = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__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\n @media ", " {\n overflow-x: visible;\n }\n"])), devices.mobile);
|
|
7715
|
+
var TabsContainerWrapper = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__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 width: 100%;\n min-width: 0;\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: 10px;\n }\n"])), devices.mobile);
|
|
7716
|
+
var StyledTab = /*#__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 &:focus-visible {\n outline: 2px solid var(--color-base-black);\n outline-offset: 2px;\n }\n\n @media (hover: hover) and (pointer: fine) {\n &:hover {\n color: var(--color-base-white);\n }\n }\n\n @media ", " {\n width: auto !important;\n min-width: fit-content;\n flex: 0 0 auto;\n }\n"])), devices.mobile);
|
|
7368
7717
|
|
|
7369
7718
|
var _excluded$j = ["text", "id", "isSelected", "allowedSelectedWith"];
|
|
7370
7719
|
/**
|
|
7371
7720
|
* A controlled filter button group that supports single- and multi-select strategies.
|
|
7372
7721
|
* The consumer owns the selection state and receives the complete clicked item.
|
|
7722
|
+
* A horizontally scrollable tabs filter component used to display
|
|
7723
|
+
* selectable strategy tabs with configurable styling and selection behavior.
|
|
7724
|
+
*
|
|
7725
|
+
* Features:
|
|
7726
|
+
* - Supports both single-select and multi-select tab scenarios
|
|
7727
|
+
* - Displays an optional icon on selected tabs
|
|
7728
|
+
* - Allows customization of colors and selected icon through `customViewConfig`
|
|
7729
|
+
* - Applies default styling when configuration values are omitted
|
|
7730
|
+
* - Emits the clicked tab item through `onClick`
|
|
7731
|
+
*
|
|
7732
|
+
* @component
|
|
7733
|
+
*
|
|
7734
|
+
* @param {TCustomStrategyTabsFilterProps['items']} items
|
|
7735
|
+
* Collection of tabs to render.
|
|
7736
|
+
*
|
|
7737
|
+
* @param {string} [className]
|
|
7738
|
+
* Optional CSS class name applied to the root scroll container.
|
|
7739
|
+
*
|
|
7740
|
+
* @param {<T>(item: TCustomStrategyTabsFilterProps['items'][number]) => T} onClick
|
|
7741
|
+
* Called when a tab is clicked. Receives the full clicked item (including
|
|
7742
|
+
* `allowedSelectedWith`). The parent is responsible for computing the next
|
|
7743
|
+
* `items` array and passing it back down with updated `isSelected` values.
|
|
7744
|
+
* as long as no return statement `type` is bing inferred automatically as void
|
|
7745
|
+
*
|
|
7746
|
+
* @param [customViewConfig]
|
|
7747
|
+
* Optional visual configuration used to customize:
|
|
7748
|
+
* - selected tab icon
|
|
7749
|
+
* - selected/unselected background colors
|
|
7750
|
+
* - selected/unselected text colors
|
|
7751
|
+
* - hover color
|
|
7752
|
+
* - pressed color
|
|
7753
|
+
*
|
|
7754
|
+
* Any omitted configuration values will fall back to the component defaults.
|
|
7755
|
+
*
|
|
7756
|
+
* @returns { React.JSX.Element}
|
|
7757
|
+
*
|
|
7758
|
+
* @example
|
|
7759
|
+
* ```tsx
|
|
7760
|
+
* * @example Controlled selection with custom rules
|
|
7761
|
+
* * The component does not manage selection itself. The parent owns `items` (including
|
|
7762
|
+
* * `isSelected`) and updates that state in `onClick`. Use `allowedSelectedWith` on each
|
|
7763
|
+
* * item to describe which other tab IDs may stay selected when that tab is chosen.
|
|
7764
|
+
* *
|
|
7765
|
+
* * ```tsx
|
|
7766
|
+
* * const [items, setItems] = useState<TCustomStrategyTabsFilterItem[]>([
|
|
7767
|
+
* * { id: 'all', text: 'All events', isSelected: true, allowedSelectedWith: [] },
|
|
7768
|
+
* * { id: 'opera', text: 'Opera', isSelected: false, allowedSelectedWith: ['ballet'] },
|
|
7769
|
+
* * { id: 'ballet', text: 'Ballet', isSelected: false, allowedSelectedWith: ['opera'] },
|
|
7770
|
+
* * ]);
|
|
7771
|
+
* *
|
|
7772
|
+
* * const handleClick = (clickedItem: TCustomStrategyTabsFilterItem) => {
|
|
7773
|
+
* * setItems((current) =>
|
|
7774
|
+
* * current.map((item) => {
|
|
7775
|
+
* * if (item.id === clickedItem.id) {
|
|
7776
|
+
* * return { ...item, isSelected: !item.isSelected };
|
|
7777
|
+
* * }
|
|
7778
|
+
* *
|
|
7779
|
+
* * const mayStaySelected = clickedItem.allowedSelectedWith?.includes(item.id);
|
|
7780
|
+
* * return { ...item, isSelected: mayStaySelected ? !item.isSelected : false };
|
|
7781
|
+
* * })
|
|
7782
|
+
* * );
|
|
7783
|
+
* * };
|
|
7784
|
+
* *
|
|
7785
|
+
* * return <CustomStrategyTabsFilter items={items} onClick={handleClick} />;
|
|
7373
7786
|
*/
|
|
7374
7787
|
var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
|
|
7375
7788
|
var _customViewConfig$bac, _customViewConfig$bac2, _customViewConfig$tex, _customViewConfig$tex2;
|
|
7376
7789
|
var items = _ref.items,
|
|
7377
7790
|
className = _ref.className,
|
|
7378
|
-
ariaLabel = _ref.ariaLabel,
|
|
7379
7791
|
onClick = _ref.onClick,
|
|
7792
|
+
ariaLabel = _ref.ariaLabel,
|
|
7380
7793
|
customViewConfig = _ref.customViewConfig;
|
|
7381
7794
|
var handleClick = React__default.useCallback(function (item) {
|
|
7382
7795
|
onClick(item);
|
|
@@ -7456,10 +7869,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7456
7869
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7457
7870
|
};
|
|
7458
7871
|
|
|
7459
|
-
var _templateObject$
|
|
7460
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7461
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
7462
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
7872
|
+
var _templateObject$R, _templateObject2$E, _templateObject3$r, _templateObject4$n;
|
|
7873
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$R || (_templateObject$R = /*#__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);
|
|
7874
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7875
|
+
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) {
|
|
7463
7876
|
var variant = _ref.variant,
|
|
7464
7877
|
theme = _ref.theme;
|
|
7465
7878
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7682,19 +8095,19 @@ var Information = function Information(_ref) {
|
|
|
7682
8095
|
})))));
|
|
7683
8096
|
};
|
|
7684
8097
|
|
|
7685
|
-
var _templateObject$
|
|
7686
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
8098
|
+
var _templateObject$S, _templateObject2$F, _templateObject3$s, _templateObject4$o, _templateObject5$k, _templateObject6$d, _templateObject7$9, _templateObject8$6;
|
|
8099
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$S || (_templateObject$S = /*#__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) {
|
|
7687
8100
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7688
8101
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7689
8102
|
}, devices.mobile);
|
|
7690
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
8103
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\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 ", "\n }\n }\n"])), function (_ref2) {
|
|
7691
8104
|
var isMultipleRow = _ref2.isMultipleRow;
|
|
7692
8105
|
return isMultipleRow ? "\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 grid-template-rows: min-content;\n grid-template-areas:\n '. . title title title title title title title title title title button button button . .';\n ";
|
|
7693
8106
|
}, devices.mobile, devices.tablet, function (_ref3) {
|
|
7694
8107
|
var isMultipleRow = _ref3.isMultipleRow;
|
|
7695
8108
|
return isMultipleRow ? "\n grid-template-rows: min-content min-content;\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 grid-template-rows: min-content;\n grid-template-areas:\n '. . title title title title title title title title button button button button button .';\n ";
|
|
7696
8109
|
});
|
|
7697
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8110
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref4) {
|
|
7698
8111
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7699
8112
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7700
8113
|
});
|
|
@@ -7702,7 +8115,7 @@ var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$o || (_te
|
|
|
7702
8115
|
var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
|
|
7703
8116
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7704
8117
|
}, devices.mobile);
|
|
7705
|
-
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8118
|
+
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__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 (_ref6) {
|
|
7706
8119
|
var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
|
|
7707
8120
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7708
8121
|
}, devices.mobile);
|
|
@@ -7787,9 +8200,9 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7787
8200
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7788
8201
|
};
|
|
7789
8202
|
|
|
7790
|
-
var _templateObject$
|
|
7791
|
-
var ImpactHeaderWrapper = /*#__PURE__*/styled__default.header(_templateObject$
|
|
7792
|
-
var ImpactTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8203
|
+
var _templateObject$T, _templateObject2$G, _templateObject3$t, _templateObject4$p, _templateObject5$l, _templateObject6$e, _templateObject7$a, _templateObject8$7;
|
|
8204
|
+
var ImpactHeaderWrapper = /*#__PURE__*/styled__default.header(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-black);\n padding: 36px 0;\n\n @media ", " {\n padding: 21px 0;\n }\n"])), devices.mobile);
|
|
8205
|
+
var ImpactTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: grid;\n grid-template-columns: ", ";\n padding: 0 50px;\n\n @media ", " {\n padding: 0 50px;\n }\n\n @media ", " {\n padding: 0 20px;\n grid-template-columns: ", ";\n }\n"])), function (_ref) {
|
|
7793
8206
|
var hasButton = _ref.hasButton,
|
|
7794
8207
|
sponsorPresent = _ref.sponsorPresent;
|
|
7795
8208
|
if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
|
|
@@ -7798,12 +8211,12 @@ var ImpactTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F ||
|
|
|
7798
8211
|
var sponsorPresent = _ref2.sponsorPresent;
|
|
7799
8212
|
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7800
8213
|
});
|
|
7801
|
-
var TitleButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8214
|
+
var TitleButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7802
8215
|
var sponsorWidth = _ref3.sponsorWidth;
|
|
7803
8216
|
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7804
8217
|
});
|
|
7805
8218
|
var TitleButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n position: static;\n margin-right: 0;\n }\n"])), devices.mobile);
|
|
7806
|
-
var MobileButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8219
|
+
var MobileButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 0 20px 16px 20px;\n"])));
|
|
7807
8220
|
var ImpactTitle = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n align-self: center;\n grid-column: ", ";\n min-width: 0;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 2;\n max-height: calc(48px * 2);\n text-align: center;\n padding-bottom: 2px;\n\n @media ", " {\n grid-column: 1;\n -webkit-line-clamp: 4;\n max-height: calc(34px * 4);\n text-align: left;\n }\n"])), function (_ref4) {
|
|
7808
8221
|
var hasColumns = _ref4.hasColumns;
|
|
7809
8222
|
return hasColumns ? '3' : '1';
|
|
@@ -7814,10 +8227,10 @@ var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_te
|
|
|
7814
8227
|
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7815
8228
|
}, devices.mobile);
|
|
7816
8229
|
|
|
7817
|
-
var _templateObject$
|
|
7818
|
-
var VideoPlayButton$1 = /*#__PURE__*/styled__default.button(_templateObject$
|
|
7819
|
-
var VideoControlsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7820
|
-
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8230
|
+
var _templateObject$U, _templateObject2$H, _templateObject3$u, _templateObject4$q;
|
|
8231
|
+
var VideoPlayButton$1 = /*#__PURE__*/styled__default.button(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n background-color: var(--color-base-transparent);\n border: none;\n cursor: pointer;\n\n @media ", " {\n width: 60px;\n height: 60px;\n }\n"])), devices.mobile);
|
|
8232
|
+
var VideoControlsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
8233
|
+
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 20px;\n\n @media ", " {\n margin: 20px 4px;\n }\n"])), devices.mobile);
|
|
7821
8234
|
var LeftWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7822
8235
|
|
|
7823
8236
|
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
@@ -8041,21 +8454,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
|
8041
8454
|
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
8042
8455
|
};
|
|
8043
8456
|
|
|
8044
|
-
var _templateObject$
|
|
8045
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8457
|
+
var _templateObject$V, _templateObject2$I, _templateObject3$v, _templateObject4$r, _templateObject5$m;
|
|
8458
|
+
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__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) {
|
|
8046
8459
|
var color = _ref.color;
|
|
8047
8460
|
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 ";
|
|
8048
8461
|
}, devices.mobileAndTablet);
|
|
8049
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8462
|
+
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__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) {
|
|
8050
8463
|
var hasImage = _ref2.hasImage;
|
|
8051
8464
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8052
8465
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8053
8466
|
var hasImage = _ref3.hasImage;
|
|
8054
8467
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8055
8468
|
});
|
|
8056
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8469
|
+
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__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);
|
|
8057
8470
|
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__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);
|
|
8058
|
-
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8471
|
+
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__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);
|
|
8059
8472
|
|
|
8060
8473
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
8061
8474
|
var _image$src, _image$alt;
|
|
@@ -8085,12 +8498,12 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8085
8498
|
})))));
|
|
8086
8499
|
};
|
|
8087
8500
|
|
|
8088
|
-
var _templateObject$
|
|
8089
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$
|
|
8090
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8091
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8501
|
+
var _templateObject$W, _templateObject2$J, _templateObject3$w, _templateObject4$s, _templateObject5$n, _templateObject6$f, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
8502
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
8503
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
8504
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__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);
|
|
8092
8505
|
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__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);
|
|
8093
|
-
var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8506
|
+
var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__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) {
|
|
8094
8507
|
var theme = _ref.theme;
|
|
8095
8508
|
return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
8096
8509
|
}, function (_ref2) {
|
|
@@ -8299,7 +8712,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8299
8712
|
})))))))))));
|
|
8300
8713
|
};
|
|
8301
8714
|
|
|
8302
|
-
var _templateObject$
|
|
8715
|
+
var _templateObject$X, _templateObject2$K, _templateObject3$x, _templateObject4$t;
|
|
8303
8716
|
var GRID = {
|
|
8304
8717
|
desktop: {
|
|
8305
8718
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8312,18 +8725,18 @@ var GRID = {
|
|
|
8312
8725
|
right: '2 / 1 / 3 / 15'
|
|
8313
8726
|
}
|
|
8314
8727
|
};
|
|
8315
|
-
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8728
|
+
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8316
8729
|
var $background = _ref.$background;
|
|
8317
8730
|
return "var(--color-" + $background + ")";
|
|
8318
8731
|
});
|
|
8319
|
-
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8732
|
+
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__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) {
|
|
8320
8733
|
var hasImage = _ref2.hasImage;
|
|
8321
8734
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8322
8735
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8323
8736
|
var hasImage = _ref3.hasImage;
|
|
8324
8737
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8325
8738
|
});
|
|
8326
|
-
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8739
|
+
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__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);
|
|
8327
8740
|
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__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);
|
|
8328
8741
|
|
|
8329
8742
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
@@ -8347,11 +8760,11 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8347
8760
|
})))));
|
|
8348
8761
|
};
|
|
8349
8762
|
|
|
8350
|
-
var _templateObject$
|
|
8351
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8352
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8353
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8354
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8763
|
+
var _templateObject$Y, _templateObject2$L, _templateObject3$y, _templateObject5$o, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$5, _templateObject0$5;
|
|
8764
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__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);
|
|
8765
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__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"])));
|
|
8766
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8767
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__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);
|
|
8355
8768
|
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 min-content;\n grid-template-areas:\n '. . . . . . . . . . . . . . . .'\n '. logo logo logo title title title title title title title title cta cta . .'\n '. . . . . . . . . . . . . . . .';\n align-content: center;\n gap: 0 var(--grid-column-gap);\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 grid-template-columns: 1fr;\n grid-template-areas:\n 'logo'\n 'title'\n 'cta';\n\n gap: 0;\n row-gap: 16px;\n height: auto;\n padding: 32px 20px;\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'logo'\n 'title'\n 'cta';\n\n gap: 0;\n row-gap: 16px;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8356
8769
|
var invert = _ref.invert,
|
|
8357
8770
|
theme = _ref.theme;
|
|
@@ -8601,10 +9014,10 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8601
9014
|
}), linkText))))));
|
|
8602
9015
|
};
|
|
8603
9016
|
|
|
8604
|
-
var _templateObject$
|
|
8605
|
-
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8606
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8607
|
-
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9017
|
+
var _templateObject$Z, _templateObject2$M, _templateObject3$z, _templateObject4$u, _templateObject5$p, _templateObject6$h, _templateObject7$d;
|
|
9018
|
+
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__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);
|
|
9019
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
9020
|
+
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8608
9021
|
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__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) {
|
|
8609
9022
|
var hasImages = _ref.hasImages;
|
|
8610
9023
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
@@ -8612,12 +9025,12 @@ var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u
|
|
|
8612
9025
|
var hasImages = _ref2.hasImages;
|
|
8613
9026
|
return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8614
9027
|
});
|
|
8615
|
-
var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9028
|
+
var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__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) {
|
|
8616
9029
|
var hasMultipleImages = _ref3.hasMultipleImages;
|
|
8617
9030
|
return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
|
|
8618
9031
|
}, devices.mobile);
|
|
8619
9032
|
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);
|
|
8620
|
-
var RotatorButtonsWrapper$
|
|
9033
|
+
var RotatorButtonsWrapper$2 = /*#__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);
|
|
8621
9034
|
|
|
8622
9035
|
/* eslint-disable react/no-danger */
|
|
8623
9036
|
var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
@@ -8660,7 +9073,7 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8660
9073
|
}
|
|
8661
9074
|
})))) : null), hasImages && (/*#__PURE__*/React__default.createElement(HighlightsCarouselWrapper, {
|
|
8662
9075
|
hasMultipleImages: hasMultipleImages
|
|
8663
|
-
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$
|
|
9076
|
+
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$2, {
|
|
8664
9077
|
"data-testid": "rotator-buttons"
|
|
8665
9078
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
8666
9079
|
onClickNext: onNext,
|
|
@@ -8680,11 +9093,11 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8680
9093
|
}))))));
|
|
8681
9094
|
};
|
|
8682
9095
|
|
|
8683
|
-
var _templateObject$
|
|
8684
|
-
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8685
|
-
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
8686
|
-
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8687
|
-
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$
|
|
9096
|
+
var _templateObject$_, _templateObject2$N, _templateObject3$A, _templateObject5$q, _templateObject6$i, _templateObject7$e, _templateObject8$a;
|
|
9097
|
+
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$_ || (_templateObject$_ = /*#__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"])));
|
|
9098
|
+
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
9099
|
+
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
9100
|
+
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$q || (_templateObject5$q = /*#__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"])));
|
|
8688
9101
|
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8689
9102
|
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8690
9103
|
var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$a || (_templateObject8$a = /*#__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) {
|
|
@@ -8839,15 +9252,15 @@ var Pagination = function Pagination(_ref) {
|
|
|
8839
9252
|
}))))));
|
|
8840
9253
|
};
|
|
8841
9254
|
|
|
8842
|
-
var _templateObject
|
|
8843
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject
|
|
9255
|
+
var _templateObject$$;
|
|
9256
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$$ || (_templateObject$$ = /*#__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: ", ";\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
|
|
8844
9257
|
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8845
9258
|
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8846
9259
|
});
|
|
8847
9260
|
|
|
8848
|
-
var _templateObject
|
|
8849
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject
|
|
8850
|
-
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$
|
|
9261
|
+
var _templateObject$10, _templateObject2$O;
|
|
9262
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
9263
|
+
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8851
9264
|
|
|
8852
9265
|
var PersonDetails = function PersonDetails(_ref) {
|
|
8853
9266
|
var _role$people;
|
|
@@ -8869,9 +9282,9 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8869
9282
|
})));
|
|
8870
9283
|
};
|
|
8871
9284
|
|
|
8872
|
-
var _templateObject$
|
|
8873
|
-
var PersonWrapper$
|
|
8874
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9285
|
+
var _templateObject$11, _templateObject2$P;
|
|
9286
|
+
var PersonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
9287
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n filter: ", ";\n }\n"])), function (_ref) {
|
|
8875
9288
|
var greyscale = _ref.greyscale;
|
|
8876
9289
|
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8877
9290
|
});
|
|
@@ -8885,7 +9298,7 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8885
9298
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
8886
9299
|
return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
|
|
8887
9300
|
}, [role]);
|
|
8888
|
-
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$
|
|
9301
|
+
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$2, {
|
|
8889
9302
|
className: className
|
|
8890
9303
|
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
|
|
8891
9304
|
greyscale: greyscale
|
|
@@ -8920,14 +9333,13 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8920
9333
|
}));
|
|
8921
9334
|
};
|
|
8922
9335
|
|
|
8923
|
-
var _templateObject$
|
|
8924
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8925
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
9336
|
+
var _templateObject$12, _templateObject2$Q, _templateObject3$B;
|
|
9337
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9338
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$Q || (_templateObject2$Q = /*#__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) {
|
|
8926
9339
|
var columnCount = _ref.columnCount;
|
|
8927
9340
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8928
9341
|
}, devices.mobile, devices.tablet);
|
|
8929
|
-
var
|
|
8930
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
9342
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8931
9343
|
|
|
8932
9344
|
// Get the total character length of a property in an array of objects
|
|
8933
9345
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8975,7 +9387,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8975
9387
|
_ref$largeColumnSpan = _ref.largeColumnSpan,
|
|
8976
9388
|
largeColumnSpan = _ref$largeColumnSpan === void 0 ? DEFAULT_LARGE_COLUMN_SPAN : _ref$largeColumnSpan,
|
|
8977
9389
|
_ref$characterThresho = _ref.characterThreshold,
|
|
8978
|
-
characterThreshold = _ref$characterThresho === void 0 ? DEFAULT_CHARACTER_THRESHOLD : _ref$characterThresho
|
|
9390
|
+
characterThreshold = _ref$characterThresho === void 0 ? DEFAULT_CHARACTER_THRESHOLD : _ref$characterThresho,
|
|
9391
|
+
className = _ref.className;
|
|
8979
9392
|
var creditEntries = [];
|
|
8980
9393
|
var nextColumnStart = 1;
|
|
8981
9394
|
roles.forEach(function (_ref2, index) {
|
|
@@ -9016,20 +9429,21 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9016
9429
|
columnSpanSmallDevice: 1,
|
|
9017
9430
|
key: "credit-entry-" + name + "-" + index,
|
|
9018
9431
|
"data-testid": "credit-entry"
|
|
9019
|
-
}, /*#__PURE__*/React__default.createElement(TextWrapper$1,
|
|
9432
|
+
}, /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
9433
|
+
className: className
|
|
9434
|
+
}, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
9020
9435
|
title: "role",
|
|
9021
9436
|
"data-roh": dataROH
|
|
9022
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
9023
|
-
|
|
9024
|
-
|
|
9025
|
-
}, name)), description && (/*#__PURE__*/React__default.createElement(
|
|
9026
|
-
|
|
9027
|
-
|
|
9028
|
-
}, description))
|
|
9029
|
-
return /*#__PURE__*/React__default.createElement(
|
|
9437
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
9438
|
+
size: "small",
|
|
9439
|
+
color: "grey"
|
|
9440
|
+
}, name)), description && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9441
|
+
size: "small",
|
|
9442
|
+
color: "grey"
|
|
9443
|
+
}, description)), personArrays.map(function (personArray, arrayIndex) {
|
|
9444
|
+
return /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9030
9445
|
key: "personArray" + arrayIndex,
|
|
9031
|
-
|
|
9032
|
-
tag: "p"
|
|
9446
|
+
size: "medium"
|
|
9033
9447
|
}, personArray.map(function (person, personIndex) {
|
|
9034
9448
|
return /*#__PURE__*/React__default.createElement(Person, {
|
|
9035
9449
|
key: "" + person.name + personIndex,
|
|
@@ -9037,25 +9451,22 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9037
9451
|
withSeparator: personArray.length !== personIndex + 1
|
|
9038
9452
|
});
|
|
9039
9453
|
}));
|
|
9040
|
-
}), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(
|
|
9041
|
-
|
|
9042
|
-
|
|
9043
|
-
|
|
9044
|
-
level: 1,
|
|
9045
|
-
tag: "p",
|
|
9454
|
+
}), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9455
|
+
size: "medium"
|
|
9456
|
+
}, replacement))), musicTitle && musicTitle.length > 0 && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9457
|
+
size: "small",
|
|
9046
9458
|
key: "music-" + musicTitle + "-text"
|
|
9047
|
-
}, concatenateMusicTitle(musicTitle, index))), additionalInfo &&
|
|
9048
|
-
|
|
9049
|
-
|
|
9050
|
-
}, additionalInfo)))));
|
|
9459
|
+
}, concatenateMusicTitle(musicTitle, index))), additionalInfo && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9460
|
+
size: "medium"
|
|
9461
|
+
}, additionalInfo))));
|
|
9051
9462
|
});
|
|
9052
9463
|
return /*#__PURE__*/React__default.createElement(CreditListingWrapper, {
|
|
9053
9464
|
columnCount: columnCount
|
|
9054
9465
|
}, creditEntries);
|
|
9055
9466
|
};
|
|
9056
9467
|
|
|
9057
|
-
var _templateObject$
|
|
9058
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$
|
|
9468
|
+
var _templateObject$13;
|
|
9469
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$13 || (_templateObject$13 = /*#__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"])));
|
|
9059
9470
|
|
|
9060
9471
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
9061
9472
|
var items = _ref.items;
|
|
@@ -9073,14 +9484,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
9073
9484
|
}));
|
|
9074
9485
|
};
|
|
9075
9486
|
|
|
9076
|
-
var _templateObject$
|
|
9487
|
+
var _templateObject$14, _templateObject3$C, _templateObject4$v, _templateObject5$r, _templateObject6$j, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
9077
9488
|
var LENGTH_TEXT = 28;
|
|
9078
9489
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9079
9490
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9080
9491
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9081
9492
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9082
9493
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9083
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9494
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$14 || (_templateObject$14 = /*#__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) {
|
|
9084
9495
|
var imageToLeft = _ref.imageToLeft;
|
|
9085
9496
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9086
9497
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9090,7 +9501,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 ||
|
|
|
9090
9501
|
var asCard = _ref3.asCard;
|
|
9091
9502
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9092
9503
|
});
|
|
9093
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9504
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__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) {
|
|
9094
9505
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9095
9506
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9096
9507
|
}, function (_ref5) {
|
|
@@ -9114,14 +9525,14 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$B ||
|
|
|
9114
9525
|
}
|
|
9115
9526
|
return '';
|
|
9116
9527
|
});
|
|
9117
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9528
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
9118
9529
|
var marginBottom = _ref7.marginBottom;
|
|
9119
9530
|
return marginBottom + "px";
|
|
9120
9531
|
}, function (_ref8) {
|
|
9121
9532
|
var mobileMarginBottom = _ref8.mobileMarginBottom;
|
|
9122
9533
|
return mobileMarginBottom && "\n @media " + devices.mobile + " {\n margin-bottom: " + mobileMarginBottom + "px;\n }\n ";
|
|
9123
9534
|
});
|
|
9124
|
-
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9535
|
+
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
9125
9536
|
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"])));
|
|
9126
9537
|
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);
|
|
9127
9538
|
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__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);
|
|
@@ -9154,7 +9565,7 @@ var _excluded$m = ["text"],
|
|
|
9154
9565
|
_excluded3$1 = ["text"];
|
|
9155
9566
|
var _buttonTypeToButton$1;
|
|
9156
9567
|
var LENGTH_TEXT$1 = 28;
|
|
9157
|
-
var LENGTH_TEXT_PARAGRAPH =
|
|
9568
|
+
var LENGTH_TEXT_PARAGRAPH = 185;
|
|
9158
9569
|
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);
|
|
9159
9570
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
9160
9571
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -9345,26 +9756,26 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9345
9756
|
}))));
|
|
9346
9757
|
};
|
|
9347
9758
|
|
|
9348
|
-
var _templateObject$
|
|
9759
|
+
var _templateObject$15, _templateObject2$R, _templateObject3$D, _templateObject4$w, _templateObject5$s, _templateObject6$k, _templateObject7$g;
|
|
9349
9760
|
var LENGTH_TEXT$2 = 28;
|
|
9350
9761
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9351
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9762
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__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) {
|
|
9352
9763
|
var imageToLeft = _ref.imageToLeft;
|
|
9353
9764
|
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'";
|
|
9354
9765
|
}, devices.tablet, function (_ref2) {
|
|
9355
9766
|
var imageToLeft = _ref2.imageToLeft;
|
|
9356
9767
|
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'";
|
|
9357
9768
|
}, devices.mobile);
|
|
9358
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9769
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9359
9770
|
var imageToLeft = _ref3.imageToLeft;
|
|
9360
9771
|
return imageToLeft ? 'left' : 'right';
|
|
9361
9772
|
}, devices.mobile);
|
|
9362
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9773
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__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) {
|
|
9363
9774
|
var imageToLeft = _ref4.imageToLeft;
|
|
9364
9775
|
return imageToLeft ? 'right' : 'left';
|
|
9365
9776
|
}, devices.mobile);
|
|
9366
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$
|
|
9367
|
-
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$
|
|
9777
|
+
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);
|
|
9778
|
+
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9368
9779
|
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);
|
|
9369
9780
|
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) {
|
|
9370
9781
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
@@ -9388,8 +9799,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
|
|
|
9388
9799
|
return '';
|
|
9389
9800
|
});
|
|
9390
9801
|
|
|
9391
|
-
var _templateObject$
|
|
9392
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9802
|
+
var _templateObject$16;
|
|
9803
|
+
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__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) {
|
|
9393
9804
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9394
9805
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9395
9806
|
return aspectRatio;
|
|
@@ -9571,10 +9982,10 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9571
9982
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9572
9983
|
};
|
|
9573
9984
|
|
|
9574
|
-
var _templateObject$
|
|
9575
|
-
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
9576
|
-
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$
|
|
9577
|
-
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$
|
|
9985
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
9986
|
+
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
9987
|
+
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
9988
|
+
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$E || (_templateObject3$E = /*#__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);
|
|
9578
9989
|
|
|
9579
9990
|
/* eslint-disable react/no-danger */
|
|
9580
9991
|
var Quote = function Quote(_ref) {
|
|
@@ -9604,9 +10015,9 @@ var Quote = function Quote(_ref) {
|
|
|
9604
10015
|
}, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
|
|
9605
10016
|
};
|
|
9606
10017
|
|
|
9607
|
-
var _templateObject$
|
|
9608
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9609
|
-
var RadioGroup = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10018
|
+
var _templateObject$18, _templateObject2$T, _templateObject3$F;
|
|
10019
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10020
|
+
var RadioGroup = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9610
10021
|
var horizontalMode = _ref.horizontalMode;
|
|
9611
10022
|
if (horizontalMode) return 'row';
|
|
9612
10023
|
return 'column';
|
|
@@ -9614,7 +10025,7 @@ var RadioGroup = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templa
|
|
|
9614
10025
|
var gap = _ref2.gap;
|
|
9615
10026
|
return gap + "px";
|
|
9616
10027
|
});
|
|
9617
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10028
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9618
10029
|
var darkMode = _ref3.darkMode;
|
|
9619
10030
|
if (darkMode) return 'var(--base-color-white)';
|
|
9620
10031
|
return 'var(--base-color-errorstate)';
|
|
@@ -9691,10 +10102,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9691
10102
|
}, error))));
|
|
9692
10103
|
};
|
|
9693
10104
|
|
|
9694
|
-
var _templateObject$
|
|
9695
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9696
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9697
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10105
|
+
var _templateObject$19, _templateObject2$U, _templateObject3$G;
|
|
10106
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__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);
|
|
10107
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__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"])));
|
|
10108
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__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);
|
|
9698
10109
|
|
|
9699
10110
|
/* eslint-disable react/no-danger */
|
|
9700
10111
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9750,11 +10161,11 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9750
10161
|
return null;
|
|
9751
10162
|
};
|
|
9752
10163
|
|
|
9753
|
-
var _templateObject$
|
|
9754
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9755
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9756
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
9757
|
-
var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10164
|
+
var _templateObject$1a, _templateObject2$V, _templateObject3$H, _templateObject5$t, _templateObject6$l, _templateObject7$h;
|
|
10165
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: transparent;\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
10166
|
+
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
10167
|
+
var SvgContainerClose = /*#__PURE__*/styled__default.button(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])));
|
|
10168
|
+
var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-serif);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--color-base-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
9758
10169
|
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
9759
10170
|
var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-right: 8px;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
9760
10171
|
|
|
@@ -9894,8 +10305,8 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
9894
10305
|
})));
|
|
9895
10306
|
};
|
|
9896
10307
|
|
|
9897
|
-
var _templateObject$
|
|
9898
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10308
|
+
var _templateObject$1b;
|
|
10309
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__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);
|
|
9899
10310
|
|
|
9900
10311
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9901
10312
|
var HarmonicSize = {
|
|
@@ -9937,9 +10348,9 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9937
10348
|
}, description)))));
|
|
9938
10349
|
};
|
|
9939
10350
|
|
|
9940
|
-
var _templateObject$
|
|
9941
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9942
|
-
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10351
|
+
var _templateObject$1c, _templateObject2$W, _templateObject3$I, _templateObject4$x;
|
|
10352
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10353
|
+
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__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\n .harmonic-select__control--is-focused {\n border-color: var(--color-base-dark-grey);\n box-shadow: ", ";\n }\n\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--color-primary-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\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-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n\n @media ", " {\n font-size: 17px;\n }\n }\n\n .harmonic-select__placeholder {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__single-value {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--color-base-light-grey);\n background: var(--color-base-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--color-base-dark-grey);\n }\n }\n\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--color-base-mid-grey);\n }\n\n .harmonic-select__menu-list {\n padding: 10px 0;\n }\n\n .harmonic-select__option {\n padding: 10px 20px;\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-primary-black);\n\n @media ", " {\n font-size: 17px;\n }\n\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--color-base-light-grey);\n }\n }\n\n .harmonic-select__option--is-selected {\n color: var(--color-primary-black);\n background: none;\n }\n\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n color: var(--color-primary-black);\n }\n\n .harmonic-select__menu-notice {\n color: var(--color-primary-black);\n padding: 20px 20px;\n text-align: left;\n }\n\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9943
10354
|
var width = _ref.width;
|
|
9944
10355
|
if (!width) return 'none';
|
|
9945
10356
|
return width + "px";
|
|
@@ -9956,12 +10367,12 @@ var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject2$V || (_tem
|
|
|
9956
10367
|
if (darkMode) return "0 0 0 1px var(--color-state-medium)";
|
|
9957
10368
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9958
10369
|
}, devices.mobile, devices.mobile);
|
|
9959
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10370
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n\n @media ", " {\n margin: 0 0 12px;\n }\n"])), function (_ref5) {
|
|
9960
10371
|
var darkMode = _ref5.darkMode;
|
|
9961
10372
|
if (darkMode) return "var(--color-base-white)";
|
|
9962
10373
|
return "var(--color-primary-black)";
|
|
9963
10374
|
}, devices.mobile);
|
|
9964
|
-
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10375
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9965
10376
|
var darkMode = _ref6.darkMode;
|
|
9966
10377
|
if (darkMode) return "var(--color-base-white)";
|
|
9967
10378
|
return "var(--color-state-error)";
|
|
@@ -10080,16 +10491,16 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10080
10491
|
})));
|
|
10081
10492
|
};
|
|
10082
10493
|
|
|
10083
|
-
var _templateObject$
|
|
10084
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10085
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10494
|
+
var _templateObject$1d, _templateObject2$X, _templateObject3$J, _templateObject4$y;
|
|
10495
|
+
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
10496
|
+
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
10086
10497
|
if (props.showMenu) {
|
|
10087
10498
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
10088
10499
|
}
|
|
10089
10500
|
return "display: none;";
|
|
10090
10501
|
});
|
|
10091
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10092
|
-
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10502
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--color-primary-red);\n }\n }\n\n && svg path {\n fill: var(--color-primary-black);\n }\n\n :hover {\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
10503
|
+
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 0;\n }\n }\n"])), devices.mobileAndTablet);
|
|
10093
10504
|
|
|
10094
10505
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
10095
10506
|
var Tabs = function Tabs(_ref) {
|
|
@@ -10215,21 +10626,21 @@ var Tabs = function Tabs(_ref) {
|
|
|
10215
10626
|
}, "Menu"))))));
|
|
10216
10627
|
};
|
|
10217
10628
|
|
|
10218
|
-
var _templateObject$
|
|
10219
|
-
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10220
|
-
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$
|
|
10221
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10629
|
+
var _templateObject$1e, _templateObject3$K, _templateObject4$z, _templateObject5$u, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$7;
|
|
10630
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__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"])));
|
|
10631
|
+
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$K || (_templateObject3$K = /*#__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"])));
|
|
10632
|
+
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) {
|
|
10222
10633
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10223
10634
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10224
10635
|
}, function (_ref2) {
|
|
10225
10636
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
10226
10637
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
10227
10638
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
10228
|
-
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10639
|
+
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
|
|
10229
10640
|
var singleChild = _ref3.singleChild;
|
|
10230
10641
|
return singleChild ? '0' : '10px';
|
|
10231
10642
|
});
|
|
10232
|
-
var DescriptionWrapper
|
|
10643
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
10233
10644
|
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
10234
10645
|
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"])));
|
|
10235
10646
|
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"])));
|
|
@@ -10251,7 +10662,7 @@ var capitalizeFirstLetter = function capitalizeFirstLetter(string) {
|
|
|
10251
10662
|
var OfferText = function OfferText(_ref) {
|
|
10252
10663
|
var title = _ref.title,
|
|
10253
10664
|
description = _ref.description;
|
|
10254
|
-
return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, null, title), description && /*#__PURE__*/React__default.createElement(DescriptionWrapper
|
|
10665
|
+
return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, null, title), description && /*#__PURE__*/React__default.createElement(DescriptionWrapper, {
|
|
10255
10666
|
tag: "div",
|
|
10256
10667
|
size: "large",
|
|
10257
10668
|
dangerouslySetInnerHTML: {
|
|
@@ -10323,8 +10734,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10323
10734
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10324
10735
|
};
|
|
10325
10736
|
|
|
10326
|
-
var _templateObject$
|
|
10327
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
10737
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$L;
|
|
10738
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$1f || (_templateObject$1f = /*#__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) {
|
|
10328
10739
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10329
10740
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10330
10741
|
return aspectRatio;
|
|
@@ -10334,8 +10745,8 @@ var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$1e || (_temp
|
|
|
10334
10745
|
height = _ref2.height;
|
|
10335
10746
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10336
10747
|
});
|
|
10337
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
10338
|
-
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$
|
|
10748
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
10749
|
+
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$L || (_templateObject3$L = /*#__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"])));
|
|
10339
10750
|
|
|
10340
10751
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10341
10752
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -10368,12 +10779,12 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10368
10779
|
}, caption))));
|
|
10369
10780
|
};
|
|
10370
10781
|
|
|
10371
|
-
var _templateObject$
|
|
10372
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10373
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10374
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
10375
|
-
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10376
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10782
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$A, _templateObject5$v, _templateObject6$n;
|
|
10783
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__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"])));
|
|
10784
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10785
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10786
|
+
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10787
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__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);
|
|
10377
10788
|
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);
|
|
10378
10789
|
|
|
10379
10790
|
var MiniCard = function MiniCard(_ref) {
|
|
@@ -10412,8 +10823,8 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10412
10823
|
}, title)))));
|
|
10413
10824
|
};
|
|
10414
10825
|
|
|
10415
|
-
var _templateObject$
|
|
10416
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10826
|
+
var _templateObject$1h;
|
|
10827
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 100%;\n\n @media ", " {\n column-gap: 20px;\n }\n"])), devices.mobile);
|
|
10417
10828
|
|
|
10418
10829
|
var NavTop = function NavTop(_ref) {
|
|
10419
10830
|
var accountText = _ref.accountText,
|
|
@@ -10453,18 +10864,47 @@ var NavTop = function NavTop(_ref) {
|
|
|
10453
10864
|
}));
|
|
10454
10865
|
};
|
|
10455
10866
|
|
|
10456
|
-
var _templateObject$
|
|
10457
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10458
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10459
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10867
|
+
var _templateObject$1i, _templateObject2$_, _templateObject3$N, _templateObject4$B, _templateObject5$w;
|
|
10868
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3 {\n margin: 0px 0px 12px 0px !important;\n }\n\n p {\n font-size: 17px !important;\n }\n"])));
|
|
10869
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 12px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
10870
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n margin-bottom: 12px;\n p {\n font-size: 17px !important;\n }\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10460
10871
|
var isVisible = _ref.isVisible;
|
|
10461
10872
|
return isVisible ? 'visible' : 'hidden';
|
|
10462
10873
|
});
|
|
10463
|
-
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10874
|
+
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n line-height: 24px;\n font-size: 17px;\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10464
10875
|
var isVisible = _ref2.isVisible;
|
|
10465
10876
|
return isVisible ? 'visible' : 'hidden';
|
|
10466
10877
|
});
|
|
10467
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10878
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-family: var(--font-family-sans);\n\n & h1 {\n font-family: var(--font-family-sans);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-family: var(--font-family-sans);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em,\n i {\n font-style: italic;\n }\n\n & strong,\n b {\n font-weight: 500;\n letter-spacing: -0.5px;\n }\n\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
10879
|
+
|
|
10880
|
+
var _templateObject$1j, _templateObject2$$;
|
|
10881
|
+
var TextLinkWrapper$4 = /*#__PURE__*/styled__default.a(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 28px;\n color: var(--color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
10882
|
+
var color = _ref.color;
|
|
10883
|
+
return color;
|
|
10884
|
+
});
|
|
10885
|
+
var TextLinkIconWrapper$1 = /*#__PURE__*/styled__default.span(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
10886
|
+
|
|
10887
|
+
var _excluded$r = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
10888
|
+
var ReadMoreTextLink = function ReadMoreTextLink(_ref) {
|
|
10889
|
+
var children = _ref.children,
|
|
10890
|
+
iconName = _ref.iconName,
|
|
10891
|
+
iconDirection = _ref.iconDirection,
|
|
10892
|
+
textColor = _ref.textColor,
|
|
10893
|
+
_ref$disableTruncatio = _ref.disableTruncation,
|
|
10894
|
+
disableTruncation = _ref$disableTruncatio === void 0 ? false : _ref$disableTruncatio,
|
|
10895
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
|
|
10896
|
+
var truncatedString = disableTruncation ? children : children.substring(0, 30);
|
|
10897
|
+
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$4, Object.assign({
|
|
10898
|
+
color: textColor,
|
|
10899
|
+
iconName: iconName
|
|
10900
|
+
}, rest), truncatedString, iconName ? (/*#__PURE__*/React__default.createElement(TextLinkIconWrapper$1, {
|
|
10901
|
+
"data-testid": "text-link-icon"
|
|
10902
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10903
|
+
iconName: iconName,
|
|
10904
|
+
direction: iconDirection,
|
|
10905
|
+
color: textColor
|
|
10906
|
+
}))) : null);
|
|
10907
|
+
};
|
|
10468
10908
|
|
|
10469
10909
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10470
10910
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10483,7 +10923,8 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10483
10923
|
hideText = _ref.hideText,
|
|
10484
10924
|
characterLimit = _ref.characterLimit,
|
|
10485
10925
|
_ref$truncate = _ref.truncate,
|
|
10486
|
-
truncate = _ref$truncate === void 0 ? true : _ref$truncate
|
|
10926
|
+
truncate = _ref$truncate === void 0 ? true : _ref$truncate,
|
|
10927
|
+
className = _ref.className;
|
|
10487
10928
|
var _useState = React.useState(initOpen),
|
|
10488
10929
|
isFullTextOpen = _useState[0],
|
|
10489
10930
|
setIsFullTextOpen = _useState[1];
|
|
@@ -10520,14 +10961,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10520
10961
|
var contentContainerId = title + "-read-more-content";
|
|
10521
10962
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, {
|
|
10522
10963
|
tabIndex: 0,
|
|
10523
|
-
onKeyDown: handleKeyDown
|
|
10964
|
+
onKeyDown: handleKeyDown,
|
|
10965
|
+
className: className,
|
|
10966
|
+
showTopLine: false
|
|
10524
10967
|
}, /*#__PURE__*/React__default.createElement(ReadMoreContainer, {
|
|
10525
10968
|
"aria-label": title,
|
|
10526
10969
|
"aria-expanded": isFullTextOpen,
|
|
10527
10970
|
"aria-controls": contentContainerId
|
|
10528
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10529
|
-
|
|
10530
|
-
semanticLevel: 3
|
|
10971
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
10972
|
+
size: "small"
|
|
10531
10973
|
}, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$5, {
|
|
10532
10974
|
"data-testid": "richcontainer",
|
|
10533
10975
|
ref: readMoreContent,
|
|
@@ -10538,22 +10980,22 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10538
10980
|
}
|
|
10539
10981
|
}, /*#__PURE__*/React__default.createElement(FullTextContainer, {
|
|
10540
10982
|
isVisible: isFullTextOpen
|
|
10541
|
-
}, fullText)), /*#__PURE__*/React__default.createElement(LinkContainer, null, (fullText || isFullTextOpen) && (/*#__PURE__*/React__default.createElement(
|
|
10983
|
+
}, fullText)), /*#__PURE__*/React__default.createElement(LinkContainer, null, (fullText || isFullTextOpen) && (/*#__PURE__*/React__default.createElement(ReadMoreTextLink, {
|
|
10542
10984
|
tabIndex: 0,
|
|
10543
10985
|
role: "button",
|
|
10544
10986
|
onClick: toggleFullText
|
|
10545
10987
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10546
10988
|
};
|
|
10547
10989
|
|
|
10548
|
-
var _templateObject$
|
|
10549
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$
|
|
10550
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
10551
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
10552
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
10990
|
+
var _templateObject$1k, _templateObject2$10, _templateObject3$O, _templateObject4$C, _templateObject5$x;
|
|
10991
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10992
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$10 || (_templateObject2$10 = /*#__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);
|
|
10993
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$O || (_templateObject3$O = /*#__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);
|
|
10994
|
+
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) {
|
|
10553
10995
|
var isActive = _ref.isActive;
|
|
10554
10996
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10555
10997
|
}, exports.Colors.MidGrey);
|
|
10556
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
10998
|
+
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$x || (_templateObject5$x = /*#__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) {
|
|
10557
10999
|
var isOpen = _ref2.isOpen;
|
|
10558
11000
|
return isOpen ? 'block' : 'none';
|
|
10559
11001
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -10709,15 +11151,15 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10709
11151
|
});
|
|
10710
11152
|
};
|
|
10711
11153
|
|
|
10712
|
-
var _templateObject$
|
|
10713
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10714
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2
|
|
10715
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11154
|
+
var _templateObject$1l, _templateObject2$11, _templateObject3$P, _templateObject4$D, _templateObject5$y, _templateObject6$o;
|
|
11155
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11156
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11157
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10716
11158
|
var color = _ref.color;
|
|
10717
11159
|
return "var(--base-color-" + color + ")";
|
|
10718
11160
|
});
|
|
10719
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10720
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
11161
|
+
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"])));
|
|
11162
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10721
11163
|
var color = _ref2.color;
|
|
10722
11164
|
return "var(--base-color-" + color + ")";
|
|
10723
11165
|
});
|
|
@@ -10803,14 +11245,14 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10803
11245
|
}, strengthLabel))));
|
|
10804
11246
|
};
|
|
10805
11247
|
|
|
10806
|
-
var _templateObject$
|
|
10807
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$
|
|
10808
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10809
|
-
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10810
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$
|
|
11248
|
+
var _templateObject$1m, _templateObject2$12, _templateObject3$Q, _templateObject4$E, _templateObject5$z, _templateObject6$p, _templateObject7$j, _templateObject8$d;
|
|
11249
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11250
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11251
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11252
|
+
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) {
|
|
10811
11253
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10812
11254
|
}, devices.tablet, devices.mobile);
|
|
10813
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
11255
|
+
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$z || (_templateObject5$z = /*#__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) {
|
|
10814
11256
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10815
11257
|
}, devices.mobile);
|
|
10816
11258
|
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);
|
|
@@ -11018,18 +11460,18 @@ var Table = function Table(_ref) {
|
|
|
11018
11460
|
}))));
|
|
11019
11461
|
};
|
|
11020
11462
|
|
|
11021
|
-
var _templateObject$
|
|
11022
|
-
var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
11463
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$R, _templateObject4$F, _templateObject5$A, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
11464
|
+
var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11023
11465
|
var theme = _ref.theme;
|
|
11024
11466
|
return "var(--color-" + theme + ")";
|
|
11025
11467
|
}, function (_ref2) {
|
|
11026
11468
|
var theme = _ref2.theme;
|
|
11027
11469
|
return "var(--color-" + theme + ")";
|
|
11028
11470
|
});
|
|
11029
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11030
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
11031
|
-
var Error = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11032
|
-
var Form = /*#__PURE__*/styled__default.form(_templateObject5$
|
|
11471
|
+
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11472
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$R || (_templateObject3$R = /*#__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);
|
|
11473
|
+
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"])));
|
|
11474
|
+
var Form = /*#__PURE__*/styled__default.form(_templateObject5$A || (_templateObject5$A = /*#__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);
|
|
11033
11475
|
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);
|
|
11034
11476
|
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
11035
11477
|
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);
|
|
@@ -11445,13 +11887,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11445
11887
|
}))))));
|
|
11446
11888
|
};
|
|
11447
11889
|
|
|
11448
|
-
var _templateObject$
|
|
11449
|
-
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11890
|
+
var _templateObject$1o, _templateObject2$14, _templateObject4$G, _templateObject5$B;
|
|
11891
|
+
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1o || (_templateObject$1o = /*#__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) {
|
|
11450
11892
|
var withShadow = _ref.withShadow;
|
|
11451
|
-
return withShadow && styled.css(_templateObject2$
|
|
11893
|
+
return withShadow && styled.css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11452
11894
|
}, devices.mobile);
|
|
11453
|
-
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
11454
|
-
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$
|
|
11895
|
+
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);
|
|
11896
|
+
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11455
11897
|
|
|
11456
11898
|
var defaultGrid = {
|
|
11457
11899
|
columnStartDesktop: 2,
|
|
@@ -11509,12 +11951,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11509
11951
|
return null;
|
|
11510
11952
|
};
|
|
11511
11953
|
|
|
11512
|
-
var _templateObject$
|
|
11513
|
-
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$
|
|
11954
|
+
var _templateObject$1p, _templateObject2$15;
|
|
11955
|
+
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1p || (_templateObject$1p = /*#__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) {
|
|
11514
11956
|
var hide = _ref.hide;
|
|
11515
11957
|
return hide && "display: none;";
|
|
11516
11958
|
}, devices.mobileAndTablet);
|
|
11517
|
-
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11959
|
+
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$15 || (_templateObject2$15 = /*#__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);
|
|
11518
11960
|
|
|
11519
11961
|
/**
|
|
11520
11962
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11606,23 +12048,23 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11606
12048
|
}));
|
|
11607
12049
|
};
|
|
11608
12050
|
|
|
11609
|
-
var _templateObject$
|
|
12051
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$S, _templateObject4$H, _templateObject5$C, _templateObject6$r, _templateObject7$l;
|
|
11610
12052
|
var color = 'primary-black';
|
|
11611
12053
|
var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
11612
12054
|
borderColor: color,
|
|
11613
12055
|
hoveredColor: color,
|
|
11614
12056
|
pressedColor: color,
|
|
11615
12057
|
textColor: color
|
|
11616
|
-
})(_templateObject$
|
|
11617
|
-
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11618
|
-
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$
|
|
12058
|
+
})(_templateObject$1q || (_templateObject$1q = /*#__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);
|
|
12059
|
+
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$16 || (_templateObject2$16 = /*#__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);
|
|
12060
|
+
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11619
12061
|
var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
|
|
11620
12062
|
serif: true,
|
|
11621
12063
|
size: 'medium'
|
|
11622
|
-
})(_templateObject4$
|
|
12064
|
+
})(_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);
|
|
11623
12065
|
var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
|
|
11624
12066
|
size: 'large'
|
|
11625
|
-
})(_templateObject5$
|
|
12067
|
+
})(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11626
12068
|
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"])));
|
|
11627
12069
|
var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
|
|
11628
12070
|
size: 'large'
|
|
@@ -11653,8 +12095,8 @@ var Paywall = function Paywall(_ref) {
|
|
|
11653
12095
|
}, "Sign in"))));
|
|
11654
12096
|
};
|
|
11655
12097
|
|
|
11656
|
-
var _templateObject$
|
|
11657
|
-
var Wrapper$9 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12098
|
+
var _templateObject$1r;
|
|
12099
|
+
var Wrapper$9 = /*#__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);
|
|
11658
12100
|
|
|
11659
12101
|
var UpsellCards = function UpsellCards(_ref) {
|
|
11660
12102
|
var upsellCards = _ref.upsellCards,
|
|
@@ -11845,14 +12287,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11845
12287
|
})))))));
|
|
11846
12288
|
};
|
|
11847
12289
|
|
|
11848
|
-
var _templateObject$
|
|
11849
|
-
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11850
|
-
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
11851
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$
|
|
11852
|
-
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11853
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
12290
|
+
var _templateObject$1s, _templateObject2$17, _templateObject3$T, _templateObject4$I, _templateObject5$D, _templateObject6$s, _templateObject7$m;
|
|
12291
|
+
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1s || (_templateObject$1s = /*#__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);
|
|
12292
|
+
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$17 || (_templateObject2$17 = /*#__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);
|
|
12293
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$T || (_templateObject3$T = /*#__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);
|
|
12294
|
+
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);
|
|
12295
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$D || (_templateObject5$D = /*#__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);
|
|
11854
12296
|
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);
|
|
11855
|
-
var TextLinkWrapper$
|
|
12297
|
+
var TextLinkWrapper$5 = /*#__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"])));
|
|
11856
12298
|
|
|
11857
12299
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11858
12300
|
var Footer = function Footer(_ref) {
|
|
@@ -11881,14 +12323,14 @@ var Footer = function Footer(_ref) {
|
|
|
11881
12323
|
"data-testid": "contact-newsletter"
|
|
11882
12324
|
}, /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(SocialLinks, {
|
|
11883
12325
|
items: rawSocialMediaLinks
|
|
11884
|
-
}), /*#__PURE__*/React__default.createElement(TextLinkWrapper$
|
|
12326
|
+
}), /*#__PURE__*/React__default.createElement(TextLinkWrapper$5, {
|
|
11885
12327
|
href: contact.href,
|
|
11886
12328
|
"aria-label": contact.title,
|
|
11887
12329
|
tabIndex: isMobile ? 2 : 0
|
|
11888
12330
|
}, contact.title)), /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11889
12331
|
size: "large",
|
|
11890
12332
|
color: "white"
|
|
11891
|
-
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$
|
|
12333
|
+
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$5, {
|
|
11892
12334
|
href: newsletter.link.href,
|
|
11893
12335
|
"data-roh": newsletter.link.dataRoh,
|
|
11894
12336
|
"aria-label": newsletter.link.title,
|
|
@@ -11910,18 +12352,18 @@ var Footer = function Footer(_ref) {
|
|
|
11910
12352
|
}, additionalInfo))));
|
|
11911
12353
|
};
|
|
11912
12354
|
|
|
11913
|
-
var _templateObject$
|
|
12355
|
+
var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$J, _templateObject5$E, _templateObject8$f, _templateObject9$9, _templateObject0$8;
|
|
11914
12356
|
var LIST_ITEM_GAP = 32;
|
|
11915
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12357
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__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) {
|
|
11916
12358
|
var bottomBorder = _ref.bottomBorder;
|
|
11917
12359
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11918
12360
|
}, zIndexes.anchor, function (_ref2) {
|
|
11919
12361
|
var withShadow = _ref2.withShadow;
|
|
11920
|
-
return withShadow && styled.css(_templateObject2$
|
|
12362
|
+
return withShadow && styled.css(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11921
12363
|
});
|
|
11922
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
11923
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11924
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
12364
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
12365
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
12366
|
+
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$E || (_templateObject5$E = /*#__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) {
|
|
11925
12367
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11926
12368
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
11927
12369
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -11947,7 +12389,7 @@ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_temp
|
|
|
11947
12389
|
return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
|
|
11948
12390
|
});
|
|
11949
12391
|
|
|
11950
|
-
var _excluded$
|
|
12392
|
+
var _excluded$s = ["id", "text"];
|
|
11951
12393
|
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
11952
12394
|
var tabs = _ref.tabs,
|
|
11953
12395
|
onTabClick = _ref.onTabClick,
|
|
@@ -12058,7 +12500,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12058
12500
|
}, []);
|
|
12059
12501
|
React.useEffect(function () {
|
|
12060
12502
|
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
12061
|
-
var elementGap =
|
|
12503
|
+
var elementGap = LIST_ITEM_GAP;
|
|
12062
12504
|
var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
|
|
12063
12505
|
var targetSectionElement = document.getElementById(item.id);
|
|
12064
12506
|
if (!targetSectionElement) return false;
|
|
@@ -12081,7 +12523,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12081
12523
|
offsetWidth = tabLinkElement.offsetWidth;
|
|
12082
12524
|
var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
|
|
12083
12525
|
if (!isInView && tabListRef != null && tabListRef.current) {
|
|
12084
|
-
tabListRef.current.scrollLeft = offsetLeft;
|
|
12526
|
+
tabListRef.current.scrollLeft = offsetLeft - LIST_ITEM_GAP;
|
|
12085
12527
|
}
|
|
12086
12528
|
setSelectedItem(reachedItem.id);
|
|
12087
12529
|
}
|
|
@@ -12158,7 +12600,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12158
12600
|
}, tabs.map(function (_ref4) {
|
|
12159
12601
|
var id = _ref4.id,
|
|
12160
12602
|
text = _ref4.text,
|
|
12161
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
12603
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$s);
|
|
12162
12604
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
12163
12605
|
key: id
|
|
12164
12606
|
}, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
|
|
@@ -12191,17 +12633,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12191
12633
|
})))) : null))));
|
|
12192
12634
|
};
|
|
12193
12635
|
|
|
12194
|
-
var _templateObject$
|
|
12195
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12636
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$K, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$a, _templateObject0$9;
|
|
12637
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12196
12638
|
var sticky = _ref.sticky;
|
|
12197
12639
|
return sticky ? 'sticky' : 'initial';
|
|
12198
12640
|
}, zIndexes.anchor);
|
|
12199
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
12200
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12641
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
12642
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__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) {
|
|
12201
12643
|
var title = _ref2.title;
|
|
12202
12644
|
return title ? 'row' : 'row-reverse';
|
|
12203
12645
|
}, devices.tablet, devices.mobile);
|
|
12204
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12646
|
+
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);
|
|
12205
12647
|
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);
|
|
12206
12648
|
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);
|
|
12207
12649
|
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) {
|
|
@@ -12220,7 +12662,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
12220
12662
|
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);
|
|
12221
12663
|
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);
|
|
12222
12664
|
|
|
12223
|
-
var _excluded$
|
|
12665
|
+
var _excluded$t = ["text"],
|
|
12224
12666
|
_excluded2$4 = ["text"];
|
|
12225
12667
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
12226
12668
|
var title = _ref.title,
|
|
@@ -12230,7 +12672,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12230
12672
|
message = _ref.message;
|
|
12231
12673
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
12232
12674
|
primaryButtonText = _ref2.text,
|
|
12233
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
12675
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
|
|
12234
12676
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
12235
12677
|
secondaryButtonText = _ref3.text,
|
|
12236
12678
|
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
|
|
@@ -12251,11 +12693,11 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12251
12693
|
}, message))));
|
|
12252
12694
|
};
|
|
12253
12695
|
|
|
12254
|
-
var _templateObject$
|
|
12255
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12256
|
-
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$
|
|
12257
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12258
|
-
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$
|
|
12696
|
+
var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$L;
|
|
12697
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1v || (_templateObject$1v = /*#__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);
|
|
12698
|
+
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$1a || (_templateObject2$1a = /*#__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);
|
|
12699
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$W || (_templateObject3$W = /*#__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);
|
|
12700
|
+
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);
|
|
12259
12701
|
|
|
12260
12702
|
var UpsellSection = function UpsellSection(_ref) {
|
|
12261
12703
|
var title = _ref.title,
|
|
@@ -12300,9 +12742,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12300
12742
|
})))));
|
|
12301
12743
|
};
|
|
12302
12744
|
|
|
12303
|
-
var _templateObject$
|
|
12304
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12305
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
12745
|
+
var _templateObject$1w, _templateObject2$1b;
|
|
12746
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
12747
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$1b || (_templateObject2$1b = /*#__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) {
|
|
12306
12748
|
var bottomBorder = _ref.bottomBorder;
|
|
12307
12749
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12308
12750
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12333,13 +12775,13 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12333
12775
|
}, children)));
|
|
12334
12776
|
};
|
|
12335
12777
|
|
|
12336
|
-
var _templateObject$
|
|
12337
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12338
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
12339
|
-
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12340
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
12778
|
+
var _templateObject$1x, _templateObject2$1c, _templateObject3$X, _templateObject4$M;
|
|
12779
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1x || (_templateObject$1x = /*#__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);
|
|
12780
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$1c || (_templateObject2$1c = /*#__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);
|
|
12781
|
+
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
12782
|
+
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"])));
|
|
12341
12783
|
|
|
12342
|
-
var _excluded$
|
|
12784
|
+
var _excluded$u = ["isOpen", "setIsOpen", "children", "appElementId", "closeButtonAriaLabel"];
|
|
12343
12785
|
var MAX_Z_INDEX = 9999999999;
|
|
12344
12786
|
if (Modal.defaultStyles.content) {
|
|
12345
12787
|
Modal.defaultStyles.content.position = 'static';
|
|
@@ -12415,7 +12857,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
12415
12857
|
appElementId = _ref.appElementId,
|
|
12416
12858
|
_ref$closeButtonAriaL = _ref.closeButtonAriaLabel,
|
|
12417
12859
|
closeButtonAriaLabel = _ref$closeButtonAriaL === void 0 ? 'Close modal window' : _ref$closeButtonAriaL,
|
|
12418
|
-
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12860
|
+
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
|
|
12419
12861
|
var isMobile = useMobile();
|
|
12420
12862
|
var customStyles = {
|
|
12421
12863
|
overlay: {
|
|
@@ -12544,27 +12986,27 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12544
12986
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12545
12987
|
};
|
|
12546
12988
|
|
|
12547
|
-
var _templateObject$
|
|
12548
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12989
|
+
var _templateObject$1y, _templateObject2$1d, _templateObject3$Y, _templateObject4$N, _templateObject5$F, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$b;
|
|
12990
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1y || (_templateObject$1y = /*#__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) {
|
|
12549
12991
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12550
12992
|
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 }";
|
|
12551
12993
|
}, devices.mobile, function (_ref2) {
|
|
12552
12994
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12553
12995
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12554
12996
|
});
|
|
12555
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12997
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$1d || (_templateObject2$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12556
12998
|
var type = _ref3.type,
|
|
12557
12999
|
isActive = _ref3.isActive;
|
|
12558
13000
|
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 ";
|
|
12559
13001
|
});
|
|
12560
|
-
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
12561
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12562
|
-
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
13002
|
+
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$Y || (_templateObject3$Y = /*#__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);
|
|
13003
|
+
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"])));
|
|
13004
|
+
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12563
13005
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12564
13006
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12565
13007
|
});
|
|
12566
13008
|
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-top: 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"])));
|
|
12567
|
-
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"])));
|
|
13009
|
+
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\n @media ", " {\n margin-right: var(--navigation-middle-gap);\n }\n"])), devices.mobile);
|
|
12568
13010
|
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12569
13011
|
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) {
|
|
12570
13012
|
var active = _ref5.active;
|
|
@@ -12836,17 +13278,17 @@ var Carousel = function Carousel(_ref) {
|
|
|
12836
13278
|
}, children))));
|
|
12837
13279
|
};
|
|
12838
13280
|
|
|
12839
|
-
var _templateObject$
|
|
12840
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
12841
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12842
|
-
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12843
|
-
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12844
|
-
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
13281
|
+
var _templateObject$1z, _templateObject2$1e, _templateObject3$Z, _templateObject4$O, _templateObject5$G, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
13282
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1z || (_templateObject$1z = /*#__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);
|
|
13283
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$1e || (_templateObject2$1e = /*#__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);
|
|
13284
|
+
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
13285
|
+
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);
|
|
13286
|
+
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$G || (_templateObject5$G = /*#__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);
|
|
12845
13287
|
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"])));
|
|
12846
13288
|
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);
|
|
12847
13289
|
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);
|
|
12848
13290
|
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);
|
|
12849
|
-
var RotatorButtonsWrapper$
|
|
13291
|
+
var RotatorButtonsWrapper$3 = /*#__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);
|
|
12850
13292
|
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);
|
|
12851
13293
|
var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
12852
13294
|
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);
|
|
@@ -12859,7 +13301,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject1
|
|
|
12859
13301
|
}, devices.mobile);
|
|
12860
13302
|
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);
|
|
12861
13303
|
|
|
12862
|
-
var _excluded$
|
|
13304
|
+
var _excluded$v = ["text"],
|
|
12863
13305
|
_excluded2$5 = ["text"];
|
|
12864
13306
|
var _buttonTypeToButton$2;
|
|
12865
13307
|
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);
|
|
@@ -12870,7 +13312,7 @@ var Buttons = function Buttons(_ref) {
|
|
|
12870
13312
|
var _ref2 = firstButton || {},
|
|
12871
13313
|
_ref2$text = _ref2.text,
|
|
12872
13314
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
12873
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
13315
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$v);
|
|
12874
13316
|
var secondButton = links == null ? void 0 : links[1];
|
|
12875
13317
|
var _ref3 = secondButton || {},
|
|
12876
13318
|
_ref3$text = _ref3.text,
|
|
@@ -13096,7 +13538,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13096
13538
|
auxiliaryCTA: auxiliaryCTA
|
|
13097
13539
|
})), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
|
|
13098
13540
|
"data-testid": "carousel-wrapper"
|
|
13099
|
-
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$
|
|
13541
|
+
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$3, {
|
|
13100
13542
|
"data-testid": "rotator-buttons"
|
|
13101
13543
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
13102
13544
|
onClickNext: onNext,
|
|
@@ -13113,11 +13555,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13113
13555
|
})));
|
|
13114
13556
|
};
|
|
13115
13557
|
|
|
13116
|
-
var _excluded$
|
|
13558
|
+
var _excluded$w = ["logo", "slides"];
|
|
13117
13559
|
var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
13118
13560
|
var logo = _ref.logo,
|
|
13119
13561
|
slides = _ref.slides,
|
|
13120
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
13562
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
|
|
13121
13563
|
var slidesWithLinks = slides.map(function (slide) {
|
|
13122
13564
|
var links = processSlideLinks(slide.links);
|
|
13123
13565
|
return _extends({}, slide, {
|
|
@@ -13134,10 +13576,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
|
13134
13576
|
})));
|
|
13135
13577
|
};
|
|
13136
13578
|
|
|
13137
|
-
var _excluded$
|
|
13579
|
+
var _excluded$x = ["slides"];
|
|
13138
13580
|
var HighlightsCore = function HighlightsCore(_ref) {
|
|
13139
13581
|
var slides = _ref.slides,
|
|
13140
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
13582
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
|
|
13141
13583
|
var slidesWithLinks = slides.map(function (slide) {
|
|
13142
13584
|
var links = processSlideLinks(slide.links);
|
|
13143
13585
|
return _extends({}, slide, {
|
|
@@ -13151,11 +13593,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
|
|
|
13151
13593
|
})));
|
|
13152
13594
|
};
|
|
13153
13595
|
|
|
13154
|
-
var _excluded$
|
|
13596
|
+
var _excluded$y = ["logo", "slides"];
|
|
13155
13597
|
var HighlightsStream = function HighlightsStream(_ref) {
|
|
13156
13598
|
var logo = _ref.logo,
|
|
13157
13599
|
slides = _ref.slides,
|
|
13158
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
13600
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
|
|
13159
13601
|
var slidesWithLinks = slides.map(function (slide) {
|
|
13160
13602
|
var links = processSlideLinks(slide.links);
|
|
13161
13603
|
return _extends({}, slide, {
|
|
@@ -13172,9 +13614,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13172
13614
|
})));
|
|
13173
13615
|
};
|
|
13174
13616
|
|
|
13175
|
-
var _templateObject$
|
|
13176
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
13177
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
13617
|
+
var _templateObject$1A, _templateObject3$_;
|
|
13618
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1A || (_templateObject$1A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
13619
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$_ || (_templateObject3$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13178
13620
|
|
|
13179
13621
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13180
13622
|
var children = _ref.children;
|
|
@@ -13769,8 +14211,8 @@ var Theme = function Theme(_ref) {
|
|
|
13769
14211
|
}, children);
|
|
13770
14212
|
};
|
|
13771
14213
|
|
|
13772
|
-
var _templateObject$
|
|
13773
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1z || (_templateObject$1z = /*#__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) {
|
|
14214
|
+
var _templateObject$1B;
|
|
14215
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1B || (_templateObject$1B = /*#__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) {
|
|
13774
14216
|
var theme = _ref.theme;
|
|
13775
14217
|
return theme.colors.primary;
|
|
13776
14218
|
}, function (_ref2) {
|
|
@@ -14736,6 +15178,7 @@ exports.Card = Card;
|
|
|
14736
15178
|
exports.Cards = Cards;
|
|
14737
15179
|
exports.Carousel = Carousel;
|
|
14738
15180
|
exports.CastFilter = CastFilters;
|
|
15181
|
+
exports.CastFilterVariant = CastFiltersVariant;
|
|
14739
15182
|
exports.CinemaBadge = CinemaBadge;
|
|
14740
15183
|
exports.ContactCard = ContactCard;
|
|
14741
15184
|
exports.ContactNewsletter = ContactNewsletter;
|
|
@@ -14743,6 +15186,7 @@ exports.ContentSummary = ContentSummary;
|
|
|
14743
15186
|
exports.ControlledDropdown = ControlledDropdown;
|
|
14744
15187
|
exports.CreditListing = CreditListing;
|
|
14745
15188
|
exports.CustomStrategyTabsFilter = CustomStrategyTabsFilter;
|
|
15189
|
+
exports.DisplayHeader = DisplayHeader;
|
|
14746
15190
|
exports.Dropdown = Dropdown;
|
|
14747
15191
|
exports.Editorial = Editorial;
|
|
14748
15192
|
exports.Footer = Footer;
|