@royaloperahouse/chord 0.5.8 → 0.6.0
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 +18 -0
- package/README.md +2 -2
- package/dist/chord.cjs.development.js +481 -332
- 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 +482 -334
- 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 +3 -3
- package/dist/components/molecules/ImageWithCaption/ImageWithCaption.style.d.ts +2 -1
- package/dist/components/organisms/AnchorTapBar/AnchorTapBar.style.d.ts +0 -6
- package/dist/components/organisms/Navigation/Navigation.style.d.ts +1 -0
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.d.ts +4 -0
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +8 -0
- package/dist/components/organisms/TitleWithCTA/index.d.ts +2 -0
- package/dist/components/organisms/index.d.ts +2 -1
- 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/navigation.d.ts +16 -10
- 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,14 +3978,11 @@ var Footer = function Footer(_ref) {
|
|
|
3886
3978
|
}, additionalInfo)))));
|
|
3887
3979
|
};
|
|
3888
3980
|
|
|
3889
|
-
var _templateObject$
|
|
3890
|
-
var AnchorTapbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3891
|
-
var
|
|
3892
|
-
var
|
|
3893
|
-
var
|
|
3894
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
3895
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
3896
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: 32px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref) {
|
|
3981
|
+
var _templateObject$x, _templateObject2$h, _templateObject3$b, _templateObject4$7, _templateObject5$4, _templateObject6$4;
|
|
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 TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
3984
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
3985
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: 32px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref) {
|
|
3897
3986
|
var tabsOverflow = _ref.tabsOverflow;
|
|
3898
3987
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
3899
3988
|
}, function (_ref2) {
|
|
@@ -3903,31 +3992,13 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject7$2 || (_templateObject7$2
|
|
|
3903
3992
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
3904
3993
|
return tabsOverflow ? 'calc(100% - 50px)' : '100%';
|
|
3905
3994
|
});
|
|
3906
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(
|
|
3907
|
-
var ArrowWrapper = /*#__PURE__*/styled.div(
|
|
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);
|
|
3909
|
-
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
|
-
var theme = _ref4.theme;
|
|
3911
|
-
return theme.colors.primaryButtonReverseBg;
|
|
3912
|
-
}, function (_ref5) {
|
|
3913
|
-
var theme = _ref5.theme;
|
|
3914
|
-
return theme.colors.primaryButtonReverseBg;
|
|
3915
|
-
}, function (_ref6) {
|
|
3916
|
-
var theme = _ref6.theme;
|
|
3917
|
-
return theme.colors.primaryButtonReverse;
|
|
3918
|
-
}, function (_ref7) {
|
|
3919
|
-
var theme = _ref7.theme;
|
|
3920
|
-
return theme.colors.primaryButtonReverse;
|
|
3921
|
-
});
|
|
3995
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__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"])));
|
|
3996
|
+
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__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"])));
|
|
3922
3997
|
|
|
3923
|
-
var _excluded$7 = ["text"]
|
|
3924
|
-
_excluded2 = ["text"],
|
|
3925
|
-
_excluded3 = ["id", "text"];
|
|
3998
|
+
var _excluded$7 = ["id", "text"];
|
|
3926
3999
|
|
|
3927
4000
|
var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
3928
4001
|
var tabs = _ref.tabs,
|
|
3929
|
-
title = _ref.title,
|
|
3930
|
-
links = _ref.links,
|
|
3931
4002
|
onTabClick = _ref.onTabClick,
|
|
3932
4003
|
activeTab = _ref.activeTab;
|
|
3933
4004
|
var tabListRef = useRef(null);
|
|
@@ -3948,8 +4019,6 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
3948
4019
|
canScrollToRight = _useState4[0],
|
|
3949
4020
|
setCanScrollToRight = _useState4[1];
|
|
3950
4021
|
|
|
3951
|
-
var hasTitleOrLinks = title || links;
|
|
3952
|
-
|
|
3953
4022
|
var isSelectedItem = function isSelectedItem(id) {
|
|
3954
4023
|
return id === selectedItem;
|
|
3955
4024
|
};
|
|
@@ -3971,7 +4040,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
3971
4040
|
}, [tabListRef]);
|
|
3972
4041
|
useEffect(function () {
|
|
3973
4042
|
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
3974
|
-
var elementGap =
|
|
4043
|
+
var elementGap = 100;
|
|
3975
4044
|
var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
|
|
3976
4045
|
var targetSectionElement = document.getElementById(item.id);
|
|
3977
4046
|
if (!targetSectionElement) return false;
|
|
@@ -4008,18 +4077,10 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4008
4077
|
return function () {
|
|
4009
4078
|
return document.removeEventListener('scroll', scrollTriggerCheck);
|
|
4010
4079
|
};
|
|
4011
|
-
}, [tabs, selectedItem,
|
|
4080
|
+
}, [tabs, selectedItem, tabListRef]);
|
|
4012
4081
|
var tabsColumnStart = tabsOverflow ? !canScrollToLeft ? 2 : 1 : 3;
|
|
4013
4082
|
var tabsColumnSpan = tabsOverflow ? !canScrollToLeft ? 14 : 15 : 13;
|
|
4014
4083
|
|
|
4015
|
-
var _ref3 = (links == null ? void 0 : links[0]) || {},
|
|
4016
|
-
primaryButtonText = _ref3.text,
|
|
4017
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
|
|
4018
|
-
|
|
4019
|
-
var _ref4 = (links == null ? void 0 : links[1]) || {},
|
|
4020
|
-
secondaryButtonText = _ref4.text,
|
|
4021
|
-
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref4, _excluded2);
|
|
4022
|
-
|
|
4023
4084
|
var scrollToRight = function scrollToRight() {
|
|
4024
4085
|
if (tabListRef.current) {
|
|
4025
4086
|
var scroll = tabListRef.current.scrollLeft;
|
|
@@ -4037,34 +4098,19 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4037
4098
|
};
|
|
4038
4099
|
|
|
4039
4100
|
var onTabsScroll = function onTabsScroll() {
|
|
4040
|
-
var
|
|
4041
|
-
|
|
4042
|
-
scrollLeft =
|
|
4043
|
-
|
|
4044
|
-
clientWidth =
|
|
4045
|
-
|
|
4046
|
-
scrollWidth =
|
|
4101
|
+
var _ref3 = (tabListRef == null ? void 0 : tabListRef.current) || {},
|
|
4102
|
+
_ref3$scrollLeft = _ref3.scrollLeft,
|
|
4103
|
+
scrollLeft = _ref3$scrollLeft === void 0 ? 0 : _ref3$scrollLeft,
|
|
4104
|
+
_ref3$clientWidth = _ref3.clientWidth,
|
|
4105
|
+
clientWidth = _ref3$clientWidth === void 0 ? 0 : _ref3$clientWidth,
|
|
4106
|
+
_ref3$scrollWidth = _ref3.scrollWidth,
|
|
4107
|
+
scrollWidth = _ref3$scrollWidth === void 0 ? 0 : _ref3$scrollWidth;
|
|
4047
4108
|
|
|
4048
4109
|
setCanScrollToLeft(scrollLeft > 0);
|
|
4049
4110
|
setCanScrollToRight(scrollLeft + clientWidth < scrollWidth);
|
|
4050
4111
|
};
|
|
4051
4112
|
|
|
4052
|
-
return /*#__PURE__*/React__default.createElement(AnchorTapbarWrapper, null,
|
|
4053
|
-
columnStartDesktop: 2,
|
|
4054
|
-
columnSpanDesktop: 9,
|
|
4055
|
-
columnStartDevice: 2,
|
|
4056
|
-
columnSpanDevice: 12
|
|
4057
|
-
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4058
|
-
"data-testid": "anchor-title"
|
|
4059
|
-
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4060
|
-
level: 5
|
|
4061
|
-
}, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
|
|
4062
|
-
columnStartDesktop: 12,
|
|
4063
|
-
columnSpanDesktop: 5,
|
|
4064
|
-
columnStartDevice: 2,
|
|
4065
|
-
columnSpanDevice: 12,
|
|
4066
|
-
"data-testid": "anchor-ctas"
|
|
4067
|
-
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : null)) : null, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
4113
|
+
return /*#__PURE__*/React__default.createElement(AnchorTapbarWrapper, null, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
4068
4114
|
columnStartDesktop: tabsColumnStart,
|
|
4069
4115
|
columnSpanDesktop: tabsColumnSpan,
|
|
4070
4116
|
columnStartDevice: 2,
|
|
@@ -4075,10 +4121,10 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4075
4121
|
ref: tabListRef,
|
|
4076
4122
|
tabsOverflow: tabsOverflow,
|
|
4077
4123
|
onScroll: onTabsScroll
|
|
4078
|
-
}, tabs.map(function (
|
|
4079
|
-
var id =
|
|
4080
|
-
text =
|
|
4081
|
-
rest = _objectWithoutPropertiesLoose(
|
|
4124
|
+
}, tabs.map(function (_ref4) {
|
|
4125
|
+
var id = _ref4.id,
|
|
4126
|
+
text = _ref4.text,
|
|
4127
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$7);
|
|
4082
4128
|
|
|
4083
4129
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
4084
4130
|
key: id
|
|
@@ -4099,7 +4145,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4099
4145
|
onClick: scrollToRight
|
|
4100
4146
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4101
4147
|
iconName: "Arrow"
|
|
4102
|
-
})) : null) : null)))
|
|
4148
|
+
})) : null) : null))));
|
|
4103
4149
|
};
|
|
4104
4150
|
|
|
4105
4151
|
var CarouselType;
|
|
@@ -4110,8 +4156,8 @@ var CarouselType;
|
|
|
4110
4156
|
CarouselType["LargeCard"] = "LargeCard";
|
|
4111
4157
|
})(CarouselType || (CarouselType = {}));
|
|
4112
4158
|
|
|
4113
|
-
var _templateObject$
|
|
4114
|
-
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4159
|
+
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8;
|
|
4160
|
+
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
4161
|
var type = _ref.type,
|
|
4116
4162
|
imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
4117
4163
|
|
|
@@ -4143,8 +4189,8 @@ var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObj
|
|
|
4143
4189
|
return "\n &&& {\n .swiper-slide > div{\n height: calc(" + imagesHeightDevice + "px + var(--line-height-body-2) + 12px);\n }\n }";
|
|
4144
4190
|
}
|
|
4145
4191
|
});
|
|
4146
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4147
|
-
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4192
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
4193
|
+
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
4194
|
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
4149
4195
|
|
|
4150
4196
|
var Carousel = function Carousel(_ref) {
|
|
@@ -4173,7 +4219,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
4173
4219
|
if (window.matchMedia(devices.mobile).matches) {
|
|
4174
4220
|
setSlidesOffsetBefore(20); // Mobile margin grid
|
|
4175
4221
|
} else if (window.matchMedia(devices.tablet).matches) {
|
|
4176
|
-
setSlidesOffsetBefore(
|
|
4222
|
+
setSlidesOffsetBefore(32); // Tablet margin grid
|
|
4177
4223
|
} else {
|
|
4178
4224
|
setSlidesOffsetBefore(Math.floor(window.innerWidth * 0.1) - 3); // 10% of width
|
|
4179
4225
|
}
|
|
@@ -4252,77 +4298,74 @@ var Carousel = function Carousel(_ref) {
|
|
|
4252
4298
|
})))));
|
|
4253
4299
|
};
|
|
4254
4300
|
|
|
4255
|
-
var _templateObject$
|
|
4256
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
4257
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4301
|
+
var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1;
|
|
4302
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
4303
|
+
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
4304
|
var theme = _ref.theme;
|
|
4259
|
-
return theme.fonts.mobile.sizes.altHeaders[
|
|
4305
|
+
return theme.fonts.mobile.sizes.altHeaders[5];
|
|
4260
4306
|
}, function (_ref2) {
|
|
4261
4307
|
var theme = _ref2.theme;
|
|
4262
|
-
return theme.fonts.mobile.weights.altHeaders[
|
|
4308
|
+
return theme.fonts.mobile.weights.altHeaders[5];
|
|
4263
4309
|
}, function (_ref3) {
|
|
4264
4310
|
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];
|
|
4311
|
+
return theme.fonts.mobile.letterSpacing.altHeaders[5];
|
|
4269
4312
|
}, 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 =
|
|
4313
|
+
var InfoWrapper = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4314
|
+
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4315
|
+
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$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) {
|
|
4316
|
+
var theme = _ref4.theme;
|
|
4274
4317
|
return theme.fonts.mobile.sizes.headers[3];
|
|
4318
|
+
}, function (_ref5) {
|
|
4319
|
+
var theme = _ref5.theme;
|
|
4320
|
+
return theme.fonts.mobile.weights.headers[3];
|
|
4275
4321
|
}, function (_ref6) {
|
|
4276
4322
|
var theme = _ref6.theme;
|
|
4277
|
-
return theme.fonts.mobile.
|
|
4323
|
+
return theme.fonts.mobile.letterSpacing.headers[3];
|
|
4278
4324
|
}, function (_ref7) {
|
|
4279
4325
|
var theme = _ref7.theme;
|
|
4280
|
-
return theme.fonts.mobile.
|
|
4326
|
+
return theme.fonts.mobile.lineHeights.headers[3];
|
|
4281
4327
|
}, function (_ref8) {
|
|
4282
4328
|
var theme = _ref8.theme;
|
|
4283
|
-
return theme.fonts.mobile.
|
|
4329
|
+
return theme.fonts.mobile.sizes.subtitles[2];
|
|
4284
4330
|
}, function (_ref9) {
|
|
4285
4331
|
var theme = _ref9.theme;
|
|
4286
|
-
return theme.fonts.mobile.
|
|
4332
|
+
return theme.fonts.mobile.weights.subtitles[2];
|
|
4287
4333
|
}, function (_ref10) {
|
|
4288
4334
|
var theme = _ref10.theme;
|
|
4289
|
-
return theme.fonts.mobile.
|
|
4335
|
+
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4290
4336
|
}, function (_ref11) {
|
|
4291
4337
|
var theme = _ref11.theme;
|
|
4292
|
-
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4293
|
-
}, function (_ref12) {
|
|
4294
|
-
var theme = _ref12.theme;
|
|
4295
4338
|
return theme.fonts.mobile.lineHeights.subtitles[2];
|
|
4296
4339
|
});
|
|
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 =
|
|
4340
|
+
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) {
|
|
4341
|
+
var theme = _ref12.theme;
|
|
4299
4342
|
return theme.fonts.mobile.sizes.subtitles[2];
|
|
4343
|
+
}, function (_ref13) {
|
|
4344
|
+
var theme = _ref13.theme;
|
|
4345
|
+
return theme.fonts.mobile.weights.subtitles[2];
|
|
4300
4346
|
}, function (_ref14) {
|
|
4301
4347
|
var theme = _ref14.theme;
|
|
4302
|
-
return theme.fonts.mobile.
|
|
4348
|
+
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4303
4349
|
}, function (_ref15) {
|
|
4304
4350
|
var theme = _ref15.theme;
|
|
4305
|
-
return theme.fonts.mobile.
|
|
4351
|
+
return theme.fonts.mobile.lineHeights.subtitles[2];
|
|
4306
4352
|
}, function (_ref16) {
|
|
4307
4353
|
var theme = _ref16.theme;
|
|
4308
|
-
return theme.fonts.mobile.
|
|
4354
|
+
return theme.fonts.mobile.sizes.body[1];
|
|
4309
4355
|
}, function (_ref17) {
|
|
4310
4356
|
var theme = _ref17.theme;
|
|
4311
|
-
return theme.fonts.mobile.
|
|
4357
|
+
return theme.fonts.mobile.weights.body[1];
|
|
4312
4358
|
}, function (_ref18) {
|
|
4313
4359
|
var theme = _ref18.theme;
|
|
4314
|
-
return theme.fonts.mobile.
|
|
4360
|
+
return theme.fonts.mobile.letterSpacing.body[1];
|
|
4315
4361
|
}, function (_ref19) {
|
|
4316
4362
|
var theme = _ref19.theme;
|
|
4317
|
-
return theme.fonts.mobile.letterSpacing.body[1];
|
|
4318
|
-
}, function (_ref20) {
|
|
4319
|
-
var theme = _ref20.theme;
|
|
4320
4363
|
return theme.fonts.mobile.lineHeights.body[1];
|
|
4321
4364
|
}, devices.mobile);
|
|
4322
|
-
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
4323
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$
|
|
4324
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
4325
|
-
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
|
|
4365
|
+
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$2 || (_templateObject7$2 = /*#__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);
|
|
4366
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swiper-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4367
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
4368
|
+
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4326
4369
|
|
|
4327
4370
|
var _excluded$8 = ["text"];
|
|
4328
4371
|
|
|
@@ -4383,6 +4426,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4383
4426
|
}
|
|
4384
4427
|
};
|
|
4385
4428
|
|
|
4429
|
+
var hasMultipleImages = images.length > 1;
|
|
4386
4430
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid, {
|
|
4387
4431
|
onClick: function onClick(e) {
|
|
4388
4432
|
return e.stopPropagation();
|
|
@@ -4393,7 +4437,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4393
4437
|
level: 4
|
|
4394
4438
|
}, carouselTitle), /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4395
4439
|
level: 5
|
|
4396
|
-
}, carouselTitle)), /*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4440
|
+
}, carouselTitle)), hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4397
4441
|
onClickNext: onNext,
|
|
4398
4442
|
onClickPrev: onPrev
|
|
4399
4443
|
})), /*#__PURE__*/React__default.createElement(InfoWrapper, {
|
|
@@ -4410,14 +4454,14 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4410
4454
|
level: 1
|
|
4411
4455
|
}, description)), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
|
|
4412
4456
|
"data-testid": "carousel-wrapper"
|
|
4413
|
-
}, /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4457
|
+
}, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4414
4458
|
"data-testid": "rotator-buttons"
|
|
4415
4459
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4416
4460
|
onClickNext: onNext,
|
|
4417
4461
|
onClickPrev: onPrev
|
|
4418
4462
|
})), /*#__PURE__*/React__default.createElement(Swiper, {
|
|
4419
4463
|
slidesPerView: "auto",
|
|
4420
|
-
loop:
|
|
4464
|
+
loop: hasMultipleImages,
|
|
4421
4465
|
loopedSlides: images.length,
|
|
4422
4466
|
onSwiper: onSwiper
|
|
4423
4467
|
}, images.map(function (image) {
|
|
@@ -4481,12 +4525,72 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4481
4525
|
})));
|
|
4482
4526
|
};
|
|
4483
4527
|
|
|
4484
|
-
var _templateObject$
|
|
4485
|
-
var
|
|
4486
|
-
var
|
|
4487
|
-
|
|
4488
|
-
|
|
4489
|
-
var
|
|
4528
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6, _templateObject6$6;
|
|
4529
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
4530
|
+
var sticky = _ref.sticky;
|
|
4531
|
+
return sticky ? 'sticky' : 'initial';
|
|
4532
|
+
}, zIndexes.anchor);
|
|
4533
|
+
var CTAGridWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
4534
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__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);
|
|
4535
|
+
var ButtonsDesktopGridItem = /*#__PURE__*/styled(GridItem)(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4536
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
4537
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref2) {
|
|
4538
|
+
var theme = _ref2.theme;
|
|
4539
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4540
|
+
}, function (_ref3) {
|
|
4541
|
+
var theme = _ref3.theme;
|
|
4542
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4543
|
+
}, function (_ref4) {
|
|
4544
|
+
var theme = _ref4.theme;
|
|
4545
|
+
return theme.colors.primaryButtonReverse;
|
|
4546
|
+
}, function (_ref5) {
|
|
4547
|
+
var theme = _ref5.theme;
|
|
4548
|
+
return theme.colors.primaryButtonReverse;
|
|
4549
|
+
});
|
|
4550
|
+
|
|
4551
|
+
var _excluded$b = ["text"],
|
|
4552
|
+
_excluded2 = ["text"];
|
|
4553
|
+
|
|
4554
|
+
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
4555
|
+
var title = _ref.title,
|
|
4556
|
+
links = _ref.links,
|
|
4557
|
+
_ref$sticky = _ref.sticky,
|
|
4558
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky;
|
|
4559
|
+
|
|
4560
|
+
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
4561
|
+
primaryButtonText = _ref2.text,
|
|
4562
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
|
|
4563
|
+
|
|
4564
|
+
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
4565
|
+
secondaryButtonText = _ref3.text,
|
|
4566
|
+
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
4567
|
+
|
|
4568
|
+
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
4569
|
+
sticky: sticky
|
|
4570
|
+
}, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(GridItem, {
|
|
4571
|
+
columnStartDesktop: 2,
|
|
4572
|
+
columnSpanDesktop: 9,
|
|
4573
|
+
columnStartDevice: 2,
|
|
4574
|
+
columnSpanDevice: 12
|
|
4575
|
+
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4576
|
+
"data-testid": "anchor-title"
|
|
4577
|
+
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4578
|
+
level: 5
|
|
4579
|
+
}, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
|
|
4580
|
+
columnStartDesktop: 12,
|
|
4581
|
+
columnSpanDesktop: 5,
|
|
4582
|
+
columnStartDevice: 2,
|
|
4583
|
+
columnSpanDevice: 12,
|
|
4584
|
+
"data-testid": "anchor-ctas"
|
|
4585
|
+
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : null), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : null);
|
|
4586
|
+
};
|
|
4587
|
+
|
|
4588
|
+
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
|
|
4589
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4590
|
+
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
4591
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
|
|
4592
|
+
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && a {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 28px 20px;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
4593
|
+
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__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
4594
|
|
|
4491
4595
|
var Accordion = function Accordion(_ref) {
|
|
4492
4596
|
var _ref$title = _ref.title,
|
|
@@ -4528,8 +4632,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
4528
4632
|
}, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
4529
4633
|
};
|
|
4530
4634
|
|
|
4531
|
-
var _templateObject$
|
|
4532
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4635
|
+
var _templateObject$C;
|
|
4636
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4533
4637
|
|
|
4534
4638
|
var Accordions = function Accordions(_ref) {
|
|
4535
4639
|
var _ref$items = _ref.items,
|
|
@@ -4548,25 +4652,25 @@ var Accordions = function Accordions(_ref) {
|
|
|
4548
4652
|
}));
|
|
4549
4653
|
};
|
|
4550
4654
|
|
|
4551
|
-
var _templateObject$
|
|
4655
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$3, _templateObject8$3, _templateObject9$2;
|
|
4552
4656
|
var LENGTH_LARGE_TEXT = 28;
|
|
4553
4657
|
var LENGTH_SMALL_TEXT = 19;
|
|
4554
4658
|
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$
|
|
4558
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
4659
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
4660
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__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);
|
|
4661
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
4662
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__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
4663
|
var fullWidth = _ref.fullWidth;
|
|
4560
4664
|
return fullWidth ? '0' : '20px';
|
|
4561
4665
|
}, function (_ref2) {
|
|
4562
4666
|
var fullWidth = _ref2.fullWidth;
|
|
4563
4667
|
return fullWidth ? '0' : '20px';
|
|
4564
4668
|
});
|
|
4565
|
-
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$
|
|
4566
|
-
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$
|
|
4567
|
-
var TextContainer = /*#__PURE__*/styled.div(_templateObject7$
|
|
4568
|
-
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$
|
|
4569
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
4669
|
+
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4670
|
+
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
4671
|
+
var TextContainer = /*#__PURE__*/styled.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
4672
|
+
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4673
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n opacity: 0;\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref3) {
|
|
4570
4674
|
var size = _ref3.size,
|
|
4571
4675
|
primaryButtonTextLength = _ref3.primaryButtonTextLength,
|
|
4572
4676
|
tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
|
|
@@ -4589,13 +4693,13 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templat
|
|
|
4589
4693
|
return '';
|
|
4590
4694
|
});
|
|
4591
4695
|
|
|
4592
|
-
var _templateObject$
|
|
4593
|
-
var ProgressView = /*#__PURE__*/styled.div(_templateObject$
|
|
4594
|
-
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$
|
|
4696
|
+
var _templateObject$E, _templateObject2$n, _templateObject3$h;
|
|
4697
|
+
var ProgressView = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 10px;\n width: 100%;\n display: flex;\n flex-direction: row;\n"])));
|
|
4698
|
+
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-progress);\n flex: ", ";\n"])), function (_ref) {
|
|
4595
4699
|
var progress = _ref.progress;
|
|
4596
4700
|
return progress;
|
|
4597
4701
|
});
|
|
4598
|
-
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$
|
|
4702
|
+
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n opacity: 0.5;\n flex: ", ";\n"])), function (_ref2) {
|
|
4599
4703
|
var progress = _ref2.progress;
|
|
4600
4704
|
return progress;
|
|
4601
4705
|
});
|
|
@@ -4612,7 +4716,7 @@ var Progress = function Progress(_ref) {
|
|
|
4612
4716
|
}));
|
|
4613
4717
|
};
|
|
4614
4718
|
|
|
4615
|
-
var _excluded$
|
|
4719
|
+
var _excluded$c = ["text"],
|
|
4616
4720
|
_excluded2$1 = ["text"];
|
|
4617
4721
|
var LENGTH_LARGE_TEXT$1 = 28;
|
|
4618
4722
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
@@ -4651,7 +4755,7 @@ var Card = function Card(_ref) {
|
|
|
4651
4755
|
var _ref2 = primaryButton || {},
|
|
4652
4756
|
_ref2$text = _ref2.text,
|
|
4653
4757
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
4654
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
4758
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
|
|
4655
4759
|
|
|
4656
4760
|
var primaryButtonTextTruncate = size === 'small' ? truncate(primaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(primaryButtonText, LENGTH_LARGE_TEXT$1);
|
|
4657
4761
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -4721,9 +4825,9 @@ var Card = function Card(_ref) {
|
|
|
4721
4825
|
}, 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
4826
|
};
|
|
4723
4827
|
|
|
4724
|
-
var _templateObject$
|
|
4725
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
4726
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
4828
|
+
var _templateObject$F, _templateObject2$o;
|
|
4829
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$F || (_templateObject$F = /*#__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);
|
|
4830
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 1 / span 14;\n }\n }\n"])), devices.mobile);
|
|
4727
4831
|
|
|
4728
4832
|
var Cards = function Cards(_ref) {
|
|
4729
4833
|
var cards = _ref.cards,
|
|
@@ -4760,21 +4864,21 @@ var Cards = function Cards(_ref) {
|
|
|
4760
4864
|
}));
|
|
4761
4865
|
};
|
|
4762
4866
|
|
|
4763
|
-
var _templateObject$
|
|
4764
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
4867
|
+
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$9;
|
|
4868
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
4765
4869
|
var imageToLeft = _ref.imageToLeft;
|
|
4766
4870
|
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
4871
|
}, devices.mobile);
|
|
4768
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4872
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
4769
4873
|
var imageToLeft = _ref2.imageToLeft;
|
|
4770
4874
|
return imageToLeft ? 'left' : 'right';
|
|
4771
4875
|
}, devices.mobile);
|
|
4772
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4876
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__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
4877
|
var imageToLeft = _ref3.imageToLeft;
|
|
4774
4878
|
return imageToLeft ? 'right' : 'left';
|
|
4775
4879
|
}, devices.mobile);
|
|
4776
|
-
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$
|
|
4777
|
-
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$
|
|
4880
|
+
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4881
|
+
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$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"])));
|
|
4778
4882
|
|
|
4779
4883
|
var Editorial = function Editorial(_ref) {
|
|
4780
4884
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -4805,19 +4909,19 @@ var Editorial = function Editorial(_ref) {
|
|
|
4805
4909
|
})))));
|
|
4806
4910
|
};
|
|
4807
4911
|
|
|
4808
|
-
var _templateObject$
|
|
4809
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4912
|
+
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$4;
|
|
4913
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
4810
4914
|
var theme = _ref.theme;
|
|
4811
4915
|
return theme.colors.primary;
|
|
4812
4916
|
}, devices.mobile);
|
|
4813
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4814
|
-
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
4815
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
4816
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
4817
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
4818
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$
|
|
4917
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
4918
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4919
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), devices.mobile);
|
|
4920
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
4921
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4922
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$4 || (_templateObject7$4 = /*#__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
4923
|
|
|
4820
|
-
var _excluded$
|
|
4924
|
+
var _excluded$d = ["text"];
|
|
4821
4925
|
|
|
4822
4926
|
var PageHeading = function PageHeading(_ref) {
|
|
4823
4927
|
var title = _ref.title,
|
|
@@ -4829,7 +4933,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
4829
4933
|
|
|
4830
4934
|
var _ref2 = link || {},
|
|
4831
4935
|
linkText = _ref2.text,
|
|
4832
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
4936
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
4833
4937
|
|
|
4834
4938
|
var truncatedText = text == null ? void 0 : text.substring(0, 250);
|
|
4835
4939
|
var truncatedTitle = title.substring(0, 40);
|
|
@@ -4841,18 +4945,20 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
4841
4945
|
level: 2
|
|
4842
4946
|
}, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
|
|
4843
4947
|
"data-testid": "page-heading-text"
|
|
4844
|
-
},
|
|
4948
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4949
|
+
level: 6
|
|
4950
|
+
}, truncatedText)) : null, sponsor ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
|
|
4845
4951
|
"data-testid": "page-heading-sponsor"
|
|
4846
4952
|
}, /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
|
|
4847
4953
|
"data-testid": "page-heading-link"
|
|
4848
4954
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
|
|
4849
4955
|
};
|
|
4850
4956
|
|
|
4851
|
-
var _excluded$
|
|
4957
|
+
var _excluded$e = ["link"];
|
|
4852
4958
|
|
|
4853
4959
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
4854
4960
|
var link = _ref.link,
|
|
4855
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
4961
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
4856
4962
|
|
|
4857
4963
|
var coreLink = link && _extends({}, link, {
|
|
4858
4964
|
color: Colors.White,
|
|
@@ -4866,11 +4972,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
4866
4972
|
})));
|
|
4867
4973
|
};
|
|
4868
4974
|
|
|
4869
|
-
var _excluded$
|
|
4975
|
+
var _excluded$f = ["link"];
|
|
4870
4976
|
|
|
4871
4977
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
4872
4978
|
var link = _ref.link,
|
|
4873
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
4979
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
|
4874
4980
|
|
|
4875
4981
|
var cinemaLink = link && _extends({}, link, {
|
|
4876
4982
|
color: Colors.Black,
|
|
@@ -4884,8 +4990,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4884
4990
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
4885
4991
|
};
|
|
4886
4992
|
|
|
4887
|
-
var _templateObject$
|
|
4888
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4993
|
+
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$5;
|
|
4994
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n background-image: url('", "');\n background-repeat: no-repeat;\n background-size: cover;\n position: relative;\n display: flex;\n align-items: center;\n\n ::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--base-color-black);\n filter: opacity(40%);\n z-index: ", ";\n }\n\n @media ", " {\n & {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n background-image: url('", "');\n background-position: center;\n display: flex;\n align-items: start;\n }\n }\n"])), function (_ref) {
|
|
4889
4995
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
4890
4996
|
return bgUrlDesktop;
|
|
4891
4997
|
}, zIndexes.content, devices.mobile, function (_ref2) {
|
|
@@ -4893,14 +4999,14 @@ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObjec
|
|
|
4893
4999
|
bgUrlDevice = _ref2.bgUrlDevice;
|
|
4894
5000
|
return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
|
|
4895
5001
|
});
|
|
4896
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4897
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4898
|
-
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
4899
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
4900
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$
|
|
4901
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
5002
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . . logo logo logo logo . . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . . logo logo logo logo logo logo . . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. . . . . logo logo logo logo . . . . .'\n '. text text text text text text text text text text text text .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5003
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.contentOverlay, devices.mobileAndTablet);
|
|
5004
|
+
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5005
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-5);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5006
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
5007
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
4902
5008
|
|
|
4903
|
-
var _excluded$
|
|
5009
|
+
var _excluded$g = ["text"];
|
|
4904
5010
|
|
|
4905
5011
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
4906
5012
|
var children = _ref.children,
|
|
@@ -4915,7 +5021,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
4915
5021
|
|
|
4916
5022
|
var _ref2 = link || {},
|
|
4917
5023
|
linkText = _ref2.text,
|
|
4918
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
5024
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
|
|
4919
5025
|
|
|
4920
5026
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
4921
5027
|
bgUrlDesktop: bgUrlDesktop,
|
|
@@ -4942,11 +5048,11 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
4942
5048
|
}, "Scroll Down")) : null);
|
|
4943
5049
|
};
|
|
4944
5050
|
|
|
4945
|
-
var _excluded$
|
|
5051
|
+
var _excluded$h = ["link"];
|
|
4946
5052
|
|
|
4947
5053
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
4948
5054
|
var link = _ref.link,
|
|
4949
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
5055
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
4950
5056
|
|
|
4951
5057
|
var streamLink = link && _extends({}, link, {
|
|
4952
5058
|
color: Colors.Black,
|
|
@@ -4960,9 +5066,9 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
4960
5066
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
|
|
4961
5067
|
};
|
|
4962
5068
|
|
|
4963
|
-
var _templateObject$
|
|
4964
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4965
|
-
var NameWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5069
|
+
var _templateObject$J, _templateObject2$s;
|
|
5070
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__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"])));
|
|
5071
|
+
var NameWrapper = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__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
5072
|
|
|
4967
5073
|
var IndividualListing = function IndividualListing(_ref) {
|
|
4968
5074
|
var role = _ref.role,
|
|
@@ -4979,8 +5085,8 @@ var IndividualListing = function IndividualListing(_ref) {
|
|
|
4979
5085
|
}, name) : name));
|
|
4980
5086
|
};
|
|
4981
5087
|
|
|
4982
|
-
var _templateObject$
|
|
4983
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
5088
|
+
var _templateObject$K;
|
|
5089
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
|
|
4984
5090
|
|
|
4985
5091
|
var PeopleListing = function PeopleListing(_ref) {
|
|
4986
5092
|
var people = _ref.people;
|
|
@@ -5000,27 +5106,27 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5000
5106
|
}));
|
|
5001
5107
|
};
|
|
5002
5108
|
|
|
5003
|
-
var _templateObject$
|
|
5109
|
+
var _templateObject$L, _templateObject2$t, _templateObject3$l, _templateObject4$g, _templateObject5$c, _templateObject6$a, _templateObject7$6;
|
|
5004
5110
|
var LENGTH_TEXT = 28;
|
|
5005
5111
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5006
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
5112
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$L || (_templateObject$L = /*#__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
5113
|
var imageToLeft = _ref.imageToLeft;
|
|
5008
5114
|
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
5115
|
}, devices.tablet, function (_ref2) {
|
|
5010
5116
|
var imageToLeft = _ref2.imageToLeft;
|
|
5011
5117
|
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
5118
|
}, devices.mobile);
|
|
5013
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5119
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref3) {
|
|
5014
5120
|
var imageToLeft = _ref3.imageToLeft;
|
|
5015
5121
|
return imageToLeft ? 'left' : 'right';
|
|
5016
5122
|
}, devices.mobile);
|
|
5017
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
5123
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__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
5124
|
var imageToLeft = _ref4.imageToLeft;
|
|
5019
5125
|
return imageToLeft ? 'right' : 'left';
|
|
5020
5126
|
}, devices.mobile);
|
|
5021
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
5022
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$
|
|
5023
|
-
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$
|
|
5127
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 32px 0;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n & {\n margin: 0 0 24px 0;\n }\n }\n"])), devices.mobile);
|
|
5128
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$c || (_templateObject5$c = /*#__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"])));
|
|
5129
|
+
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
5024
5130
|
var theme = _ref5.theme;
|
|
5025
5131
|
return theme.colors.black;
|
|
5026
5132
|
}, function (_ref6) {
|
|
@@ -5030,7 +5136,7 @@ var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$9 || (_templat
|
|
|
5030
5136
|
var theme = _ref7.theme;
|
|
5031
5137
|
return theme.colors.primary;
|
|
5032
5138
|
});
|
|
5033
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$
|
|
5139
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__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) {
|
|
5034
5140
|
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
5035
5141
|
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
5036
5142
|
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
@@ -5056,7 +5162,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
|
|
|
5056
5162
|
return '';
|
|
5057
5163
|
});
|
|
5058
5164
|
|
|
5059
|
-
var _excluded$
|
|
5165
|
+
var _excluded$i = ["text"],
|
|
5060
5166
|
_excluded2$2 = ["text"];
|
|
5061
5167
|
var LENGTH_TEXT$1 = 28;
|
|
5062
5168
|
|
|
@@ -5083,7 +5189,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
5083
5189
|
var _ref2 = primaryButton || {},
|
|
5084
5190
|
_ref2$text = _ref2.text,
|
|
5085
5191
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
5086
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
5192
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
|
|
5087
5193
|
|
|
5088
5194
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$1);
|
|
5089
5195
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -5117,8 +5223,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
5117
5223
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
5118
5224
|
};
|
|
5119
5225
|
|
|
5120
|
-
var _templateObject$
|
|
5121
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5226
|
+
var _templateObject$M;
|
|
5227
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__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);
|
|
5122
5228
|
|
|
5123
5229
|
var SectionTitle = function SectionTitle(_ref) {
|
|
5124
5230
|
var title = _ref.title,
|
|
@@ -5144,8 +5250,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
5144
5250
|
}, description))));
|
|
5145
5251
|
};
|
|
5146
5252
|
|
|
5147
|
-
var _templateObject$
|
|
5148
|
-
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5253
|
+
var _templateObject$N;
|
|
5254
|
+
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__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"])));
|
|
5149
5255
|
|
|
5150
5256
|
var TextOnly = function TextOnly(_ref) {
|
|
5151
5257
|
var _ref$text = _ref.text,
|
|
@@ -5170,21 +5276,57 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
5170
5276
|
})));
|
|
5171
5277
|
};
|
|
5172
5278
|
|
|
5173
|
-
var _templateObject$
|
|
5174
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
5175
|
-
var
|
|
5279
|
+
var _templateObject$O, _templateObject2$u;
|
|
5280
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__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) {
|
|
5281
|
+
var _ref$aspectRatio = _ref.aspectRatio,
|
|
5282
|
+
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
5283
|
+
return aspectRatio;
|
|
5284
|
+
}, function (_ref2) {
|
|
5285
|
+
var _ref2$aspectRatio = _ref2.aspectRatio,
|
|
5286
|
+
aspectRatio = _ref2$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref2$aspectRatio,
|
|
5287
|
+
height = _ref2.height;
|
|
5288
|
+
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
5289
|
+
});
|
|
5290
|
+
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__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"])));
|
|
5176
5291
|
|
|
5177
5292
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
5178
5293
|
var caption = _ref.caption,
|
|
5179
5294
|
children = _ref.children,
|
|
5180
5295
|
aspectRatio = _ref.aspectRatio;
|
|
5181
|
-
|
|
5296
|
+
var wrapperRef = useRef(null);
|
|
5297
|
+
|
|
5298
|
+
var _useState = useState(0),
|
|
5299
|
+
height = _useState[0],
|
|
5300
|
+
setHeight = _useState[1];
|
|
5301
|
+
|
|
5302
|
+
useEffect(function () {
|
|
5303
|
+
var setWrapperHeight = function setWrapperHeight() {
|
|
5304
|
+
var _wrapperRef$current;
|
|
5305
|
+
|
|
5306
|
+
return setHeight((wrapperRef == null ? void 0 : (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
|
|
5307
|
+
};
|
|
5308
|
+
|
|
5309
|
+
window.addEventListener('resize', setWrapperHeight);
|
|
5310
|
+
|
|
5311
|
+
if (wrapperRef) {
|
|
5312
|
+
setWrapperHeight();
|
|
5313
|
+
}
|
|
5314
|
+
|
|
5315
|
+
return function () {
|
|
5316
|
+
return window.removeEventListener('resize', setWrapperHeight);
|
|
5317
|
+
};
|
|
5318
|
+
}, [wrapperRef]);
|
|
5319
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
5320
|
+
aspectRatio: aspectRatio,
|
|
5321
|
+
ref: wrapperRef,
|
|
5322
|
+
height: height
|
|
5323
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
5182
5324
|
aspectRatio: aspectRatio
|
|
5183
5325
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
5184
5326
|
};
|
|
5185
5327
|
|
|
5186
|
-
var _templateObject$
|
|
5187
|
-
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) {
|
|
5328
|
+
var _templateObject$P;
|
|
5329
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$P || (_templateObject$P = /*#__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) {
|
|
5188
5330
|
var theme = _ref.theme;
|
|
5189
5331
|
return theme.colors.primary;
|
|
5190
5332
|
}, function (_ref2) {
|
|
@@ -6060,7 +6202,13 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$N || (_templat
|
|
|
6060
6202
|
}, function (_ref292) {
|
|
6061
6203
|
var theme = _ref292.theme;
|
|
6062
6204
|
return theme.grid.tablet.margin;
|
|
6205
|
+
}, function (_ref293) {
|
|
6206
|
+
var theme = _ref293.theme;
|
|
6207
|
+
return theme.spacing[10];
|
|
6208
|
+
}, function (_ref294) {
|
|
6209
|
+
var theme = _ref294.theme;
|
|
6210
|
+
return theme.spacing[6];
|
|
6063
6211
|
}, devices.desktop, devices.largeDesktop);
|
|
6064
6212
|
|
|
6065
|
-
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 };
|
|
6213
|
+
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, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
|
|
6066
6214
|
//# sourceMappingURL=chord.esm.js.map
|