@royaloperahouse/chord 0.7.20 → 0.7.23
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 +10 -0
- package/README.md +1 -1
- package/dist/chord.cjs.development.js +126 -55
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +126 -56
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/AnnouncementBanner/AnnouncementBanner.d.ts +4 -0
- package/dist/components/molecules/AnnouncementBanner/AnnouncementBanner.style.d.ts +3 -0
- package/dist/components/molecules/AnnouncementBanner/index.d.ts +2 -0
- package/dist/components/molecules/PageHeading/PageHeading.style.d.ts +1 -0
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/types.d.ts +18 -0
- package/package.json +1 -1
package/dist/chord.esm.js
CHANGED
|
@@ -270,7 +270,7 @@ var common = {
|
|
|
270
270
|
sizes: {
|
|
271
271
|
headers: {
|
|
272
272
|
1: '38px',
|
|
273
|
-
2: '
|
|
273
|
+
2: '30px',
|
|
274
274
|
3: '26px',
|
|
275
275
|
4: '24px',
|
|
276
276
|
5: '20px',
|
|
@@ -334,7 +334,7 @@ var common = {
|
|
|
334
334
|
lineHeights: {
|
|
335
335
|
headers: {
|
|
336
336
|
1: '42px',
|
|
337
|
-
2: '
|
|
337
|
+
2: '34px',
|
|
338
338
|
3: '30px',
|
|
339
339
|
4: '28px',
|
|
340
340
|
5: '28px',
|
|
@@ -4661,7 +4661,16 @@ var Accordion = function Accordion(_ref) {
|
|
|
4661
4661
|
|
|
4662
4662
|
var _useState3 = useState(initOpen ? 'Detract' : 'Expand'),
|
|
4663
4663
|
iconName = _useState3[0],
|
|
4664
|
-
setIconName = _useState3[1];
|
|
4664
|
+
setIconName = _useState3[1]; // Contents children visibility is set to prevent it from being keyboard tabbable when the accordion is closed
|
|
4665
|
+
|
|
4666
|
+
|
|
4667
|
+
var _useState4 = useState(initOpen ? {
|
|
4668
|
+
visibility: 'visible'
|
|
4669
|
+
} : {
|
|
4670
|
+
visibility: 'hidden'
|
|
4671
|
+
}),
|
|
4672
|
+
childrenVisibility = _useState4[0],
|
|
4673
|
+
setChildrenVisibility = _useState4[1];
|
|
4665
4674
|
|
|
4666
4675
|
var content = useRef(null);
|
|
4667
4676
|
useEffect(function () {
|
|
@@ -4674,10 +4683,23 @@ var Accordion = function Accordion(_ref) {
|
|
|
4674
4683
|
setOpenAccordion(!openAccordion);
|
|
4675
4684
|
setTextHeight(openAccordion ? '0px' : content.current.scrollHeight + "px");
|
|
4676
4685
|
setIconName(openAccordion ? 'Expand' : 'Detract');
|
|
4686
|
+
setChildrenVisibility(openAccordion ? {
|
|
4687
|
+
visibility: 'hidden'
|
|
4688
|
+
} : {
|
|
4689
|
+
visibility: 'visible'
|
|
4690
|
+
});
|
|
4691
|
+
};
|
|
4692
|
+
|
|
4693
|
+
var keyDown = function keyDown(e) {
|
|
4694
|
+
if (e.key === 'Enter' || e.key === 'Space') {
|
|
4695
|
+
toggleAccordion();
|
|
4696
|
+
}
|
|
4677
4697
|
};
|
|
4678
4698
|
|
|
4679
4699
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, null, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$1, {
|
|
4680
|
-
onClick: toggleAccordion
|
|
4700
|
+
onClick: toggleAccordion,
|
|
4701
|
+
onKeyDown: keyDown,
|
|
4702
|
+
tabIndex: 0
|
|
4681
4703
|
}, /*#__PURE__*/React__default.createElement("a", null, title), /*#__PURE__*/React__default.createElement(Icon, {
|
|
4682
4704
|
iconName: iconName
|
|
4683
4705
|
})), /*#__PURE__*/React__default.createElement(ContentContainer, {
|
|
@@ -4686,7 +4708,9 @@ var Accordion = function Accordion(_ref) {
|
|
|
4686
4708
|
style: {
|
|
4687
4709
|
maxHeight: "" + textHeight
|
|
4688
4710
|
}
|
|
4689
|
-
}, /*#__PURE__*/React__default.createElement(ChildrenContainer,
|
|
4711
|
+
}, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
4712
|
+
style: childrenVisibility
|
|
4713
|
+
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
4690
4714
|
};
|
|
4691
4715
|
|
|
4692
4716
|
var _templateObject$C;
|
|
@@ -4709,14 +4733,57 @@ var Accordions = function Accordions(_ref) {
|
|
|
4709
4733
|
}));
|
|
4710
4734
|
};
|
|
4711
4735
|
|
|
4712
|
-
var _templateObject$D, _templateObject2$m, _templateObject3$g
|
|
4736
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g;
|
|
4737
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: ", ";\n color: var(--base-color-white);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), function (_ref) {
|
|
4738
|
+
var theme = _ref.theme;
|
|
4739
|
+
return theme.colors.primary;
|
|
4740
|
+
}, devices.mobile);
|
|
4741
|
+
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n @media ", " {\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
4742
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-white);\n a {\n color: var(--base-color-white);\n text-decoration: underline;\n }\n"])));
|
|
4743
|
+
|
|
4744
|
+
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
4745
|
+
var title = _ref.title,
|
|
4746
|
+
announcementText = _ref.announcementText,
|
|
4747
|
+
time = _ref.time,
|
|
4748
|
+
icon = _ref.icon;
|
|
4749
|
+
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
4750
|
+
theme: ThemeType.Core
|
|
4751
|
+
}, /*#__PURE__*/React__default.createElement(AnnouncementBannerWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
4752
|
+
columnStartDesktop: 2,
|
|
4753
|
+
columnSpanDesktop: 1,
|
|
4754
|
+
columnStartDevice: 2,
|
|
4755
|
+
columnSpanDevice: 1
|
|
4756
|
+
}, /*#__PURE__*/React__default.createElement(SvgContainer$2, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4757
|
+
iconName: icon,
|
|
4758
|
+
color: "white"
|
|
4759
|
+
}))), /*#__PURE__*/React__default.createElement(GridItem, {
|
|
4760
|
+
columnStartDesktop: 3,
|
|
4761
|
+
columnSpanDesktop: 12,
|
|
4762
|
+
columnStartDevice: 3,
|
|
4763
|
+
columnSpanDevice: 11
|
|
4764
|
+
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
4765
|
+
level: 1
|
|
4766
|
+
}, /*#__PURE__*/React__default.createElement("span", {
|
|
4767
|
+
"data-testid": "titlecontainer"
|
|
4768
|
+
}, title), " (", /*#__PURE__*/React__default.createElement("span", {
|
|
4769
|
+
"data-testid": "timecontainer"
|
|
4770
|
+
}, time), ")"), /*#__PURE__*/React__default.createElement(ContentContainer$1, {
|
|
4771
|
+
"data-testid": "richcontainer"
|
|
4772
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
4773
|
+
dangerouslySetInnerHTML: {
|
|
4774
|
+
__html: announcementText
|
|
4775
|
+
}
|
|
4776
|
+
}))))));
|
|
4777
|
+
};
|
|
4778
|
+
|
|
4779
|
+
var _templateObject$E, _templateObject2$n, _templateObject3$h, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$4, _templateObject9$3;
|
|
4713
4780
|
var LENGTH_LARGE_TEXT = 28;
|
|
4714
4781
|
var LENGTH_SMALL_TEXT = 19;
|
|
4715
4782
|
var LENGTH_TEXT_TABLET = 10;
|
|
4716
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4717
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
4718
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
4719
|
-
var ContentContainer$
|
|
4783
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
4784
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: var(--base-color-primary);\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), zIndexes.contentOverlay);
|
|
4785
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
4786
|
+
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref) {
|
|
4720
4787
|
var fullWidth = _ref.fullWidth;
|
|
4721
4788
|
return fullWidth ? '0' : '20px';
|
|
4722
4789
|
}, function (_ref2) {
|
|
@@ -4750,13 +4817,13 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templat
|
|
|
4750
4817
|
return '';
|
|
4751
4818
|
});
|
|
4752
4819
|
|
|
4753
|
-
var _templateObject$
|
|
4754
|
-
var ProgressView = /*#__PURE__*/styled.div(_templateObject$
|
|
4755
|
-
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$
|
|
4820
|
+
var _templateObject$F, _templateObject2$o, _templateObject3$i;
|
|
4821
|
+
var ProgressView = /*#__PURE__*/styled.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 10px;\n width: 100%;\n display: flex;\n flex-direction: row;\n"])));
|
|
4822
|
+
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-progress);\n flex: ", ";\n"])), function (_ref) {
|
|
4756
4823
|
var progress = _ref.progress;
|
|
4757
4824
|
return progress;
|
|
4758
4825
|
});
|
|
4759
|
-
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$
|
|
4826
|
+
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n opacity: 0.5;\n flex: ", ";\n"])), function (_ref2) {
|
|
4760
4827
|
var progress = _ref2.progress;
|
|
4761
4828
|
return progress;
|
|
4762
4829
|
});
|
|
@@ -4857,7 +4924,7 @@ var Card = function Card(_ref) {
|
|
|
4857
4924
|
alt: "test"
|
|
4858
4925
|
})), withContinueWatching && /*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
|
|
4859
4926
|
progress: progress
|
|
4860
|
-
}))), /*#__PURE__*/React__default.createElement(ContentContainer$
|
|
4927
|
+
}))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
|
|
4861
4928
|
fullWidth: fullWidth
|
|
4862
4929
|
}, /*#__PURE__*/React__default.createElement("a", {
|
|
4863
4930
|
href: primaryButton == null ? void 0 : primaryButton.href,
|
|
@@ -4882,9 +4949,9 @@ var Card = function Card(_ref) {
|
|
|
4882
4949
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
4883
4950
|
};
|
|
4884
4951
|
|
|
4885
|
-
var _templateObject$
|
|
4886
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
4887
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
4952
|
+
var _templateObject$G, _templateObject2$p;
|
|
4953
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n {\n grid-row-gap: var(--cards-spacing-stack);\n }\n }\n"])), devices.mobile);
|
|
4954
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 1 / span 14;\n }\n }\n"])), devices.mobile);
|
|
4888
4955
|
|
|
4889
4956
|
var Cards = function Cards(_ref) {
|
|
4890
4957
|
var cards = _ref.cards,
|
|
@@ -4921,16 +4988,16 @@ var Cards = function Cards(_ref) {
|
|
|
4921
4988
|
}));
|
|
4922
4989
|
};
|
|
4923
4990
|
|
|
4924
|
-
var _templateObject$
|
|
4925
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
4991
|
+
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$d, _templateObject5$9;
|
|
4992
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__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) {
|
|
4926
4993
|
var imageToLeft = _ref.imageToLeft;
|
|
4927
4994
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
4928
4995
|
}, devices.mobile);
|
|
4929
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4996
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
4930
4997
|
var imageToLeft = _ref2.imageToLeft;
|
|
4931
4998
|
return imageToLeft ? 'left' : 'right';
|
|
4932
4999
|
}, devices.mobile);
|
|
4933
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
5000
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
4934
5001
|
var imageToLeft = _ref3.imageToLeft;
|
|
4935
5002
|
return imageToLeft ? 'right' : 'left';
|
|
4936
5003
|
}, devices.mobile);
|
|
@@ -4966,17 +5033,18 @@ var Editorial = function Editorial(_ref) {
|
|
|
4966
5033
|
})))));
|
|
4967
5034
|
};
|
|
4968
5035
|
|
|
4969
|
-
var _templateObject$
|
|
4970
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5036
|
+
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$5, _templateObject8$5;
|
|
5037
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
4971
5038
|
var theme = _ref.theme;
|
|
4972
5039
|
return theme.colors.primary;
|
|
4973
5040
|
}, devices.mobile);
|
|
4974
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4975
|
-
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
5041
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
5042
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4976
5043
|
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), devices.mobile);
|
|
4977
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
5044
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
4978
5045
|
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4979
5046
|
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
5047
|
+
var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
|
|
4980
5048
|
|
|
4981
5049
|
var _excluded$d = ["text"];
|
|
4982
5050
|
|
|
@@ -5002,9 +5070,11 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
5002
5070
|
level: 2
|
|
5003
5071
|
}, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
|
|
5004
5072
|
"data-testid": "page-heading-text"
|
|
5005
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5006
|
-
|
|
5007
|
-
|
|
5073
|
+
}, /*#__PURE__*/React__default.createElement(PageHeadingText, {
|
|
5074
|
+
dangerouslySetInnerHTML: {
|
|
5075
|
+
__html: truncatedText
|
|
5076
|
+
}
|
|
5077
|
+
})) : null, sponsor ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
|
|
5008
5078
|
"data-testid": "page-heading-sponsor"
|
|
5009
5079
|
}, /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
|
|
5010
5080
|
"data-testid": "page-heading-link"
|
|
@@ -5047,8 +5117,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
5047
5117
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
5048
5118
|
};
|
|
5049
5119
|
|
|
5050
|
-
var _templateObject$
|
|
5051
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5120
|
+
var _templateObject$J, _templateObject2$s, _templateObject3$l, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$6;
|
|
5121
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n background-image: url('", "');\n background-repeat: no-repeat;\n background-size: cover;\n position: relative;\n display: flex;\n align-items: center;\n\n ::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--base-color-black);\n filter: opacity(40%);\n z-index: ", ";\n }\n\n @media ", " {\n & {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n background-image: url('", "');\n background-position: center;\n display: flex;\n align-items: start;\n }\n }\n"])), function (_ref) {
|
|
5052
5122
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
5053
5123
|
return bgUrlDesktop;
|
|
5054
5124
|
}, zIndexes.content, devices.mobile, function (_ref2) {
|
|
@@ -5056,8 +5126,8 @@ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObjec
|
|
|
5056
5126
|
bgUrlDevice = _ref2.bgUrlDevice;
|
|
5057
5127
|
return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
|
|
5058
5128
|
});
|
|
5059
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
5060
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
5129
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5130
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__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);
|
|
5061
5131
|
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5062
5132
|
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5063
5133
|
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
@@ -5123,10 +5193,10 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
5123
5193
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
|
|
5124
5194
|
};
|
|
5125
5195
|
|
|
5126
|
-
var _templateObject$
|
|
5127
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
5128
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5129
|
-
var PersonLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
5196
|
+
var _templateObject$K, _templateObject2$t, _templateObject3$m;
|
|
5197
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n"])));
|
|
5198
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
5199
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
5130
5200
|
|
|
5131
5201
|
var Person = function Person(_ref) {
|
|
5132
5202
|
var person = _ref.person,
|
|
@@ -5168,21 +5238,21 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5168
5238
|
}));
|
|
5169
5239
|
};
|
|
5170
5240
|
|
|
5171
|
-
var _templateObject$
|
|
5241
|
+
var _templateObject$L, _templateObject2$u, _templateObject3$n, _templateObject4$g, _templateObject5$c, _templateObject6$a, _templateObject7$7;
|
|
5172
5242
|
var LENGTH_TEXT = 28;
|
|
5173
5243
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5174
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
5244
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$L || (_templateObject$L = /*#__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) {
|
|
5175
5245
|
var imageToLeft = _ref.imageToLeft;
|
|
5176
5246
|
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'";
|
|
5177
5247
|
}, devices.tablet, function (_ref2) {
|
|
5178
5248
|
var imageToLeft = _ref2.imageToLeft;
|
|
5179
5249
|
return imageToLeft ? "'left left left left left left left . right right right right right .'" : "'. left left left left left . right right right right right right right'";
|
|
5180
5250
|
}, devices.mobile);
|
|
5181
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5251
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
5182
5252
|
var imageToLeft = _ref3.imageToLeft;
|
|
5183
5253
|
return imageToLeft ? 'left' : 'right';
|
|
5184
5254
|
}, devices.mobile);
|
|
5185
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
5255
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
5186
5256
|
var imageToLeft = _ref4.imageToLeft;
|
|
5187
5257
|
return imageToLeft ? 'right' : 'left';
|
|
5188
5258
|
}, devices.mobile);
|
|
@@ -5285,8 +5355,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
5285
5355
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
5286
5356
|
};
|
|
5287
5357
|
|
|
5288
|
-
var _templateObject$
|
|
5289
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5358
|
+
var _templateObject$M;
|
|
5359
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__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 font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
5290
5360
|
|
|
5291
5361
|
var SectionTitle = function SectionTitle(_ref) {
|
|
5292
5362
|
var title = _ref.title,
|
|
@@ -5312,8 +5382,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
5312
5382
|
}, description))));
|
|
5313
5383
|
};
|
|
5314
5384
|
|
|
5315
|
-
var _templateObject$
|
|
5316
|
-
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5385
|
+
var _templateObject$N;
|
|
5386
|
+
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 0;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 30px 0 10px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n }\n\n p {\n margin: 30px 0;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & strong {\n font-weight: bold;\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin: 0 0 0 30px;\n\n li {\n text-indent: -24px;\n line-height: var(--line-height-listing);\n }\n }\n\n & ol {\n padding: 0;\n margin: 0 0 0 20px;\n\n li {\n line-height: var(--line-height-listing);\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 20px;\n }\n"])), function (_ref) {
|
|
5317
5387
|
var theme = _ref.theme;
|
|
5318
5388
|
return theme.colors.primary;
|
|
5319
5389
|
});
|
|
@@ -5341,8 +5411,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
5341
5411
|
})));
|
|
5342
5412
|
};
|
|
5343
5413
|
|
|
5344
|
-
var _templateObject$
|
|
5345
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
5414
|
+
var _templateObject$O, _templateObject2$v;
|
|
5415
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
|
|
5346
5416
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
5347
5417
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
5348
5418
|
return aspectRatio;
|
|
@@ -5352,7 +5422,7 @@ var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N
|
|
|
5352
5422
|
height = _ref2.height;
|
|
5353
5423
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
5354
5424
|
});
|
|
5355
|
-
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5425
|
+
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
5356
5426
|
|
|
5357
5427
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
5358
5428
|
var caption = _ref.caption,
|
|
@@ -5390,13 +5460,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
5390
5460
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
5391
5461
|
};
|
|
5392
5462
|
|
|
5393
|
-
var _templateObject$
|
|
5394
|
-
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
5395
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5463
|
+
var _templateObject$P, _templateObject2$w, _templateObject3$o;
|
|
5464
|
+
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
5465
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
5396
5466
|
var displayAttribution = _ref.displayAttribution;
|
|
5397
5467
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
5398
5468
|
});
|
|
5399
|
-
var Line = /*#__PURE__*/styled.div(_templateObject3$
|
|
5469
|
+
var Line = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
|
|
5400
5470
|
|
|
5401
5471
|
var Quote = function Quote(_ref) {
|
|
5402
5472
|
var text = _ref.text,
|
|
@@ -5420,8 +5490,8 @@ var Quote = function Quote(_ref) {
|
|
|
5420
5490
|
}, attribution))));
|
|
5421
5491
|
};
|
|
5422
5492
|
|
|
5423
|
-
var _templateObject$
|
|
5424
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$P || (_templateObject$P = /*#__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\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\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-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\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\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
5493
|
+
var _templateObject$Q;
|
|
5494
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$Q || (_templateObject$Q = /*#__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\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\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-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\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\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
5425
5495
|
var theme = _ref.theme;
|
|
5426
5496
|
return theme.colors.primary;
|
|
5427
5497
|
}, function (_ref2) {
|
|
@@ -6314,5 +6384,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$P || (_templat
|
|
|
6314
6384
|
return theme.fonts.tablet.sizes.body[1];
|
|
6315
6385
|
}, devices.desktop, devices.largeDesktop);
|
|
6316
6386
|
|
|
6317
|
-
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ControlledDropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, Quote, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
|
|
6387
|
+
export { Accordion, Accordions, AltHeader, AnchorTapBar, AnnouncementBanner, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ControlledDropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, Quote, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
|
|
6318
6388
|
//# sourceMappingURL=chord.esm.js.map
|