@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/dist/chord.esm.js
CHANGED
|
@@ -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
|
|
|
@@ -4525,29 +4527,34 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4525
4527
|
})));
|
|
4526
4528
|
};
|
|
4527
4529
|
|
|
4528
|
-
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a,
|
|
4530
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject6$6, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2;
|
|
4529
4531
|
var TitleCTAGridWrapper = /*#__PURE__*/styled.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) {
|
|
4530
4532
|
var sticky = _ref.sticky;
|
|
4531
4533
|
return sticky ? 'sticky' : 'initial';
|
|
4532
4534
|
}, zIndexes.anchor);
|
|
4533
|
-
var
|
|
4534
|
-
var
|
|
4535
|
-
var
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
var
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
}, function (_ref3) {
|
|
4535
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
4536
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.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) {
|
|
4537
|
+
var title = _ref2.title;
|
|
4538
|
+
return title ? 'row' : 'row-reverse';
|
|
4539
|
+
}, devices.tablet, devices.mobile);
|
|
4540
|
+
var AnchorTitle = /*#__PURE__*/styled.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);
|
|
4541
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled.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);
|
|
4542
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
4543
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(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) {
|
|
4542
4544
|
var theme = _ref3.theme;
|
|
4543
4545
|
return theme.colors.primaryButtonReverseBg;
|
|
4544
4546
|
}, function (_ref4) {
|
|
4545
4547
|
var theme = _ref4.theme;
|
|
4546
|
-
return theme.colors.
|
|
4548
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4547
4549
|
}, function (_ref5) {
|
|
4548
4550
|
var theme = _ref5.theme;
|
|
4549
4551
|
return theme.colors.primaryButtonReverse;
|
|
4552
|
+
}, function (_ref6) {
|
|
4553
|
+
var theme = _ref6.theme;
|
|
4554
|
+
return theme.colors.primaryButtonReverse;
|
|
4550
4555
|
});
|
|
4556
|
+
var MessageWrapper = /*#__PURE__*/styled.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);
|
|
4557
|
+
var MessageWrapperMobile = /*#__PURE__*/styled.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);
|
|
4551
4558
|
|
|
4552
4559
|
var _excluded$b = ["text"],
|
|
4553
4560
|
_excluded2 = ["text"];
|
|
@@ -4556,7 +4563,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4556
4563
|
var title = _ref.title,
|
|
4557
4564
|
links = _ref.links,
|
|
4558
4565
|
_ref$sticky = _ref.sticky,
|
|
4559
|
-
sticky = _ref$sticky === void 0 ? false : _ref$sticky
|
|
4566
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky,
|
|
4567
|
+
message = _ref.message;
|
|
4560
4568
|
|
|
4561
4569
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
4562
4570
|
primaryButtonText = _ref2.text,
|
|
@@ -4568,39 +4576,38 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4568
4576
|
|
|
4569
4577
|
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
4570
4578
|
sticky: sticky
|
|
4571
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
4572
|
-
|
|
4573
|
-
|
|
4574
|
-
columnStartDevice: 2,
|
|
4575
|
-
columnSpanDevice: 12
|
|
4576
|
-
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4579
|
+
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
4580
|
+
title: title
|
|
4581
|
+
}, title ? /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4577
4582
|
"data-testid": "anchor-title"
|
|
4578
4583
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4579
4584
|
level: 5
|
|
4580
|
-
}, title))
|
|
4581
|
-
columnStartDesktop: 12,
|
|
4582
|
-
columnSpanDesktop: 5,
|
|
4583
|
-
columnStartDevice: 2,
|
|
4584
|
-
columnSpanDevice: 12,
|
|
4585
|
+
}, title)) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
|
|
4585
4586
|
"data-testid": "anchor-ctas"
|
|
4586
|
-
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) :
|
|
4587
|
+
}, /*#__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, {
|
|
4588
|
+
level: 6
|
|
4589
|
+
}, 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, {
|
|
4590
|
+
level: 6
|
|
4591
|
+
}, message)));
|
|
4587
4592
|
};
|
|
4588
4593
|
|
|
4589
|
-
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$
|
|
4594
|
+
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$6;
|
|
4590
4595
|
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4591
4596
|
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
4592
4597
|
var ChildrenContainer = /*#__PURE__*/styled.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);
|
|
4593
4598
|
var TitleContainer$1 = /*#__PURE__*/styled.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);
|
|
4594
|
-
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
4599
|
+
var ContentContainer = /*#__PURE__*/styled.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"])));
|
|
4595
4600
|
|
|
4596
4601
|
var Accordion = function Accordion(_ref) {
|
|
4597
4602
|
var _ref$title = _ref.title,
|
|
4598
4603
|
title = _ref$title === void 0 ? '' : _ref$title,
|
|
4599
4604
|
_ref$showLine = _ref.showLine,
|
|
4600
4605
|
showLine = _ref$showLine === void 0 ? true : _ref$showLine,
|
|
4601
|
-
children = _ref.children
|
|
4606
|
+
children = _ref.children,
|
|
4607
|
+
_ref$initOpen = _ref.initOpen,
|
|
4608
|
+
initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen;
|
|
4602
4609
|
|
|
4603
|
-
var _useState = useState(
|
|
4610
|
+
var _useState = useState(initOpen),
|
|
4604
4611
|
openAccordion = _useState[0],
|
|
4605
4612
|
setOpenAccordion = _useState[1];
|
|
4606
4613
|
|
|
@@ -4608,11 +4615,16 @@ var Accordion = function Accordion(_ref) {
|
|
|
4608
4615
|
textHeight = _useState2[0],
|
|
4609
4616
|
setTextHeight = _useState2[1];
|
|
4610
4617
|
|
|
4611
|
-
var _useState3 = useState('Expand'),
|
|
4618
|
+
var _useState3 = useState(initOpen ? 'Detract' : 'Expand'),
|
|
4612
4619
|
iconName = _useState3[0],
|
|
4613
4620
|
setIconName = _useState3[1];
|
|
4614
4621
|
|
|
4615
4622
|
var content = useRef(null);
|
|
4623
|
+
useEffect(function () {
|
|
4624
|
+
if (content != null && content.current && initOpen) {
|
|
4625
|
+
setTextHeight(content.current.scrollHeight + "px");
|
|
4626
|
+
}
|
|
4627
|
+
}, [content, initOpen]);
|
|
4616
4628
|
|
|
4617
4629
|
var toggleAccordion = function toggleAccordion() {
|
|
4618
4630
|
setOpenAccordion(!openAccordion);
|
|
@@ -4653,7 +4665,7 @@ var Accordions = function Accordions(_ref) {
|
|
|
4653
4665
|
}));
|
|
4654
4666
|
};
|
|
4655
4667
|
|
|
4656
|
-
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$
|
|
4668
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$7, _templateObject6$7, _templateObject7$4, _templateObject8$4, _templateObject9$3;
|
|
4657
4669
|
var LENGTH_LARGE_TEXT = 28;
|
|
4658
4670
|
var LENGTH_SMALL_TEXT = 19;
|
|
4659
4671
|
var LENGTH_TEXT_TABLET = 10;
|
|
@@ -4667,11 +4679,11 @@ var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$c || (_templat
|
|
|
4667
4679
|
var fullWidth = _ref2.fullWidth;
|
|
4668
4680
|
return fullWidth ? '0' : '20px';
|
|
4669
4681
|
});
|
|
4670
|
-
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$
|
|
4682
|
+
var TitleContainer$2 = /*#__PURE__*/styled.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);
|
|
4671
4683
|
var TitleContainerMobile = /*#__PURE__*/styled.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);
|
|
4672
4684
|
var TextContainer = /*#__PURE__*/styled.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"])));
|
|
4673
|
-
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$
|
|
4674
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
4685
|
+
var SubtitleContainer = /*#__PURE__*/styled.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"])));
|
|
4686
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled.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) {
|
|
4675
4687
|
var size = _ref3.size,
|
|
4676
4688
|
primaryButtonTextLength = _ref3.primaryButtonTextLength,
|
|
4677
4689
|
tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
|
|
@@ -4865,7 +4877,7 @@ var Cards = function Cards(_ref) {
|
|
|
4865
4877
|
}));
|
|
4866
4878
|
};
|
|
4867
4879
|
|
|
4868
|
-
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$
|
|
4880
|
+
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$8;
|
|
4869
4881
|
var EditorialGrid = /*#__PURE__*/styled.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) {
|
|
4870
4882
|
var imageToLeft = _ref.imageToLeft;
|
|
4871
4883
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
@@ -4879,7 +4891,7 @@ var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$i || (_templ
|
|
|
4879
4891
|
return imageToLeft ? 'right' : 'left';
|
|
4880
4892
|
}, devices.mobile);
|
|
4881
4893
|
var EditorialSubtitle = /*#__PURE__*/styled.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"])));
|
|
4882
|
-
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$
|
|
4894
|
+
var EditorialText = /*#__PURE__*/styled.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"])));
|
|
4883
4895
|
|
|
4884
4896
|
var Editorial = function Editorial(_ref) {
|
|
4885
4897
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -4910,7 +4922,7 @@ var Editorial = function Editorial(_ref) {
|
|
|
4910
4922
|
})))));
|
|
4911
4923
|
};
|
|
4912
4924
|
|
|
4913
|
-
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$
|
|
4925
|
+
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$9, _templateObject6$8, _templateObject7$5;
|
|
4914
4926
|
var PageHeadingWrapper = /*#__PURE__*/styled.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) {
|
|
4915
4927
|
var theme = _ref.theme;
|
|
4916
4928
|
return theme.colors.primary;
|
|
@@ -4918,7 +4930,7 @@ var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_template
|
|
|
4918
4930
|
var PageHeadingGrid = /*#__PURE__*/styled(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);
|
|
4919
4931
|
var TitleWrapper$1 = /*#__PURE__*/styled.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);
|
|
4920
4932
|
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);
|
|
4921
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
4933
|
+
var TextWrapper = /*#__PURE__*/styled.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"])));
|
|
4922
4934
|
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);
|
|
4923
4935
|
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);
|
|
4924
4936
|
|
|
@@ -4991,7 +5003,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4991
5003
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
4992
5004
|
};
|
|
4993
5005
|
|
|
4994
|
-
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$
|
|
5006
|
+
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$a, _templateObject6$9, _templateObject7$6;
|
|
4995
5007
|
var ImpactWrapper = /*#__PURE__*/styled.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) {
|
|
4996
5008
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
4997
5009
|
return bgUrlDesktop;
|
|
@@ -5003,7 +5015,7 @@ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObjec
|
|
|
5003
5015
|
var ImpactGrid = /*#__PURE__*/styled(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);
|
|
5004
5016
|
var SponsorWrapper = /*#__PURE__*/styled.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);
|
|
5005
5017
|
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5006
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
5018
|
+
var TextWrapper$1 = /*#__PURE__*/styled.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);
|
|
5007
5019
|
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);
|
|
5008
5020
|
var ScrollDownWrapper = /*#__PURE__*/styled.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);
|
|
5009
5021
|
|
|
@@ -5112,7 +5124,7 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5112
5124
|
}));
|
|
5113
5125
|
};
|
|
5114
5126
|
|
|
5115
|
-
var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$g, _templateObject5$
|
|
5127
|
+
var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$g, _templateObject5$b, _templateObject6$a, _templateObject7$7;
|
|
5116
5128
|
var LENGTH_TEXT = 28;
|
|
5117
5129
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5118
5130
|
var PromoWithTitleGrid = /*#__PURE__*/styled(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) {
|
|
@@ -5131,7 +5143,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$m ||
|
|
|
5131
5143
|
return imageToLeft ? 'right' : 'left';
|
|
5132
5144
|
}, devices.mobile);
|
|
5133
5145
|
var PromoWithTitleContainer = /*#__PURE__*/styled.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);
|
|
5134
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$
|
|
5146
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled.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"])));
|
|
5135
5147
|
var PromoWithTitleText = /*#__PURE__*/styled.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) {
|
|
5136
5148
|
var theme = _ref5.theme;
|
|
5137
5149
|
return theme.colors.black;
|