@royaloperahouse/chord 0.7.6 → 0.7.9
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 +11 -0
- package/dist/chord.cjs.development.js +73 -52
- 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 +73 -52
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/organisms/Carousel/Carousel.style.d.ts +1 -0
- package/dist/components/organisms/HighlightsCarousel/HighlightsCarousel.style.d.ts +1 -0
- package/dist/components/organisms/Navigation/Navigation.style.d.ts +2 -0
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +6 -3
- package/dist/types/navigation.d.ts +16 -0
- package/package.json +1 -1
package/dist/chord.esm.js
CHANGED
|
@@ -2190,7 +2190,7 @@ var CinemaBadge = function CinemaBadge(_ref) {
|
|
|
2190
2190
|
}))));
|
|
2191
2191
|
};
|
|
2192
2192
|
|
|
2193
|
-
var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
|
|
2193
|
+
var zLevels = ['base', 'content', 'contentOverlay', 'sponsorship', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
|
|
2194
2194
|
var zIndexes = {};
|
|
2195
2195
|
zLevels.forEach(function (name, index) {
|
|
2196
2196
|
zIndexes[name] = index;
|
|
@@ -3054,8 +3054,8 @@ var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$m || (_templateOb
|
|
|
3054
3054
|
var IconWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
3055
3055
|
var theme = _ref.theme;
|
|
3056
3056
|
return theme.colors.primary;
|
|
3057
|
-
}, devices.
|
|
3058
|
-
var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.
|
|
3057
|
+
}, devices.mobile);
|
|
3058
|
+
var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobile);
|
|
3059
3059
|
|
|
3060
3060
|
var RotatorButtons = function RotatorButtons(_ref) {
|
|
3061
3061
|
var onClickPrev = _ref.onClickPrev,
|
|
@@ -3119,17 +3119,24 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3119
3119
|
}, renderNextIcon()));
|
|
3120
3120
|
};
|
|
3121
3121
|
|
|
3122
|
-
var _templateObject$n, _templateObject2$9, _templateObject3$4, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
3123
|
-
var
|
|
3124
|
-
var
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
var
|
|
3128
|
-
var
|
|
3129
|
-
var
|
|
3130
|
-
var
|
|
3131
|
-
var
|
|
3132
|
-
var
|
|
3122
|
+
var _templateObject$n, _templateObject2$9, _templateObject3$4, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
3123
|
+
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
3124
|
+
var isMenuOpen = _ref.isMenuOpen;
|
|
3125
|
+
return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--base-color-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
3126
|
+
});
|
|
3127
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0.4;\n"])), zIndexes.searchOverlay);
|
|
3128
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--base-color-white);\n height: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n }\n"])), zIndexes.navigation, devices.mobile);
|
|
3129
|
+
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
|
|
3130
|
+
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n height: 100px;\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n \n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
|
|
3131
|
+
var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-top: ", ";\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet, function (_ref2) {
|
|
3132
|
+
var theme = _ref2.theme;
|
|
3133
|
+
return theme.spacing[12];
|
|
3134
|
+
});
|
|
3135
|
+
var LogoContainer = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 140px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &&& .logoImg {\n height: 96px;\n width: 66px;\n }\n\n @media ", " {\n height: 80px;\n\n &&& .logoImg {\n width: 100%;\n height: 64px;\n }\n }\n"])), devices.mobile);
|
|
3136
|
+
var MenuContainer = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n\n @media ", " {\n flex-direction: row;\n height: 80px;\n justify-content: flex-end;\n }\n"])), devices.mobileAndTablet);
|
|
3137
|
+
var NavContainer = /*#__PURE__*/styled.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 40px;\n margin-top: auto;\n\n @media ", " {\n background-color: var(--base-color-white);\n height: auto;\n margin-top: 0px;\n }\n"])), devices.mobileAndTablet);
|
|
3138
|
+
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
3139
|
+
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
3133
3140
|
|
|
3134
3141
|
var _templateObject$o;
|
|
3135
3142
|
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
@@ -3583,8 +3590,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
3583
3590
|
};
|
|
3584
3591
|
|
|
3585
3592
|
var onDropdownClick = function onDropdownClick(i, link) {
|
|
3586
|
-
var
|
|
3593
|
+
var isActiveDropdownClicked = i === activeDropdown;
|
|
3594
|
+
var nextActive = isActiveDropdownClicked ? -1 : i;
|
|
3587
3595
|
setActiveDropdown(nextActive);
|
|
3596
|
+
if (isActiveDropdownClicked) setHoverOverDropdown(-1);
|
|
3588
3597
|
if (onChange && link) onChange(link);
|
|
3589
3598
|
};
|
|
3590
3599
|
|
|
@@ -3823,7 +3832,9 @@ var Navigation = function Navigation(_ref) {
|
|
|
3823
3832
|
setshowSearch(false);
|
|
3824
3833
|
};
|
|
3825
3834
|
|
|
3826
|
-
return /*#__PURE__*/React__default.createElement(
|
|
3835
|
+
return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
|
|
3836
|
+
isMenuOpen: showMenu
|
|
3837
|
+
}, showSearch && /*#__PURE__*/React__default.createElement(FullScreenContainer, {
|
|
3827
3838
|
style: {
|
|
3828
3839
|
height: "" + fullScreenHeight
|
|
3829
3840
|
}
|
|
@@ -4156,7 +4167,7 @@ var CarouselType;
|
|
|
4156
4167
|
CarouselType["LargeCard"] = "LargeCard";
|
|
4157
4168
|
})(CarouselType || (CarouselType = {}));
|
|
4158
4169
|
|
|
4159
|
-
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8;
|
|
4170
|
+
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8, _templateObject5$5;
|
|
4160
4171
|
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (_ref) {
|
|
4161
4172
|
var type = _ref.type,
|
|
4162
4173
|
imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
@@ -4191,7 +4202,8 @@ var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObj
|
|
|
4191
4202
|
});
|
|
4192
4203
|
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
4193
4204
|
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n user-select: text;\n\n h4 {\n padding: 0;\n margin: 0;\n }\n"])));
|
|
4194
|
-
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.
|
|
4205
|
+
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4206
|
+
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 2 / span 10;\n }\n }\n"])), devices.tablet);
|
|
4195
4207
|
|
|
4196
4208
|
var Carousel = function Carousel(_ref) {
|
|
4197
4209
|
var children = _ref.children,
|
|
@@ -4262,7 +4274,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
4262
4274
|
type: type,
|
|
4263
4275
|
imagesHeightDevice: imagesHeightDevice,
|
|
4264
4276
|
imagesHeightDesktop: imagesHeightDesktop
|
|
4265
|
-
}, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(
|
|
4277
|
+
}, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(TitleGridItem, {
|
|
4266
4278
|
columnStartDesktop: 3,
|
|
4267
4279
|
columnSpanDesktop: 10,
|
|
4268
4280
|
columnStartDevice: 2,
|
|
@@ -4274,7 +4286,8 @@ var Carousel = function Carousel(_ref) {
|
|
|
4274
4286
|
}, title))), /*#__PURE__*/React__default.createElement(GridItem, {
|
|
4275
4287
|
columnStartDesktop: 14,
|
|
4276
4288
|
columnSpanDesktop: 2,
|
|
4277
|
-
columnStartDevice:
|
|
4289
|
+
columnStartDevice: 12,
|
|
4290
|
+
columnSpanDevice: 2
|
|
4278
4291
|
}, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
|
|
4279
4292
|
"data-testid": "carousel-buttons-wrapper"
|
|
4280
4293
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
@@ -4298,7 +4311,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
4298
4311
|
})))));
|
|
4299
4312
|
};
|
|
4300
4313
|
|
|
4301
|
-
var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$
|
|
4314
|
+
var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$6, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1;
|
|
4302
4315
|
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
4303
4316
|
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n h4 {\n margin: 0;\n padding: 0;\n }\n\n h5 {\n display: none;\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: 40px;\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: var(--line-height-altHeader-5);\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n }\n }\n }\n"])), devices.tablet, function (_ref) {
|
|
4304
4317
|
var theme = _ref.theme;
|
|
@@ -4312,7 +4325,7 @@ var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$j || (_templ
|
|
|
4312
4325
|
}, devices.mobile);
|
|
4313
4326
|
var InfoWrapper = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4314
4327
|
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4315
|
-
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
4328
|
+
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref4) {
|
|
4316
4329
|
var theme = _ref4.theme;
|
|
4317
4330
|
return theme.fonts.mobile.sizes.headers[3];
|
|
4318
4331
|
}, function (_ref5) {
|
|
@@ -4366,6 +4379,7 @@ var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$2 || (_templateOb
|
|
|
4366
4379
|
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swiper-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4367
4380
|
var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
4368
4381
|
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4382
|
+
var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
4369
4383
|
|
|
4370
4384
|
var _excluded$8 = ["text"];
|
|
4371
4385
|
|
|
@@ -4452,7 +4466,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4452
4466
|
tag: "h6"
|
|
4453
4467
|
}, infoSubtitle), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
4454
4468
|
level: 1
|
|
4455
|
-
},
|
|
4469
|
+
}, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
|
|
4470
|
+
dangerouslySetInnerHTML: {
|
|
4471
|
+
__html: description
|
|
4472
|
+
}
|
|
4473
|
+
}))), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
|
|
4456
4474
|
"data-testid": "carousel-wrapper"
|
|
4457
4475
|
}, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4458
4476
|
"data-testid": "rotator-buttons"
|
|
@@ -4525,29 +4543,34 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4525
4543
|
})));
|
|
4526
4544
|
};
|
|
4527
4545
|
|
|
4528
|
-
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a,
|
|
4546
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject6$6, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2;
|
|
4529
4547
|
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
4548
|
var sticky = _ref.sticky;
|
|
4531
4549
|
return sticky ? 'sticky' : 'initial';
|
|
4532
4550
|
}, zIndexes.anchor);
|
|
4533
|
-
var
|
|
4534
|
-
var
|
|
4535
|
-
var
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
var
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
}, function (_ref3) {
|
|
4551
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
4552
|
+
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) {
|
|
4553
|
+
var title = _ref2.title;
|
|
4554
|
+
return title ? 'row' : 'row-reverse';
|
|
4555
|
+
}, devices.tablet, devices.mobile);
|
|
4556
|
+
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);
|
|
4557
|
+
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);
|
|
4558
|
+
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);
|
|
4559
|
+
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
4560
|
var theme = _ref3.theme;
|
|
4543
4561
|
return theme.colors.primaryButtonReverseBg;
|
|
4544
4562
|
}, function (_ref4) {
|
|
4545
4563
|
var theme = _ref4.theme;
|
|
4546
|
-
return theme.colors.
|
|
4564
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4547
4565
|
}, function (_ref5) {
|
|
4548
4566
|
var theme = _ref5.theme;
|
|
4549
4567
|
return theme.colors.primaryButtonReverse;
|
|
4568
|
+
}, function (_ref6) {
|
|
4569
|
+
var theme = _ref6.theme;
|
|
4570
|
+
return theme.colors.primaryButtonReverse;
|
|
4550
4571
|
});
|
|
4572
|
+
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);
|
|
4573
|
+
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
4574
|
|
|
4552
4575
|
var _excluded$b = ["text"],
|
|
4553
4576
|
_excluded2 = ["text"];
|
|
@@ -4556,7 +4579,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4556
4579
|
var title = _ref.title,
|
|
4557
4580
|
links = _ref.links,
|
|
4558
4581
|
_ref$sticky = _ref.sticky,
|
|
4559
|
-
sticky = _ref$sticky === void 0 ? false : _ref$sticky
|
|
4582
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky,
|
|
4583
|
+
message = _ref.message;
|
|
4560
4584
|
|
|
4561
4585
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
4562
4586
|
primaryButtonText = _ref2.text,
|
|
@@ -4568,22 +4592,19 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4568
4592
|
|
|
4569
4593
|
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
4570
4594
|
sticky: sticky
|
|
4571
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
4572
|
-
|
|
4573
|
-
|
|
4574
|
-
columnStartDevice: 2,
|
|
4575
|
-
columnSpanDevice: 12
|
|
4576
|
-
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4595
|
+
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
4596
|
+
title: title
|
|
4597
|
+
}, title ? /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4577
4598
|
"data-testid": "anchor-title"
|
|
4578
4599
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4579
4600
|
level: 5
|
|
4580
|
-
}, title))
|
|
4581
|
-
columnStartDesktop: 12,
|
|
4582
|
-
columnSpanDesktop: 5,
|
|
4583
|
-
columnStartDevice: 2,
|
|
4584
|
-
columnSpanDevice: 12,
|
|
4601
|
+
}, title)) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
|
|
4585
4602
|
"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) :
|
|
4603
|
+
}, /*#__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, {
|
|
4604
|
+
level: 6
|
|
4605
|
+
}, 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, {
|
|
4606
|
+
level: 6
|
|
4607
|
+
}, message)));
|
|
4587
4608
|
};
|
|
4588
4609
|
|
|
4589
4610
|
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
|
|
@@ -4660,7 +4681,7 @@ var Accordions = function Accordions(_ref) {
|
|
|
4660
4681
|
}));
|
|
4661
4682
|
};
|
|
4662
4683
|
|
|
4663
|
-
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$
|
|
4684
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$4, _templateObject9$3;
|
|
4664
4685
|
var LENGTH_LARGE_TEXT = 28;
|
|
4665
4686
|
var LENGTH_SMALL_TEXT = 19;
|
|
4666
4687
|
var LENGTH_TEXT_TABLET = 10;
|
|
@@ -4677,8 +4698,8 @@ var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$c || (_templat
|
|
|
4677
4698
|
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__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);
|
|
4678
4699
|
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);
|
|
4679
4700
|
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"])));
|
|
4680
|
-
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$
|
|
4681
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
4701
|
+
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"])));
|
|
4702
|
+
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) {
|
|
4682
4703
|
var size = _ref3.size,
|
|
4683
4704
|
primaryButtonTextLength = _ref3.primaryButtonTextLength,
|
|
4684
4705
|
tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
|
|
@@ -5008,9 +5029,9 @@ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObjec
|
|
|
5008
5029
|
return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
|
|
5009
5030
|
});
|
|
5010
5031
|
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);
|
|
5011
|
-
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.
|
|
5032
|
+
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.sponsorship, devices.mobileAndTablet);
|
|
5012
5033
|
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5013
|
-
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-
|
|
5034
|
+
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);
|
|
5014
5035
|
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);
|
|
5015
5036
|
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);
|
|
5016
5037
|
|