@royaloperahouse/chord 0.7.5 → 0.7.8
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 +9 -0
- package/dist/chord.cjs.development.js +54 -42
- 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 +54 -42
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +6 -3
- package/dist/types/navigation.d.ts +10 -0
- package/dist/types/types.d.ts +4 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
2
|
|
|
3
|
+
## [0.7.8]
|
|
4
|
+
- TitleWithCTA: add message prop
|
|
5
|
+
|
|
6
|
+
## [0.7.7]
|
|
7
|
+
- Tabs: close dropdown when it is clicked twice
|
|
8
|
+
|
|
9
|
+
## [0.7.6]
|
|
10
|
+
- Add new initOpen prop to Accordion component
|
|
11
|
+
|
|
3
12
|
## [0.7.5]
|
|
4
13
|
- Fix Styling in PeopleListing on Desktop
|
|
5
14
|
|
|
@@ -3583,8 +3583,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
3583
3583
|
};
|
|
3584
3584
|
|
|
3585
3585
|
var onDropdownClick = function onDropdownClick(i, link) {
|
|
3586
|
-
var
|
|
3586
|
+
var isActiveDropdownClicked = i === activeDropdown;
|
|
3587
|
+
var nextActive = isActiveDropdownClicked ? -1 : i;
|
|
3587
3588
|
setActiveDropdown(nextActive);
|
|
3589
|
+
if (isActiveDropdownClicked) setHoverOverDropdown(-1);
|
|
3588
3590
|
if (onChange && link) onChange(link);
|
|
3589
3591
|
};
|
|
3590
3592
|
|
|
@@ -4523,29 +4525,34 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4523
4525
|
})));
|
|
4524
4526
|
};
|
|
4525
4527
|
|
|
4526
|
-
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a,
|
|
4528
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject6$6, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2;
|
|
4527
4529
|
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
4528
4530
|
var sticky = _ref.sticky;
|
|
4529
4531
|
return sticky ? 'sticky' : 'initial';
|
|
4530
4532
|
}, zIndexes.anchor);
|
|
4531
|
-
var
|
|
4532
|
-
var
|
|
4533
|
-
var
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
var
|
|
4537
|
-
|
|
4538
|
-
|
|
4539
|
-
}, function (_ref3) {
|
|
4533
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
4534
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\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) {
|
|
4535
|
+
var title = _ref2.title;
|
|
4536
|
+
return title ? 'row' : 'row-reverse';
|
|
4537
|
+
}, devices.tablet, devices.mobile);
|
|
4538
|
+
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n height: 50px;\n }\n }\n"])), devices.mobile);
|
|
4539
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4540
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
4541
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
4540
4542
|
var theme = _ref3.theme;
|
|
4541
4543
|
return theme.colors.primaryButtonReverseBg;
|
|
4542
4544
|
}, function (_ref4) {
|
|
4543
4545
|
var theme = _ref4.theme;
|
|
4544
|
-
return theme.colors.
|
|
4546
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4545
4547
|
}, function (_ref5) {
|
|
4546
4548
|
var theme = _ref5.theme;
|
|
4547
4549
|
return theme.colors.primaryButtonReverse;
|
|
4550
|
+
}, function (_ref6) {
|
|
4551
|
+
var theme = _ref6.theme;
|
|
4552
|
+
return theme.colors.primaryButtonReverse;
|
|
4548
4553
|
});
|
|
4554
|
+
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__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);
|
|
4555
|
+
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__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);
|
|
4549
4556
|
|
|
4550
4557
|
var _excluded$b = ["text"],
|
|
4551
4558
|
_excluded2 = ["text"];
|
|
@@ -4554,7 +4561,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4554
4561
|
var title = _ref.title,
|
|
4555
4562
|
links = _ref.links,
|
|
4556
4563
|
_ref$sticky = _ref.sticky,
|
|
4557
|
-
sticky = _ref$sticky === void 0 ? false : _ref$sticky
|
|
4564
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky,
|
|
4565
|
+
message = _ref.message;
|
|
4558
4566
|
|
|
4559
4567
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
4560
4568
|
primaryButtonText = _ref2.text,
|
|
@@ -4566,39 +4574,38 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4566
4574
|
|
|
4567
4575
|
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
4568
4576
|
sticky: sticky
|
|
4569
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
4570
|
-
|
|
4571
|
-
|
|
4572
|
-
columnStartDevice: 2,
|
|
4573
|
-
columnSpanDevice: 12
|
|
4574
|
-
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4577
|
+
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
4578
|
+
title: title
|
|
4579
|
+
}, title ? /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4575
4580
|
"data-testid": "anchor-title"
|
|
4576
4581
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4577
4582
|
level: 5
|
|
4578
|
-
}, title))
|
|
4579
|
-
columnStartDesktop: 12,
|
|
4580
|
-
columnSpanDesktop: 5,
|
|
4581
|
-
columnStartDevice: 2,
|
|
4582
|
-
columnSpanDevice: 12,
|
|
4583
|
+
}, title)) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
|
|
4583
4584
|
"data-testid": "anchor-ctas"
|
|
4584
|
-
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) :
|
|
4585
|
+
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : message && /*#__PURE__*/React__default.createElement(MessageWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4586
|
+
level: 6
|
|
4587
|
+
}, message)))), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : message && /*#__PURE__*/React__default.createElement(MessageWrapperMobile, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4588
|
+
level: 6
|
|
4589
|
+
}, message)));
|
|
4585
4590
|
};
|
|
4586
4591
|
|
|
4587
|
-
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$
|
|
4592
|
+
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$6;
|
|
4588
4593
|
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4589
4594
|
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
4590
4595
|
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
|
|
4591
4596
|
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && a {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-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: 28px 20px;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
4592
|
-
var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4597
|
+
var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__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\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
|
|
4593
4598
|
|
|
4594
4599
|
var Accordion = function Accordion(_ref) {
|
|
4595
4600
|
var _ref$title = _ref.title,
|
|
4596
4601
|
title = _ref$title === void 0 ? '' : _ref$title,
|
|
4597
4602
|
_ref$showLine = _ref.showLine,
|
|
4598
4603
|
showLine = _ref$showLine === void 0 ? true : _ref$showLine,
|
|
4599
|
-
children = _ref.children
|
|
4604
|
+
children = _ref.children,
|
|
4605
|
+
_ref$initOpen = _ref.initOpen,
|
|
4606
|
+
initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen;
|
|
4600
4607
|
|
|
4601
|
-
var _useState = React.useState(
|
|
4608
|
+
var _useState = React.useState(initOpen),
|
|
4602
4609
|
openAccordion = _useState[0],
|
|
4603
4610
|
setOpenAccordion = _useState[1];
|
|
4604
4611
|
|
|
@@ -4606,11 +4613,16 @@ var Accordion = function Accordion(_ref) {
|
|
|
4606
4613
|
textHeight = _useState2[0],
|
|
4607
4614
|
setTextHeight = _useState2[1];
|
|
4608
4615
|
|
|
4609
|
-
var _useState3 = React.useState('Expand'),
|
|
4616
|
+
var _useState3 = React.useState(initOpen ? 'Detract' : 'Expand'),
|
|
4610
4617
|
iconName = _useState3[0],
|
|
4611
4618
|
setIconName = _useState3[1];
|
|
4612
4619
|
|
|
4613
4620
|
var content = React.useRef(null);
|
|
4621
|
+
React.useEffect(function () {
|
|
4622
|
+
if (content != null && content.current && initOpen) {
|
|
4623
|
+
setTextHeight(content.current.scrollHeight + "px");
|
|
4624
|
+
}
|
|
4625
|
+
}, [content, initOpen]);
|
|
4614
4626
|
|
|
4615
4627
|
var toggleAccordion = function toggleAccordion() {
|
|
4616
4628
|
setOpenAccordion(!openAccordion);
|
|
@@ -4651,7 +4663,7 @@ var Accordions = function Accordions(_ref) {
|
|
|
4651
4663
|
}));
|
|
4652
4664
|
};
|
|
4653
4665
|
|
|
4654
|
-
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$
|
|
4666
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$7, _templateObject6$7, _templateObject7$4, _templateObject8$4, _templateObject9$3;
|
|
4655
4667
|
var LENGTH_LARGE_TEXT = 28;
|
|
4656
4668
|
var LENGTH_SMALL_TEXT = 19;
|
|
4657
4669
|
var LENGTH_TEXT_TABLET = 10;
|
|
@@ -4665,11 +4677,11 @@ var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$c ||
|
|
|
4665
4677
|
var fullWidth = _ref2.fullWidth;
|
|
4666
4678
|
return fullWidth ? '0' : '20px';
|
|
4667
4679
|
});
|
|
4668
|
-
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4680
|
+
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4669
4681
|
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
4670
4682
|
var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\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"])));
|
|
4671
|
-
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$
|
|
4672
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
4683
|
+
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4684
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n opacity: 0;\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref3) {
|
|
4673
4685
|
var size = _ref3.size,
|
|
4674
4686
|
primaryButtonTextLength = _ref3.primaryButtonTextLength,
|
|
4675
4687
|
tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
|
|
@@ -4863,7 +4875,7 @@ var Cards = function Cards(_ref) {
|
|
|
4863
4875
|
}));
|
|
4864
4876
|
};
|
|
4865
4877
|
|
|
4866
|
-
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$
|
|
4878
|
+
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$8;
|
|
4867
4879
|
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__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) {
|
|
4868
4880
|
var imageToLeft = _ref.imageToLeft;
|
|
4869
4881
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
@@ -4877,7 +4889,7 @@ var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$i |
|
|
|
4877
4889
|
return imageToLeft ? 'right' : 'left';
|
|
4878
4890
|
}, devices.mobile);
|
|
4879
4891
|
var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4880
|
-
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4892
|
+
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\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"])));
|
|
4881
4893
|
|
|
4882
4894
|
var Editorial = function Editorial(_ref) {
|
|
4883
4895
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -4908,7 +4920,7 @@ var Editorial = function Editorial(_ref) {
|
|
|
4908
4920
|
})))));
|
|
4909
4921
|
};
|
|
4910
4922
|
|
|
4911
|
-
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$
|
|
4923
|
+
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$9, _templateObject6$8, _templateObject7$5;
|
|
4912
4924
|
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__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) {
|
|
4913
4925
|
var theme = _ref.theme;
|
|
4914
4926
|
return theme.colors.primary;
|
|
@@ -4916,7 +4928,7 @@ var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (
|
|
|
4916
4928
|
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$q || (_templateObject2$q = /*#__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);
|
|
4917
4929
|
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4918
4930
|
var ChildrenWrapper = /*#__PURE__*/styled__default.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);
|
|
4919
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4931
|
+
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
4920
4932
|
var LogoWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
4921
4933
|
var ButtonWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
4922
4934
|
|
|
@@ -4989,7 +5001,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4989
5001
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
4990
5002
|
};
|
|
4991
5003
|
|
|
4992
|
-
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$
|
|
5004
|
+
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$a, _templateObject6$9, _templateObject7$6;
|
|
4993
5005
|
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__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) {
|
|
4994
5006
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
4995
5007
|
return bgUrlDesktop;
|
|
@@ -5001,7 +5013,7 @@ var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_temp
|
|
|
5001
5013
|
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$r || (_templateObject2$r = /*#__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 . . . . . .'\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 . . . .'\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 . . . . .'\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);
|
|
5002
5014
|
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__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.contentOverlay, devices.mobileAndTablet);
|
|
5003
5015
|
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5004
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5016
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__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-5);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5005
5017
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.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);
|
|
5006
5018
|
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5007
5019
|
|
|
@@ -5110,7 +5122,7 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5110
5122
|
}));
|
|
5111
5123
|
};
|
|
5112
5124
|
|
|
5113
|
-
var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$g, _templateObject5$
|
|
5125
|
+
var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$g, _templateObject5$b, _templateObject6$a, _templateObject7$7;
|
|
5114
5126
|
var LENGTH_TEXT = 28;
|
|
5115
5127
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5116
5128
|
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$K || (_templateObject$K = /*#__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) {
|
|
@@ -5129,7 +5141,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
|
|
|
5129
5141
|
return imageToLeft ? 'right' : 'left';
|
|
5130
5142
|
}, devices.mobile);
|
|
5131
5143
|
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 32px 0;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n & {\n margin: 0 0 24px 0;\n }\n }\n"])), devices.mobile);
|
|
5132
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
5144
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
5133
5145
|
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\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\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
5134
5146
|
var theme = _ref5.theme;
|
|
5135
5147
|
return theme.colors.black;
|