@royaloperahouse/chord 0.5.7 → 0.5.11
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 +16 -0
- package/README.md +2 -2
- package/dist/chord.cjs.development.js +386 -244
- 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 +389 -246
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/Tickbox/Tickbox.d.ts +4 -0
- package/dist/components/atoms/Tickbox/Tickbox.style.d.ts +4 -0
- package/dist/components/atoms/Tickbox/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts +2 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/ImageWithCaption/ImageWithCaption.style.d.ts +2 -1
- package/dist/components/organisms/Navigation/Navigation.style.d.ts +1 -0
- package/dist/index.d.ts +3 -3
- package/dist/types/image.d.ts +23 -0
- package/dist/types/index.d.ts +2 -1
- package/dist/types/tickbox.d.ts +40 -0
- package/package.json +1 -1
package/dist/chord.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { createElement, memo,
|
|
1
|
+
import React__default, { createElement, memo, useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
|
2
2
|
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
|
|
4
4
|
import 'swiper/swiper-bundle.css';
|
|
@@ -461,7 +461,7 @@ var common = {
|
|
|
461
461
|
gap: '12px'
|
|
462
462
|
},
|
|
463
463
|
tablet: {
|
|
464
|
-
margin: '
|
|
464
|
+
margin: '32px',
|
|
465
465
|
outerMargin: '0',
|
|
466
466
|
gap: '20px'
|
|
467
467
|
},
|
|
@@ -2477,11 +2477,41 @@ var AspectRatio;
|
|
|
2477
2477
|
AspectRatio["16:9"] = "16 / 9";
|
|
2478
2478
|
})(AspectRatio || (AspectRatio = {}));
|
|
2479
2479
|
|
|
2480
|
+
var AspectRatioLegacy;
|
|
2481
|
+
|
|
2482
|
+
(function (AspectRatioLegacy) {
|
|
2483
|
+
AspectRatioLegacy["1 / 1"] = "100";
|
|
2484
|
+
AspectRatioLegacy["3 / 4"] = "133";
|
|
2485
|
+
AspectRatioLegacy["4 / 3"] = "75";
|
|
2486
|
+
AspectRatioLegacy["16 / 9"] = "56.25";
|
|
2487
|
+
})(AspectRatioLegacy || (AspectRatioLegacy = {}));
|
|
2488
|
+
|
|
2489
|
+
var AspectRatioWidth;
|
|
2490
|
+
|
|
2491
|
+
(function (AspectRatioWidth) {
|
|
2492
|
+
AspectRatioWidth["1 / 1"] = "1";
|
|
2493
|
+
AspectRatioWidth["3 / 4"] = "0.75";
|
|
2494
|
+
AspectRatioWidth["4 / 3"] = "1.33";
|
|
2495
|
+
AspectRatioWidth["16 / 9"] = "1.78";
|
|
2496
|
+
})(AspectRatioWidth || (AspectRatioWidth = {}));
|
|
2497
|
+
|
|
2480
2498
|
var _templateObject$d;
|
|
2481
|
-
var ImageAspectRatioWrapper = /*#__PURE__*/styled.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) {
|
|
2499
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled.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) {
|
|
2482
2500
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2483
2501
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2484
2502
|
return aspectRatio;
|
|
2503
|
+
}, function (_ref2) {
|
|
2504
|
+
var _ref2$aspectRatio = _ref2.aspectRatio,
|
|
2505
|
+
aspectRatio = _ref2$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref2$aspectRatio;
|
|
2506
|
+
return aspectRatio;
|
|
2507
|
+
}, function (_ref3) {
|
|
2508
|
+
var _ref3$aspectRatio = _ref3.aspectRatio,
|
|
2509
|
+
aspectRatio = _ref3$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref3$aspectRatio;
|
|
2510
|
+
return AspectRatioLegacy[aspectRatio];
|
|
2511
|
+
}, function (_ref4) {
|
|
2512
|
+
var _ref4$aspectRatio = _ref4.aspectRatio,
|
|
2513
|
+
aspectRatio = _ref4$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref4$aspectRatio;
|
|
2514
|
+
return aspectRatio;
|
|
2485
2515
|
});
|
|
2486
2516
|
|
|
2487
2517
|
var _templateObject$e, _templateObject2$2;
|
|
@@ -2639,91 +2669,7 @@ var TabLink = function TabLink(_ref) {
|
|
|
2639
2669
|
};
|
|
2640
2670
|
|
|
2641
2671
|
var _templateObject$g;
|
|
2642
|
-
var
|
|
2643
|
-
|
|
2644
|
-
var TypeTags = function TypeTags(_ref) {
|
|
2645
|
-
var list = _ref.list;
|
|
2646
|
-
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
2647
|
-
return /*#__PURE__*/React__default.createElement(Overline, {
|
|
2648
|
-
level: 1,
|
|
2649
|
-
tag: "li",
|
|
2650
|
-
key: t
|
|
2651
|
-
}, t);
|
|
2652
|
-
}));
|
|
2653
|
-
};
|
|
2654
|
-
|
|
2655
|
-
var _templateObject$h, _templateObject2$4, _templateObject3;
|
|
2656
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
2657
|
-
var IconWrapper = /*#__PURE__*/styled.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) {
|
|
2658
|
-
var theme = _ref.theme;
|
|
2659
|
-
return theme.colors.primary;
|
|
2660
|
-
}, devices.mobile);
|
|
2661
|
-
var IconUnavailableWrapper = /*#__PURE__*/styled.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.mobile);
|
|
2662
|
-
|
|
2663
|
-
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2664
|
-
var onClickPrev = _ref.onClickPrev,
|
|
2665
|
-
onClickNext = _ref.onClickNext,
|
|
2666
|
-
_ref$availablePrev = _ref.availablePrev,
|
|
2667
|
-
availablePrev = _ref$availablePrev === void 0 ? true : _ref$availablePrev,
|
|
2668
|
-
_ref$availableNext = _ref.availableNext,
|
|
2669
|
-
availableNext = _ref$availableNext === void 0 ? true : _ref$availableNext;
|
|
2670
|
-
|
|
2671
|
-
var onClickLeftHandler = function onClickLeftHandler() {
|
|
2672
|
-
if (onClickPrev) {
|
|
2673
|
-
onClickPrev();
|
|
2674
|
-
}
|
|
2675
|
-
};
|
|
2676
|
-
|
|
2677
|
-
var onPrevKeyDownHandler = function onPrevKeyDownHandler(e) {
|
|
2678
|
-
if (e.key === 'Enter') {
|
|
2679
|
-
onClickLeftHandler();
|
|
2680
|
-
}
|
|
2681
|
-
};
|
|
2682
|
-
|
|
2683
|
-
var onClickRightHandler = function onClickRightHandler() {
|
|
2684
|
-
if (onClickNext) {
|
|
2685
|
-
onClickNext();
|
|
2686
|
-
}
|
|
2687
|
-
};
|
|
2688
|
-
|
|
2689
|
-
var onNextKeyDownHandler = function onNextKeyDownHandler(e) {
|
|
2690
|
-
if (e.key === 'Enter') {
|
|
2691
|
-
onClickRightHandler();
|
|
2692
|
-
}
|
|
2693
|
-
};
|
|
2694
|
-
|
|
2695
|
-
var renderPrevIcon = function renderPrevIcon() {
|
|
2696
|
-
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2697
|
-
iconName: 'CarouselArrow',
|
|
2698
|
-
direction: "reverse"
|
|
2699
|
-
});
|
|
2700
|
-
};
|
|
2701
|
-
|
|
2702
|
-
var renderNextIcon = function renderNextIcon() {
|
|
2703
|
-
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2704
|
-
iconName: 'CarouselArrow'
|
|
2705
|
-
});
|
|
2706
|
-
};
|
|
2707
|
-
|
|
2708
|
-
return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2709
|
-
onClick: onClickLeftHandler,
|
|
2710
|
-
onKeyDown: onPrevKeyDownHandler,
|
|
2711
|
-
tabIndex: 0,
|
|
2712
|
-
"data-testid": "iconprev"
|
|
2713
|
-
}, renderPrevIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2714
|
-
"data-testid": "iconprevnoavailable"
|
|
2715
|
-
}, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2716
|
-
onClick: onClickRightHandler,
|
|
2717
|
-
onKeyDown: onNextKeyDownHandler,
|
|
2718
|
-
tabIndex: 0,
|
|
2719
|
-
"data-testid": "iconnext"
|
|
2720
|
-
}, renderNextIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2721
|
-
"data-testid": "iconnextnoavailable"
|
|
2722
|
-
}, renderNextIcon()));
|
|
2723
|
-
};
|
|
2724
|
-
|
|
2725
|
-
var _templateObject$i;
|
|
2726
|
-
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n"])), function (_ref) {
|
|
2672
|
+
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n"])), function (_ref) {
|
|
2727
2673
|
var typography = _ref.typography;
|
|
2728
2674
|
return typography;
|
|
2729
2675
|
}, function (_ref2) {
|
|
@@ -2829,25 +2775,171 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
2829
2775
|
}, children);
|
|
2830
2776
|
};
|
|
2831
2777
|
|
|
2778
|
+
var _templateObject$h, _templateObject2$4, _templateObject3;
|
|
2779
|
+
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(--base-color-", ");\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n"])), function (_ref) {
|
|
2780
|
+
var dark = _ref.dark;
|
|
2781
|
+
return dark ? 'white' : 'black';
|
|
2782
|
+
});
|
|
2783
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid var(--base-color-", ");\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref2) {
|
|
2784
|
+
var dark = _ref2.dark;
|
|
2785
|
+
return dark ? 'white' : 'black';
|
|
2786
|
+
}, devices.mobile);
|
|
2787
|
+
var TickboxInput = /*#__PURE__*/styled.input(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n\n &:checked ~ ", " {\n background-color: var(--base-color-", ");\n & svg {\n display: block;\n path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
2788
|
+
var dark = _ref3.dark;
|
|
2789
|
+
return dark ? 'white' : 'black';
|
|
2790
|
+
}, function (_ref4) {
|
|
2791
|
+
var dark = _ref4.dark;
|
|
2792
|
+
return dark ? 'black' : 'white';
|
|
2793
|
+
});
|
|
2794
|
+
|
|
2795
|
+
var TickboxMode;
|
|
2796
|
+
|
|
2797
|
+
(function (TickboxMode) {
|
|
2798
|
+
TickboxMode["Dark"] = "dark";
|
|
2799
|
+
TickboxMode["Light"] = "light";
|
|
2800
|
+
})(TickboxMode || (TickboxMode = {}));
|
|
2801
|
+
|
|
2802
|
+
var Tickbox = function Tickbox(_ref) {
|
|
2803
|
+
var children = _ref.children,
|
|
2804
|
+
_ref$mode = _ref.mode,
|
|
2805
|
+
mode = _ref$mode === void 0 ? 'light' : _ref$mode,
|
|
2806
|
+
onChange = _ref.onChange,
|
|
2807
|
+
_ref$checked = _ref.checked,
|
|
2808
|
+
checked = _ref$checked === void 0 ? false : _ref$checked;
|
|
2809
|
+
|
|
2810
|
+
var _useState = useState(checked),
|
|
2811
|
+
selected = _useState[0],
|
|
2812
|
+
setSelected = _useState[1];
|
|
2813
|
+
|
|
2814
|
+
var onInputChange = function onInputChange(e) {
|
|
2815
|
+
var inputChecked = e.target.checked;
|
|
2816
|
+
setSelected(inputChecked);
|
|
2817
|
+
onChange == null ? void 0 : onChange(inputChecked);
|
|
2818
|
+
};
|
|
2819
|
+
|
|
2820
|
+
var isDarkMode = mode === TickboxMode.Dark;
|
|
2821
|
+
return /*#__PURE__*/React__default.createElement(TickboxLabel, {
|
|
2822
|
+
dark: isDarkMode,
|
|
2823
|
+
"data-testid": "tickbox"
|
|
2824
|
+
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
2825
|
+
level: 1,
|
|
2826
|
+
tag: "span"
|
|
2827
|
+
}, children), /*#__PURE__*/React__default.createElement(TickboxInput, {
|
|
2828
|
+
type: "checkbox",
|
|
2829
|
+
checked: selected,
|
|
2830
|
+
dark: isDarkMode,
|
|
2831
|
+
onChange: onInputChange
|
|
2832
|
+
}), /*#__PURE__*/React__default.createElement(TickboxCheckmark, {
|
|
2833
|
+
dark: isDarkMode
|
|
2834
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
2835
|
+
iconName: "Tick"
|
|
2836
|
+
})));
|
|
2837
|
+
};
|
|
2838
|
+
|
|
2839
|
+
var _templateObject$i;
|
|
2840
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n & li {\n color: var(--base-color-black);\n display: inline-block;\n margin: 0;\n }\n\n & li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n & li:first-child:before {\n display: none;\n }\n"])));
|
|
2841
|
+
|
|
2842
|
+
var TypeTags = function TypeTags(_ref) {
|
|
2843
|
+
var list = _ref.list;
|
|
2844
|
+
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
2845
|
+
return /*#__PURE__*/React__default.createElement(Overline, {
|
|
2846
|
+
level: 1,
|
|
2847
|
+
tag: "li",
|
|
2848
|
+
key: t
|
|
2849
|
+
}, t);
|
|
2850
|
+
}));
|
|
2851
|
+
};
|
|
2852
|
+
|
|
2853
|
+
var _templateObject$j, _templateObject2$5, _templateObject3$1;
|
|
2854
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
2855
|
+
var IconWrapper = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__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) {
|
|
2856
|
+
var theme = _ref.theme;
|
|
2857
|
+
return theme.colors.primary;
|
|
2858
|
+
}, devices.mobileAndTablet);
|
|
2859
|
+
var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__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);
|
|
2860
|
+
|
|
2861
|
+
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2862
|
+
var onClickPrev = _ref.onClickPrev,
|
|
2863
|
+
onClickNext = _ref.onClickNext,
|
|
2864
|
+
_ref$availablePrev = _ref.availablePrev,
|
|
2865
|
+
availablePrev = _ref$availablePrev === void 0 ? true : _ref$availablePrev,
|
|
2866
|
+
_ref$availableNext = _ref.availableNext,
|
|
2867
|
+
availableNext = _ref$availableNext === void 0 ? true : _ref$availableNext;
|
|
2868
|
+
|
|
2869
|
+
var onClickLeftHandler = function onClickLeftHandler() {
|
|
2870
|
+
if (onClickPrev) {
|
|
2871
|
+
onClickPrev();
|
|
2872
|
+
}
|
|
2873
|
+
};
|
|
2874
|
+
|
|
2875
|
+
var onPrevKeyDownHandler = function onPrevKeyDownHandler(e) {
|
|
2876
|
+
if (e.key === 'Enter') {
|
|
2877
|
+
onClickLeftHandler();
|
|
2878
|
+
}
|
|
2879
|
+
};
|
|
2880
|
+
|
|
2881
|
+
var onClickRightHandler = function onClickRightHandler() {
|
|
2882
|
+
if (onClickNext) {
|
|
2883
|
+
onClickNext();
|
|
2884
|
+
}
|
|
2885
|
+
};
|
|
2886
|
+
|
|
2887
|
+
var onNextKeyDownHandler = function onNextKeyDownHandler(e) {
|
|
2888
|
+
if (e.key === 'Enter') {
|
|
2889
|
+
onClickRightHandler();
|
|
2890
|
+
}
|
|
2891
|
+
};
|
|
2892
|
+
|
|
2893
|
+
var renderPrevIcon = function renderPrevIcon() {
|
|
2894
|
+
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2895
|
+
iconName: 'CarouselArrow',
|
|
2896
|
+
direction: "reverse"
|
|
2897
|
+
});
|
|
2898
|
+
};
|
|
2899
|
+
|
|
2900
|
+
var renderNextIcon = function renderNextIcon() {
|
|
2901
|
+
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2902
|
+
iconName: 'CarouselArrow'
|
|
2903
|
+
});
|
|
2904
|
+
};
|
|
2905
|
+
|
|
2906
|
+
return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2907
|
+
onClick: onClickLeftHandler,
|
|
2908
|
+
onKeyDown: onPrevKeyDownHandler,
|
|
2909
|
+
tabIndex: 0,
|
|
2910
|
+
"data-testid": "iconprev"
|
|
2911
|
+
}, renderPrevIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2912
|
+
"data-testid": "iconprevnoavailable"
|
|
2913
|
+
}, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2914
|
+
onClick: onClickRightHandler,
|
|
2915
|
+
onKeyDown: onNextKeyDownHandler,
|
|
2916
|
+
tabIndex: 0,
|
|
2917
|
+
"data-testid": "iconnext"
|
|
2918
|
+
}, renderNextIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2919
|
+
"data-testid": "iconnextnoavailable"
|
|
2920
|
+
}, renderNextIcon()));
|
|
2921
|
+
};
|
|
2922
|
+
|
|
2832
2923
|
var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
|
|
2833
2924
|
var zIndexes = {};
|
|
2834
2925
|
zLevels.forEach(function (name, index) {
|
|
2835
2926
|
zIndexes[name] = index;
|
|
2836
2927
|
});
|
|
2837
2928
|
|
|
2838
|
-
var _templateObject$
|
|
2839
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2840
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
2841
|
-
var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$
|
|
2929
|
+
var _templateObject$k, _templateObject2$6, _templateObject3$2, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
2930
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__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);
|
|
2931
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$6 || (_templateObject2$6 = /*#__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);
|
|
2932
|
+
var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__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);
|
|
2842
2933
|
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject4 || (_templateObject4 = /*#__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);
|
|
2843
2934
|
var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet);
|
|
2844
2935
|
var LogoContainer = /*#__PURE__*/styled.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);
|
|
2845
2936
|
var MenuContainer = /*#__PURE__*/styled.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);
|
|
2846
2937
|
var NavContainer = /*#__PURE__*/styled.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);
|
|
2847
|
-
var
|
|
2938
|
+
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
2939
|
+
var NavTopContainer = /*#__PURE__*/styled.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);
|
|
2848
2940
|
|
|
2849
|
-
var _templateObject$
|
|
2850
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
2941
|
+
var _templateObject$l;
|
|
2942
|
+
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
2851
2943
|
|
|
2852
2944
|
var Logo = function Logo(_ref) {
|
|
2853
2945
|
var _ref$id = _ref.id,
|
|
@@ -2876,11 +2968,11 @@ var Logo = function Logo(_ref) {
|
|
|
2876
2968
|
}))));
|
|
2877
2969
|
};
|
|
2878
2970
|
|
|
2879
|
-
var _templateObject$
|
|
2880
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
2971
|
+
var _templateObject$m;
|
|
2972
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
|
|
2881
2973
|
|
|
2882
|
-
var _templateObject$
|
|
2883
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2974
|
+
var _templateObject$n, _templateObject2$7, _templateObject3$3, _templateObject4$1;
|
|
2975
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
2884
2976
|
var selected = _ref.selected,
|
|
2885
2977
|
colorPrimary = _ref.colorPrimary;
|
|
2886
2978
|
|
|
@@ -2899,8 +2991,8 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$m || (_templateObj
|
|
|
2899
2991
|
var colorPrimary = _ref4.colorPrimary;
|
|
2900
2992
|
return colorPrimary;
|
|
2901
2993
|
});
|
|
2902
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
2903
|
-
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
2994
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
2995
|
+
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n\n & .basket-num {\n color: white;\n font-size: 10px;\n font-family: var(--font-family-navigation);\n }\n"])));
|
|
2904
2996
|
var BasketText = /*#__PURE__*/styled.a(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n color: var(--base-color-black);\n margin-left: 6px;\n text-decoration: none;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
2905
2997
|
|
|
2906
2998
|
var Basket$1 = function Basket(_ref) {
|
|
@@ -2943,8 +3035,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
2943
3035
|
}, text) : ''));
|
|
2944
3036
|
};
|
|
2945
3037
|
|
|
2946
|
-
var _templateObject$
|
|
2947
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3038
|
+
var _templateObject$o, _templateObject2$8;
|
|
3039
|
+
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
2948
3040
|
var selected = _ref.selected,
|
|
2949
3041
|
colorPrimary = _ref.colorPrimary;
|
|
2950
3042
|
|
|
@@ -2960,7 +3052,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObj
|
|
|
2960
3052
|
var colorPrimary = _ref3.colorPrimary;
|
|
2961
3053
|
return colorPrimary;
|
|
2962
3054
|
});
|
|
2963
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
3055
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
2964
3056
|
|
|
2965
3057
|
var Search$1 = function Search(_ref) {
|
|
2966
3058
|
var _ref$selected = _ref.selected,
|
|
@@ -2987,13 +3079,13 @@ var Search$1 = function Search(_ref) {
|
|
|
2987
3079
|
})));
|
|
2988
3080
|
};
|
|
2989
3081
|
|
|
2990
|
-
var _templateObject$
|
|
2991
|
-
var TabContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2992
|
-
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$
|
|
3082
|
+
var _templateObject$p, _templateObject2$9, _templateObject3$4;
|
|
3083
|
+
var TabContainer = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
3084
|
+
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n text-transform: uppercase;\n\n :hover,\n :focus {\n color: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2993
3085
|
var colorPrimary = _ref.colorPrimary;
|
|
2994
3086
|
return colorPrimary;
|
|
2995
3087
|
});
|
|
2996
|
-
var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
3088
|
+
var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border: 1px solid var(--base-color-light-grey);\n border-top-color: var(--base-color-", ");\n display: flex;\n flex-direction: column;\n row-gap: var(--navigation-small-gap);\n padding: var(--navigation-middle-gap);\n position: absolute;\n top: 24px;\n min-width: calc(100% - calc(2 * var(--navigation-middle-gap)));\n max-width: max-content;\n white-space: nowrap;\n z-index: ", ";\n\n ", "\n\n @media ", " {\n padding-left: 0px;\n padding-bottom: 0px;\n row-gap: var(--navigation-large-gap);\n border: 0;\n background-color: none;\n\n ", "\n }\n"])), function (_ref2) {
|
|
2997
3089
|
var colorPrimary = _ref2.colorPrimary;
|
|
2998
3090
|
return colorPrimary;
|
|
2999
3091
|
}, zIndexes.menu, function (props) {
|
|
@@ -3252,16 +3344,16 @@ var NavTop = function NavTop(_ref) {
|
|
|
3252
3344
|
}));
|
|
3253
3345
|
};
|
|
3254
3346
|
|
|
3255
|
-
var _templateObject$
|
|
3256
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3257
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3347
|
+
var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
|
|
3348
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
3349
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$a || (_templateObject2$a = /*#__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) {
|
|
3258
3350
|
if (props.showMenu) {
|
|
3259
3351
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
3260
3352
|
}
|
|
3261
3353
|
|
|
3262
3354
|
return "display: none;";
|
|
3263
3355
|
});
|
|
3264
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
3356
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color-", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
|
|
3265
3357
|
var colorPrimary = _ref.colorPrimary;
|
|
3266
3358
|
return colorPrimary;
|
|
3267
3359
|
}, function (_ref2) {
|
|
@@ -3270,9 +3362,9 @@ var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateOb
|
|
|
3270
3362
|
}, devices.mobileAndTablet);
|
|
3271
3363
|
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
3272
3364
|
|
|
3273
|
-
var _templateObject$
|
|
3274
|
-
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3275
|
-
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$
|
|
3365
|
+
var _templateObject$r, _templateObject2$b, _templateObject3$6, _templateObject4$3;
|
|
3366
|
+
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
3367
|
+
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 6px;\n border-bottom: 1px solid transparent;\n height: 24px;\n line-height: 24px;\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n text-transform: uppercase;\n cursor: pointer;\n\n ", "\n"])), function (_ref) {
|
|
3276
3368
|
var active = _ref.active,
|
|
3277
3369
|
activeColor = _ref.activeColor;
|
|
3278
3370
|
|
|
@@ -3284,7 +3376,7 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject
|
|
|
3284
3376
|
});
|
|
3285
3377
|
var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled(ControlledDropdownHeaderContainer).attrs({
|
|
3286
3378
|
as: 'a'
|
|
3287
|
-
})(_templateObject3$
|
|
3379
|
+
})(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
3288
3380
|
var IconWrapper$1 = /*#__PURE__*/styled.span(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n"])));
|
|
3289
3381
|
|
|
3290
3382
|
var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
@@ -3531,23 +3623,23 @@ var Tabs = function Tabs(_ref) {
|
|
|
3531
3623
|
}, "MENU"))));
|
|
3532
3624
|
};
|
|
3533
3625
|
|
|
3534
|
-
var _templateObject$
|
|
3535
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3536
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
3537
|
-
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$
|
|
3626
|
+
var _templateObject$s, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$1, _templateObject6$1;
|
|
3627
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100px;\n background-color: var(--base-color-white);\n\n @media ", " {\n column-gap: 12px;\n height: 80px;\n }\n"])), devices.mobile);
|
|
3628
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
3629
|
+
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--base-color-navigation);\n }\n }\n"])));
|
|
3538
3630
|
var InputContainer = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
3539
3631
|
var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
3540
3632
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
3541
3633
|
|
|
3542
|
-
var _templateObject$
|
|
3543
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
3634
|
+
var _templateObject$t, _templateObject2$d;
|
|
3635
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
3544
3636
|
var iconName = _ref.iconName;
|
|
3545
3637
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3546
3638
|
}, function (_ref2) {
|
|
3547
3639
|
var color = _ref2.color;
|
|
3548
3640
|
return color;
|
|
3549
3641
|
});
|
|
3550
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
3642
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
3551
3643
|
|
|
3552
3644
|
var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
|
|
3553
3645
|
|
|
@@ -3744,7 +3836,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
3744
3836
|
urlLink: logoLink,
|
|
3745
3837
|
desktopImage: desktopLogoUrl,
|
|
3746
3838
|
devicesImage: devicesLogoUrl
|
|
3747
|
-
}))), /*#__PURE__*/React__default.createElement(
|
|
3839
|
+
}))), /*#__PURE__*/React__default.createElement(NavContainerGridItem, {
|
|
3748
3840
|
columnStartDesktop: 3,
|
|
3749
3841
|
columnSpanDesktop: 12,
|
|
3750
3842
|
columnStartDevice: 4,
|
|
@@ -3785,18 +3877,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
3785
3877
|
})))));
|
|
3786
3878
|
};
|
|
3787
3879
|
|
|
3788
|
-
var _templateObject$
|
|
3789
|
-
var FooterSection = /*#__PURE__*/styled.section(_templateObject$
|
|
3790
|
-
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3791
|
-
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$
|
|
3880
|
+
var _templateObject$u, _templateObject2$e, _templateObject3$8, _templateObject4$5, _templateObject5$2, _templateObject6$2;
|
|
3881
|
+
var FooterSection = /*#__PURE__*/styled.section(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
3882
|
+
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n --footer-vertical-spacing-sm\n )\n min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2'\n '.'\n 'row3'\n '.'\n 'row4';\n"])));
|
|
3883
|
+
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row1;\n justify-self: center;\n\n @media ", " {\n & {\n justify-self: start;\n grid-area: row2;\n }\n }\n"])), devices.mobile);
|
|
3792
3884
|
var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
3793
3885
|
var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
|
|
3794
3886
|
var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
|
|
3795
3887
|
|
|
3796
|
-
var _templateObject$
|
|
3797
|
-
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$
|
|
3798
|
-
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$
|
|
3799
|
-
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
3888
|
+
var _templateObject$v, _templateObject2$f, _templateObject3$9;
|
|
3889
|
+
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 auto;\n padding: 0;\n list-style: none;\n display: flex;\n gap: var(--footer-items-gap);\n\n @media ", " {\n & {\n margin: 0;\n flex-direction: column;\n }\n }\n"])), devices.mobile);
|
|
3890
|
+
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n text-align: center;\n\n @media ", " {\n & {\n text-align: left;\n }\n }\n"])), devices.mobile);
|
|
3891
|
+
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
|
|
3800
3892
|
|
|
3801
3893
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
3802
3894
|
var _ref$items = _ref.items,
|
|
@@ -3812,10 +3904,10 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
3812
3904
|
}));
|
|
3813
3905
|
};
|
|
3814
3906
|
|
|
3815
|
-
var _templateObject$
|
|
3816
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3817
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$
|
|
3818
|
-
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
3907
|
+
var _templateObject$w, _templateObject2$g, _templateObject3$a, _templateObject4$6, _templateObject5$3, _templateObject6$3, _templateObject7$1, _templateObject8$1;
|
|
3908
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n grid-template-rows: 100px;\n gap: 0;\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content min-content;\n gap: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
3909
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
|
|
3910
|
+
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
3819
3911
|
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
3820
3912
|
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
3821
3913
|
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
@@ -3886,10 +3978,10 @@ var Footer = function Footer(_ref) {
|
|
|
3886
3978
|
}, additionalInfo)))));
|
|
3887
3979
|
};
|
|
3888
3980
|
|
|
3889
|
-
var _templateObject$
|
|
3890
|
-
var AnchorTapbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3891
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
3892
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject3$
|
|
3981
|
+
var _templateObject$x, _templateObject2$h, _templateObject3$b, _templateObject4$7, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
3982
|
+
var AnchorTapbarWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), zIndexes.anchor);
|
|
3983
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
3984
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__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);
|
|
3893
3985
|
var ButtonsDesktopGridItem = /*#__PURE__*/styled(GridItem)(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
3894
3986
|
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
3895
3987
|
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
@@ -3905,7 +3997,7 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject7$2 || (_templateObject7$2
|
|
|
3905
3997
|
});
|
|
3906
3998
|
var ArrowsContainer = /*#__PURE__*/styled.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"])));
|
|
3907
3999
|
var ArrowWrapper = /*#__PURE__*/styled.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"])));
|
|
3908
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
4000
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
3909
4001
|
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref4) {
|
|
3910
4002
|
var theme = _ref4.theme;
|
|
3911
4003
|
return theme.colors.primaryButtonReverseBg;
|
|
@@ -4110,8 +4202,8 @@ var CarouselType;
|
|
|
4110
4202
|
CarouselType["LargeCard"] = "LargeCard";
|
|
4111
4203
|
})(CarouselType || (CarouselType = {}));
|
|
4112
4204
|
|
|
4113
|
-
var _templateObject$
|
|
4114
|
-
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4205
|
+
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8;
|
|
4206
|
+
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) {
|
|
4115
4207
|
var type = _ref.type,
|
|
4116
4208
|
imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
4117
4209
|
|
|
@@ -4143,8 +4235,8 @@ var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObj
|
|
|
4143
4235
|
return "\n &&& {\n .swiper-slide > div{\n height: calc(" + imagesHeightDevice + "px + var(--line-height-body-2) + 12px);\n }\n }";
|
|
4144
4236
|
}
|
|
4145
4237
|
});
|
|
4146
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4147
|
-
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4238
|
+
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);
|
|
4239
|
+
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"])));
|
|
4148
4240
|
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.mobileAndTablet);
|
|
4149
4241
|
|
|
4150
4242
|
var Carousel = function Carousel(_ref) {
|
|
@@ -4173,7 +4265,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
4173
4265
|
if (window.matchMedia(devices.mobile).matches) {
|
|
4174
4266
|
setSlidesOffsetBefore(20); // Mobile margin grid
|
|
4175
4267
|
} else if (window.matchMedia(devices.tablet).matches) {
|
|
4176
|
-
setSlidesOffsetBefore(
|
|
4268
|
+
setSlidesOffsetBefore(32); // Tablet margin grid
|
|
4177
4269
|
} else {
|
|
4178
4270
|
setSlidesOffsetBefore(Math.floor(window.innerWidth * 0.1) - 3); // 10% of width
|
|
4179
4271
|
}
|
|
@@ -4252,77 +4344,74 @@ var Carousel = function Carousel(_ref) {
|
|
|
4252
4344
|
})))));
|
|
4253
4345
|
};
|
|
4254
4346
|
|
|
4255
|
-
var _templateObject$
|
|
4256
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
4257
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4347
|
+
var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2;
|
|
4348
|
+
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);
|
|
4349
|
+
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) {
|
|
4258
4350
|
var theme = _ref.theme;
|
|
4259
|
-
return theme.fonts.mobile.sizes.altHeaders[
|
|
4351
|
+
return theme.fonts.mobile.sizes.altHeaders[5];
|
|
4260
4352
|
}, function (_ref2) {
|
|
4261
4353
|
var theme = _ref2.theme;
|
|
4262
|
-
return theme.fonts.mobile.weights.altHeaders[
|
|
4354
|
+
return theme.fonts.mobile.weights.altHeaders[5];
|
|
4263
4355
|
}, function (_ref3) {
|
|
4264
4356
|
var theme = _ref3.theme;
|
|
4265
|
-
return theme.fonts.mobile.letterSpacing.altHeaders[
|
|
4266
|
-
}, function (_ref4) {
|
|
4267
|
-
var theme = _ref4.theme;
|
|
4268
|
-
return theme.fonts.mobile.lineHeights.altHeaders[4];
|
|
4357
|
+
return theme.fonts.mobile.letterSpacing.altHeaders[5];
|
|
4269
4358
|
}, devices.mobile);
|
|
4270
|
-
var InfoWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4271
|
-
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: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.mobile);
|
|
4272
|
-
var InfoTitleWrapper = /*#__PURE__*/styled.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 (
|
|
4273
|
-
var theme =
|
|
4359
|
+
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);
|
|
4360
|
+
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);
|
|
4361
|
+
var InfoTitleWrapper = /*#__PURE__*/styled.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) {
|
|
4362
|
+
var theme = _ref4.theme;
|
|
4274
4363
|
return theme.fonts.mobile.sizes.headers[3];
|
|
4364
|
+
}, function (_ref5) {
|
|
4365
|
+
var theme = _ref5.theme;
|
|
4366
|
+
return theme.fonts.mobile.weights.headers[3];
|
|
4275
4367
|
}, function (_ref6) {
|
|
4276
4368
|
var theme = _ref6.theme;
|
|
4277
|
-
return theme.fonts.mobile.
|
|
4369
|
+
return theme.fonts.mobile.letterSpacing.headers[3];
|
|
4278
4370
|
}, function (_ref7) {
|
|
4279
4371
|
var theme = _ref7.theme;
|
|
4280
|
-
return theme.fonts.mobile.
|
|
4372
|
+
return theme.fonts.mobile.lineHeights.headers[3];
|
|
4281
4373
|
}, function (_ref8) {
|
|
4282
4374
|
var theme = _ref8.theme;
|
|
4283
|
-
return theme.fonts.mobile.
|
|
4375
|
+
return theme.fonts.mobile.sizes.subtitles[2];
|
|
4284
4376
|
}, function (_ref9) {
|
|
4285
4377
|
var theme = _ref9.theme;
|
|
4286
|
-
return theme.fonts.mobile.
|
|
4378
|
+
return theme.fonts.mobile.weights.subtitles[2];
|
|
4287
4379
|
}, function (_ref10) {
|
|
4288
4380
|
var theme = _ref10.theme;
|
|
4289
|
-
return theme.fonts.mobile.
|
|
4381
|
+
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4290
4382
|
}, function (_ref11) {
|
|
4291
4383
|
var theme = _ref11.theme;
|
|
4292
|
-
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4293
|
-
}, function (_ref12) {
|
|
4294
|
-
var theme = _ref12.theme;
|
|
4295
4384
|
return theme.fonts.mobile.lineHeights.subtitles[2];
|
|
4296
4385
|
});
|
|
4297
|
-
var InfoTextWrapper = /*#__PURE__*/styled.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 (
|
|
4298
|
-
var theme =
|
|
4386
|
+
var InfoTextWrapper = /*#__PURE__*/styled.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) {
|
|
4387
|
+
var theme = _ref12.theme;
|
|
4299
4388
|
return theme.fonts.mobile.sizes.subtitles[2];
|
|
4389
|
+
}, function (_ref13) {
|
|
4390
|
+
var theme = _ref13.theme;
|
|
4391
|
+
return theme.fonts.mobile.weights.subtitles[2];
|
|
4300
4392
|
}, function (_ref14) {
|
|
4301
4393
|
var theme = _ref14.theme;
|
|
4302
|
-
return theme.fonts.mobile.
|
|
4394
|
+
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4303
4395
|
}, function (_ref15) {
|
|
4304
4396
|
var theme = _ref15.theme;
|
|
4305
|
-
return theme.fonts.mobile.
|
|
4397
|
+
return theme.fonts.mobile.lineHeights.subtitles[2];
|
|
4306
4398
|
}, function (_ref16) {
|
|
4307
4399
|
var theme = _ref16.theme;
|
|
4308
|
-
return theme.fonts.mobile.
|
|
4400
|
+
return theme.fonts.mobile.sizes.body[1];
|
|
4309
4401
|
}, function (_ref17) {
|
|
4310
4402
|
var theme = _ref17.theme;
|
|
4311
|
-
return theme.fonts.mobile.
|
|
4403
|
+
return theme.fonts.mobile.weights.body[1];
|
|
4312
4404
|
}, function (_ref18) {
|
|
4313
4405
|
var theme = _ref18.theme;
|
|
4314
|
-
return theme.fonts.mobile.
|
|
4406
|
+
return theme.fonts.mobile.letterSpacing.body[1];
|
|
4315
4407
|
}, function (_ref19) {
|
|
4316
4408
|
var theme = _ref19.theme;
|
|
4317
|
-
return theme.fonts.mobile.letterSpacing.body[1];
|
|
4318
|
-
}, function (_ref20) {
|
|
4319
|
-
var theme = _ref20.theme;
|
|
4320
4409
|
return theme.fonts.mobile.lineHeights.body[1];
|
|
4321
4410
|
}, devices.mobile);
|
|
4322
|
-
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n"])));
|
|
4323
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.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:
|
|
4324
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled.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.
|
|
4325
|
-
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$
|
|
4411
|
+
var InfoLinkWrapper = /*#__PURE__*/styled.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);
|
|
4412
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.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);
|
|
4413
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled.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);
|
|
4414
|
+
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.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);
|
|
4326
4415
|
|
|
4327
4416
|
var _excluded$8 = ["text"];
|
|
4328
4417
|
|
|
@@ -4383,6 +4472,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4383
4472
|
}
|
|
4384
4473
|
};
|
|
4385
4474
|
|
|
4475
|
+
var hasMultipleImages = images.length > 1;
|
|
4386
4476
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid, {
|
|
4387
4477
|
onClick: function onClick(e) {
|
|
4388
4478
|
return e.stopPropagation();
|
|
@@ -4393,7 +4483,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4393
4483
|
level: 4
|
|
4394
4484
|
}, carouselTitle), /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4395
4485
|
level: 5
|
|
4396
|
-
}, carouselTitle)), /*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4486
|
+
}, carouselTitle)), hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4397
4487
|
onClickNext: onNext,
|
|
4398
4488
|
onClickPrev: onPrev
|
|
4399
4489
|
})), /*#__PURE__*/React__default.createElement(InfoWrapper, {
|
|
@@ -4410,14 +4500,14 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4410
4500
|
level: 1
|
|
4411
4501
|
}, description)), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
|
|
4412
4502
|
"data-testid": "carousel-wrapper"
|
|
4413
|
-
}, /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4503
|
+
}, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4414
4504
|
"data-testid": "rotator-buttons"
|
|
4415
4505
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4416
4506
|
onClickNext: onNext,
|
|
4417
4507
|
onClickPrev: onPrev
|
|
4418
4508
|
})), /*#__PURE__*/React__default.createElement(Swiper, {
|
|
4419
4509
|
slidesPerView: "auto",
|
|
4420
|
-
loop:
|
|
4510
|
+
loop: hasMultipleImages,
|
|
4421
4511
|
loopedSlides: images.length,
|
|
4422
4512
|
onSwiper: onSwiper
|
|
4423
4513
|
}, images.map(function (image) {
|
|
@@ -4481,10 +4571,10 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4481
4571
|
})));
|
|
4482
4572
|
};
|
|
4483
4573
|
|
|
4484
|
-
var _templateObject$
|
|
4485
|
-
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4486
|
-
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
4487
|
-
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
4574
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6;
|
|
4575
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4576
|
+
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
4577
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
|
|
4488
4578
|
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && a {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 28px 20px;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
4489
4579
|
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
|
|
4490
4580
|
|
|
@@ -4528,8 +4618,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
4528
4618
|
}, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
4529
4619
|
};
|
|
4530
4620
|
|
|
4531
|
-
var _templateObject$
|
|
4532
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4621
|
+
var _templateObject$B;
|
|
4622
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4533
4623
|
|
|
4534
4624
|
var Accordions = function Accordions(_ref) {
|
|
4535
4625
|
var _ref$items = _ref.items,
|
|
@@ -4548,13 +4638,13 @@ var Accordions = function Accordions(_ref) {
|
|
|
4548
4638
|
}));
|
|
4549
4639
|
};
|
|
4550
4640
|
|
|
4551
|
-
var _templateObject$
|
|
4641
|
+
var _templateObject$C, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3;
|
|
4552
4642
|
var LENGTH_LARGE_TEXT = 28;
|
|
4553
4643
|
var LENGTH_SMALL_TEXT = 19;
|
|
4554
4644
|
var LENGTH_TEXT_TABLET = 10;
|
|
4555
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4556
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
4557
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
4645
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
4646
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: var(--base-color-primary);\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), zIndexes.contentOverlay);
|
|
4647
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
4558
4648
|
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref) {
|
|
4559
4649
|
var fullWidth = _ref.fullWidth;
|
|
4560
4650
|
return fullWidth ? '0' : '20px';
|
|
@@ -4589,13 +4679,13 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templat
|
|
|
4589
4679
|
return '';
|
|
4590
4680
|
});
|
|
4591
4681
|
|
|
4592
|
-
var _templateObject$
|
|
4593
|
-
var ProgressView = /*#__PURE__*/styled.div(_templateObject$
|
|
4594
|
-
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$
|
|
4682
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g;
|
|
4683
|
+
var ProgressView = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 10px;\n width: 100%;\n display: flex;\n flex-direction: row;\n"])));
|
|
4684
|
+
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-progress);\n flex: ", ";\n"])), function (_ref) {
|
|
4595
4685
|
var progress = _ref.progress;
|
|
4596
4686
|
return progress;
|
|
4597
4687
|
});
|
|
4598
|
-
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$
|
|
4688
|
+
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n opacity: 0.5;\n flex: ", ";\n"])), function (_ref2) {
|
|
4599
4689
|
var progress = _ref2.progress;
|
|
4600
4690
|
return progress;
|
|
4601
4691
|
});
|
|
@@ -4721,9 +4811,9 @@ var Card = function Card(_ref) {
|
|
|
4721
4811
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
4722
4812
|
};
|
|
4723
4813
|
|
|
4724
|
-
var _templateObject$
|
|
4725
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
4726
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
4814
|
+
var _templateObject$E, _templateObject2$n;
|
|
4815
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n {\n grid-row-gap: var(--cards-spacing-stack);\n }\n }\n"])), devices.mobile);
|
|
4816
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 1 / span 14;\n }\n }\n"])), devices.mobile);
|
|
4727
4817
|
|
|
4728
4818
|
var Cards = function Cards(_ref) {
|
|
4729
4819
|
var cards = _ref.cards,
|
|
@@ -4760,16 +4850,16 @@ var Cards = function Cards(_ref) {
|
|
|
4760
4850
|
}));
|
|
4761
4851
|
};
|
|
4762
4852
|
|
|
4763
|
-
var _templateObject$
|
|
4764
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
4853
|
+
var _templateObject$F, _templateObject2$o, _templateObject3$h, _templateObject4$c, _templateObject5$8;
|
|
4854
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
4765
4855
|
var imageToLeft = _ref.imageToLeft;
|
|
4766
4856
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
4767
4857
|
}, devices.mobile);
|
|
4768
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4858
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
4769
4859
|
var imageToLeft = _ref2.imageToLeft;
|
|
4770
4860
|
return imageToLeft ? 'left' : 'right';
|
|
4771
4861
|
}, devices.mobile);
|
|
4772
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4862
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
4773
4863
|
var imageToLeft = _ref3.imageToLeft;
|
|
4774
4864
|
return imageToLeft ? 'right' : 'left';
|
|
4775
4865
|
}, devices.mobile);
|
|
@@ -4805,15 +4895,15 @@ var Editorial = function Editorial(_ref) {
|
|
|
4805
4895
|
})))));
|
|
4806
4896
|
};
|
|
4807
4897
|
|
|
4808
|
-
var _templateObject$
|
|
4809
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4898
|
+
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$9, _templateObject6$7, _templateObject7$5;
|
|
4899
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
4810
4900
|
var theme = _ref.theme;
|
|
4811
4901
|
return theme.colors.primary;
|
|
4812
4902
|
}, devices.mobile);
|
|
4813
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4814
|
-
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
4903
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
4904
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4815
4905
|
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), devices.mobile);
|
|
4816
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n
|
|
4906
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
4817
4907
|
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4818
4908
|
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
4819
4909
|
|
|
@@ -4841,7 +4931,9 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
4841
4931
|
level: 2
|
|
4842
4932
|
}, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
|
|
4843
4933
|
"data-testid": "page-heading-text"
|
|
4844
|
-
},
|
|
4934
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4935
|
+
level: 6
|
|
4936
|
+
}, truncatedText)) : null, sponsor ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
|
|
4845
4937
|
"data-testid": "page-heading-sponsor"
|
|
4846
4938
|
}, /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
|
|
4847
4939
|
"data-testid": "page-heading-link"
|
|
@@ -4884,8 +4976,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4884
4976
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
4885
4977
|
};
|
|
4886
4978
|
|
|
4887
|
-
var _templateObject$
|
|
4888
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4979
|
+
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6;
|
|
4980
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__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) {
|
|
4889
4981
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
4890
4982
|
return bgUrlDesktop;
|
|
4891
4983
|
}, zIndexes.content, devices.mobile, function (_ref2) {
|
|
@@ -4893,8 +4985,8 @@ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObjec
|
|
|
4893
4985
|
bgUrlDevice = _ref2.bgUrlDevice;
|
|
4894
4986
|
return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
|
|
4895
4987
|
});
|
|
4896
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4897
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4988
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$q || (_templateObject2$q = /*#__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);
|
|
4989
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__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);
|
|
4898
4990
|
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
4899
4991
|
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-5);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4900
4992
|
var ButtonWrapper$2 = /*#__PURE__*/styled.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);
|
|
@@ -4960,9 +5052,9 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
4960
5052
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
|
|
4961
5053
|
};
|
|
4962
5054
|
|
|
4963
|
-
var _templateObject$
|
|
4964
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4965
|
-
var NameWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5055
|
+
var _templateObject$I, _templateObject2$r;
|
|
5056
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-people-listing-role);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
5057
|
+
var NameWrapper = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-people-listing-name);\n font-size: var(--font-size-individual-listing-name);\n font-weight: var(--font-weight-listing-name);\n line-height: var(--line-height-individual-listing-name);\n letter-spacing: var(--letter-spacing-body-1);\n overflow-wrap: break-word;\n\n & a {\n color: var(--base-color-black);\n\n :hover {\n color: var(--base-color-primary);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
4966
5058
|
|
|
4967
5059
|
var IndividualListing = function IndividualListing(_ref) {
|
|
4968
5060
|
var role = _ref.role,
|
|
@@ -4979,8 +5071,8 @@ var IndividualListing = function IndividualListing(_ref) {
|
|
|
4979
5071
|
}, name) : name));
|
|
4980
5072
|
};
|
|
4981
5073
|
|
|
4982
|
-
var _templateObject$
|
|
4983
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
5074
|
+
var _templateObject$J;
|
|
5075
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
|
|
4984
5076
|
|
|
4985
5077
|
var PeopleListing = function PeopleListing(_ref) {
|
|
4986
5078
|
var people = _ref.people;
|
|
@@ -5000,32 +5092,41 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5000
5092
|
}));
|
|
5001
5093
|
};
|
|
5002
5094
|
|
|
5003
|
-
var _templateObject$
|
|
5095
|
+
var _templateObject$K, _templateObject2$s, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$7;
|
|
5004
5096
|
var LENGTH_TEXT = 28;
|
|
5005
5097
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5006
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
5098
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
5007
5099
|
var imageToLeft = _ref.imageToLeft;
|
|
5008
5100
|
return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
|
|
5009
5101
|
}, devices.tablet, function (_ref2) {
|
|
5010
5102
|
var imageToLeft = _ref2.imageToLeft;
|
|
5011
5103
|
return imageToLeft ? "'left left left left left left left . right right right right right .'" : "'. left left left left left . right right right right right right right'";
|
|
5012
5104
|
}, devices.mobile);
|
|
5013
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5105
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref3) {
|
|
5014
5106
|
var imageToLeft = _ref3.imageToLeft;
|
|
5015
5107
|
return imageToLeft ? 'left' : 'right';
|
|
5016
5108
|
}, devices.mobile);
|
|
5017
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
5109
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref4) {
|
|
5018
5110
|
var imageToLeft = _ref4.imageToLeft;
|
|
5019
5111
|
return imageToLeft ? 'right' : 'left';
|
|
5020
5112
|
}, devices.mobile);
|
|
5021
5113
|
var PromoWithTitleContainer = /*#__PURE__*/styled.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);
|
|
5022
5114
|
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
5023
|
-
var PromoWithTitleText = /*#__PURE__*/styled.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"])))
|
|
5024
|
-
var
|
|
5025
|
-
|
|
5026
|
-
|
|
5027
|
-
|
|
5028
|
-
|
|
5115
|
+
var PromoWithTitleText = /*#__PURE__*/styled.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) {
|
|
5116
|
+
var theme = _ref5.theme;
|
|
5117
|
+
return theme.colors.black;
|
|
5118
|
+
}, function (_ref6) {
|
|
5119
|
+
var theme = _ref6.theme;
|
|
5120
|
+
return theme.colors.darkgrey;
|
|
5121
|
+
}, function (_ref7) {
|
|
5122
|
+
var theme = _ref7.theme;
|
|
5123
|
+
return theme.colors.primary;
|
|
5124
|
+
});
|
|
5125
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.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) {
|
|
5126
|
+
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
5127
|
+
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
5128
|
+
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
5129
|
+
tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
|
|
5029
5130
|
var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
|
|
5030
5131
|
|
|
5031
5132
|
if (isLinksLayoutColumn) {
|
|
@@ -5033,11 +5134,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
|
|
|
5033
5134
|
}
|
|
5034
5135
|
|
|
5035
5136
|
return '';
|
|
5036
|
-
}, devices.mobile, devices.tablet, function (
|
|
5037
|
-
var
|
|
5038
|
-
primaryButtonTextLength =
|
|
5039
|
-
|
|
5040
|
-
tertiaryButtonTextLength =
|
|
5137
|
+
}, devices.mobile, devices.tablet, function (_ref9) {
|
|
5138
|
+
var _ref9$primaryButtonTe = _ref9.primaryButtonTextLength,
|
|
5139
|
+
primaryButtonTextLength = _ref9$primaryButtonTe === void 0 ? 0 : _ref9$primaryButtonTe,
|
|
5140
|
+
_ref9$tertiaryButtonT = _ref9.tertiaryButtonTextLength,
|
|
5141
|
+
tertiaryButtonTextLength = _ref9$tertiaryButtonT === void 0 ? 0 : _ref9$tertiaryButtonT;
|
|
5041
5142
|
var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
|
|
5042
5143
|
|
|
5043
5144
|
if (isLinksLayoutColumnTablet) {
|
|
@@ -5108,8 +5209,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
5108
5209
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
5109
5210
|
};
|
|
5110
5211
|
|
|
5111
|
-
var _templateObject$
|
|
5112
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5212
|
+
var _templateObject$L;
|
|
5213
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
5113
5214
|
|
|
5114
5215
|
var SectionTitle = function SectionTitle(_ref) {
|
|
5115
5216
|
var title = _ref.title,
|
|
@@ -5135,8 +5236,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
5135
5236
|
}, description))));
|
|
5136
5237
|
};
|
|
5137
5238
|
|
|
5138
|
-
var _templateObject$
|
|
5139
|
-
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5239
|
+
var _templateObject$M;
|
|
5240
|
+
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin-left: 20px;\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 20px;\n }\n\n & li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n"])));
|
|
5140
5241
|
|
|
5141
5242
|
var TextOnly = function TextOnly(_ref) {
|
|
5142
5243
|
var _ref$text = _ref.text,
|
|
@@ -5161,21 +5262,57 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
5161
5262
|
})));
|
|
5162
5263
|
};
|
|
5163
5264
|
|
|
5164
|
-
var _templateObject$
|
|
5165
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
5166
|
-
var
|
|
5265
|
+
var _templateObject$N, _templateObject2$t;
|
|
5266
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__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) {
|
|
5267
|
+
var _ref$aspectRatio = _ref.aspectRatio,
|
|
5268
|
+
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
5269
|
+
return aspectRatio;
|
|
5270
|
+
}, function (_ref2) {
|
|
5271
|
+
var _ref2$aspectRatio = _ref2.aspectRatio,
|
|
5272
|
+
aspectRatio = _ref2$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref2$aspectRatio,
|
|
5273
|
+
height = _ref2.height;
|
|
5274
|
+
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
5275
|
+
});
|
|
5276
|
+
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__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"])));
|
|
5167
5277
|
|
|
5168
5278
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
5169
5279
|
var caption = _ref.caption,
|
|
5170
5280
|
children = _ref.children,
|
|
5171
5281
|
aspectRatio = _ref.aspectRatio;
|
|
5172
|
-
|
|
5282
|
+
var wrapperRef = useRef(null);
|
|
5283
|
+
|
|
5284
|
+
var _useState = useState(0),
|
|
5285
|
+
height = _useState[0],
|
|
5286
|
+
setHeight = _useState[1];
|
|
5287
|
+
|
|
5288
|
+
useEffect(function () {
|
|
5289
|
+
var setWrapperHeight = function setWrapperHeight() {
|
|
5290
|
+
var _wrapperRef$current;
|
|
5291
|
+
|
|
5292
|
+
return setHeight((wrapperRef == null ? void 0 : (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
|
|
5293
|
+
};
|
|
5294
|
+
|
|
5295
|
+
window.addEventListener('resize', setWrapperHeight);
|
|
5296
|
+
|
|
5297
|
+
if (wrapperRef) {
|
|
5298
|
+
setWrapperHeight();
|
|
5299
|
+
}
|
|
5300
|
+
|
|
5301
|
+
return function () {
|
|
5302
|
+
return window.removeEventListener('resize', setWrapperHeight);
|
|
5303
|
+
};
|
|
5304
|
+
}, [wrapperRef]);
|
|
5305
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
5306
|
+
aspectRatio: aspectRatio,
|
|
5307
|
+
ref: wrapperRef,
|
|
5308
|
+
height: height
|
|
5309
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
5173
5310
|
aspectRatio: aspectRatio
|
|
5174
5311
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
5175
5312
|
};
|
|
5176
5313
|
|
|
5177
|
-
var _templateObject$
|
|
5178
|
-
var GlobalStyles = /*#__PURE__*/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) {
|
|
5314
|
+
var _templateObject$O;
|
|
5315
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$O || (_templateObject$O = /*#__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) {
|
|
5179
5316
|
var theme = _ref.theme;
|
|
5180
5317
|
return theme.colors.primary;
|
|
5181
5318
|
}, function (_ref2) {
|
|
@@ -6051,7 +6188,13 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$N || (_templat
|
|
|
6051
6188
|
}, function (_ref292) {
|
|
6052
6189
|
var theme = _ref292.theme;
|
|
6053
6190
|
return theme.grid.tablet.margin;
|
|
6191
|
+
}, function (_ref293) {
|
|
6192
|
+
var theme = _ref293.theme;
|
|
6193
|
+
return theme.spacing[10];
|
|
6194
|
+
}, function (_ref294) {
|
|
6195
|
+
var theme = _ref294.theme;
|
|
6196
|
+
return theme.spacing[6];
|
|
6054
6197
|
}, devices.desktop, devices.largeDesktop);
|
|
6055
6198
|
|
|
6056
|
-
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, TypeTags, devices };
|
|
6199
|
+
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TypeTags, devices };
|
|
6057
6200
|
//# sourceMappingURL=chord.esm.js.map
|