@royaloperahouse/chord 0.5.6 → 0.5.10
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 +15 -0
- package/dist/chord.cjs.development.js +160 -64
- 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 +160 -64
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/Icons/SvgIcons/Utility/Star.svg.d.ts +4 -0
- package/dist/components/atoms/Icons/SvgIcons/index.d.ts +1 -0
- package/dist/components/molecules/ImageWithCaption/ImageWithCaption.style.d.ts +2 -1
- package/dist/components/organisms/Navigation/Navigation.style.d.ts +1 -0
- package/dist/types/image.d.ts +23 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
2
|
|
|
3
|
+
## [0.5.10]
|
|
4
|
+
- Highlights Carousel: tablet layout improvements
|
|
5
|
+
- Navigation improvements for small desktops.
|
|
6
|
+
- Hide Rotator Buttons in the Hihghlight Carousel when there is only one event
|
|
7
|
+
|
|
8
|
+
## [0.5.9]
|
|
9
|
+
- Reduce tablet grid margin from 50px to 32px.
|
|
10
|
+
- Add alternative to aspect-ratio css attribute.
|
|
11
|
+
|
|
12
|
+
## [0.5.8]
|
|
13
|
+
- PromoWithTitle links style
|
|
14
|
+
|
|
15
|
+
## [0.5.7]
|
|
16
|
+
- Added Star icon to Iconography
|
|
17
|
+
|
|
3
18
|
## [0.5.6]
|
|
4
19
|
- Added Favourite and Favourite Full icons to Iconography
|
|
5
20
|
|
|
@@ -469,7 +469,7 @@ var common = {
|
|
|
469
469
|
gap: '12px'
|
|
470
470
|
},
|
|
471
471
|
tablet: {
|
|
472
|
-
margin: '
|
|
472
|
+
margin: '32px',
|
|
473
473
|
outerMargin: '0',
|
|
474
474
|
gap: '20px'
|
|
475
475
|
},
|
|
@@ -1636,6 +1636,21 @@ var Refresh = (function (_ref) {
|
|
|
1636
1636
|
}));
|
|
1637
1637
|
});
|
|
1638
1638
|
|
|
1639
|
+
var Star = (function (_ref) {
|
|
1640
|
+
var _ref$color = _ref.color,
|
|
1641
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
1642
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
1643
|
+
width: "100%",
|
|
1644
|
+
height: "100%",
|
|
1645
|
+
viewBox: "0 0 48 46",
|
|
1646
|
+
fill: "none",
|
|
1647
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1648
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
1649
|
+
d: "M24 0L30.0248 16.7076L47.7764 17.2746L33.7483 28.1674L38.6946 45.2254L24 35.25L9.30537 45.2254L14.2517 28.1674L0.223587 17.2746L17.9752 16.7076L24 0Z",
|
|
1650
|
+
fill: color
|
|
1651
|
+
}));
|
|
1652
|
+
});
|
|
1653
|
+
|
|
1639
1654
|
var AudioDescription = (function (_ref) {
|
|
1640
1655
|
var _ref$color = _ref.color,
|
|
1641
1656
|
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
@@ -1968,6 +1983,7 @@ var IconLibrary = {
|
|
|
1968
1983
|
Settings: Settings,
|
|
1969
1984
|
Shift: Shift,
|
|
1970
1985
|
Space: Space,
|
|
1986
|
+
Star: Star,
|
|
1971
1987
|
Subscribe: Subscribe,
|
|
1972
1988
|
Subtitles: Subtitles,
|
|
1973
1989
|
Tick: Tick,
|
|
@@ -2463,11 +2479,41 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
2463
2479
|
AspectRatio["16:9"] = "16 / 9";
|
|
2464
2480
|
})(exports.AspectRatio || (exports.AspectRatio = {}));
|
|
2465
2481
|
|
|
2482
|
+
var AspectRatioLegacy;
|
|
2483
|
+
|
|
2484
|
+
(function (AspectRatioLegacy) {
|
|
2485
|
+
AspectRatioLegacy["1 / 1"] = "100";
|
|
2486
|
+
AspectRatioLegacy["3 / 4"] = "133";
|
|
2487
|
+
AspectRatioLegacy["4 / 3"] = "75";
|
|
2488
|
+
AspectRatioLegacy["16 / 9"] = "56.25";
|
|
2489
|
+
})(AspectRatioLegacy || (AspectRatioLegacy = {}));
|
|
2490
|
+
|
|
2491
|
+
var AspectRatioWidth;
|
|
2492
|
+
|
|
2493
|
+
(function (AspectRatioWidth) {
|
|
2494
|
+
AspectRatioWidth["1 / 1"] = "1";
|
|
2495
|
+
AspectRatioWidth["3 / 4"] = "0.75";
|
|
2496
|
+
AspectRatioWidth["4 / 3"] = "1.33";
|
|
2497
|
+
AspectRatioWidth["16 / 9"] = "1.78";
|
|
2498
|
+
})(AspectRatioWidth || (AspectRatioWidth = {}));
|
|
2499
|
+
|
|
2466
2500
|
var _templateObject$d;
|
|
2467
|
-
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: ", ";\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n"])), function (_ref) {
|
|
2501
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n position: relative;\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
2468
2502
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2469
2503
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2470
2504
|
return aspectRatio;
|
|
2505
|
+
}, function (_ref2) {
|
|
2506
|
+
var _ref2$aspectRatio = _ref2.aspectRatio,
|
|
2507
|
+
aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio;
|
|
2508
|
+
return aspectRatio;
|
|
2509
|
+
}, function (_ref3) {
|
|
2510
|
+
var _ref3$aspectRatio = _ref3.aspectRatio,
|
|
2511
|
+
aspectRatio = _ref3$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref3$aspectRatio;
|
|
2512
|
+
return AspectRatioLegacy[aspectRatio];
|
|
2513
|
+
}, function (_ref4) {
|
|
2514
|
+
var _ref4$aspectRatio = _ref4.aspectRatio,
|
|
2515
|
+
aspectRatio = _ref4$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref4$aspectRatio;
|
|
2516
|
+
return aspectRatio;
|
|
2471
2517
|
});
|
|
2472
2518
|
|
|
2473
2519
|
var _templateObject$e, _templateObject2$2;
|
|
@@ -2643,8 +2689,8 @@ var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$h || (_t
|
|
|
2643
2689
|
var IconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__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) {
|
|
2644
2690
|
var theme = _ref.theme;
|
|
2645
2691
|
return theme.colors.primary;
|
|
2646
|
-
}, devices.
|
|
2647
|
-
var IconUnavailableWrapper = /*#__PURE__*/styled__default.div(_templateObject3 || (_templateObject3 = /*#__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.
|
|
2692
|
+
}, devices.mobileAndTablet);
|
|
2693
|
+
var IconUnavailableWrapper = /*#__PURE__*/styled__default.div(_templateObject3 || (_templateObject3 = /*#__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.mobileAndTablet);
|
|
2648
2694
|
|
|
2649
2695
|
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2650
2696
|
var onClickPrev = _ref.onClickPrev,
|
|
@@ -2821,7 +2867,7 @@ zLevels.forEach(function (name, index) {
|
|
|
2821
2867
|
zIndexes[name] = index;
|
|
2822
2868
|
});
|
|
2823
2869
|
|
|
2824
|
-
var _templateObject$j, _templateObject2$5, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
2870
|
+
var _templateObject$j, _templateObject2$5, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
2825
2871
|
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject$j || (_templateObject$j = /*#__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);
|
|
2826
2872
|
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$5 || (_templateObject2$5 = /*#__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);
|
|
2827
2873
|
var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject3$1 || (_templateObject3$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);
|
|
@@ -2830,7 +2876,8 @@ var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject5 |
|
|
|
2830
2876
|
var LogoContainer = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__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);
|
|
2831
2877
|
var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__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);
|
|
2832
2878
|
var NavContainer = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__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);
|
|
2833
|
-
var
|
|
2879
|
+
var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
2880
|
+
var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__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);
|
|
2834
2881
|
|
|
2835
2882
|
var _templateObject$k;
|
|
2836
2883
|
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
@@ -3240,7 +3287,7 @@ var NavTop = function NavTop(_ref) {
|
|
|
3240
3287
|
|
|
3241
3288
|
var _templateObject$p, _templateObject2$9, _templateObject3$4, _templateObject4$2;
|
|
3242
3289
|
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
3243
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (props) {
|
|
3290
|
+
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.mobileAndTablet, function (props) {
|
|
3244
3291
|
if (props.showMenu) {
|
|
3245
3292
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
3246
3293
|
}
|
|
@@ -3730,7 +3777,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
3730
3777
|
urlLink: logoLink,
|
|
3731
3778
|
desktopImage: desktopLogoUrl,
|
|
3732
3779
|
devicesImage: devicesLogoUrl
|
|
3733
|
-
}))), /*#__PURE__*/React__default.createElement(
|
|
3780
|
+
}))), /*#__PURE__*/React__default.createElement(NavContainerGridItem, {
|
|
3734
3781
|
columnStartDesktop: 3,
|
|
3735
3782
|
columnSpanDesktop: 12,
|
|
3736
3783
|
columnStartDevice: 4,
|
|
@@ -3872,7 +3919,7 @@ var Footer = function Footer(_ref) {
|
|
|
3872
3919
|
}, additionalInfo)))));
|
|
3873
3920
|
};
|
|
3874
3921
|
|
|
3875
|
-
var _templateObject$w, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10, _templateObject11;
|
|
3922
|
+
var _templateObject$w, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
3876
3923
|
var AnchorTapbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), zIndexes.anchor);
|
|
3877
3924
|
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
3878
3925
|
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject3$a || (_templateObject3$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);
|
|
@@ -3891,7 +3938,7 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject7$2 || (_templateO
|
|
|
3891
3938
|
});
|
|
3892
3939
|
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--base-color-white);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n"])));
|
|
3893
3940
|
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n :hover {\n && svg path {\n fill: var(--base-color-primary);\n }\n }\n"])));
|
|
3894
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
3941
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
3895
3942
|
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref4) {
|
|
3896
3943
|
var theme = _ref4.theme;
|
|
3897
3944
|
return theme.colors.primaryButtonReverseBg;
|
|
@@ -4157,7 +4204,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
4157
4204
|
if (window.matchMedia(devices.mobile).matches) {
|
|
4158
4205
|
setSlidesOffsetBefore(20); // Mobile margin grid
|
|
4159
4206
|
} else if (window.matchMedia(devices.tablet).matches) {
|
|
4160
|
-
setSlidesOffsetBefore(
|
|
4207
|
+
setSlidesOffsetBefore(32); // Tablet margin grid
|
|
4161
4208
|
} else {
|
|
4162
4209
|
setSlidesOffsetBefore(Math.floor(window.innerWidth * 0.1) - 3); // 10% of width
|
|
4163
4210
|
}
|
|
@@ -4236,77 +4283,74 @@ var Carousel = function Carousel(_ref) {
|
|
|
4236
4283
|
})))));
|
|
4237
4284
|
};
|
|
4238
4285
|
|
|
4239
|
-
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$
|
|
4286
|
+
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2;
|
|
4240
4287
|
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$y || (_templateObject$y = /*#__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);
|
|
4241
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__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 /
|
|
4288
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__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) {
|
|
4242
4289
|
var theme = _ref.theme;
|
|
4243
|
-
return theme.fonts.mobile.sizes.altHeaders[
|
|
4290
|
+
return theme.fonts.mobile.sizes.altHeaders[5];
|
|
4244
4291
|
}, function (_ref2) {
|
|
4245
4292
|
var theme = _ref2.theme;
|
|
4246
|
-
return theme.fonts.mobile.weights.altHeaders[
|
|
4293
|
+
return theme.fonts.mobile.weights.altHeaders[5];
|
|
4247
4294
|
}, function (_ref3) {
|
|
4248
4295
|
var theme = _ref3.theme;
|
|
4249
|
-
return theme.fonts.mobile.letterSpacing.altHeaders[
|
|
4250
|
-
}, function (_ref4) {
|
|
4251
|
-
var theme = _ref4.theme;
|
|
4252
|
-
return theme.fonts.mobile.lineHeights.altHeaders[4];
|
|
4296
|
+
return theme.fonts.mobile.letterSpacing.altHeaders[5];
|
|
4253
4297
|
}, devices.mobile);
|
|
4254
|
-
var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__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 /
|
|
4255
|
-
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.mobile);
|
|
4256
|
-
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__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 (
|
|
4257
|
-
var theme =
|
|
4298
|
+
var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__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);
|
|
4299
|
+
var InfoLogoWrapper = /*#__PURE__*/styled__default.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);
|
|
4300
|
+
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__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) {
|
|
4301
|
+
var theme = _ref4.theme;
|
|
4258
4302
|
return theme.fonts.mobile.sizes.headers[3];
|
|
4303
|
+
}, function (_ref5) {
|
|
4304
|
+
var theme = _ref5.theme;
|
|
4305
|
+
return theme.fonts.mobile.weights.headers[3];
|
|
4259
4306
|
}, function (_ref6) {
|
|
4260
4307
|
var theme = _ref6.theme;
|
|
4261
|
-
return theme.fonts.mobile.
|
|
4308
|
+
return theme.fonts.mobile.letterSpacing.headers[3];
|
|
4262
4309
|
}, function (_ref7) {
|
|
4263
4310
|
var theme = _ref7.theme;
|
|
4264
|
-
return theme.fonts.mobile.
|
|
4311
|
+
return theme.fonts.mobile.lineHeights.headers[3];
|
|
4265
4312
|
}, function (_ref8) {
|
|
4266
4313
|
var theme = _ref8.theme;
|
|
4267
|
-
return theme.fonts.mobile.
|
|
4314
|
+
return theme.fonts.mobile.sizes.subtitles[2];
|
|
4268
4315
|
}, function (_ref9) {
|
|
4269
4316
|
var theme = _ref9.theme;
|
|
4270
|
-
return theme.fonts.mobile.
|
|
4317
|
+
return theme.fonts.mobile.weights.subtitles[2];
|
|
4271
4318
|
}, function (_ref10) {
|
|
4272
4319
|
var theme = _ref10.theme;
|
|
4273
|
-
return theme.fonts.mobile.
|
|
4320
|
+
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4274
4321
|
}, function (_ref11) {
|
|
4275
4322
|
var theme = _ref11.theme;
|
|
4276
|
-
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4277
|
-
}, function (_ref12) {
|
|
4278
|
-
var theme = _ref12.theme;
|
|
4279
4323
|
return theme.fonts.mobile.lineHeights.subtitles[2];
|
|
4280
4324
|
});
|
|
4281
|
-
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n h6 {\n padding: 0;\n margin: 0 0 4px 0;\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n > div {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n h6 {\n margin: 0 0 8px 0;\n }\n }\n }\n"])), devices.tablet, function (
|
|
4282
|
-
var theme =
|
|
4325
|
+
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n h6 {\n padding: 0;\n margin: 0 0 4px 0;\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n > div {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n h6 {\n margin: 0 0 8px 0;\n }\n }\n }\n"])), devices.tablet, function (_ref12) {
|
|
4326
|
+
var theme = _ref12.theme;
|
|
4283
4327
|
return theme.fonts.mobile.sizes.subtitles[2];
|
|
4328
|
+
}, function (_ref13) {
|
|
4329
|
+
var theme = _ref13.theme;
|
|
4330
|
+
return theme.fonts.mobile.weights.subtitles[2];
|
|
4284
4331
|
}, function (_ref14) {
|
|
4285
4332
|
var theme = _ref14.theme;
|
|
4286
|
-
return theme.fonts.mobile.
|
|
4333
|
+
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4287
4334
|
}, function (_ref15) {
|
|
4288
4335
|
var theme = _ref15.theme;
|
|
4289
|
-
return theme.fonts.mobile.
|
|
4336
|
+
return theme.fonts.mobile.lineHeights.subtitles[2];
|
|
4290
4337
|
}, function (_ref16) {
|
|
4291
4338
|
var theme = _ref16.theme;
|
|
4292
|
-
return theme.fonts.mobile.
|
|
4339
|
+
return theme.fonts.mobile.sizes.body[1];
|
|
4293
4340
|
}, function (_ref17) {
|
|
4294
4341
|
var theme = _ref17.theme;
|
|
4295
|
-
return theme.fonts.mobile.
|
|
4342
|
+
return theme.fonts.mobile.weights.body[1];
|
|
4296
4343
|
}, function (_ref18) {
|
|
4297
4344
|
var theme = _ref18.theme;
|
|
4298
|
-
return theme.fonts.mobile.
|
|
4345
|
+
return theme.fonts.mobile.letterSpacing.body[1];
|
|
4299
4346
|
}, function (_ref19) {
|
|
4300
4347
|
var theme = _ref19.theme;
|
|
4301
|
-
return theme.fonts.mobile.letterSpacing.body[1];
|
|
4302
|
-
}, function (_ref20) {
|
|
4303
|
-
var theme = _ref20.theme;
|
|
4304
4348
|
return theme.fonts.mobile.lineHeights.body[1];
|
|
4305
4349
|
}, devices.mobile);
|
|
4306
|
-
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n"])));
|
|
4307
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__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:
|
|
4308
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__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.
|
|
4309
|
-
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$
|
|
4350
|
+
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4351
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__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);
|
|
4352
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__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);
|
|
4353
|
+
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__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);
|
|
4310
4354
|
|
|
4311
4355
|
var _excluded$8 = ["text"];
|
|
4312
4356
|
|
|
@@ -4367,6 +4411,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4367
4411
|
}
|
|
4368
4412
|
};
|
|
4369
4413
|
|
|
4414
|
+
var hasMultipleImages = images.length > 1;
|
|
4370
4415
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid, {
|
|
4371
4416
|
onClick: function onClick(e) {
|
|
4372
4417
|
return e.stopPropagation();
|
|
@@ -4377,7 +4422,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4377
4422
|
level: 4
|
|
4378
4423
|
}, carouselTitle), /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4379
4424
|
level: 5
|
|
4380
|
-
}, carouselTitle)), /*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4425
|
+
}, carouselTitle)), hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4381
4426
|
onClickNext: onNext,
|
|
4382
4427
|
onClickPrev: onPrev
|
|
4383
4428
|
})), /*#__PURE__*/React__default.createElement(InfoWrapper, {
|
|
@@ -4394,14 +4439,14 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4394
4439
|
level: 1
|
|
4395
4440
|
}, description)), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
|
|
4396
4441
|
"data-testid": "carousel-wrapper"
|
|
4397
|
-
}, /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4442
|
+
}, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4398
4443
|
"data-testid": "rotator-buttons"
|
|
4399
4444
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4400
4445
|
onClickNext: onNext,
|
|
4401
4446
|
onClickPrev: onPrev
|
|
4402
4447
|
})), /*#__PURE__*/React__default.createElement(swiperReact_js.Swiper, {
|
|
4403
4448
|
slidesPerView: "auto",
|
|
4404
|
-
loop:
|
|
4449
|
+
loop: hasMultipleImages,
|
|
4405
4450
|
loopedSlides: images.length,
|
|
4406
4451
|
onSwiper: onSwiper
|
|
4407
4452
|
}, images.map(function (image) {
|
|
@@ -4869,7 +4914,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4869
4914
|
};
|
|
4870
4915
|
|
|
4871
4916
|
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6;
|
|
4872
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\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 background-image: url('", "');\n background-position: center;\n display: flex;\n align-items: start;\n }\n }\n"])), function (_ref) {
|
|
4917
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__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) {
|
|
4873
4918
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
4874
4919
|
return bgUrlDesktop;
|
|
4875
4920
|
}, zIndexes.content, devices.mobile, function (_ref2) {
|
|
@@ -4878,7 +4923,7 @@ var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_temp
|
|
|
4878
4923
|
return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
|
|
4879
4924
|
});
|
|
4880
4925
|
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$p || (_templateObject2$p = /*#__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);
|
|
4881
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__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.
|
|
4926
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__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);
|
|
4882
4927
|
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
4883
4928
|
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);
|
|
4884
4929
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__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);
|
|
@@ -5004,12 +5049,21 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
|
|
|
5004
5049
|
}, devices.mobile);
|
|
5005
5050
|
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__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);
|
|
5006
5051
|
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"])));
|
|
5007
|
-
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__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"])))
|
|
5008
|
-
var
|
|
5009
|
-
|
|
5010
|
-
|
|
5011
|
-
|
|
5012
|
-
|
|
5052
|
+
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__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) {
|
|
5053
|
+
var theme = _ref5.theme;
|
|
5054
|
+
return theme.colors.black;
|
|
5055
|
+
}, function (_ref6) {
|
|
5056
|
+
var theme = _ref6.theme;
|
|
5057
|
+
return theme.colors.darkgrey;
|
|
5058
|
+
}, function (_ref7) {
|
|
5059
|
+
var theme = _ref7.theme;
|
|
5060
|
+
return theme.colors.primary;
|
|
5061
|
+
});
|
|
5062
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref8) {
|
|
5063
|
+
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
5064
|
+
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
5065
|
+
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
5066
|
+
tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
|
|
5013
5067
|
var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
|
|
5014
5068
|
|
|
5015
5069
|
if (isLinksLayoutColumn) {
|
|
@@ -5017,11 +5071,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
|
|
|
5017
5071
|
}
|
|
5018
5072
|
|
|
5019
5073
|
return '';
|
|
5020
|
-
}, devices.mobile, devices.tablet, function (
|
|
5021
|
-
var
|
|
5022
|
-
primaryButtonTextLength =
|
|
5023
|
-
|
|
5024
|
-
tertiaryButtonTextLength =
|
|
5074
|
+
}, devices.mobile, devices.tablet, function (_ref9) {
|
|
5075
|
+
var _ref9$primaryButtonTe = _ref9.primaryButtonTextLength,
|
|
5076
|
+
primaryButtonTextLength = _ref9$primaryButtonTe === void 0 ? 0 : _ref9$primaryButtonTe,
|
|
5077
|
+
_ref9$tertiaryButtonT = _ref9.tertiaryButtonTextLength,
|
|
5078
|
+
tertiaryButtonTextLength = _ref9$tertiaryButtonT === void 0 ? 0 : _ref9$tertiaryButtonT;
|
|
5025
5079
|
var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
|
|
5026
5080
|
|
|
5027
5081
|
if (isLinksLayoutColumnTablet) {
|
|
@@ -5146,20 +5200,56 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
5146
5200
|
};
|
|
5147
5201
|
|
|
5148
5202
|
var _templateObject$M, _templateObject2$s;
|
|
5149
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n }\n"])), ImageAspectRatioWrapper)
|
|
5203
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
|
|
5204
|
+
var _ref$aspectRatio = _ref.aspectRatio,
|
|
5205
|
+
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
5206
|
+
return aspectRatio;
|
|
5207
|
+
}, function (_ref2) {
|
|
5208
|
+
var _ref2$aspectRatio = _ref2.aspectRatio,
|
|
5209
|
+
aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio,
|
|
5210
|
+
height = _ref2.height;
|
|
5211
|
+
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
5212
|
+
});
|
|
5150
5213
|
var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
5151
5214
|
|
|
5152
5215
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
5153
5216
|
var caption = _ref.caption,
|
|
5154
5217
|
children = _ref.children,
|
|
5155
5218
|
aspectRatio = _ref.aspectRatio;
|
|
5156
|
-
|
|
5219
|
+
var wrapperRef = React.useRef(null);
|
|
5220
|
+
|
|
5221
|
+
var _useState = React.useState(0),
|
|
5222
|
+
height = _useState[0],
|
|
5223
|
+
setHeight = _useState[1];
|
|
5224
|
+
|
|
5225
|
+
React.useEffect(function () {
|
|
5226
|
+
var setWrapperHeight = function setWrapperHeight() {
|
|
5227
|
+
var _wrapperRef$current;
|
|
5228
|
+
|
|
5229
|
+
return setHeight((wrapperRef == null ? void 0 : (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
|
|
5230
|
+
};
|
|
5231
|
+
|
|
5232
|
+
window.addEventListener('resize', setWrapperHeight);
|
|
5233
|
+
|
|
5234
|
+
if (wrapperRef) {
|
|
5235
|
+
setWrapperHeight();
|
|
5236
|
+
}
|
|
5237
|
+
|
|
5238
|
+
return function () {
|
|
5239
|
+
return window.removeEventListener('resize', setWrapperHeight);
|
|
5240
|
+
};
|
|
5241
|
+
}, [wrapperRef]);
|
|
5242
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
5243
|
+
aspectRatio: aspectRatio,
|
|
5244
|
+
ref: wrapperRef,
|
|
5245
|
+
height: height
|
|
5246
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
5157
5247
|
aspectRatio: aspectRatio
|
|
5158
5248
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
5159
5249
|
};
|
|
5160
5250
|
|
|
5161
5251
|
var _templateObject$N;
|
|
5162
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
5252
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
5163
5253
|
var theme = _ref.theme;
|
|
5164
5254
|
return theme.colors.primary;
|
|
5165
5255
|
}, function (_ref2) {
|
|
@@ -6035,6 +6125,12 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$N || (_
|
|
|
6035
6125
|
}, function (_ref292) {
|
|
6036
6126
|
var theme = _ref292.theme;
|
|
6037
6127
|
return theme.grid.tablet.margin;
|
|
6128
|
+
}, function (_ref293) {
|
|
6129
|
+
var theme = _ref293.theme;
|
|
6130
|
+
return theme.spacing[10];
|
|
6131
|
+
}, function (_ref294) {
|
|
6132
|
+
var theme = _ref294.theme;
|
|
6133
|
+
return theme.spacing[6];
|
|
6038
6134
|
}, devices.desktop, devices.largeDesktop);
|
|
6039
6135
|
|
|
6040
6136
|
exports.Accordion = Accordion;
|