@royaloperahouse/harmonic 1.0.8 → 1.0.9-b
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
package/dist/harmonic.esm.js
CHANGED
|
@@ -228,6 +228,26 @@ styleInject(css_248z);
|
|
|
228
228
|
var _excluded = ["children", "size", "em", "color", "serif", "hierarchy", "tag", "className"],
|
|
229
229
|
_excluded2 = ["children", "size", "color", "className", "bold", "tag"],
|
|
230
230
|
_excluded3 = ["children", "size", "color", "className"];
|
|
231
|
+
/* ~~~ Display - (use case) ~~~ */
|
|
232
|
+
var DisplayHeader = function DisplayHeader(_ref) {
|
|
233
|
+
var children = _ref.children,
|
|
234
|
+
size = _ref.size,
|
|
235
|
+
em = _ref.em,
|
|
236
|
+
_ref$color = _ref.color,
|
|
237
|
+
color = _ref$color === void 0 ? 'inherit' : _ref$color,
|
|
238
|
+
serif = _ref.serif,
|
|
239
|
+
className = _ref.className;
|
|
240
|
+
var classNames = createClassNames('display', {
|
|
241
|
+
size: size,
|
|
242
|
+
color: color,
|
|
243
|
+
serif: serif,
|
|
244
|
+
em: em,
|
|
245
|
+
className: className
|
|
246
|
+
}, typographyStyles);
|
|
247
|
+
return /*#__PURE__*/React__default.createElement("h1", {
|
|
248
|
+
className: classNames
|
|
249
|
+
}, children);
|
|
250
|
+
};
|
|
231
251
|
/* ~~~ Headers - size and hierarchy set separately ~~~ */
|
|
232
252
|
var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
233
253
|
var _ref3;
|
|
@@ -764,6 +784,40 @@ var Tick = (function (_ref) {
|
|
|
764
784
|
}));
|
|
765
785
|
});
|
|
766
786
|
|
|
787
|
+
var Expand16px = (function (_ref) {
|
|
788
|
+
var _ref$color = _ref.color,
|
|
789
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
|
|
790
|
+
ariaLabel = _ref.ariaLabel;
|
|
791
|
+
return /*#__PURE__*/createElement("svg", {
|
|
792
|
+
width: "16",
|
|
793
|
+
height: "16",
|
|
794
|
+
viewBox: "1.5 1.5 9.5 9.5",
|
|
795
|
+
fill: "none",
|
|
796
|
+
"aria-label": ariaLabel,
|
|
797
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
798
|
+
}, /*#__PURE__*/createElement("path", {
|
|
799
|
+
d: "M6.44531 6.08203V1.83203H5.94531V6.08203H1.69531V6.58203H5.94531V10.832H6.44531V6.58203H10.6953V6.08203H6.44531Z",
|
|
800
|
+
fill: color
|
|
801
|
+
}));
|
|
802
|
+
});
|
|
803
|
+
|
|
804
|
+
var Remove16px = (function (_ref) {
|
|
805
|
+
var _ref$color = _ref.color,
|
|
806
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
|
|
807
|
+
ariaLabel = _ref.ariaLabel;
|
|
808
|
+
return /*#__PURE__*/createElement("svg", {
|
|
809
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
810
|
+
viewBox: "1.5 1.2 10.5 10.5",
|
|
811
|
+
width: "16",
|
|
812
|
+
height: "16",
|
|
813
|
+
fill: "none",
|
|
814
|
+
"aria-label": ariaLabel
|
|
815
|
+
}, /*#__PURE__*/createElement("g", null, /*#__PURE__*/createElement("path", {
|
|
816
|
+
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",
|
|
817
|
+
fill: color
|
|
818
|
+
})));
|
|
819
|
+
});
|
|
820
|
+
|
|
767
821
|
var AddToMyList = (function (_ref) {
|
|
768
822
|
var _ref$color = _ref.color,
|
|
769
823
|
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
|
|
@@ -2608,6 +2662,7 @@ var IconLibrary = {
|
|
|
2608
2662
|
Email: Email,
|
|
2609
2663
|
Expand: Expand,
|
|
2610
2664
|
Expand12px: Expand12px,
|
|
2665
|
+
Expand16px: Expand16px,
|
|
2611
2666
|
ExternalLink: ExternalLink,
|
|
2612
2667
|
Facebook: Facebook,
|
|
2613
2668
|
FamilyFriendly: FamilyFriendly,
|
|
@@ -2645,6 +2700,7 @@ var IconLibrary = {
|
|
|
2645
2700
|
Reminder: Reminder,
|
|
2646
2701
|
Remove: Remove,
|
|
2647
2702
|
Remove12px: Remove12px,
|
|
2703
|
+
Remove16px: Remove16px,
|
|
2648
2704
|
Restart: Restart,
|
|
2649
2705
|
Search: Search,
|
|
2650
2706
|
Seat: Seat,
|
|
@@ -2715,6 +2771,7 @@ var Tab = function Tab(_ref) {
|
|
|
2715
2771
|
className = _ref.className,
|
|
2716
2772
|
role = _ref.role,
|
|
2717
2773
|
ariaLabel = _ref.ariaLabel,
|
|
2774
|
+
tabLinkId = _ref.tabLinkId,
|
|
2718
2775
|
color = _ref.color,
|
|
2719
2776
|
dataTestId = _ref.dataTestId,
|
|
2720
2777
|
isOpen = _ref.isOpen;
|
|
@@ -2749,8 +2806,9 @@ var Tab = function Tab(_ref) {
|
|
|
2749
2806
|
className: className,
|
|
2750
2807
|
"data-testid": dataTestId
|
|
2751
2808
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
2752
|
-
|
|
2809
|
+
id: tabLinkId,
|
|
2753
2810
|
trimText: trimText,
|
|
2811
|
+
color: color,
|
|
2754
2812
|
withTextInMobile: withTextInMobile,
|
|
2755
2813
|
"aria-hidden": "true"
|
|
2756
2814
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -2780,6 +2838,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2780
2838
|
className = _ref.className,
|
|
2781
2839
|
role = _ref.role,
|
|
2782
2840
|
ariaLabel = _ref.ariaLabel,
|
|
2841
|
+
tabLinkId = _ref.tabLinkId,
|
|
2783
2842
|
trimTabText = _ref.trimTabText;
|
|
2784
2843
|
var node = useRef();
|
|
2785
2844
|
var _useState = useState(false),
|
|
@@ -2876,6 +2935,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2876
2935
|
};
|
|
2877
2936
|
var renderTab = function renderTab() {
|
|
2878
2937
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
2938
|
+
tabLinkId: tabLinkId,
|
|
2879
2939
|
trimText: trimTabText,
|
|
2880
2940
|
title: title,
|
|
2881
2941
|
titleLink: titleLink,
|
|
@@ -2955,7 +3015,8 @@ var Account = function Account(_ref) {
|
|
|
2955
3015
|
iconName: iconName,
|
|
2956
3016
|
withOptionsInMobile: false,
|
|
2957
3017
|
withIcon: "left",
|
|
2958
|
-
className: className
|
|
3018
|
+
className: className,
|
|
3019
|
+
tabLinkId: "account-link"
|
|
2959
3020
|
});
|
|
2960
3021
|
};
|
|
2961
3022
|
|
|
@@ -5518,22 +5579,28 @@ var NavTopContainer = /*#__PURE__*/styled.div(_templateObject12 || (_templateObj
|
|
|
5518
5579
|
var NavTopContainerMobile = /*#__PURE__*/styled.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);
|
|
5519
5580
|
|
|
5520
5581
|
var _templateObject$B, _templateObject2$q, _templateObject3$f, _templateObject4$e, _templateObject5$a, _templateObject6$6, _templateObject7$4;
|
|
5521
|
-
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n border-top:
|
|
5522
|
-
var
|
|
5523
|
-
return
|
|
5582
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n border-top: ", ";\n border-bottom: ", ";\n"])), function (_ref) {
|
|
5583
|
+
var showTopLine = _ref.showTopLine;
|
|
5584
|
+
return showTopLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5585
|
+
}, function (_ref2) {
|
|
5586
|
+
var showBottomLine = _ref2.showBottomLine;
|
|
5587
|
+
return showBottomLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5524
5588
|
});
|
|
5525
|
-
var ChildrenContainer = /*#__PURE__*/styled.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 (
|
|
5526
|
-
var isVisible = _ref2.isVisible;
|
|
5527
|
-
return isVisible ? 1 : 0;
|
|
5528
|
-
}, function (_ref3) {
|
|
5589
|
+
var ChildrenContainer = /*#__PURE__*/styled.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) {
|
|
5529
5590
|
var isVisible = _ref3.isVisible;
|
|
5591
|
+
return isVisible ? 1 : 0;
|
|
5592
|
+
}, function (_ref4) {
|
|
5593
|
+
var isVisible = _ref4.isVisible;
|
|
5530
5594
|
return isVisible ? 'auto' : 'none';
|
|
5531
5595
|
}, devices.mobile);
|
|
5532
|
-
var TitleContainer$1 = /*#__PURE__*/styled.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 (
|
|
5533
|
-
var
|
|
5596
|
+
var TitleContainer$1 = /*#__PURE__*/styled.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) {
|
|
5597
|
+
var titleMargin = _ref5.titleMargin;
|
|
5598
|
+
return titleMargin || '0';
|
|
5599
|
+
}, function (_ref6) {
|
|
5600
|
+
var hasChildren = _ref6.hasChildren;
|
|
5534
5601
|
return hasChildren ? 'pointer' : 'default';
|
|
5535
|
-
}, function (
|
|
5536
|
-
var hasChildren =
|
|
5602
|
+
}, function (_ref7) {
|
|
5603
|
+
var hasChildren = _ref7.hasChildren;
|
|
5537
5604
|
return hasChildren ? 'auto' : 'none';
|
|
5538
5605
|
}, devices.mobile);
|
|
5539
5606
|
var TitleText = /*#__PURE__*/styled(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"])));
|
|
@@ -5542,14 +5609,14 @@ var ContentContainer = /*#__PURE__*/styled(ExtendedBodyCopyHarmonic).withConfig(
|
|
|
5542
5609
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5543
5610
|
return prop !== 'textHeight';
|
|
5544
5611
|
}
|
|
5545
|
-
})(_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 (
|
|
5546
|
-
var textHeight =
|
|
5612
|
+
})(_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) {
|
|
5613
|
+
var textHeight = _ref8.textHeight;
|
|
5547
5614
|
return textHeight;
|
|
5548
|
-
}, function (
|
|
5549
|
-
var textHeight =
|
|
5615
|
+
}, function (_ref9) {
|
|
5616
|
+
var textHeight = _ref9.textHeight;
|
|
5550
5617
|
return textHeight === '0px' ? 'hidden' : 'visible';
|
|
5551
|
-
}, function (
|
|
5552
|
-
var textHeight =
|
|
5618
|
+
}, function (_ref0) {
|
|
5619
|
+
var textHeight = _ref0.textHeight;
|
|
5553
5620
|
return textHeight === '0px' ? '0px' : '12px';
|
|
5554
5621
|
}, devices.mobile);
|
|
5555
5622
|
var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
@@ -5571,14 +5638,19 @@ var Accordion = function Accordion(_ref) {
|
|
|
5571
5638
|
var _expandedStateIcon$ic, _collapsedStateIcon$i;
|
|
5572
5639
|
var _ref$title = _ref.title,
|
|
5573
5640
|
title = _ref$title === void 0 ? '' : _ref$title,
|
|
5574
|
-
_ref$
|
|
5575
|
-
|
|
5641
|
+
_ref$showTopLine = _ref.showTopLine,
|
|
5642
|
+
showTopLine = _ref$showTopLine === void 0 ? true : _ref$showTopLine,
|
|
5643
|
+
_ref$showBottomLine = _ref.showBottomLine,
|
|
5644
|
+
showBottomLine = _ref$showBottomLine === void 0 ? true : _ref$showBottomLine,
|
|
5576
5645
|
children = _ref.children,
|
|
5646
|
+
visibleStandfirst = _ref.visibleStandfirst,
|
|
5577
5647
|
_ref$initOpen = _ref.initOpen,
|
|
5578
5648
|
initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
|
|
5579
5649
|
className = _ref.className,
|
|
5580
5650
|
expandedStateIcon = _ref.expandedStateIcon,
|
|
5581
|
-
collapsedStateIcon = _ref.collapsedStateIcon
|
|
5651
|
+
collapsedStateIcon = _ref.collapsedStateIcon,
|
|
5652
|
+
childrenContainerStyle = _ref.childrenContainerStyle,
|
|
5653
|
+
titleMargin = _ref.titleMargin;
|
|
5582
5654
|
var _useState = useState(initOpen),
|
|
5583
5655
|
openAccordion = _useState[0],
|
|
5584
5656
|
setOpenAccordion = _useState[1];
|
|
@@ -5689,6 +5761,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
5689
5761
|
var toggleAccordion = function toggleAccordion() {
|
|
5690
5762
|
if (React__default.Children.count(children) === 0) return;
|
|
5691
5763
|
if (openAccordion) {
|
|
5764
|
+
setIcon(collapsedStateIconData);
|
|
5692
5765
|
setOpenAccordion(false);
|
|
5693
5766
|
setTextHeight('0px');
|
|
5694
5767
|
setIcon(collapsedStateIconData);
|
|
@@ -5711,9 +5784,16 @@ var Accordion = function Accordion(_ref) {
|
|
|
5711
5784
|
toggleAccordion();
|
|
5712
5785
|
}
|
|
5713
5786
|
};
|
|
5787
|
+
var Standfirst = function Standfirst() {
|
|
5788
|
+
return visibleStandfirst ? (/*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
5789
|
+
style: childrenContainerStyle,
|
|
5790
|
+
isVisible: true
|
|
5791
|
+
}, visibleStandfirst))) : null;
|
|
5792
|
+
};
|
|
5714
5793
|
var contentContainerId = title + "-accordion-content";
|
|
5715
5794
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, {
|
|
5716
|
-
|
|
5795
|
+
showTopLine: showTopLine,
|
|
5796
|
+
showBottomLine: showBottomLine,
|
|
5717
5797
|
className: className
|
|
5718
5798
|
}, /*#__PURE__*/React__default.createElement(TitleContainer$1, {
|
|
5719
5799
|
onClick: toggleAccordion,
|
|
@@ -5723,8 +5803,9 @@ var Accordion = function Accordion(_ref) {
|
|
|
5723
5803
|
"aria-label": title,
|
|
5724
5804
|
"aria-expanded": openAccordion,
|
|
5725
5805
|
"aria-controls": contentContainerId,
|
|
5726
|
-
hasChildren: !!children
|
|
5727
|
-
|
|
5806
|
+
hasChildren: !!children,
|
|
5807
|
+
titleMargin: titleMargin
|
|
5808
|
+
}, /*#__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, {
|
|
5728
5809
|
"data-testid": "richcontainer",
|
|
5729
5810
|
ref: content,
|
|
5730
5811
|
textHeight: textHeight,
|
|
@@ -5732,9 +5813,10 @@ var Accordion = function Accordion(_ref) {
|
|
|
5732
5813
|
"aria-live": openAccordion ? 'polite' : 'off',
|
|
5733
5814
|
tag: "div",
|
|
5734
5815
|
size: "large"
|
|
5735
|
-
}, childrenVisibility && /*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
5736
|
-
isVisible: childrenVisibility
|
|
5737
|
-
|
|
5816
|
+
}, childrenVisibility && (/*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
5817
|
+
isVisible: childrenVisibility,
|
|
5818
|
+
style: childrenContainerStyle
|
|
5819
|
+
}, children))));
|
|
5738
5820
|
};
|
|
5739
5821
|
|
|
5740
5822
|
var _templateObject$C;
|
|
@@ -5753,9 +5835,12 @@ var Accordions = function Accordions(_ref) {
|
|
|
5753
5835
|
return /*#__PURE__*/React__default.createElement(Accordion, {
|
|
5754
5836
|
key: accordion.title + "-" + index,
|
|
5755
5837
|
title: accordion.title,
|
|
5756
|
-
|
|
5838
|
+
showBottomLine: isLastAccordion(index),
|
|
5757
5839
|
expandedStateIcon: accordion.expandedStateIcon,
|
|
5758
|
-
collapsedStateIcon: accordion.collapsedStateIcon
|
|
5840
|
+
collapsedStateIcon: accordion.collapsedStateIcon,
|
|
5841
|
+
visibleStandfirst: accordion.visibleStandfirst,
|
|
5842
|
+
titleMargin: accordion.titleMargin,
|
|
5843
|
+
childrenContainerStyle: accordion.childrenContainerStyle
|
|
5759
5844
|
}, accordion.children);
|
|
5760
5845
|
}));
|
|
5761
5846
|
};
|
|
@@ -6041,14 +6126,9 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
6041
6126
|
_ref2$renderGridItem = _ref2.renderGridItem,
|
|
6042
6127
|
renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
|
|
6043
6128
|
var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
|
|
6044
|
-
var content = /*#__PURE__*/React__default.createElement(
|
|
6045
|
-
tag: "div",
|
|
6046
|
-
size: "large",
|
|
6047
|
-
"data-testid": "text-container",
|
|
6129
|
+
var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
|
|
6048
6130
|
className: textContainerClassName,
|
|
6049
|
-
|
|
6050
|
-
__html: addTypographyClasses(text)
|
|
6051
|
-
}
|
|
6131
|
+
html: text
|
|
6052
6132
|
});
|
|
6053
6133
|
var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
6054
6134
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -6083,7 +6163,7 @@ var CardContainer = /*#__PURE__*/styled.div(_templateObject$G || (_templateObjec
|
|
|
6083
6163
|
return isCardClickable ? 'pointer' : 'default';
|
|
6084
6164
|
}, function (_ref2) {
|
|
6085
6165
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
6086
|
-
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between
|
|
6166
|
+
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n " : '';
|
|
6087
6167
|
});
|
|
6088
6168
|
var HoverContainer = /*#__PURE__*/styled.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) {
|
|
6089
6169
|
var lineColor = _ref3.lineColor;
|
|
@@ -6116,7 +6196,7 @@ var ExtraActionsContainer = /*#__PURE__*/styled.div(_templateObject1$1 || (_temp
|
|
|
6116
6196
|
var fullWidth = _ref9.fullWidth;
|
|
6117
6197
|
return fullWidth ? '0' : '20px';
|
|
6118
6198
|
});
|
|
6119
|
-
var LabelElements = /*#__PURE__*/styled.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) {
|
|
6199
|
+
var LabelElements = /*#__PURE__*/styled.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) {
|
|
6120
6200
|
var bgColor = _ref0.bgColor;
|
|
6121
6201
|
return bgColor ? "var(--color-base-" + bgColor + ")" : 'var(--color-primary-background)';
|
|
6122
6202
|
});
|
|
@@ -6415,13 +6495,13 @@ var Cards = function Cards(_ref) {
|
|
|
6415
6495
|
};
|
|
6416
6496
|
|
|
6417
6497
|
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;
|
|
6418
|
-
var CastFiltersComponentWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n
|
|
6498
|
+
var CastFiltersComponentWrapper = /*#__PURE__*/styled.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);
|
|
6419
6499
|
var CastFiltersWrapper = /*#__PURE__*/styled.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);
|
|
6420
6500
|
var HeadingTextWrapper = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
|
|
6421
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["
|
|
6501
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
6422
6502
|
var CastWrapper = /*#__PURE__*/styled.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);
|
|
6423
|
-
var ActionButtons = /*#__PURE__*/styled.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
|
|
6424
|
-
var PersonWrapper = /*#__PURE__*/styled.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
|
|
6503
|
+
var ActionButtons = /*#__PURE__*/styled.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);
|
|
6504
|
+
var PersonWrapper = /*#__PURE__*/styled.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);
|
|
6425
6505
|
var PersonToggle = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n width: 86px;\n height: 86px;\n min-width: 86px;\n border: 4px solid;\n border-color: ", ";\n border-radius: 50%;\n background: var(--color-base-white);\n position: relative;\n box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
|
|
6426
6506
|
var isSelected = _ref.isSelected;
|
|
6427
6507
|
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
@@ -6433,7 +6513,7 @@ var PersonImage = /*#__PURE__*/styled.img(_templateObject9$3 || (_templateObject
|
|
|
6433
6513
|
var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
|
|
6434
6514
|
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6435
6515
|
});
|
|
6436
|
-
var PersonName = /*#__PURE__*/styled.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n
|
|
6516
|
+
var PersonName = /*#__PURE__*/styled.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n"])));
|
|
6437
6517
|
var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (_ref4) {
|
|
6438
6518
|
var isSelected = _ref4.isSelected;
|
|
6439
6519
|
return isSelected ? 'flex' : 'none';
|
|
@@ -6443,12 +6523,18 @@ var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 =
|
|
|
6443
6523
|
});
|
|
6444
6524
|
var EmptySelectionTextSpacer = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
|
|
6445
6525
|
|
|
6526
|
+
var _templateObject$J, _templateObject2$w, _templateObject3$k, _templateObject5$f;
|
|
6527
|
+
var CastFiltersComponentWrapper$1 = /*#__PURE__*/styled(CastFiltersComponentWrapper)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n flex-direction: column-reverse;\n }\n"])), devices.mobile);
|
|
6528
|
+
var RotatorButtonsWrapper$1 = /*#__PURE__*/styled(RotatorButtonsWrapper)(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6529
|
+
var PersonWrapper$1 = /*#__PURE__*/styled(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);
|
|
6530
|
+
var ActionButtons$1 = /*#__PURE__*/styled(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);
|
|
6531
|
+
|
|
6446
6532
|
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";
|
|
6447
6533
|
|
|
6448
|
-
var _templateObject$
|
|
6534
|
+
var _templateObject$K, _templateObject2$x;
|
|
6449
6535
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
6450
|
-
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6451
|
-
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$
|
|
6536
|
+
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
6537
|
+
var SwipeTrack = /*#__PURE__*/styled.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) {
|
|
6452
6538
|
var transitioning = _ref.transitioning;
|
|
6453
6539
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
6454
6540
|
}, function (_ref2) {
|
|
@@ -7021,6 +7107,269 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7021
7107
|
}
|
|
7022
7108
|
}, [onClear]);
|
|
7023
7109
|
var showActionButtonsSection = onApply || onClear || emptySelectionText;
|
|
7110
|
+
var getPersonCards = function getPersonCards() {
|
|
7111
|
+
return cast.map(function (person, index) {
|
|
7112
|
+
var name = person.name,
|
|
7113
|
+
image = person.image,
|
|
7114
|
+
_onClick = person.onClick,
|
|
7115
|
+
ariaLabel = person['aria-label'];
|
|
7116
|
+
var personSelectionId = getCastItemSelectionId(person);
|
|
7117
|
+
var isSelected = isIdSelectionMode ? selectedIdsSet.has(personSelectionId) : selectedIndices.includes(index);
|
|
7118
|
+
var personImage = image || placeholderImage || defaultPlaceholderImage;
|
|
7119
|
+
return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
7120
|
+
key: personSelectionId,
|
|
7121
|
+
"aria-selected": isSelected,
|
|
7122
|
+
"aria-label": ariaLabel != null ? ariaLabel : name,
|
|
7123
|
+
role: "option",
|
|
7124
|
+
tabIndex: 0,
|
|
7125
|
+
onClick: function onClick() {
|
|
7126
|
+
return handleClick(index, personSelectionId, _onClick);
|
|
7127
|
+
},
|
|
7128
|
+
onKeyDown: function onKeyDown(e) {
|
|
7129
|
+
return handlePersonKeydown(e, index, personSelectionId, _onClick);
|
|
7130
|
+
}
|
|
7131
|
+
}, /*#__PURE__*/React__default.createElement(PersonToggle, {
|
|
7132
|
+
isSelected: isSelected,
|
|
7133
|
+
"aria-hidden": "true"
|
|
7134
|
+
}, /*#__PURE__*/React__default.createElement(PersonImage, {
|
|
7135
|
+
src: personImage,
|
|
7136
|
+
alt: "",
|
|
7137
|
+
draggable: false,
|
|
7138
|
+
isDefaultPlaceholder: !(!!image || !!placeholderImage),
|
|
7139
|
+
greyscale: greyscale
|
|
7140
|
+
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7141
|
+
isSelected: isSelected
|
|
7142
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7143
|
+
iconName: "Confirm",
|
|
7144
|
+
color: "white"
|
|
7145
|
+
}))), /*#__PURE__*/React__default.createElement(PersonName, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7146
|
+
size: "medium"
|
|
7147
|
+
}, name)));
|
|
7148
|
+
});
|
|
7149
|
+
};
|
|
7150
|
+
return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper$1, {
|
|
7151
|
+
className: className
|
|
7152
|
+
}, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, headingText && (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
7153
|
+
columnStartDesktop: 1,
|
|
7154
|
+
columnSpanDesktop: 10,
|
|
7155
|
+
columnStartDevice: 1,
|
|
7156
|
+
columnSpanDevice: 9
|
|
7157
|
+
}, /*#__PURE__*/React__default.createElement(HeadingTextWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7158
|
+
size: "large"
|
|
7159
|
+
}, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
|
|
7160
|
+
columnStartDesktop: 16,
|
|
7161
|
+
columnSpanDesktop: 2
|
|
7162
|
+
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
7163
|
+
size: "small",
|
|
7164
|
+
onClickNext: onNext,
|
|
7165
|
+
onClickPrev: onPrev,
|
|
7166
|
+
availablePrev: availablePrev,
|
|
7167
|
+
availableNext: availableNext
|
|
7168
|
+
})))), /*#__PURE__*/React__default.createElement(CastWrapper, {
|
|
7169
|
+
ref: castWrapperRef,
|
|
7170
|
+
role: "listbox",
|
|
7171
|
+
"aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
|
|
7172
|
+
"aria-label": "filter list",
|
|
7173
|
+
"aria-multiselectable": "true",
|
|
7174
|
+
onMouseDown: handleMouseDown,
|
|
7175
|
+
onMouseMove: handleMouseMove,
|
|
7176
|
+
onMouseUp: handleMouseUp,
|
|
7177
|
+
onMouseLeave: handleMouseLeave
|
|
7178
|
+
}, isMobile ? getPersonCards() : (/*#__PURE__*/React__default.createElement(Swipe, {
|
|
7179
|
+
onIndexChange: onIndexChangeHandler,
|
|
7180
|
+
"data-testid": "cast-filter-swipe",
|
|
7181
|
+
ref: swipeRef,
|
|
7182
|
+
onOverflowChange: handleOverflowChange,
|
|
7183
|
+
limitDragToNavigableRange: true
|
|
7184
|
+
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons$1, null, selectedStateIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7185
|
+
size: "medium",
|
|
7186
|
+
className: "mobile-only"
|
|
7187
|
+
}, 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, {
|
|
7188
|
+
onClick: function onClick() {
|
|
7189
|
+
if (onApply) onApply(selectedStateIndices);
|
|
7190
|
+
if (onApplyIds) onApplyIds(selectedStateIds);
|
|
7191
|
+
}
|
|
7192
|
+
}, ctaText != null ? ctaText : 'Apply')), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
|
|
7193
|
+
tabIndex: 0,
|
|
7194
|
+
role: "button",
|
|
7195
|
+
onClick: onClear,
|
|
7196
|
+
onKeyDown: handleClearKeydown
|
|
7197
|
+
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7198
|
+
};
|
|
7199
|
+
|
|
7200
|
+
var CastFiltersVariant = function CastFiltersVariant(_ref) {
|
|
7201
|
+
var cast = _ref.cast,
|
|
7202
|
+
headingText = _ref.headingText,
|
|
7203
|
+
ctaText = _ref.ctaText,
|
|
7204
|
+
textLinkText = _ref.textLinkText,
|
|
7205
|
+
emptySelectionText = _ref.emptySelectionText,
|
|
7206
|
+
placeholderImage = _ref.placeholderImage,
|
|
7207
|
+
listRoleDescription = _ref.listRoleDescription,
|
|
7208
|
+
className = _ref.className,
|
|
7209
|
+
onSelect = _ref.onSelect,
|
|
7210
|
+
onSelectId = _ref.onSelectId,
|
|
7211
|
+
onApply = _ref.onApply,
|
|
7212
|
+
onApplyIds = _ref.onApplyIds,
|
|
7213
|
+
onClear = _ref.onClear,
|
|
7214
|
+
_ref$greyscale = _ref.greyscale,
|
|
7215
|
+
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
7216
|
+
_ref$selectedIndices = _ref.selectedIndices,
|
|
7217
|
+
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices,
|
|
7218
|
+
selectedIds = _ref.selectedIds;
|
|
7219
|
+
var _useViewport = useViewport(),
|
|
7220
|
+
isMobile = _useViewport.isMobile;
|
|
7221
|
+
var castWrapperRef = useRef(null);
|
|
7222
|
+
var isDraggingRef = useRef(false);
|
|
7223
|
+
var startXRef = useRef(0);
|
|
7224
|
+
var scrollStartRef = useRef(0);
|
|
7225
|
+
var hasDraggedRef = useRef(false);
|
|
7226
|
+
var swipeRef = useRef(null);
|
|
7227
|
+
var _useState = useState(false),
|
|
7228
|
+
availablePrev = _useState[0],
|
|
7229
|
+
setAvailablePrev = _useState[1];
|
|
7230
|
+
var _useState2 = useState(cast.length > 1),
|
|
7231
|
+
availableNext = _useState2[0],
|
|
7232
|
+
setAvailableNext = _useState2[1];
|
|
7233
|
+
var _useState3 = useState(true),
|
|
7234
|
+
showRotatorButtons = _useState3[0],
|
|
7235
|
+
setShowRotatorButtons = _useState3[1];
|
|
7236
|
+
var onIndexChangeHandler = function onIndexChangeHandler(index) {
|
|
7237
|
+
setAvailablePrev(index > 0);
|
|
7238
|
+
setAvailableNext(function () {
|
|
7239
|
+
var _swipeRef$current$has, _swipeRef$current;
|
|
7240
|
+
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);
|
|
7241
|
+
});
|
|
7242
|
+
};
|
|
7243
|
+
useEffect(function () {
|
|
7244
|
+
setAvailablePrev(false);
|
|
7245
|
+
setAvailableNext(function () {
|
|
7246
|
+
var _swipeRef$current$has2, _swipeRef$current2;
|
|
7247
|
+
return (_swipeRef$current$has2 = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext()) != null ? _swipeRef$current$has2 : cast.length > 1;
|
|
7248
|
+
});
|
|
7249
|
+
}, [cast.length]);
|
|
7250
|
+
var handleOverflowChange = function handleOverflowChange(overflow) {
|
|
7251
|
+
var _swipeRef$current3;
|
|
7252
|
+
setShowRotatorButtons(overflow);
|
|
7253
|
+
var hasNext = (_swipeRef$current3 = swipeRef.current) == null ? void 0 : _swipeRef$current3.hasNext();
|
|
7254
|
+
if (typeof hasNext === 'boolean') {
|
|
7255
|
+
setAvailableNext(hasNext);
|
|
7256
|
+
} else {
|
|
7257
|
+
setAvailableNext(overflow);
|
|
7258
|
+
}
|
|
7259
|
+
};
|
|
7260
|
+
var onNext = function onNext() {
|
|
7261
|
+
var _swipeRef$current4;
|
|
7262
|
+
if (!availableNext) return;
|
|
7263
|
+
(_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.nextSlide();
|
|
7264
|
+
};
|
|
7265
|
+
var onPrev = function onPrev() {
|
|
7266
|
+
var _swipeRef$current5;
|
|
7267
|
+
if (!availablePrev) return;
|
|
7268
|
+
(_swipeRef$current5 = swipeRef.current) == null || _swipeRef$current5.prevSlide();
|
|
7269
|
+
};
|
|
7270
|
+
useEffect(function () {
|
|
7271
|
+
var el = castWrapperRef.current;
|
|
7272
|
+
if (!el) return undefined;
|
|
7273
|
+
var handleKeydown = function handleKeydown(e) {
|
|
7274
|
+
if (!el.contains(document.activeElement)) return;
|
|
7275
|
+
if (e.key === 'ArrowRight') {
|
|
7276
|
+
var _swipeRef$current6;
|
|
7277
|
+
e.preventDefault();
|
|
7278
|
+
(_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.nextSlide();
|
|
7279
|
+
} else if (e.key === 'ArrowLeft') {
|
|
7280
|
+
var _swipeRef$current7;
|
|
7281
|
+
e.preventDefault();
|
|
7282
|
+
(_swipeRef$current7 = swipeRef.current) == null || _swipeRef$current7.prevSlide();
|
|
7283
|
+
}
|
|
7284
|
+
};
|
|
7285
|
+
el.addEventListener('keydown', handleKeydown);
|
|
7286
|
+
return function () {
|
|
7287
|
+
return el.removeEventListener('keydown', handleKeydown);
|
|
7288
|
+
};
|
|
7289
|
+
}, []);
|
|
7290
|
+
var handleMouseDown = useCallback(function (e) {
|
|
7291
|
+
if (!isMobile || !castWrapperRef.current) return;
|
|
7292
|
+
isDraggingRef.current = true;
|
|
7293
|
+
hasDraggedRef.current = false;
|
|
7294
|
+
startXRef.current = e.clientX;
|
|
7295
|
+
scrollStartRef.current = castWrapperRef.current.scrollLeft;
|
|
7296
|
+
if (e.target === castWrapperRef.current) e.preventDefault();
|
|
7297
|
+
}, [isMobile]);
|
|
7298
|
+
var handleMouseMove = useCallback(function (e) {
|
|
7299
|
+
if (!isMobile || !isDraggingRef.current || !castWrapperRef.current) return;
|
|
7300
|
+
var deltaX = e.clientX - startXRef.current;
|
|
7301
|
+
var threshold = 5;
|
|
7302
|
+
if (Math.abs(deltaX) > threshold) {
|
|
7303
|
+
hasDraggedRef.current = true;
|
|
7304
|
+
e.preventDefault();
|
|
7305
|
+
castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
|
|
7306
|
+
}
|
|
7307
|
+
}, [isMobile]);
|
|
7308
|
+
var handleMouseUp = useCallback(function () {
|
|
7309
|
+
if (!isMobile) return;
|
|
7310
|
+
isDraggingRef.current = false;
|
|
7311
|
+
setTimeout(function () {
|
|
7312
|
+
hasDraggedRef.current = false;
|
|
7313
|
+
}, 0);
|
|
7314
|
+
}, [isMobile]);
|
|
7315
|
+
var handleMouseLeave = useCallback(function () {
|
|
7316
|
+
if (!isMobile) return;
|
|
7317
|
+
isDraggingRef.current = false;
|
|
7318
|
+
hasDraggedRef.current = false;
|
|
7319
|
+
}, [isMobile]);
|
|
7320
|
+
var getCastItemSelectionId = useCallback(function (person) {
|
|
7321
|
+
if (person.id !== undefined && person.id !== null) return String(person.id);
|
|
7322
|
+
if (person.slug !== undefined && person.slug !== null) return String(person.slug);
|
|
7323
|
+
return person.name;
|
|
7324
|
+
}, []);
|
|
7325
|
+
var isIdSelectionMode = selectedIds !== undefined;
|
|
7326
|
+
var selectedIdsSet = useMemo(function () {
|
|
7327
|
+
var ids = selectedIds != null ? selectedIds : [];
|
|
7328
|
+
return new Set(ids.map(function (id) {
|
|
7329
|
+
return String(id);
|
|
7330
|
+
}));
|
|
7331
|
+
}, [selectedIds]);
|
|
7332
|
+
var selectedStateIndices = useMemo(function () {
|
|
7333
|
+
if (!isIdSelectionMode) return selectedIndices;
|
|
7334
|
+
return cast.flatMap(function (person, index) {
|
|
7335
|
+
var itemId = getCastItemSelectionId(person);
|
|
7336
|
+
return selectedIdsSet.has(itemId) ? [index] : [];
|
|
7337
|
+
});
|
|
7338
|
+
}, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
|
|
7339
|
+
var selectedStateIds = useMemo(function () {
|
|
7340
|
+
if (isIdSelectionMode) {
|
|
7341
|
+
return cast.filter(function (person) {
|
|
7342
|
+
return selectedIdsSet.has(getCastItemSelectionId(person));
|
|
7343
|
+
}).map(function (person) {
|
|
7344
|
+
return getCastItemSelectionId(person);
|
|
7345
|
+
});
|
|
7346
|
+
}
|
|
7347
|
+
return selectedIndices.map(function (index) {
|
|
7348
|
+
return cast[index];
|
|
7349
|
+
}).filter(function (person) {
|
|
7350
|
+
return person !== undefined;
|
|
7351
|
+
}).map(function (person) {
|
|
7352
|
+
return getCastItemSelectionId(person);
|
|
7353
|
+
});
|
|
7354
|
+
}, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
|
|
7355
|
+
var handleClick = React__default.useCallback(function (index, itemId, onClick) {
|
|
7356
|
+
if (hasDraggedRef.current) return;
|
|
7357
|
+
if (onSelectId) onSelectId(itemId);
|
|
7358
|
+
if (onSelect) onSelect(index);
|
|
7359
|
+
if (onClick) onClick();
|
|
7360
|
+
}, [onSelect, onSelectId]);
|
|
7361
|
+
var handlePersonKeydown = React__default.useCallback(function (e, index, itemId, onClick) {
|
|
7362
|
+
if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
|
|
7363
|
+
e.preventDefault();
|
|
7364
|
+
handleClick(index, itemId, onClick);
|
|
7365
|
+
}
|
|
7366
|
+
}, [handleClick]);
|
|
7367
|
+
var handleClearKeydown = React__default.useCallback(function (e) {
|
|
7368
|
+
if (e.key === 'Enter' && onClear) {
|
|
7369
|
+
onClear();
|
|
7370
|
+
}
|
|
7371
|
+
}, [onClear]);
|
|
7372
|
+
var showActionButtonsSection = onApply || onClear || emptySelectionText;
|
|
7024
7373
|
var getPersonCards = function getPersonCards() {
|
|
7025
7374
|
return cast.map(function (person, index) {
|
|
7026
7375
|
var name = person.name,
|
|
@@ -7091,13 +7440,13 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7091
7440
|
onMouseMove: handleMouseMove,
|
|
7092
7441
|
onMouseUp: handleMouseUp,
|
|
7093
7442
|
onMouseLeave: handleMouseLeave
|
|
7094
|
-
},
|
|
7443
|
+
}, /*#__PURE__*/React__default.createElement(Swipe, {
|
|
7095
7444
|
onIndexChange: onIndexChangeHandler,
|
|
7096
7445
|
"data-testid": "cast-filter-swipe",
|
|
7097
7446
|
ref: swipeRef,
|
|
7098
7447
|
onOverflowChange: handleOverflowChange,
|
|
7099
7448
|
limitDragToNavigableRange: true
|
|
7100
|
-
}, getPersonCards())))
|
|
7449
|
+
}, getPersonCards()))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedStateIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7101
7450
|
size: "medium",
|
|
7102
7451
|
className: "mobile-only"
|
|
7103
7452
|
}, 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, {
|
|
@@ -7113,12 +7462,12 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7113
7462
|
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7114
7463
|
};
|
|
7115
7464
|
|
|
7116
|
-
var _templateObject$
|
|
7117
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7118
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7119
|
-
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7465
|
+
var _templateObject$L, _templateObject2$y, _templateObject3$l, _templateObject4$j, _templateObject5$g, _templateObject6$a, _templateObject7$7;
|
|
7466
|
+
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7467
|
+
var Wrapper$2 = /*#__PURE__*/styled.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);
|
|
7468
|
+
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7120
7469
|
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7121
|
-
var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7470
|
+
var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7122
7471
|
var DesktopSuffixWrapper = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7123
7472
|
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
7124
7473
|
|
|
@@ -7171,12 +7520,12 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7171
7520
|
}, addressString)))))))));
|
|
7172
7521
|
};
|
|
7173
7522
|
|
|
7174
|
-
var _templateObject$
|
|
7175
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7176
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$
|
|
7177
|
-
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7523
|
+
var _templateObject$M, _templateObject2$z, _templateObject3$m, _templateObject4$k, _templateObject5$h, _templateObject6$b, _templateObject7$8, _templateObject8$5;
|
|
7524
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled.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);
|
|
7525
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled.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);
|
|
7526
|
+
var SignUpWrapper = /*#__PURE__*/styled.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);
|
|
7178
7527
|
var SignUpText = /*#__PURE__*/styled.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);
|
|
7179
|
-
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7528
|
+
var ContactWrapper = /*#__PURE__*/styled.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);
|
|
7180
7529
|
var MediaLinksWrapper$1 = /*#__PURE__*/styled.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);
|
|
7181
7530
|
var MediaIconWrapper$1 = /*#__PURE__*/styled.a(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
|
|
7182
7531
|
var TextLinkWrapper$1 = /*#__PURE__*/styled.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"])));
|
|
@@ -7204,16 +7553,16 @@ var ContactNewsletter = function ContactNewsletter(_ref) {
|
|
|
7204
7553
|
}, contact.title))));
|
|
7205
7554
|
};
|
|
7206
7555
|
|
|
7207
|
-
var _templateObject$
|
|
7208
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
7209
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
7556
|
+
var _templateObject$N, _templateObject2$A, _templateObject3$n, _templateObject4$l, _templateObject5$i, _templateObject6$c;
|
|
7557
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7558
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7210
7559
|
return props.clickable ? 'pointer' : 'default';
|
|
7211
7560
|
}, devices.mobile);
|
|
7212
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7561
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7213
7562
|
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7214
7563
|
return props.showImage ? 2 : '1 / span 4';
|
|
7215
7564
|
}, devices.mobile);
|
|
7216
|
-
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject5$
|
|
7565
|
+
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7217
7566
|
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
7218
7567
|
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 ";
|
|
7219
7568
|
});
|
|
@@ -7297,21 +7646,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7297
7646
|
}), link.text))));
|
|
7298
7647
|
};
|
|
7299
7648
|
|
|
7300
|
-
var _templateObject$
|
|
7301
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
7649
|
+
var _templateObject$O, _templateObject2$B, _templateObject3$o, _templateObject4$m, _templateObject5$j;
|
|
7650
|
+
var EditorialGrid = /*#__PURE__*/styled.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) {
|
|
7302
7651
|
var imageToLeft = _ref.imageToLeft;
|
|
7303
7652
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7304
7653
|
}, devices.mobile);
|
|
7305
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7654
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7306
7655
|
var imageToLeft = _ref2.imageToLeft;
|
|
7307
7656
|
return imageToLeft ? 'left' : 'right';
|
|
7308
7657
|
}, devices.mobile);
|
|
7309
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7658
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7310
7659
|
var imageToLeft = _ref3.imageToLeft;
|
|
7311
7660
|
return imageToLeft ? 'right' : 'left';
|
|
7312
7661
|
}, devices.mobile);
|
|
7313
7662
|
var EditorialSubtitle = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-subtitle);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
7314
|
-
var EditorialText = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject5$
|
|
7663
|
+
var EditorialText = /*#__PURE__*/styled(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"])));
|
|
7315
7664
|
|
|
7316
7665
|
var Editorial = function Editorial(_ref) {
|
|
7317
7666
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7350,10 +7699,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7350
7699
|
})))));
|
|
7351
7700
|
};
|
|
7352
7701
|
|
|
7353
|
-
var _templateObject$
|
|
7354
|
-
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7355
|
-
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7356
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$
|
|
7702
|
+
var _templateObject$P, _templateObject2$C, _templateObject3$p;
|
|
7703
|
+
var HotFiltersWrapper = /*#__PURE__*/styled.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"])));
|
|
7704
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
7705
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n @media (hover: hover) and (pointer: fine) {\n :hover {\n color: var(--color-base-white);\n }\n }\n"])));
|
|
7357
7706
|
|
|
7358
7707
|
var _excluded$i = ["text", "onClick"];
|
|
7359
7708
|
var HotFilters = function HotFilters(_ref) {
|
|
@@ -7388,22 +7737,86 @@ var HotFilters = function HotFilters(_ref) {
|
|
|
7388
7737
|
})));
|
|
7389
7738
|
};
|
|
7390
7739
|
|
|
7391
|
-
var _templateObject$
|
|
7392
|
-
var ScrollContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7393
|
-
var TabsContainerWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7394
|
-
var StyledTab = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$
|
|
7740
|
+
var _templateObject$Q, _templateObject2$D, _templateObject3$q;
|
|
7741
|
+
var ScrollContainer = /*#__PURE__*/styled.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);
|
|
7742
|
+
var TabsContainerWrapper = /*#__PURE__*/styled.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);
|
|
7743
|
+
var StyledTab = /*#__PURE__*/styled(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);
|
|
7395
7744
|
|
|
7396
7745
|
var _excluded$j = ["text", "id", "isSelected", "allowedSelectedWith"];
|
|
7397
7746
|
/**
|
|
7398
7747
|
* A controlled filter button group that supports single- and multi-select strategies.
|
|
7399
7748
|
* The consumer owns the selection state and receives the complete clicked item.
|
|
7749
|
+
* A horizontally scrollable tabs filter component used to display
|
|
7750
|
+
* selectable strategy tabs with configurable styling and selection behavior.
|
|
7751
|
+
*
|
|
7752
|
+
* Features:
|
|
7753
|
+
* - Supports both single-select and multi-select tab scenarios
|
|
7754
|
+
* - Displays an optional icon on selected tabs
|
|
7755
|
+
* - Allows customization of colors and selected icon through `customViewConfig`
|
|
7756
|
+
* - Applies default styling when configuration values are omitted
|
|
7757
|
+
* - Emits the clicked tab item through `onClick`
|
|
7758
|
+
*
|
|
7759
|
+
* @component
|
|
7760
|
+
*
|
|
7761
|
+
* @param {TCustomStrategyTabsFilterProps['items']} items
|
|
7762
|
+
* Collection of tabs to render.
|
|
7763
|
+
*
|
|
7764
|
+
* @param {string} [className]
|
|
7765
|
+
* Optional CSS class name applied to the root scroll container.
|
|
7766
|
+
*
|
|
7767
|
+
* @param {<T>(item: TCustomStrategyTabsFilterProps['items'][number]) => T} onClick
|
|
7768
|
+
* Called when a tab is clicked. Receives the full clicked item (including
|
|
7769
|
+
* `allowedSelectedWith`). The parent is responsible for computing the next
|
|
7770
|
+
* `items` array and passing it back down with updated `isSelected` values.
|
|
7771
|
+
* as long as no return statement `type` is bing inferred automatically as void
|
|
7772
|
+
*
|
|
7773
|
+
* @param [customViewConfig]
|
|
7774
|
+
* Optional visual configuration used to customize:
|
|
7775
|
+
* - selected tab icon
|
|
7776
|
+
* - selected/unselected background colors
|
|
7777
|
+
* - selected/unselected text colors
|
|
7778
|
+
* - hover color
|
|
7779
|
+
* - pressed color
|
|
7780
|
+
*
|
|
7781
|
+
* Any omitted configuration values will fall back to the component defaults.
|
|
7782
|
+
*
|
|
7783
|
+
* @returns { React.JSX.Element}
|
|
7784
|
+
*
|
|
7785
|
+
* @example
|
|
7786
|
+
* ```tsx
|
|
7787
|
+
* * @example Controlled selection with custom rules
|
|
7788
|
+
* * The component does not manage selection itself. The parent owns `items` (including
|
|
7789
|
+
* * `isSelected`) and updates that state in `onClick`. Use `allowedSelectedWith` on each
|
|
7790
|
+
* * item to describe which other tab IDs may stay selected when that tab is chosen.
|
|
7791
|
+
* *
|
|
7792
|
+
* * ```tsx
|
|
7793
|
+
* * const [items, setItems] = useState<TCustomStrategyTabsFilterItem[]>([
|
|
7794
|
+
* * { id: 'all', text: 'All events', isSelected: true, allowedSelectedWith: [] },
|
|
7795
|
+
* * { id: 'opera', text: 'Opera', isSelected: false, allowedSelectedWith: ['ballet'] },
|
|
7796
|
+
* * { id: 'ballet', text: 'Ballet', isSelected: false, allowedSelectedWith: ['opera'] },
|
|
7797
|
+
* * ]);
|
|
7798
|
+
* *
|
|
7799
|
+
* * const handleClick = (clickedItem: TCustomStrategyTabsFilterItem) => {
|
|
7800
|
+
* * setItems((current) =>
|
|
7801
|
+
* * current.map((item) => {
|
|
7802
|
+
* * if (item.id === clickedItem.id) {
|
|
7803
|
+
* * return { ...item, isSelected: !item.isSelected };
|
|
7804
|
+
* * }
|
|
7805
|
+
* *
|
|
7806
|
+
* * const mayStaySelected = clickedItem.allowedSelectedWith?.includes(item.id);
|
|
7807
|
+
* * return { ...item, isSelected: mayStaySelected ? !item.isSelected : false };
|
|
7808
|
+
* * })
|
|
7809
|
+
* * );
|
|
7810
|
+
* * };
|
|
7811
|
+
* *
|
|
7812
|
+
* * return <CustomStrategyTabsFilter items={items} onClick={handleClick} />;
|
|
7400
7813
|
*/
|
|
7401
7814
|
var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
|
|
7402
7815
|
var _customViewConfig$bac, _customViewConfig$bac2, _customViewConfig$tex, _customViewConfig$tex2;
|
|
7403
7816
|
var items = _ref.items,
|
|
7404
7817
|
className = _ref.className,
|
|
7405
|
-
ariaLabel = _ref.ariaLabel,
|
|
7406
7818
|
onClick = _ref.onClick,
|
|
7819
|
+
ariaLabel = _ref.ariaLabel,
|
|
7407
7820
|
customViewConfig = _ref.customViewConfig;
|
|
7408
7821
|
var handleClick = React__default.useCallback(function (item) {
|
|
7409
7822
|
onClick(item);
|
|
@@ -7483,10 +7896,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7483
7896
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7484
7897
|
};
|
|
7485
7898
|
|
|
7486
|
-
var _templateObject$
|
|
7487
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7488
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7489
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
7899
|
+
var _templateObject$R, _templateObject2$E, _templateObject3$r, _templateObject4$n;
|
|
7900
|
+
var InfoWrapper = /*#__PURE__*/styled(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);
|
|
7901
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7902
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('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) {
|
|
7490
7903
|
var variant = _ref.variant,
|
|
7491
7904
|
theme = _ref.theme;
|
|
7492
7905
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7534,22 +7947,25 @@ var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$n |
|
|
|
7534
7947
|
var css_248z$1 = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2') format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
|
|
7535
7948
|
styleInject(css_248z$1);
|
|
7536
7949
|
|
|
7537
|
-
var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Shadows */\n --shadow-floating: 0px 4px 38px 0px #0000000a;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n --button-anchor-tab-color: var(--color-primary-red);\n\n /* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-small-width: 44px;\n --rotator-button-small-icon-width: 28px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-margin: 12px;\n\n --line-height-listing: 36px;\n\n --upsell-border-color: var(--color-primary-red);\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n\n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n\n --line-height-listing: 34px;\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n }\n\n /* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n --page-header-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
|
|
7538
|
-
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
7950
|
+
var css_248z$2 = "/* ~~~~~ General Styling Classes ~~~~~ */\n.typography_color-primary__LOfDi {\n color: var(--color-primary);\n}\n\n.typography_color-black__6MHRL {\n color: var(--color-base-black);\n}\n\n.typography_color-white__PfW5s {\n color: var(--color-base-white);\n}\n\n.typography_color-red__iPlbG {\n color: var(--color-primary-red);\n}\n\n.typography_color-grey__GA1c2 {\n color: var(--color-base-dark-grey);\n}\n\n.typography_color-inherit__RDd0Y {\n color: inherit;\n}\n\n.typography_em__E6tX- {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.typography_display__-F3p4 {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.typography_large__uq0zC {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -3px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.typography_header__BexiD {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.typography_subtitle__aoFTV {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.typography_bodycopy__vYtQ8 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.typography_overline__EnUK3 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.typography_large__uq0zC {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.typography_small__wfQ0K {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.typography_buttontext__vcxNi {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n font-weight: 400;\n\n @media (max-width: 699px) {\n font-weight: 500;\n line-height: 17px;\n }\n}\n\n/* Caption Text */\n.typography_captiontext__91UFb {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n\n @media (max-width: 699px) {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n}\n\n/* Navigation Text */\n.typography_navigationtext__YfGf7 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n font-weight: 500;\n\n @media (max-width: 699px) {\n font-size: 17px;\n line-height: 17px;\n }\n}\n";
|
|
7539
7951
|
styleInject(css_248z$2);
|
|
7540
7952
|
|
|
7541
|
-
var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n /* Stream theme overrides */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-background: #1a1a1a;\n --color-primary-button: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --color-border-basic: #DDDDDD;\n --color-input-basic: #727272;\n --color-border-secondary: #F0F0F0;\n --color-container-backgroud: #F6F6F6;\n --color-rbo-error: #CC071E;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-anchor-tab-color: var(--color-primary-black);\n\n --rotator-button-color: var(--color-base-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-black);\n\n --heading-promo-bg-color: var(--color-base-black);\n --page-header-bg-color: var(--color-primary-black);\n\n --upsell-border-color: var(--color-primary-black);\n}\n";
|
|
7542
|
-
var
|
|
7953
|
+
var css_248z$3 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Shadows */\n --shadow-floating: 0px 4px 38px 0px #0000000a;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n --button-anchor-tab-color: var(--color-primary-red);\n\n /* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-small-width: 44px;\n --rotator-button-small-icon-width: 28px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-margin: 12px;\n\n --line-height-listing: 36px;\n\n --upsell-border-color: var(--color-primary-red);\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n\n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n\n --line-height-listing: 34px;\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n }\n\n /* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n --page-header-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
|
|
7954
|
+
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
7543
7955
|
styleInject(css_248z$3);
|
|
7544
7956
|
|
|
7545
|
-
var css_248z$4 = ".
|
|
7546
|
-
var
|
|
7957
|
+
var css_248z$4 = ".stream-theme-module_streamTheme__lTfqQ {\n /* Stream theme overrides */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-background: #1a1a1a;\n --color-primary-button: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --color-border-basic: #DDDDDD;\n --color-input-basic: #727272;\n --color-border-secondary: #F0F0F0;\n --color-container-backgroud: #F6F6F6;\n --color-rbo-error: #CC071E;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-anchor-tab-color: var(--color-primary-black);\n\n --rotator-button-color: var(--color-base-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-black);\n\n --heading-promo-bg-color: var(--color-base-black);\n --page-header-bg-color: var(--color-primary-black);\n\n --upsell-border-color: var(--color-primary-black);\n}\n";
|
|
7958
|
+
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
7547
7959
|
styleInject(css_248z$4);
|
|
7548
7960
|
|
|
7549
|
-
var css_248z$5 = ".
|
|
7550
|
-
var
|
|
7961
|
+
var css_248z$5 = ".cinema-theme-module_cinemaTheme__f5QFs {\n /* White */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-button: #ffffff;\n --color-primary-background: #1a1a1a;\n --color-primary-button-reverse-bg: #ffffff;\n --color-primary-button-reverse: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n --button-color: var(--color-primary-black);\n --button-bg-color: var(--color-base-white);\n --button-hover-color: var(--color-white-hovered);\n --button-pressed-color: var(--color-white-pressed);\n --button-secondary-color: var(--color-base-white);\n --button-secondary-hover-color: var(--color-white-hovered);\n --button-secondary-pressed-color: var(--color-white-pressed);\n --button-tertiary-color: var(--color-base-white);\n --button-tertiary-hover-color: var(--color-white-hovered);\n --button-tertiary-pressed-color: var(--color-white-pressed);\n --button-anchor-tab-color: var(--color-primary-black);\n\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-primary-red);\n --announcement-banner-bg-color: var(--color-base-white);\n --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n --information-panel-color: var(--color-primary-black);\n --information-panel-bg-color: var(--color-base-white);\n --information-panel-button-color: var(--color-base-white);\n --information-panel-button-bg-color: var(--color-primary-red);\n --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n --heading-promo-bg-color: var(--color-base-white);\n --page-header-bg-color: var(--color-primary-black);\n\n --upsell-border-color: var(--color-primary-black);\n}\n";
|
|
7962
|
+
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
7551
7963
|
styleInject(css_248z$5);
|
|
7552
7964
|
|
|
7965
|
+
var css_248z$6 = ".schools-theme-module_schoolsTheme__CWHba {\n /* Schools theme overrides */\n --base-color-primary: #c8102e;\n --color-primary: #c8102e;\n --color-primary-button: #c8102e;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n\n @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n }\n}\n";
|
|
7966
|
+
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
7967
|
+
styleInject(css_248z$6);
|
|
7968
|
+
|
|
7553
7969
|
/* eslint-disable react/jsx-no-useless-fragment */
|
|
7554
7970
|
var DEFAULT_THEME = ThemeType.Core;
|
|
7555
7971
|
var getThemeClass = function getThemeClass(theme) {
|
|
@@ -7720,19 +8136,19 @@ var Information = function Information(_ref) {
|
|
|
7720
8136
|
})))));
|
|
7721
8137
|
};
|
|
7722
8138
|
|
|
7723
|
-
var _templateObject$
|
|
7724
|
-
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$
|
|
8139
|
+
var _templateObject$S, _templateObject2$F, _templateObject3$s, _templateObject4$o, _templateObject5$k, _templateObject6$d, _templateObject7$9, _templateObject8$6;
|
|
8140
|
+
var PageHeadingWrapper = /*#__PURE__*/styled('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) {
|
|
7725
8141
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7726
8142
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7727
8143
|
}, devices.mobile);
|
|
7728
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
8144
|
+
var PageHeadingGrid = /*#__PURE__*/styled(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) {
|
|
7729
8145
|
var isMultipleRow = _ref2.isMultipleRow;
|
|
7730
8146
|
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 ";
|
|
7731
8147
|
}, devices.mobile, devices.tablet, function (_ref3) {
|
|
7732
8148
|
var isMultipleRow = _ref3.isMultipleRow;
|
|
7733
8149
|
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 ";
|
|
7734
8150
|
});
|
|
7735
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8151
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref4) {
|
|
7736
8152
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7737
8153
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7738
8154
|
});
|
|
@@ -7740,7 +8156,7 @@ var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$o || (_templateObj
|
|
|
7740
8156
|
var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
|
|
7741
8157
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7742
8158
|
}, devices.mobile);
|
|
7743
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8159
|
+
var ChildrenWrapper = /*#__PURE__*/styled.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) {
|
|
7744
8160
|
var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
|
|
7745
8161
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7746
8162
|
}, devices.mobile);
|
|
@@ -7825,9 +8241,9 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7825
8241
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7826
8242
|
};
|
|
7827
8243
|
|
|
7828
|
-
var _templateObject$
|
|
7829
|
-
var ImpactHeaderWrapper = /*#__PURE__*/styled.header(_templateObject$
|
|
7830
|
-
var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8244
|
+
var _templateObject$T, _templateObject2$G, _templateObject3$t, _templateObject4$p, _templateObject5$l, _templateObject6$e, _templateObject7$a, _templateObject8$7;
|
|
8245
|
+
var ImpactHeaderWrapper = /*#__PURE__*/styled.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);
|
|
8246
|
+
var ImpactTitleWrapper = /*#__PURE__*/styled.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) {
|
|
7831
8247
|
var hasButton = _ref.hasButton,
|
|
7832
8248
|
sponsorPresent = _ref.sponsorPresent;
|
|
7833
8249
|
if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
|
|
@@ -7836,12 +8252,12 @@ var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templat
|
|
|
7836
8252
|
var sponsorPresent = _ref2.sponsorPresent;
|
|
7837
8253
|
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7838
8254
|
});
|
|
7839
|
-
var TitleButtonWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8255
|
+
var TitleButtonWrapper = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7840
8256
|
var sponsorWidth = _ref3.sponsorWidth;
|
|
7841
8257
|
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7842
8258
|
});
|
|
7843
8259
|
var TitleButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n position: static;\n margin-right: 0;\n }\n"])), devices.mobile);
|
|
7844
|
-
var MobileButtonWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8260
|
+
var MobileButtonWrapper = /*#__PURE__*/styled.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"])));
|
|
7845
8261
|
var ImpactTitle = /*#__PURE__*/styled(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) {
|
|
7846
8262
|
var hasColumns = _ref4.hasColumns;
|
|
7847
8263
|
return hasColumns ? '3' : '1';
|
|
@@ -7852,10 +8268,10 @@ var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObj
|
|
|
7852
8268
|
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7853
8269
|
}, devices.mobile);
|
|
7854
8270
|
|
|
7855
|
-
var _templateObject$
|
|
7856
|
-
var VideoPlayButton$1 = /*#__PURE__*/styled.button(_templateObject$
|
|
7857
|
-
var VideoControlsWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7858
|
-
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8271
|
+
var _templateObject$U, _templateObject2$H, _templateObject3$u, _templateObject4$q;
|
|
8272
|
+
var VideoPlayButton$1 = /*#__PURE__*/styled.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);
|
|
8273
|
+
var VideoControlsWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
8274
|
+
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled.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);
|
|
7859
8275
|
var LeftWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7860
8276
|
|
|
7861
8277
|
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
@@ -8079,21 +8495,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
|
8079
8495
|
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
8080
8496
|
};
|
|
8081
8497
|
|
|
8082
|
-
var _templateObject$
|
|
8083
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8498
|
+
var _templateObject$V, _templateObject2$I, _templateObject3$v, _templateObject4$r, _templateObject5$m;
|
|
8499
|
+
var PanelGrid = /*#__PURE__*/styled(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) {
|
|
8084
8500
|
var color = _ref.color;
|
|
8085
8501
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
8086
8502
|
}, devices.mobileAndTablet);
|
|
8087
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
8503
|
+
var LeftPanel = /*#__PURE__*/styled.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) {
|
|
8088
8504
|
var hasImage = _ref2.hasImage;
|
|
8089
8505
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8090
8506
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8091
8507
|
var hasImage = _ref3.hasImage;
|
|
8092
8508
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8093
8509
|
});
|
|
8094
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
8510
|
+
var RightPanel = /*#__PURE__*/styled.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);
|
|
8095
8511
|
var InfoWrapper$1 = /*#__PURE__*/styled.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);
|
|
8096
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8512
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.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);
|
|
8097
8513
|
|
|
8098
8514
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
8099
8515
|
var _image$src, _image$alt;
|
|
@@ -8123,12 +8539,12 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8123
8539
|
})))));
|
|
8124
8540
|
};
|
|
8125
8541
|
|
|
8126
|
-
var _templateObject$
|
|
8127
|
-
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$
|
|
8128
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8129
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8542
|
+
var _templateObject$W, _templateObject2$J, _templateObject3$w, _templateObject4$s, _templateObject5$n, _templateObject6$f, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
8543
|
+
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
8544
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
8545
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.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);
|
|
8130
8546
|
var ImageButtonWrapper = /*#__PURE__*/styled.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);
|
|
8131
|
-
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$
|
|
8547
|
+
var ContentSection = /*#__PURE__*/styled.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) {
|
|
8132
8548
|
var theme = _ref.theme;
|
|
8133
8549
|
return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
8134
8550
|
}, function (_ref2) {
|
|
@@ -8337,7 +8753,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8337
8753
|
})))))))))));
|
|
8338
8754
|
};
|
|
8339
8755
|
|
|
8340
|
-
var _templateObject$
|
|
8756
|
+
var _templateObject$X, _templateObject2$K, _templateObject3$x, _templateObject4$t;
|
|
8341
8757
|
var GRID = {
|
|
8342
8758
|
desktop: {
|
|
8343
8759
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8350,18 +8766,18 @@ var GRID = {
|
|
|
8350
8766
|
right: '2 / 1 / 3 / 15'
|
|
8351
8767
|
}
|
|
8352
8768
|
};
|
|
8353
|
-
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8769
|
+
var HighlightPanelGrid = /*#__PURE__*/styled(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) {
|
|
8354
8770
|
var $background = _ref.$background;
|
|
8355
8771
|
return "var(--color-" + $background + ")";
|
|
8356
8772
|
});
|
|
8357
|
-
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8773
|
+
var LeftPanel$1 = /*#__PURE__*/styled.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) {
|
|
8358
8774
|
var hasImage = _ref2.hasImage;
|
|
8359
8775
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8360
8776
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8361
8777
|
var hasImage = _ref3.hasImage;
|
|
8362
8778
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8363
8779
|
});
|
|
8364
|
-
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8780
|
+
var RightPanel$1 = /*#__PURE__*/styled.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);
|
|
8365
8781
|
var Wrapper$4 = /*#__PURE__*/styled.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);
|
|
8366
8782
|
|
|
8367
8783
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
@@ -8385,11 +8801,11 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8385
8801
|
})))));
|
|
8386
8802
|
};
|
|
8387
8803
|
|
|
8388
|
-
var _templateObject$
|
|
8389
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
8390
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
8391
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8392
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8804
|
+
var _templateObject$Y, _templateObject2$L, _templateObject3$y, _templateObject5$o, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$5, _templateObject0$5;
|
|
8805
|
+
var BrandingTextBlock = /*#__PURE__*/styled.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);
|
|
8806
|
+
var BrandingTextBody = /*#__PURE__*/styled.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"])));
|
|
8807
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8808
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.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);
|
|
8393
8809
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(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) {
|
|
8394
8810
|
var invert = _ref.invert,
|
|
8395
8811
|
theme = _ref.theme;
|
|
@@ -8639,10 +9055,10 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8639
9055
|
}), linkText))))));
|
|
8640
9056
|
};
|
|
8641
9057
|
|
|
8642
|
-
var _templateObject$
|
|
8643
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8644
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8645
|
-
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9058
|
+
var _templateObject$Z, _templateObject2$M, _templateObject3$z, _templateObject4$u, _templateObject5$p, _templateObject6$h, _templateObject7$d;
|
|
9059
|
+
var HighlightsGrid = /*#__PURE__*/styled(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);
|
|
9060
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled.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"])));
|
|
9061
|
+
var HighlightTextWrapper = /*#__PURE__*/styled.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);
|
|
8646
9062
|
var HighlightsInfoWrapper = /*#__PURE__*/styled.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) {
|
|
8647
9063
|
var hasImages = _ref.hasImages;
|
|
8648
9064
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
@@ -8650,12 +9066,12 @@ var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_temp
|
|
|
8650
9066
|
var hasImages = _ref2.hasImages;
|
|
8651
9067
|
return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8652
9068
|
});
|
|
8653
|
-
var HighlightsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
9069
|
+
var HighlightsCarouselWrapper = /*#__PURE__*/styled.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) {
|
|
8654
9070
|
var hasMultipleImages = _ref3.hasMultipleImages;
|
|
8655
9071
|
return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
|
|
8656
9072
|
}, devices.mobile);
|
|
8657
9073
|
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.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);
|
|
8658
|
-
var RotatorButtonsWrapper$
|
|
9074
|
+
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled.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);
|
|
8659
9075
|
|
|
8660
9076
|
/* eslint-disable react/no-danger */
|
|
8661
9077
|
var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
@@ -8698,7 +9114,7 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8698
9114
|
}
|
|
8699
9115
|
})))) : null), hasImages && (/*#__PURE__*/React__default.createElement(HighlightsCarouselWrapper, {
|
|
8700
9116
|
hasMultipleImages: hasMultipleImages
|
|
8701
|
-
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$
|
|
9117
|
+
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$2, {
|
|
8702
9118
|
"data-testid": "rotator-buttons"
|
|
8703
9119
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
8704
9120
|
onClickNext: onNext,
|
|
@@ -8718,11 +9134,11 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8718
9134
|
}))))));
|
|
8719
9135
|
};
|
|
8720
9136
|
|
|
8721
|
-
var _templateObject$
|
|
8722
|
-
var linkButtonStyles = /*#__PURE__*/css(_templateObject$
|
|
8723
|
-
var PageNav = /*#__PURE__*/styled.a(_templateObject2$
|
|
8724
|
-
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
8725
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$
|
|
9137
|
+
var _templateObject$_, _templateObject2$N, _templateObject3$A, _templateObject5$q, _templateObject6$i, _templateObject7$e, _templateObject8$a;
|
|
9138
|
+
var linkButtonStyles = /*#__PURE__*/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"])));
|
|
9139
|
+
var PageNav = /*#__PURE__*/styled.a(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
9140
|
+
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
9141
|
+
var PageNumberWrapper = /*#__PURE__*/styled.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"])));
|
|
8726
9142
|
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8727
9143
|
var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8728
9144
|
var TextLinkPagination = /*#__PURE__*/styled(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) {
|
|
@@ -8877,15 +9293,15 @@ var Pagination = function Pagination(_ref) {
|
|
|
8877
9293
|
}))))));
|
|
8878
9294
|
};
|
|
8879
9295
|
|
|
8880
|
-
var _templateObject
|
|
8881
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject
|
|
9296
|
+
var _templateObject$$;
|
|
9297
|
+
var PeopleListingGrid = /*#__PURE__*/styled(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) {
|
|
8882
9298
|
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8883
9299
|
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8884
9300
|
});
|
|
8885
9301
|
|
|
8886
|
-
var _templateObject
|
|
8887
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject
|
|
8888
|
-
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$
|
|
9302
|
+
var _templateObject$10, _templateObject2$O;
|
|
9303
|
+
var TextWrapper$1 = /*#__PURE__*/styled.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"])));
|
|
9304
|
+
var RoleContent = /*#__PURE__*/styled(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"])));
|
|
8889
9305
|
|
|
8890
9306
|
var PersonDetails = function PersonDetails(_ref) {
|
|
8891
9307
|
var _role$people;
|
|
@@ -8907,9 +9323,9 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8907
9323
|
})));
|
|
8908
9324
|
};
|
|
8909
9325
|
|
|
8910
|
-
var _templateObject$
|
|
8911
|
-
var PersonWrapper$
|
|
8912
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9326
|
+
var _templateObject$11, _templateObject2$P;
|
|
9327
|
+
var PersonWrapper$2 = /*#__PURE__*/styled.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"])));
|
|
9328
|
+
var HeadshotWrapper = /*#__PURE__*/styled.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) {
|
|
8913
9329
|
var greyscale = _ref.greyscale;
|
|
8914
9330
|
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8915
9331
|
});
|
|
@@ -8923,7 +9339,7 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8923
9339
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
8924
9340
|
return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
|
|
8925
9341
|
}, [role]);
|
|
8926
|
-
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$
|
|
9342
|
+
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$2, {
|
|
8927
9343
|
className: className
|
|
8928
9344
|
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
|
|
8929
9345
|
greyscale: greyscale
|
|
@@ -8958,14 +9374,13 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8958
9374
|
}));
|
|
8959
9375
|
};
|
|
8960
9376
|
|
|
8961
|
-
var _templateObject$
|
|
8962
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8963
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
9377
|
+
var _templateObject$12, _templateObject2$Q, _templateObject3$B;
|
|
9378
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9379
|
+
var CreditListingWrapper = /*#__PURE__*/styled(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) {
|
|
8964
9380
|
var columnCount = _ref.columnCount;
|
|
8965
9381
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8966
9382
|
}, devices.mobile, devices.tablet);
|
|
8967
|
-
var
|
|
8968
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
9383
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8969
9384
|
|
|
8970
9385
|
// Get the total character length of a property in an array of objects
|
|
8971
9386
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -9013,7 +9428,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9013
9428
|
_ref$largeColumnSpan = _ref.largeColumnSpan,
|
|
9014
9429
|
largeColumnSpan = _ref$largeColumnSpan === void 0 ? DEFAULT_LARGE_COLUMN_SPAN : _ref$largeColumnSpan,
|
|
9015
9430
|
_ref$characterThresho = _ref.characterThreshold,
|
|
9016
|
-
characterThreshold = _ref$characterThresho === void 0 ? DEFAULT_CHARACTER_THRESHOLD : _ref$characterThresho
|
|
9431
|
+
characterThreshold = _ref$characterThresho === void 0 ? DEFAULT_CHARACTER_THRESHOLD : _ref$characterThresho,
|
|
9432
|
+
className = _ref.className;
|
|
9017
9433
|
var creditEntries = [];
|
|
9018
9434
|
var nextColumnStart = 1;
|
|
9019
9435
|
roles.forEach(function (_ref2, index) {
|
|
@@ -9054,20 +9470,21 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9054
9470
|
columnSpanSmallDevice: 1,
|
|
9055
9471
|
key: "credit-entry-" + name + "-" + index,
|
|
9056
9472
|
"data-testid": "credit-entry"
|
|
9057
|
-
}, /*#__PURE__*/React__default.createElement(TextWrapper$1,
|
|
9473
|
+
}, /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
9474
|
+
className: className
|
|
9475
|
+
}, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
9058
9476
|
title: "role",
|
|
9059
9477
|
"data-roh": dataROH
|
|
9060
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
9061
|
-
|
|
9062
|
-
|
|
9063
|
-
}, name)), description && (/*#__PURE__*/React__default.createElement(
|
|
9064
|
-
|
|
9065
|
-
|
|
9066
|
-
}, description))
|
|
9067
|
-
return /*#__PURE__*/React__default.createElement(
|
|
9478
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
9479
|
+
size: "small",
|
|
9480
|
+
color: "grey"
|
|
9481
|
+
}, name)), description && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9482
|
+
size: "small",
|
|
9483
|
+
color: "grey"
|
|
9484
|
+
}, description)), personArrays.map(function (personArray, arrayIndex) {
|
|
9485
|
+
return /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9068
9486
|
key: "personArray" + arrayIndex,
|
|
9069
|
-
|
|
9070
|
-
tag: "p"
|
|
9487
|
+
size: "medium"
|
|
9071
9488
|
}, personArray.map(function (person, personIndex) {
|
|
9072
9489
|
return /*#__PURE__*/React__default.createElement(Person, {
|
|
9073
9490
|
key: "" + person.name + personIndex,
|
|
@@ -9075,25 +9492,22 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9075
9492
|
withSeparator: personArray.length !== personIndex + 1
|
|
9076
9493
|
});
|
|
9077
9494
|
}));
|
|
9078
|
-
}), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(
|
|
9079
|
-
|
|
9080
|
-
|
|
9081
|
-
|
|
9082
|
-
level: 1,
|
|
9083
|
-
tag: "p",
|
|
9495
|
+
}), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9496
|
+
size: "medium"
|
|
9497
|
+
}, replacement))), musicTitle && musicTitle.length > 0 && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9498
|
+
size: "small",
|
|
9084
9499
|
key: "music-" + musicTitle + "-text"
|
|
9085
|
-
}, concatenateMusicTitle(musicTitle, index))), additionalInfo &&
|
|
9086
|
-
|
|
9087
|
-
|
|
9088
|
-
}, additionalInfo)))));
|
|
9500
|
+
}, concatenateMusicTitle(musicTitle, index))), additionalInfo && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9501
|
+
size: "medium"
|
|
9502
|
+
}, additionalInfo))));
|
|
9089
9503
|
});
|
|
9090
9504
|
return /*#__PURE__*/React__default.createElement(CreditListingWrapper, {
|
|
9091
9505
|
columnCount: columnCount
|
|
9092
9506
|
}, creditEntries);
|
|
9093
9507
|
};
|
|
9094
9508
|
|
|
9095
|
-
var _templateObject$
|
|
9096
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$
|
|
9509
|
+
var _templateObject$13;
|
|
9510
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(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"])));
|
|
9097
9511
|
|
|
9098
9512
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
9099
9513
|
var items = _ref.items;
|
|
@@ -9111,14 +9525,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
9111
9525
|
}));
|
|
9112
9526
|
};
|
|
9113
9527
|
|
|
9114
|
-
var _templateObject$
|
|
9528
|
+
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;
|
|
9115
9529
|
var LENGTH_TEXT = 28;
|
|
9116
9530
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9117
9531
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9118
9532
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9119
9533
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9120
9534
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9121
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9535
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(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) {
|
|
9122
9536
|
var imageToLeft = _ref.imageToLeft;
|
|
9123
9537
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9124
9538
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9128,7 +9542,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templa
|
|
|
9128
9542
|
var asCard = _ref3.asCard;
|
|
9129
9543
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9130
9544
|
});
|
|
9131
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9545
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.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) {
|
|
9132
9546
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9133
9547
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9134
9548
|
}, function (_ref5) {
|
|
@@ -9152,14 +9566,14 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$B || (_templat
|
|
|
9152
9566
|
}
|
|
9153
9567
|
return '';
|
|
9154
9568
|
});
|
|
9155
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9569
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
9156
9570
|
var marginBottom = _ref7.marginBottom;
|
|
9157
9571
|
return marginBottom + "px";
|
|
9158
9572
|
}, function (_ref8) {
|
|
9159
9573
|
var mobileMarginBottom = _ref8.mobileMarginBottom;
|
|
9160
9574
|
return mobileMarginBottom && "\n @media " + devices.mobile + " {\n margin-bottom: " + mobileMarginBottom + "px;\n }\n ";
|
|
9161
9575
|
});
|
|
9162
|
-
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
9576
|
+
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
9163
9577
|
var TextLinkWrapper$2 = /*#__PURE__*/styled.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"])));
|
|
9164
9578
|
var ExtraContentWrapper = /*#__PURE__*/styled.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);
|
|
9165
9579
|
var IconWrapper$2 = /*#__PURE__*/styled.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);
|
|
@@ -9192,7 +9606,7 @@ var _excluded$m = ["text"],
|
|
|
9192
9606
|
_excluded3$1 = ["text"];
|
|
9193
9607
|
var _buttonTypeToButton$1;
|
|
9194
9608
|
var LENGTH_TEXT$1 = 28;
|
|
9195
|
-
var LENGTH_TEXT_PARAGRAPH =
|
|
9609
|
+
var LENGTH_TEXT_PARAGRAPH = 185;
|
|
9196
9610
|
var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
|
|
9197
9611
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
9198
9612
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -9383,26 +9797,26 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9383
9797
|
}))));
|
|
9384
9798
|
};
|
|
9385
9799
|
|
|
9386
|
-
var _templateObject$
|
|
9800
|
+
var _templateObject$15, _templateObject2$R, _templateObject3$D, _templateObject4$w, _templateObject5$s, _templateObject6$k, _templateObject7$g;
|
|
9387
9801
|
var LENGTH_TEXT$2 = 28;
|
|
9388
9802
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9389
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9803
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(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) {
|
|
9390
9804
|
var imageToLeft = _ref.imageToLeft;
|
|
9391
9805
|
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'";
|
|
9392
9806
|
}, devices.tablet, function (_ref2) {
|
|
9393
9807
|
var imageToLeft = _ref2.imageToLeft;
|
|
9394
9808
|
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'";
|
|
9395
9809
|
}, devices.mobile);
|
|
9396
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9810
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.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) {
|
|
9397
9811
|
var imageToLeft = _ref3.imageToLeft;
|
|
9398
9812
|
return imageToLeft ? 'left' : 'right';
|
|
9399
9813
|
}, devices.mobile);
|
|
9400
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9814
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.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) {
|
|
9401
9815
|
var imageToLeft = _ref4.imageToLeft;
|
|
9402
9816
|
return imageToLeft ? 'right' : 'left';
|
|
9403
9817
|
}, devices.mobile);
|
|
9404
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$
|
|
9405
|
-
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$
|
|
9818
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9819
|
+
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9406
9820
|
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(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);
|
|
9407
9821
|
var ButtonsContainer$3 = /*#__PURE__*/styled.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) {
|
|
9408
9822
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
@@ -9426,8 +9840,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templat
|
|
|
9426
9840
|
return '';
|
|
9427
9841
|
});
|
|
9428
9842
|
|
|
9429
|
-
var _templateObject$
|
|
9430
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9843
|
+
var _templateObject$16;
|
|
9844
|
+
var VideoContainer = /*#__PURE__*/styled.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) {
|
|
9431
9845
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9432
9846
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9433
9847
|
return aspectRatio;
|
|
@@ -9609,10 +10023,10 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9609
10023
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9610
10024
|
};
|
|
9611
10025
|
|
|
9612
|
-
var _templateObject$
|
|
9613
|
-
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$
|
|
9614
|
-
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$
|
|
9615
|
-
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$
|
|
10026
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
10027
|
+
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
10028
|
+
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
10029
|
+
var AttributionBlock = /*#__PURE__*/styled(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);
|
|
9616
10030
|
|
|
9617
10031
|
/* eslint-disable react/no-danger */
|
|
9618
10032
|
var Quote = function Quote(_ref) {
|
|
@@ -9642,9 +10056,9 @@ var Quote = function Quote(_ref) {
|
|
|
9642
10056
|
}, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
|
|
9643
10057
|
};
|
|
9644
10058
|
|
|
9645
|
-
var _templateObject$
|
|
9646
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9647
|
-
var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$
|
|
10059
|
+
var _templateObject$18, _templateObject2$T, _templateObject3$F;
|
|
10060
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10061
|
+
var RadioGroup = /*#__PURE__*/styled.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) {
|
|
9648
10062
|
var horizontalMode = _ref.horizontalMode;
|
|
9649
10063
|
if (horizontalMode) return 'row';
|
|
9650
10064
|
return 'column';
|
|
@@ -9652,7 +10066,7 @@ var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2
|
|
|
9652
10066
|
var gap = _ref2.gap;
|
|
9653
10067
|
return gap + "px";
|
|
9654
10068
|
});
|
|
9655
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10069
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9656
10070
|
var darkMode = _ref3.darkMode;
|
|
9657
10071
|
if (darkMode) return 'var(--base-color-white)';
|
|
9658
10072
|
return 'var(--base-color-errorstate)';
|
|
@@ -9729,10 +10143,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9729
10143
|
}, error))));
|
|
9730
10144
|
};
|
|
9731
10145
|
|
|
9732
|
-
var _templateObject$
|
|
9733
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9734
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9735
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10146
|
+
var _templateObject$19, _templateObject2$U, _templateObject3$G;
|
|
10147
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.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);
|
|
10148
|
+
var ContentContainer$3 = /*#__PURE__*/styled.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"])));
|
|
10149
|
+
var SvgContainer$3 = /*#__PURE__*/styled.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);
|
|
9736
10150
|
|
|
9737
10151
|
/* eslint-disable react/no-danger */
|
|
9738
10152
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9788,11 +10202,11 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9788
10202
|
return null;
|
|
9789
10203
|
};
|
|
9790
10204
|
|
|
9791
|
-
var _templateObject$
|
|
9792
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9793
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
9794
|
-
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$
|
|
9795
|
-
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
10205
|
+
var _templateObject$1a, _templateObject2$V, _templateObject3$H, _templateObject5$t, _templateObject6$l, _templateObject7$h;
|
|
10206
|
+
var SearchBarContainer = /*#__PURE__*/styled.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);
|
|
10207
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
10208
|
+
var SvgContainerClose = /*#__PURE__*/styled.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"])));
|
|
10209
|
+
var InputContainer = /*#__PURE__*/styled.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);
|
|
9796
10210
|
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
9797
10211
|
var SearchArrowContainer = /*#__PURE__*/styled.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"])));
|
|
9798
10212
|
|
|
@@ -9932,8 +10346,8 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
9932
10346
|
})));
|
|
9933
10347
|
};
|
|
9934
10348
|
|
|
9935
|
-
var _templateObject$
|
|
9936
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
10349
|
+
var _templateObject$1b;
|
|
10350
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.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);
|
|
9937
10351
|
|
|
9938
10352
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9939
10353
|
var HarmonicSize = {
|
|
@@ -9975,9 +10389,9 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9975
10389
|
}, description)))));
|
|
9976
10390
|
};
|
|
9977
10391
|
|
|
9978
|
-
var _templateObject$
|
|
9979
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
9980
|
-
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10392
|
+
var _templateObject$1c, _templateObject2$W, _templateObject3$I, _templateObject4$x;
|
|
10393
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10394
|
+
var SelectWrapper = /*#__PURE__*/styled.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) {
|
|
9981
10395
|
var width = _ref.width;
|
|
9982
10396
|
if (!width) return 'none';
|
|
9983
10397
|
return width + "px";
|
|
@@ -9994,12 +10408,12 @@ var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObje
|
|
|
9994
10408
|
if (darkMode) return "0 0 0 1px var(--color-state-medium)";
|
|
9995
10409
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9996
10410
|
}, devices.mobile, devices.mobile);
|
|
9997
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10411
|
+
var TextLabel$4 = /*#__PURE__*/styled.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) {
|
|
9998
10412
|
var darkMode = _ref5.darkMode;
|
|
9999
10413
|
if (darkMode) return "var(--color-base-white)";
|
|
10000
10414
|
return "var(--color-primary-black)";
|
|
10001
10415
|
}, devices.mobile);
|
|
10002
|
-
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10416
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
10003
10417
|
var darkMode = _ref6.darkMode;
|
|
10004
10418
|
if (darkMode) return "var(--color-base-white)";
|
|
10005
10419
|
return "var(--color-state-error)";
|
|
@@ -10118,16 +10532,16 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10118
10532
|
})));
|
|
10119
10533
|
};
|
|
10120
10534
|
|
|
10121
|
-
var _templateObject$
|
|
10122
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10123
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10535
|
+
var _templateObject$1d, _templateObject2$X, _templateObject3$J, _templateObject4$y;
|
|
10536
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
10537
|
+
var ItemsContainer = /*#__PURE__*/styled.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) {
|
|
10124
10538
|
if (props.showMenu) {
|
|
10125
10539
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
10126
10540
|
}
|
|
10127
10541
|
return "display: none;";
|
|
10128
10542
|
});
|
|
10129
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10130
|
-
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$
|
|
10543
|
+
var MenuContainer$1 = /*#__PURE__*/styled.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);
|
|
10544
|
+
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 0;\n }\n }\n"])), devices.mobileAndTablet);
|
|
10131
10545
|
|
|
10132
10546
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
10133
10547
|
var Tabs = function Tabs(_ref) {
|
|
@@ -10253,21 +10667,21 @@ var Tabs = function Tabs(_ref) {
|
|
|
10253
10667
|
}, "Menu"))))));
|
|
10254
10668
|
};
|
|
10255
10669
|
|
|
10256
|
-
var _templateObject$
|
|
10257
|
-
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10258
|
-
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$
|
|
10259
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
10670
|
+
var _templateObject$1e, _templateObject3$K, _templateObject4$z, _templateObject5$u, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$7;
|
|
10671
|
+
var Wrapper$5 = /*#__PURE__*/styled.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"])));
|
|
10672
|
+
var PromoLabel = /*#__PURE__*/styled(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"])));
|
|
10673
|
+
var ButtonContainer = /*#__PURE__*/styled.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) {
|
|
10260
10674
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10261
10675
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10262
10676
|
}, function (_ref2) {
|
|
10263
10677
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
10264
10678
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
10265
10679
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
10266
|
-
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10680
|
+
var TitleContainer$3 = /*#__PURE__*/styled.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) {
|
|
10267
10681
|
var singleChild = _ref3.singleChild;
|
|
10268
10682
|
return singleChild ? '0' : '10px';
|
|
10269
10683
|
});
|
|
10270
|
-
var DescriptionWrapper
|
|
10684
|
+
var DescriptionWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
10271
10685
|
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
10272
10686
|
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
|
|
10273
10687
|
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
|
|
@@ -10289,7 +10703,7 @@ var capitalizeFirstLetter = function capitalizeFirstLetter(string) {
|
|
|
10289
10703
|
var OfferText = function OfferText(_ref) {
|
|
10290
10704
|
var title = _ref.title,
|
|
10291
10705
|
description = _ref.description;
|
|
10292
|
-
return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, null, title), description && /*#__PURE__*/React__default.createElement(DescriptionWrapper
|
|
10706
|
+
return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, null, title), description && /*#__PURE__*/React__default.createElement(DescriptionWrapper, {
|
|
10293
10707
|
tag: "div",
|
|
10294
10708
|
size: "large",
|
|
10295
10709
|
dangerouslySetInnerHTML: {
|
|
@@ -10361,8 +10775,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10361
10775
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10362
10776
|
};
|
|
10363
10777
|
|
|
10364
|
-
var _templateObject$
|
|
10365
|
-
var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$
|
|
10778
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$L;
|
|
10779
|
+
var Wrapper$6 = /*#__PURE__*/styled.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) {
|
|
10366
10780
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10367
10781
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10368
10782
|
return aspectRatio;
|
|
@@ -10372,8 +10786,8 @@ var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$1e || (_templateObjec
|
|
|
10372
10786
|
height = _ref2.height;
|
|
10373
10787
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10374
10788
|
});
|
|
10375
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
10376
|
-
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$
|
|
10789
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
10790
|
+
var CaptionContext = /*#__PURE__*/styled(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"])));
|
|
10377
10791
|
|
|
10378
10792
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10379
10793
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -10406,12 +10820,12 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10406
10820
|
}, caption))));
|
|
10407
10821
|
};
|
|
10408
10822
|
|
|
10409
|
-
var _templateObject$
|
|
10410
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10411
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10412
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
10413
|
-
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10414
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10823
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$A, _templateObject5$v, _templateObject6$n;
|
|
10824
|
+
var CardContainer$1 = /*#__PURE__*/styled.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"])));
|
|
10825
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10826
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10827
|
+
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10828
|
+
var IconWrapper$3 = /*#__PURE__*/styled.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);
|
|
10415
10829
|
var TitleWrapper$4 = /*#__PURE__*/styled.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);
|
|
10416
10830
|
|
|
10417
10831
|
var MiniCard = function MiniCard(_ref) {
|
|
@@ -10450,8 +10864,8 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10450
10864
|
}, title)))));
|
|
10451
10865
|
};
|
|
10452
10866
|
|
|
10453
|
-
var _templateObject$
|
|
10454
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10867
|
+
var _templateObject$1h;
|
|
10868
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.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);
|
|
10455
10869
|
|
|
10456
10870
|
var NavTop = function NavTop(_ref) {
|
|
10457
10871
|
var accountText = _ref.accountText,
|
|
@@ -10491,18 +10905,47 @@ var NavTop = function NavTop(_ref) {
|
|
|
10491
10905
|
}));
|
|
10492
10906
|
};
|
|
10493
10907
|
|
|
10494
|
-
var _templateObject$
|
|
10495
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10496
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10497
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
10908
|
+
var _templateObject$1i, _templateObject2$_, _templateObject3$N, _templateObject4$B, _templateObject5$w;
|
|
10909
|
+
var ReadMoreContainer = /*#__PURE__*/styled.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"])));
|
|
10910
|
+
var LinkContainer = /*#__PURE__*/styled.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"])));
|
|
10911
|
+
var FullTextContainer = /*#__PURE__*/styled.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) {
|
|
10498
10912
|
var isVisible = _ref.isVisible;
|
|
10499
10913
|
return isVisible ? 'visible' : 'hidden';
|
|
10500
10914
|
});
|
|
10501
|
-
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
10915
|
+
var IntroTextContainer = /*#__PURE__*/styled.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) {
|
|
10502
10916
|
var isVisible = _ref2.isVisible;
|
|
10503
10917
|
return isVisible ? 'visible' : 'hidden';
|
|
10504
10918
|
});
|
|
10505
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10919
|
+
var ContentContainer$5 = /*#__PURE__*/styled.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"])));
|
|
10920
|
+
|
|
10921
|
+
var _templateObject$1j, _templateObject2$$;
|
|
10922
|
+
var TextLinkWrapper$4 = /*#__PURE__*/styled.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) {
|
|
10923
|
+
var color = _ref.color;
|
|
10924
|
+
return color;
|
|
10925
|
+
});
|
|
10926
|
+
var TextLinkIconWrapper$1 = /*#__PURE__*/styled.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"])));
|
|
10927
|
+
|
|
10928
|
+
var _excluded$r = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
10929
|
+
var ReadMoreTextLink = function ReadMoreTextLink(_ref) {
|
|
10930
|
+
var children = _ref.children,
|
|
10931
|
+
iconName = _ref.iconName,
|
|
10932
|
+
iconDirection = _ref.iconDirection,
|
|
10933
|
+
textColor = _ref.textColor,
|
|
10934
|
+
_ref$disableTruncatio = _ref.disableTruncation,
|
|
10935
|
+
disableTruncation = _ref$disableTruncatio === void 0 ? false : _ref$disableTruncatio,
|
|
10936
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
|
|
10937
|
+
var truncatedString = disableTruncation ? children : children.substring(0, 30);
|
|
10938
|
+
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$4, Object.assign({
|
|
10939
|
+
color: textColor,
|
|
10940
|
+
iconName: iconName
|
|
10941
|
+
}, rest), truncatedString, iconName ? (/*#__PURE__*/React__default.createElement(TextLinkIconWrapper$1, {
|
|
10942
|
+
"data-testid": "text-link-icon"
|
|
10943
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10944
|
+
iconName: iconName,
|
|
10945
|
+
direction: iconDirection,
|
|
10946
|
+
color: textColor
|
|
10947
|
+
}))) : null);
|
|
10948
|
+
};
|
|
10506
10949
|
|
|
10507
10950
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10508
10951
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10521,7 +10964,8 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10521
10964
|
hideText = _ref.hideText,
|
|
10522
10965
|
characterLimit = _ref.characterLimit,
|
|
10523
10966
|
_ref$truncate = _ref.truncate,
|
|
10524
|
-
truncate = _ref$truncate === void 0 ? true : _ref$truncate
|
|
10967
|
+
truncate = _ref$truncate === void 0 ? true : _ref$truncate,
|
|
10968
|
+
className = _ref.className;
|
|
10525
10969
|
var _useState = useState(initOpen),
|
|
10526
10970
|
isFullTextOpen = _useState[0],
|
|
10527
10971
|
setIsFullTextOpen = _useState[1];
|
|
@@ -10558,14 +11002,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10558
11002
|
var contentContainerId = title + "-read-more-content";
|
|
10559
11003
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, {
|
|
10560
11004
|
tabIndex: 0,
|
|
10561
|
-
onKeyDown: handleKeyDown
|
|
11005
|
+
onKeyDown: handleKeyDown,
|
|
11006
|
+
className: className,
|
|
11007
|
+
showTopLine: false
|
|
10562
11008
|
}, /*#__PURE__*/React__default.createElement(ReadMoreContainer, {
|
|
10563
11009
|
"aria-label": title,
|
|
10564
11010
|
"aria-expanded": isFullTextOpen,
|
|
10565
11011
|
"aria-controls": contentContainerId
|
|
10566
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10567
|
-
|
|
10568
|
-
semanticLevel: 3
|
|
11012
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
11013
|
+
size: "small"
|
|
10569
11014
|
}, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$5, {
|
|
10570
11015
|
"data-testid": "richcontainer",
|
|
10571
11016
|
ref: readMoreContent,
|
|
@@ -10576,22 +11021,22 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10576
11021
|
}
|
|
10577
11022
|
}, /*#__PURE__*/React__default.createElement(FullTextContainer, {
|
|
10578
11023
|
isVisible: isFullTextOpen
|
|
10579
|
-
}, fullText)), /*#__PURE__*/React__default.createElement(LinkContainer, null, (fullText || isFullTextOpen) && (/*#__PURE__*/React__default.createElement(
|
|
11024
|
+
}, fullText)), /*#__PURE__*/React__default.createElement(LinkContainer, null, (fullText || isFullTextOpen) && (/*#__PURE__*/React__default.createElement(ReadMoreTextLink, {
|
|
10580
11025
|
tabIndex: 0,
|
|
10581
11026
|
role: "button",
|
|
10582
11027
|
onClick: toggleFullText
|
|
10583
11028
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10584
11029
|
};
|
|
10585
11030
|
|
|
10586
|
-
var _templateObject$
|
|
10587
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
10588
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
10589
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
10590
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
11031
|
+
var _templateObject$1k, _templateObject2$10, _templateObject3$O, _templateObject4$C, _templateObject5$x;
|
|
11032
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
11033
|
+
var MenuList = /*#__PURE__*/styled.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"])), Colors.LightGrey);
|
|
11034
|
+
var MobileButton = /*#__PURE__*/styled.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"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
11035
|
+
var MenuItem$1 = /*#__PURE__*/styled.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"])), Colors.Black, function (_ref) {
|
|
10591
11036
|
var isActive = _ref.isActive;
|
|
10592
11037
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10593
11038
|
}, Colors.MidGrey);
|
|
10594
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
11039
|
+
var MobileMenuList = /*#__PURE__*/styled.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) {
|
|
10595
11040
|
var isOpen = _ref2.isOpen;
|
|
10596
11041
|
return isOpen ? 'block' : 'none';
|
|
10597
11042
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -10747,15 +11192,15 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10747
11192
|
});
|
|
10748
11193
|
};
|
|
10749
11194
|
|
|
10750
|
-
var _templateObject$
|
|
10751
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10752
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2
|
|
10753
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
11195
|
+
var _templateObject$1l, _templateObject2$11, _templateObject3$P, _templateObject4$D, _templateObject5$y, _templateObject6$o;
|
|
11196
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11197
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11198
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10754
11199
|
var color = _ref.color;
|
|
10755
11200
|
return "var(--base-color-" + color + ")";
|
|
10756
11201
|
});
|
|
10757
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
10758
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$
|
|
11202
|
+
var BottomLine = /*#__PURE__*/styled.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"])));
|
|
11203
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10759
11204
|
var color = _ref2.color;
|
|
10760
11205
|
return "var(--base-color-" + color + ")";
|
|
10761
11206
|
});
|
|
@@ -10841,14 +11286,14 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10841
11286
|
}, strengthLabel))));
|
|
10842
11287
|
};
|
|
10843
11288
|
|
|
10844
|
-
var _templateObject$
|
|
10845
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
10846
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10847
|
-
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10848
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
11289
|
+
var _templateObject$1m, _templateObject2$12, _templateObject3$Q, _templateObject4$E, _templateObject5$z, _templateObject6$p, _templateObject7$j, _templateObject8$d;
|
|
11290
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11291
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11292
|
+
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11293
|
+
var TableHeader = /*#__PURE__*/styled.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) {
|
|
10849
11294
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10850
11295
|
}, devices.tablet, devices.mobile);
|
|
10851
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
11296
|
+
var TableCell = /*#__PURE__*/styled.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) {
|
|
10852
11297
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10853
11298
|
}, devices.mobile);
|
|
10854
11299
|
var PaginationWrapper = /*#__PURE__*/styled(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);
|
|
@@ -11056,18 +11501,18 @@ var Table = function Table(_ref) {
|
|
|
11056
11501
|
}))));
|
|
11057
11502
|
};
|
|
11058
11503
|
|
|
11059
|
-
var _templateObject$
|
|
11060
|
-
var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$
|
|
11504
|
+
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;
|
|
11505
|
+
var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11061
11506
|
var theme = _ref.theme;
|
|
11062
11507
|
return "var(--color-" + theme + ")";
|
|
11063
11508
|
}, function (_ref2) {
|
|
11064
11509
|
var theme = _ref2.theme;
|
|
11065
11510
|
return "var(--color-" + theme + ")";
|
|
11066
11511
|
});
|
|
11067
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
11068
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
11069
|
-
var Error = /*#__PURE__*/styled.div(_templateObject4$
|
|
11070
|
-
var Form = /*#__PURE__*/styled.form(_templateObject5$
|
|
11512
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(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);
|
|
11513
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('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);
|
|
11514
|
+
var Error = /*#__PURE__*/styled.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"])));
|
|
11515
|
+
var Form = /*#__PURE__*/styled.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);
|
|
11071
11516
|
var FormFooterWrapper = /*#__PURE__*/styled.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);
|
|
11072
11517
|
var ServerError = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
11073
11518
|
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
@@ -11483,13 +11928,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11483
11928
|
}))))));
|
|
11484
11929
|
};
|
|
11485
11930
|
|
|
11486
|
-
var _templateObject$
|
|
11487
|
-
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11931
|
+
var _templateObject$1o, _templateObject2$14, _templateObject4$G, _templateObject5$B;
|
|
11932
|
+
var AnchorBarContainer = /*#__PURE__*/styled(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) {
|
|
11488
11933
|
var withShadow = _ref.withShadow;
|
|
11489
|
-
return withShadow && css(_templateObject2$
|
|
11934
|
+
return withShadow && css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11490
11935
|
}, devices.mobile);
|
|
11491
|
-
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$
|
|
11492
|
-
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$
|
|
11936
|
+
var CloseButtonWrapper = /*#__PURE__*/styled.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);
|
|
11937
|
+
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11493
11938
|
|
|
11494
11939
|
var defaultGrid = {
|
|
11495
11940
|
columnStartDesktop: 2,
|
|
@@ -11547,12 +11992,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11547
11992
|
return null;
|
|
11548
11993
|
};
|
|
11549
11994
|
|
|
11550
|
-
var _templateObject$
|
|
11551
|
-
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$
|
|
11995
|
+
var _templateObject$1p, _templateObject2$15;
|
|
11996
|
+
var FocusableTab = /*#__PURE__*/styled(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) {
|
|
11552
11997
|
var hide = _ref.hide;
|
|
11553
11998
|
return hide && "display: none;";
|
|
11554
11999
|
}, devices.mobileAndTablet);
|
|
11555
|
-
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$
|
|
12000
|
+
var HiddenBlock = /*#__PURE__*/styled.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);
|
|
11556
12001
|
|
|
11557
12002
|
/**
|
|
11558
12003
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11644,23 +12089,23 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11644
12089
|
}));
|
|
11645
12090
|
};
|
|
11646
12091
|
|
|
11647
|
-
var _templateObject$
|
|
12092
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$S, _templateObject4$H, _templateObject5$C, _templateObject6$r, _templateObject7$l;
|
|
11648
12093
|
var color = 'primary-black';
|
|
11649
12094
|
var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
|
|
11650
12095
|
borderColor: color,
|
|
11651
12096
|
hoveredColor: color,
|
|
11652
12097
|
pressedColor: color,
|
|
11653
12098
|
textColor: color
|
|
11654
|
-
})(_templateObject$
|
|
11655
|
-
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11656
|
-
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$
|
|
12099
|
+
})(_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);
|
|
12100
|
+
var Container$7 = /*#__PURE__*/styled.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);
|
|
12101
|
+
var Description = /*#__PURE__*/styled(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);
|
|
11657
12102
|
var Heading = /*#__PURE__*/styled(HarmonicHeader).attrs({
|
|
11658
12103
|
serif: true,
|
|
11659
12104
|
size: 'medium'
|
|
11660
|
-
})(_templateObject4$
|
|
12105
|
+
})(_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);
|
|
11661
12106
|
var Intro = /*#__PURE__*/styled(HarmonicSubtitle).attrs({
|
|
11662
12107
|
size: 'large'
|
|
11663
|
-
})(_templateObject5$
|
|
12108
|
+
})(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11664
12109
|
var SignInLink = /*#__PURE__*/styled.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"])));
|
|
11665
12110
|
var SignInPrompt = /*#__PURE__*/styled(BodyCopyHarmonic).attrs({
|
|
11666
12111
|
size: 'large'
|
|
@@ -11691,8 +12136,8 @@ var Paywall = function Paywall(_ref) {
|
|
|
11691
12136
|
}, "Sign in"))));
|
|
11692
12137
|
};
|
|
11693
12138
|
|
|
11694
|
-
var _templateObject$
|
|
11695
|
-
var Wrapper$9 = /*#__PURE__*/styled.div(_templateObject$
|
|
12139
|
+
var _templateObject$1r;
|
|
12140
|
+
var Wrapper$9 = /*#__PURE__*/styled.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);
|
|
11696
12141
|
|
|
11697
12142
|
var UpsellCards = function UpsellCards(_ref) {
|
|
11698
12143
|
var upsellCards = _ref.upsellCards,
|
|
@@ -11883,14 +12328,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11883
12328
|
})))))));
|
|
11884
12329
|
};
|
|
11885
12330
|
|
|
11886
|
-
var _templateObject$
|
|
11887
|
-
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11888
|
-
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
11889
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$
|
|
11890
|
-
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11891
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
12331
|
+
var _templateObject$1s, _templateObject2$17, _templateObject3$T, _templateObject4$I, _templateObject5$D, _templateObject6$s, _templateObject7$m;
|
|
12332
|
+
var FooterSection = /*#__PURE__*/styled(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);
|
|
12333
|
+
var PolicyLinksSection = /*#__PURE__*/styled(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);
|
|
12334
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled(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);
|
|
12335
|
+
var SectionWrapper = /*#__PURE__*/styled.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);
|
|
12336
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled(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);
|
|
11892
12337
|
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11893
|
-
var TextLinkWrapper$
|
|
12338
|
+
var TextLinkWrapper$5 = /*#__PURE__*/styled(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"])));
|
|
11894
12339
|
|
|
11895
12340
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11896
12341
|
var Footer = function Footer(_ref) {
|
|
@@ -11919,14 +12364,14 @@ var Footer = function Footer(_ref) {
|
|
|
11919
12364
|
"data-testid": "contact-newsletter"
|
|
11920
12365
|
}, /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(SocialLinks, {
|
|
11921
12366
|
items: rawSocialMediaLinks
|
|
11922
|
-
}), /*#__PURE__*/React__default.createElement(TextLinkWrapper$
|
|
12367
|
+
}), /*#__PURE__*/React__default.createElement(TextLinkWrapper$5, {
|
|
11923
12368
|
href: contact.href,
|
|
11924
12369
|
"aria-label": contact.title,
|
|
11925
12370
|
tabIndex: isMobile ? 2 : 0
|
|
11926
12371
|
}, contact.title)), /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11927
12372
|
size: "large",
|
|
11928
12373
|
color: "white"
|
|
11929
|
-
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$
|
|
12374
|
+
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$5, {
|
|
11930
12375
|
href: newsletter.link.href,
|
|
11931
12376
|
"data-roh": newsletter.link.dataRoh,
|
|
11932
12377
|
"aria-label": newsletter.link.title,
|
|
@@ -11948,18 +12393,18 @@ var Footer = function Footer(_ref) {
|
|
|
11948
12393
|
}, additionalInfo))));
|
|
11949
12394
|
};
|
|
11950
12395
|
|
|
11951
|
-
var _templateObject$
|
|
12396
|
+
var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$J, _templateObject5$E, _templateObject8$f, _templateObject9$9, _templateObject0$8;
|
|
11952
12397
|
var LIST_ITEM_GAP = 32;
|
|
11953
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12398
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.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) {
|
|
11954
12399
|
var bottomBorder = _ref.bottomBorder;
|
|
11955
12400
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11956
12401
|
}, zIndexes.anchor, function (_ref2) {
|
|
11957
12402
|
var withShadow = _ref2.withShadow;
|
|
11958
|
-
return withShadow && css(_templateObject2$
|
|
12403
|
+
return withShadow && css(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11959
12404
|
});
|
|
11960
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
11961
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11962
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
12405
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
12406
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
12407
|
+
var TabsList = /*#__PURE__*/styled.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) {
|
|
11963
12408
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11964
12409
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
11965
12410
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -11985,7 +12430,7 @@ var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$8 || (_templateObjec
|
|
|
11985
12430
|
return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
|
|
11986
12431
|
});
|
|
11987
12432
|
|
|
11988
|
-
var _excluded$
|
|
12433
|
+
var _excluded$s = ["id", "text"];
|
|
11989
12434
|
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
11990
12435
|
var tabs = _ref.tabs,
|
|
11991
12436
|
onTabClick = _ref.onTabClick,
|
|
@@ -12096,7 +12541,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12096
12541
|
}, []);
|
|
12097
12542
|
useEffect(function () {
|
|
12098
12543
|
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
12099
|
-
var elementGap =
|
|
12544
|
+
var elementGap = LIST_ITEM_GAP;
|
|
12100
12545
|
var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
|
|
12101
12546
|
var targetSectionElement = document.getElementById(item.id);
|
|
12102
12547
|
if (!targetSectionElement) return false;
|
|
@@ -12119,7 +12564,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12119
12564
|
offsetWidth = tabLinkElement.offsetWidth;
|
|
12120
12565
|
var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
|
|
12121
12566
|
if (!isInView && tabListRef != null && tabListRef.current) {
|
|
12122
|
-
tabListRef.current.scrollLeft = offsetLeft;
|
|
12567
|
+
tabListRef.current.scrollLeft = offsetLeft - LIST_ITEM_GAP;
|
|
12123
12568
|
}
|
|
12124
12569
|
setSelectedItem(reachedItem.id);
|
|
12125
12570
|
}
|
|
@@ -12196,7 +12641,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12196
12641
|
}, tabs.map(function (_ref4) {
|
|
12197
12642
|
var id = _ref4.id,
|
|
12198
12643
|
text = _ref4.text,
|
|
12199
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
12644
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$s);
|
|
12200
12645
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
12201
12646
|
key: id
|
|
12202
12647
|
}, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
|
|
@@ -12229,17 +12674,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12229
12674
|
})))) : null))));
|
|
12230
12675
|
};
|
|
12231
12676
|
|
|
12232
|
-
var _templateObject$
|
|
12233
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12677
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$K, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$a, _templateObject0$9;
|
|
12678
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.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) {
|
|
12234
12679
|
var sticky = _ref.sticky;
|
|
12235
12680
|
return sticky ? 'sticky' : 'initial';
|
|
12236
12681
|
}, zIndexes.anchor);
|
|
12237
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
12238
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
12682
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
12683
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.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) {
|
|
12239
12684
|
var title = _ref2.title;
|
|
12240
12685
|
return title ? 'row' : 'row-reverse';
|
|
12241
12686
|
}, devices.tablet, devices.mobile);
|
|
12242
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$
|
|
12687
|
+
var AnchorTitle = /*#__PURE__*/styled.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);
|
|
12243
12688
|
var ButtonsDesktopWrapper = /*#__PURE__*/styled.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);
|
|
12244
12689
|
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
12245
12690
|
var PrimaryButtonReverse = /*#__PURE__*/styled(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) {
|
|
@@ -12258,7 +12703,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$g
|
|
|
12258
12703
|
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12259
12704
|
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
12260
12705
|
|
|
12261
|
-
var _excluded$
|
|
12706
|
+
var _excluded$t = ["text"],
|
|
12262
12707
|
_excluded2$4 = ["text"];
|
|
12263
12708
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
12264
12709
|
var title = _ref.title,
|
|
@@ -12268,7 +12713,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12268
12713
|
message = _ref.message;
|
|
12269
12714
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
12270
12715
|
primaryButtonText = _ref2.text,
|
|
12271
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
12716
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
|
|
12272
12717
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
12273
12718
|
secondaryButtonText = _ref3.text,
|
|
12274
12719
|
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
|
|
@@ -12289,11 +12734,11 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12289
12734
|
}, message))));
|
|
12290
12735
|
};
|
|
12291
12736
|
|
|
12292
|
-
var _templateObject$
|
|
12293
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
12294
|
-
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$
|
|
12295
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12296
|
-
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$
|
|
12737
|
+
var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$L;
|
|
12738
|
+
var UpsellBorderBox = /*#__PURE__*/styled.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);
|
|
12739
|
+
var TitleContent = /*#__PURE__*/styled(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);
|
|
12740
|
+
var TextContainer$2 = /*#__PURE__*/styled.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);
|
|
12741
|
+
var TextContent = /*#__PURE__*/styled(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);
|
|
12297
12742
|
|
|
12298
12743
|
var UpsellSection = function UpsellSection(_ref) {
|
|
12299
12744
|
var title = _ref.title,
|
|
@@ -12338,9 +12783,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12338
12783
|
})))));
|
|
12339
12784
|
};
|
|
12340
12785
|
|
|
12341
|
-
var _templateObject$
|
|
12342
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12343
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
12786
|
+
var _templateObject$1w, _templateObject2$1b;
|
|
12787
|
+
var StickyBarWrapper = /*#__PURE__*/styled.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);
|
|
12788
|
+
var StickyBarGrid = /*#__PURE__*/styled(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) {
|
|
12344
12789
|
var bottomBorder = _ref.bottomBorder;
|
|
12345
12790
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12346
12791
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12371,13 +12816,13 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12371
12816
|
}, children)));
|
|
12372
12817
|
};
|
|
12373
12818
|
|
|
12374
|
-
var _templateObject$
|
|
12375
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
12376
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
12377
|
-
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12378
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
12819
|
+
var _templateObject$1x, _templateObject2$1c, _templateObject3$X, _templateObject4$M;
|
|
12820
|
+
var InnerModal = /*#__PURE__*/styled.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);
|
|
12821
|
+
var CloseButton = /*#__PURE__*/styled.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);
|
|
12822
|
+
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
12823
|
+
var Overlay = /*#__PURE__*/styled(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"])));
|
|
12379
12824
|
|
|
12380
|
-
var _excluded$
|
|
12825
|
+
var _excluded$u = ["isOpen", "setIsOpen", "children", "appElementId", "closeButtonAriaLabel"];
|
|
12381
12826
|
var MAX_Z_INDEX = 9999999999;
|
|
12382
12827
|
if (Modal.defaultStyles.content) {
|
|
12383
12828
|
Modal.defaultStyles.content.position = 'static';
|
|
@@ -12453,7 +12898,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
12453
12898
|
appElementId = _ref.appElementId,
|
|
12454
12899
|
_ref$closeButtonAriaL = _ref.closeButtonAriaLabel,
|
|
12455
12900
|
closeButtonAriaLabel = _ref$closeButtonAriaL === void 0 ? 'Close modal window' : _ref$closeButtonAriaL,
|
|
12456
|
-
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12901
|
+
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
|
|
12457
12902
|
var isMobile = useMobile();
|
|
12458
12903
|
var customStyles = {
|
|
12459
12904
|
overlay: {
|
|
@@ -12582,27 +13027,27 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12582
13027
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12583
13028
|
};
|
|
12584
13029
|
|
|
12585
|
-
var _templateObject$
|
|
12586
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
13030
|
+
var _templateObject$1y, _templateObject2$1d, _templateObject3$Y, _templateObject4$N, _templateObject5$F, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$b;
|
|
13031
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled.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) {
|
|
12587
13032
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12588
13033
|
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 }";
|
|
12589
13034
|
}, devices.mobile, function (_ref2) {
|
|
12590
13035
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12591
13036
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12592
13037
|
});
|
|
12593
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
13038
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$1d || (_templateObject2$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12594
13039
|
var type = _ref3.type,
|
|
12595
13040
|
isActive = _ref3.isActive;
|
|
12596
13041
|
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 ";
|
|
12597
13042
|
});
|
|
12598
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
12599
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12600
|
-
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
13043
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(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);
|
|
13044
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled.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"])));
|
|
13045
|
+
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12601
13046
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12602
13047
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12603
13048
|
});
|
|
12604
13049
|
var TitleText$1 = /*#__PURE__*/styled(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"])));
|
|
12605
|
-
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
13050
|
+
var ButtonsWrapper = /*#__PURE__*/styled.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);
|
|
12606
13051
|
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12607
13052
|
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12608
13053
|
var active = _ref5.active;
|
|
@@ -12874,17 +13319,17 @@ var Carousel = function Carousel(_ref) {
|
|
|
12874
13319
|
}, children))));
|
|
12875
13320
|
};
|
|
12876
13321
|
|
|
12877
|
-
var _templateObject$
|
|
12878
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
12879
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12880
|
-
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
12881
|
-
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
12882
|
-
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
13322
|
+
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;
|
|
13323
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled(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);
|
|
13324
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled.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);
|
|
13325
|
+
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
13326
|
+
var InfoWrapper$2 = /*#__PURE__*/styled.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);
|
|
13327
|
+
var InfoLogoWrapper = /*#__PURE__*/styled.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);
|
|
12883
13328
|
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12884
13329
|
var InfoTextWrapper = /*#__PURE__*/styled.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);
|
|
12885
13330
|
var InfoLinkWrapper = /*#__PURE__*/styled.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);
|
|
12886
13331
|
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12887
|
-
var RotatorButtonsWrapper$
|
|
13332
|
+
var RotatorButtonsWrapper$3 = /*#__PURE__*/styled.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12888
13333
|
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12889
13334
|
var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
12890
13335
|
var FirstButtonComponentWrapper = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
@@ -12897,7 +13342,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled.div(_templateObject15$1 || (_
|
|
|
12897
13342
|
}, devices.mobile);
|
|
12898
13343
|
var ProgressContainer$1 = /*#__PURE__*/styled.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n p {\n margin-bottom: 16px;\n }\n\n @media ", " {\n margin-top: 20px;\n\n p {\n margin-bottom: 12px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12899
13344
|
|
|
12900
|
-
var _excluded$
|
|
13345
|
+
var _excluded$v = ["text"],
|
|
12901
13346
|
_excluded2$5 = ["text"];
|
|
12902
13347
|
var _buttonTypeToButton$2;
|
|
12903
13348
|
var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
|
|
@@ -12908,7 +13353,7 @@ var Buttons = function Buttons(_ref) {
|
|
|
12908
13353
|
var _ref2 = firstButton || {},
|
|
12909
13354
|
_ref2$text = _ref2.text,
|
|
12910
13355
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
12911
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
13356
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$v);
|
|
12912
13357
|
var secondButton = links == null ? void 0 : links[1];
|
|
12913
13358
|
var _ref3 = secondButton || {},
|
|
12914
13359
|
_ref3$text = _ref3.text,
|
|
@@ -13134,7 +13579,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13134
13579
|
auxiliaryCTA: auxiliaryCTA
|
|
13135
13580
|
})), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
|
|
13136
13581
|
"data-testid": "carousel-wrapper"
|
|
13137
|
-
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$
|
|
13582
|
+
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$3, {
|
|
13138
13583
|
"data-testid": "rotator-buttons"
|
|
13139
13584
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
13140
13585
|
onClickNext: onNext,
|
|
@@ -13151,11 +13596,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13151
13596
|
})));
|
|
13152
13597
|
};
|
|
13153
13598
|
|
|
13154
|
-
var _excluded$
|
|
13599
|
+
var _excluded$w = ["logo", "slides"];
|
|
13155
13600
|
var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
13156
13601
|
var logo = _ref.logo,
|
|
13157
13602
|
slides = _ref.slides,
|
|
13158
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
13603
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
|
|
13159
13604
|
var slidesWithLinks = slides.map(function (slide) {
|
|
13160
13605
|
var links = processSlideLinks(slide.links);
|
|
13161
13606
|
return _extends({}, slide, {
|
|
@@ -13172,10 +13617,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
|
13172
13617
|
})));
|
|
13173
13618
|
};
|
|
13174
13619
|
|
|
13175
|
-
var _excluded$
|
|
13620
|
+
var _excluded$x = ["slides"];
|
|
13176
13621
|
var HighlightsCore = function HighlightsCore(_ref) {
|
|
13177
13622
|
var slides = _ref.slides,
|
|
13178
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
13623
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
|
|
13179
13624
|
var slidesWithLinks = slides.map(function (slide) {
|
|
13180
13625
|
var links = processSlideLinks(slide.links);
|
|
13181
13626
|
return _extends({}, slide, {
|
|
@@ -13189,11 +13634,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
|
|
|
13189
13634
|
})));
|
|
13190
13635
|
};
|
|
13191
13636
|
|
|
13192
|
-
var _excluded$
|
|
13637
|
+
var _excluded$y = ["logo", "slides"];
|
|
13193
13638
|
var HighlightsStream = function HighlightsStream(_ref) {
|
|
13194
13639
|
var logo = _ref.logo,
|
|
13195
13640
|
slides = _ref.slides,
|
|
13196
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
13641
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
|
|
13197
13642
|
var slidesWithLinks = slides.map(function (slide) {
|
|
13198
13643
|
var links = processSlideLinks(slide.links);
|
|
13199
13644
|
return _extends({}, slide, {
|
|
@@ -13210,9 +13655,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13210
13655
|
})));
|
|
13211
13656
|
};
|
|
13212
13657
|
|
|
13213
|
-
var _templateObject$
|
|
13214
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
13215
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
13658
|
+
var _templateObject$1A, _templateObject3$_;
|
|
13659
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1A || (_templateObject$1A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
13660
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$_ || (_templateObject3$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13216
13661
|
|
|
13217
13662
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13218
13663
|
var children = _ref.children;
|
|
@@ -13807,8 +14252,8 @@ var Theme = function Theme(_ref) {
|
|
|
13807
14252
|
}, children);
|
|
13808
14253
|
};
|
|
13809
14254
|
|
|
13810
|
-
var _templateObject$
|
|
13811
|
-
var GlobalStyles = /*#__PURE__*/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) {
|
|
14255
|
+
var _templateObject$1B;
|
|
14256
|
+
var GlobalStyles = /*#__PURE__*/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) {
|
|
13812
14257
|
var theme = _ref.theme;
|
|
13813
14258
|
return theme.colors.primary;
|
|
13814
14259
|
}, function (_ref2) {
|
|
@@ -14755,5 +15200,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1z || (_templa
|
|
|
14755
15200
|
return theme.footer.tablet.paddingBottom;
|
|
14756
15201
|
}, devices.desktop, devices.largeDesktop);
|
|
14757
15202
|
|
|
14758
|
-
export { Accordion, Accordions, Account, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, Basket$1 as Basket, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContactNewsletter, ContentSummary, ControlledDropdown, CreditListing, CustomStrategyTabsFilter, Dropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, MiniCard, MinimalCarousel, ModalWindow, NavTop, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, Person, PersonCard, PersonDetails, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search$1 as Search, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, SocialLinks, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Swipe, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellCards, UpsellSection, VideoControls, VideoWithControls$2 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
|
|
15203
|
+
export { Accordion, Accordions, Account, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, Basket$1 as Basket, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CastFiltersVariant as CastFilterVariant, CinemaBadge, Colors, ContactCard, ContactNewsletter, ContentSummary, ControlledDropdown, CreditListing, CustomStrategyTabsFilter, DisplayHeader, Dropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, MiniCard, MinimalCarousel, ModalWindow, NavTop, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, Person, PersonCard, PersonDetails, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search$1 as Search, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, SocialLinks, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Swipe, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellCards, UpsellSection, VideoControls, VideoWithControls$2 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
|
|
14759
15204
|
//# sourceMappingURL=harmonic.esm.js.map
|