@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
|
@@ -469,7 +469,7 @@ var common = {
|
|
|
469
469
|
gap: '12px'
|
|
470
470
|
},
|
|
471
471
|
tablet: {
|
|
472
|
-
margin: '
|
|
472
|
+
margin: '32px',
|
|
473
473
|
outerMargin: '0',
|
|
474
474
|
gap: '20px'
|
|
475
475
|
},
|
|
@@ -2479,11 +2479,41 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
2479
2479
|
AspectRatio["16:9"] = "16 / 9";
|
|
2480
2480
|
})(exports.AspectRatio || (exports.AspectRatio = {}));
|
|
2481
2481
|
|
|
2482
|
+
var AspectRatioLegacy;
|
|
2483
|
+
|
|
2484
|
+
(function (AspectRatioLegacy) {
|
|
2485
|
+
AspectRatioLegacy["1 / 1"] = "100";
|
|
2486
|
+
AspectRatioLegacy["3 / 4"] = "133";
|
|
2487
|
+
AspectRatioLegacy["4 / 3"] = "75";
|
|
2488
|
+
AspectRatioLegacy["16 / 9"] = "56.25";
|
|
2489
|
+
})(AspectRatioLegacy || (AspectRatioLegacy = {}));
|
|
2490
|
+
|
|
2491
|
+
var AspectRatioWidth;
|
|
2492
|
+
|
|
2493
|
+
(function (AspectRatioWidth) {
|
|
2494
|
+
AspectRatioWidth["1 / 1"] = "1";
|
|
2495
|
+
AspectRatioWidth["3 / 4"] = "0.75";
|
|
2496
|
+
AspectRatioWidth["4 / 3"] = "1.33";
|
|
2497
|
+
AspectRatioWidth["16 / 9"] = "1.78";
|
|
2498
|
+
})(AspectRatioWidth || (AspectRatioWidth = {}));
|
|
2499
|
+
|
|
2482
2500
|
var _templateObject$d;
|
|
2483
|
-
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: ", ";\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n"])), function (_ref) {
|
|
2501
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n position: relative;\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
2484
2502
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2485
2503
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2486
2504
|
return aspectRatio;
|
|
2505
|
+
}, function (_ref2) {
|
|
2506
|
+
var _ref2$aspectRatio = _ref2.aspectRatio,
|
|
2507
|
+
aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio;
|
|
2508
|
+
return aspectRatio;
|
|
2509
|
+
}, function (_ref3) {
|
|
2510
|
+
var _ref3$aspectRatio = _ref3.aspectRatio,
|
|
2511
|
+
aspectRatio = _ref3$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref3$aspectRatio;
|
|
2512
|
+
return AspectRatioLegacy[aspectRatio];
|
|
2513
|
+
}, function (_ref4) {
|
|
2514
|
+
var _ref4$aspectRatio = _ref4.aspectRatio,
|
|
2515
|
+
aspectRatio = _ref4$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref4$aspectRatio;
|
|
2516
|
+
return aspectRatio;
|
|
2487
2517
|
});
|
|
2488
2518
|
|
|
2489
2519
|
var _templateObject$e, _templateObject2$2;
|
|
@@ -2641,91 +2671,7 @@ var TabLink = function TabLink(_ref) {
|
|
|
2641
2671
|
};
|
|
2642
2672
|
|
|
2643
2673
|
var _templateObject$g;
|
|
2644
|
-
var
|
|
2645
|
-
|
|
2646
|
-
var TypeTags = function TypeTags(_ref) {
|
|
2647
|
-
var list = _ref.list;
|
|
2648
|
-
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
2649
|
-
return /*#__PURE__*/React__default.createElement(Overline, {
|
|
2650
|
-
level: 1,
|
|
2651
|
-
tag: "li",
|
|
2652
|
-
key: t
|
|
2653
|
-
}, t);
|
|
2654
|
-
}));
|
|
2655
|
-
};
|
|
2656
|
-
|
|
2657
|
-
var _templateObject$h, _templateObject2$4, _templateObject3;
|
|
2658
|
-
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
2659
|
-
var IconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
2660
|
-
var theme = _ref.theme;
|
|
2661
|
-
return theme.colors.primary;
|
|
2662
|
-
}, devices.mobile);
|
|
2663
|
-
var IconUnavailableWrapper = /*#__PURE__*/styled__default.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobile);
|
|
2664
|
-
|
|
2665
|
-
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2666
|
-
var onClickPrev = _ref.onClickPrev,
|
|
2667
|
-
onClickNext = _ref.onClickNext,
|
|
2668
|
-
_ref$availablePrev = _ref.availablePrev,
|
|
2669
|
-
availablePrev = _ref$availablePrev === void 0 ? true : _ref$availablePrev,
|
|
2670
|
-
_ref$availableNext = _ref.availableNext,
|
|
2671
|
-
availableNext = _ref$availableNext === void 0 ? true : _ref$availableNext;
|
|
2672
|
-
|
|
2673
|
-
var onClickLeftHandler = function onClickLeftHandler() {
|
|
2674
|
-
if (onClickPrev) {
|
|
2675
|
-
onClickPrev();
|
|
2676
|
-
}
|
|
2677
|
-
};
|
|
2678
|
-
|
|
2679
|
-
var onPrevKeyDownHandler = function onPrevKeyDownHandler(e) {
|
|
2680
|
-
if (e.key === 'Enter') {
|
|
2681
|
-
onClickLeftHandler();
|
|
2682
|
-
}
|
|
2683
|
-
};
|
|
2684
|
-
|
|
2685
|
-
var onClickRightHandler = function onClickRightHandler() {
|
|
2686
|
-
if (onClickNext) {
|
|
2687
|
-
onClickNext();
|
|
2688
|
-
}
|
|
2689
|
-
};
|
|
2690
|
-
|
|
2691
|
-
var onNextKeyDownHandler = function onNextKeyDownHandler(e) {
|
|
2692
|
-
if (e.key === 'Enter') {
|
|
2693
|
-
onClickRightHandler();
|
|
2694
|
-
}
|
|
2695
|
-
};
|
|
2696
|
-
|
|
2697
|
-
var renderPrevIcon = function renderPrevIcon() {
|
|
2698
|
-
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2699
|
-
iconName: 'CarouselArrow',
|
|
2700
|
-
direction: "reverse"
|
|
2701
|
-
});
|
|
2702
|
-
};
|
|
2703
|
-
|
|
2704
|
-
var renderNextIcon = function renderNextIcon() {
|
|
2705
|
-
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2706
|
-
iconName: 'CarouselArrow'
|
|
2707
|
-
});
|
|
2708
|
-
};
|
|
2709
|
-
|
|
2710
|
-
return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2711
|
-
onClick: onClickLeftHandler,
|
|
2712
|
-
onKeyDown: onPrevKeyDownHandler,
|
|
2713
|
-
tabIndex: 0,
|
|
2714
|
-
"data-testid": "iconprev"
|
|
2715
|
-
}, renderPrevIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2716
|
-
"data-testid": "iconprevnoavailable"
|
|
2717
|
-
}, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2718
|
-
onClick: onClickRightHandler,
|
|
2719
|
-
onKeyDown: onNextKeyDownHandler,
|
|
2720
|
-
tabIndex: 0,
|
|
2721
|
-
"data-testid": "iconnext"
|
|
2722
|
-
}, renderNextIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2723
|
-
"data-testid": "iconnextnoavailable"
|
|
2724
|
-
}, renderNextIcon()));
|
|
2725
|
-
};
|
|
2726
|
-
|
|
2727
|
-
var _templateObject$i;
|
|
2728
|
-
var Wrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
2674
|
+
var Wrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
2729
2675
|
var typography = _ref.typography;
|
|
2730
2676
|
return typography;
|
|
2731
2677
|
}, function (_ref2) {
|
|
@@ -2831,25 +2777,169 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
2831
2777
|
}, children);
|
|
2832
2778
|
};
|
|
2833
2779
|
|
|
2780
|
+
var _templateObject$h, _templateObject2$4, _templateObject3;
|
|
2781
|
+
var TickboxLabel = /*#__PURE__*/styled__default.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) {
|
|
2782
|
+
var dark = _ref.dark;
|
|
2783
|
+
return dark ? 'white' : 'black';
|
|
2784
|
+
});
|
|
2785
|
+
var TickboxCheckmark = /*#__PURE__*/styled__default.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) {
|
|
2786
|
+
var dark = _ref2.dark;
|
|
2787
|
+
return dark ? 'white' : 'black';
|
|
2788
|
+
}, devices.mobile);
|
|
2789
|
+
var TickboxInput = /*#__PURE__*/styled__default.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) {
|
|
2790
|
+
var dark = _ref3.dark;
|
|
2791
|
+
return dark ? 'white' : 'black';
|
|
2792
|
+
}, function (_ref4) {
|
|
2793
|
+
var dark = _ref4.dark;
|
|
2794
|
+
return dark ? 'black' : 'white';
|
|
2795
|
+
});
|
|
2796
|
+
|
|
2797
|
+
(function (TickboxMode) {
|
|
2798
|
+
TickboxMode["Dark"] = "dark";
|
|
2799
|
+
TickboxMode["Light"] = "light";
|
|
2800
|
+
})(exports.TickboxMode || (exports.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 = React.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 === exports.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__default.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__default.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__default.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__default.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
|
+
|
|
2834
2923
|
var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
|
|
2835
2924
|
var zIndexes = {};
|
|
2836
2925
|
zLevels.forEach(function (name, index) {
|
|
2837
2926
|
zIndexes[name] = index;
|
|
2838
2927
|
});
|
|
2839
2928
|
|
|
2840
|
-
var _templateObject$
|
|
2841
|
-
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2842
|
-
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
2843
|
-
var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
2929
|
+
var _templateObject$k, _templateObject2$6, _templateObject3$2, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
2930
|
+
var FullScreenContainer = /*#__PURE__*/styled__default.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__default(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__default.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);
|
|
2844
2933
|
var GridItemSearch = /*#__PURE__*/styled__default(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);
|
|
2845
2934
|
var NavigationGridMobile = /*#__PURE__*/styled__default(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);
|
|
2846
2935
|
var LogoContainer = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 140px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &&& .logoImg {\n height: 96px;\n width: 66px;\n }\n\n @media ", " {\n height: 80px;\n\n &&& .logoImg {\n width: 100%;\n height: 64px;\n }\n }\n"])), devices.mobile);
|
|
2847
2936
|
var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n\n @media ", " {\n flex-direction: row;\n height: 80px;\n justify-content: flex-end;\n }\n"])), devices.mobileAndTablet);
|
|
2848
2937
|
var NavContainer = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 40px;\n margin-top: auto;\n\n @media ", " {\n background-color: var(--base-color-white);\n height: auto;\n margin-top: 0px;\n }\n"])), devices.mobileAndTablet);
|
|
2849
|
-
var
|
|
2938
|
+
var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
2939
|
+
var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
2850
2940
|
|
|
2851
|
-
var _templateObject$
|
|
2852
|
-
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2941
|
+
var _templateObject$l;
|
|
2942
|
+
var LogoWrapper = /*#__PURE__*/styled__default.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"])));
|
|
2853
2943
|
|
|
2854
2944
|
var Logo = function Logo(_ref) {
|
|
2855
2945
|
var _ref$id = _ref.id,
|
|
@@ -2878,11 +2968,11 @@ var Logo = function Logo(_ref) {
|
|
|
2878
2968
|
}))));
|
|
2879
2969
|
};
|
|
2880
2970
|
|
|
2881
|
-
var _templateObject$
|
|
2882
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2971
|
+
var _templateObject$m;
|
|
2972
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.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);
|
|
2883
2973
|
|
|
2884
|
-
var _templateObject$
|
|
2885
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2974
|
+
var _templateObject$n, _templateObject2$7, _templateObject3$3, _templateObject4$1;
|
|
2975
|
+
var BasketContainer = /*#__PURE__*/styled__default.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) {
|
|
2886
2976
|
var selected = _ref.selected,
|
|
2887
2977
|
colorPrimary = _ref.colorPrimary;
|
|
2888
2978
|
|
|
@@ -2901,8 +2991,8 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$m || (_te
|
|
|
2901
2991
|
var colorPrimary = _ref4.colorPrimary;
|
|
2902
2992
|
return colorPrimary;
|
|
2903
2993
|
});
|
|
2904
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
2905
|
-
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
2994
|
+
var SvgContainer = /*#__PURE__*/styled__default.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__default.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"])));
|
|
2906
2996
|
var BasketText = /*#__PURE__*/styled__default.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);
|
|
2907
2997
|
|
|
2908
2998
|
var Basket$1 = function Basket(_ref) {
|
|
@@ -2945,8 +3035,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
2945
3035
|
}, text) : ''));
|
|
2946
3036
|
};
|
|
2947
3037
|
|
|
2948
|
-
var _templateObject$
|
|
2949
|
-
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3038
|
+
var _templateObject$o, _templateObject2$8;
|
|
3039
|
+
var SearchContainer = /*#__PURE__*/styled__default.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) {
|
|
2950
3040
|
var selected = _ref.selected,
|
|
2951
3041
|
colorPrimary = _ref.colorPrimary;
|
|
2952
3042
|
|
|
@@ -2962,7 +3052,7 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$n || (_te
|
|
|
2962
3052
|
var colorPrimary = _ref3.colorPrimary;
|
|
2963
3053
|
return colorPrimary;
|
|
2964
3054
|
});
|
|
2965
|
-
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3055
|
+
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
2966
3056
|
|
|
2967
3057
|
var Search$1 = function Search(_ref) {
|
|
2968
3058
|
var _ref$selected = _ref.selected,
|
|
@@ -2989,13 +3079,13 @@ var Search$1 = function Search(_ref) {
|
|
|
2989
3079
|
})));
|
|
2990
3080
|
};
|
|
2991
3081
|
|
|
2992
|
-
var _templateObject$
|
|
2993
|
-
var TabContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2994
|
-
var OptionItem = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
3082
|
+
var _templateObject$p, _templateObject2$9, _templateObject3$4;
|
|
3083
|
+
var TabContainer = /*#__PURE__*/styled__default.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
3084
|
+
var OptionItem = /*#__PURE__*/styled__default.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) {
|
|
2995
3085
|
var colorPrimary = _ref.colorPrimary;
|
|
2996
3086
|
return colorPrimary;
|
|
2997
3087
|
});
|
|
2998
|
-
var OptionsContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3088
|
+
var OptionsContainer = /*#__PURE__*/styled__default.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) {
|
|
2999
3089
|
var colorPrimary = _ref2.colorPrimary;
|
|
3000
3090
|
return colorPrimary;
|
|
3001
3091
|
}, zIndexes.menu, function (props) {
|
|
@@ -3254,16 +3344,16 @@ var NavTop = function NavTop(_ref) {
|
|
|
3254
3344
|
}));
|
|
3255
3345
|
};
|
|
3256
3346
|
|
|
3257
|
-
var _templateObject$
|
|
3258
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3259
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3347
|
+
var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
|
|
3348
|
+
var TabsContainer = /*#__PURE__*/styled__default.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__default.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) {
|
|
3260
3350
|
if (props.showMenu) {
|
|
3261
3351
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
3262
3352
|
}
|
|
3263
3353
|
|
|
3264
3354
|
return "display: none;";
|
|
3265
3355
|
});
|
|
3266
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3356
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.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) {
|
|
3267
3357
|
var colorPrimary = _ref.colorPrimary;
|
|
3268
3358
|
return colorPrimary;
|
|
3269
3359
|
}, function (_ref2) {
|
|
@@ -3272,9 +3362,9 @@ var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$4 || (_t
|
|
|
3272
3362
|
}, devices.mobileAndTablet);
|
|
3273
3363
|
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
3274
3364
|
|
|
3275
|
-
var _templateObject$
|
|
3276
|
-
var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3277
|
-
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3365
|
+
var _templateObject$r, _templateObject2$b, _templateObject3$6, _templateObject4$3;
|
|
3366
|
+
var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
3367
|
+
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.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) {
|
|
3278
3368
|
var active = _ref.active,
|
|
3279
3369
|
activeColor = _ref.activeColor;
|
|
3280
3370
|
|
|
@@ -3286,7 +3376,7 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templ
|
|
|
3286
3376
|
});
|
|
3287
3377
|
var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled__default(ControlledDropdownHeaderContainer).attrs({
|
|
3288
3378
|
as: 'a'
|
|
3289
|
-
})(_templateObject3$
|
|
3379
|
+
})(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
3290
3380
|
var IconWrapper$1 = /*#__PURE__*/styled__default.span(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n"])));
|
|
3291
3381
|
|
|
3292
3382
|
var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
@@ -3533,23 +3623,23 @@ var Tabs = function Tabs(_ref) {
|
|
|
3533
3623
|
}, "MENU"))));
|
|
3534
3624
|
};
|
|
3535
3625
|
|
|
3536
|
-
var _templateObject$
|
|
3537
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3538
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3539
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3626
|
+
var _templateObject$s, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$1, _templateObject6$1;
|
|
3627
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.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__default.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__default.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"])));
|
|
3540
3630
|
var InputContainer = /*#__PURE__*/styled__default.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);
|
|
3541
3631
|
var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
3542
3632
|
var SearchArrowContainer = /*#__PURE__*/styled__default.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);
|
|
3543
3633
|
|
|
3544
|
-
var _templateObject$
|
|
3545
|
-
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3634
|
+
var _templateObject$t, _templateObject2$d;
|
|
3635
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.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) {
|
|
3546
3636
|
var iconName = _ref.iconName;
|
|
3547
3637
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3548
3638
|
}, function (_ref2) {
|
|
3549
3639
|
var color = _ref2.color;
|
|
3550
3640
|
return color;
|
|
3551
3641
|
});
|
|
3552
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3642
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled__default.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"])));
|
|
3553
3643
|
|
|
3554
3644
|
var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
|
|
3555
3645
|
|
|
@@ -3746,7 +3836,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
3746
3836
|
urlLink: logoLink,
|
|
3747
3837
|
desktopImage: desktopLogoUrl,
|
|
3748
3838
|
devicesImage: devicesLogoUrl
|
|
3749
|
-
}))), /*#__PURE__*/React__default.createElement(
|
|
3839
|
+
}))), /*#__PURE__*/React__default.createElement(NavContainerGridItem, {
|
|
3750
3840
|
columnStartDesktop: 3,
|
|
3751
3841
|
columnSpanDesktop: 12,
|
|
3752
3842
|
columnStartDevice: 4,
|
|
@@ -3787,18 +3877,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
3787
3877
|
})))));
|
|
3788
3878
|
};
|
|
3789
3879
|
|
|
3790
|
-
var _templateObject$
|
|
3791
|
-
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$
|
|
3792
|
-
var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3793
|
-
var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3880
|
+
var _templateObject$u, _templateObject2$e, _templateObject3$8, _templateObject4$5, _templateObject5$2, _templateObject6$2;
|
|
3881
|
+
var FooterSection = /*#__PURE__*/styled__default.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__default.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__default.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);
|
|
3794
3884
|
var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
3795
3885
|
var ArtsLogoRow = /*#__PURE__*/styled__default.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);
|
|
3796
3886
|
var AdditionalInfo = /*#__PURE__*/styled__default.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);
|
|
3797
3887
|
|
|
3798
|
-
var _templateObject$
|
|
3799
|
-
var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
3800
|
-
var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$
|
|
3801
|
-
var PolicyLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
3888
|
+
var _templateObject$v, _templateObject2$f, _templateObject3$9;
|
|
3889
|
+
var PolicyLinksList = /*#__PURE__*/styled__default.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__default.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__default.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"])));
|
|
3802
3892
|
|
|
3803
3893
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
3804
3894
|
var _ref$items = _ref.items,
|
|
@@ -3814,10 +3904,10 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
3814
3904
|
}));
|
|
3815
3905
|
};
|
|
3816
3906
|
|
|
3817
|
-
var _templateObject$
|
|
3818
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3819
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3820
|
-
var SignUpWrapper = /*#__PURE__*/styled__default.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__default.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__default.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__default.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);
|
|
3821
3911
|
var SignUpText = /*#__PURE__*/styled__default.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);
|
|
3822
3912
|
var ContactWrapper = /*#__PURE__*/styled__default.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);
|
|
3823
3913
|
var MediaLinksWrapper = /*#__PURE__*/styled__default.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);
|
|
@@ -3888,14 +3978,11 @@ var Footer = function Footer(_ref) {
|
|
|
3888
3978
|
}, additionalInfo)))));
|
|
3889
3979
|
};
|
|
3890
3980
|
|
|
3891
|
-
var _templateObject$
|
|
3892
|
-
var AnchorTapbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3893
|
-
var
|
|
3894
|
-
var
|
|
3895
|
-
var
|
|
3896
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
3897
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
3898
|
-
var TabsList = /*#__PURE__*/styled__default.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__default.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__default(Grid)(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
3984
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
3985
|
+
var TabsList = /*#__PURE__*/styled__default.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) {
|
|
3899
3986
|
var tabsOverflow = _ref.tabsOverflow;
|
|
3900
3987
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
3901
3988
|
}, function (_ref2) {
|
|
@@ -3905,31 +3992,13 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject7$2 || (_templateO
|
|
|
3905
3992
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
3906
3993
|
return tabsOverflow ? 'calc(100% - 50px)' : '100%';
|
|
3907
3994
|
});
|
|
3908
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(
|
|
3909
|
-
var ArrowWrapper = /*#__PURE__*/styled__default.div(
|
|
3910
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
3911
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref4) {
|
|
3912
|
-
var theme = _ref4.theme;
|
|
3913
|
-
return theme.colors.primaryButtonReverseBg;
|
|
3914
|
-
}, function (_ref5) {
|
|
3915
|
-
var theme = _ref5.theme;
|
|
3916
|
-
return theme.colors.primaryButtonReverseBg;
|
|
3917
|
-
}, function (_ref6) {
|
|
3918
|
-
var theme = _ref6.theme;
|
|
3919
|
-
return theme.colors.primaryButtonReverse;
|
|
3920
|
-
}, function (_ref7) {
|
|
3921
|
-
var theme = _ref7.theme;
|
|
3922
|
-
return theme.colors.primaryButtonReverse;
|
|
3923
|
-
});
|
|
3995
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.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__default.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"])));
|
|
3924
3997
|
|
|
3925
|
-
var _excluded$7 = ["text"]
|
|
3926
|
-
_excluded2 = ["text"],
|
|
3927
|
-
_excluded3 = ["id", "text"];
|
|
3998
|
+
var _excluded$7 = ["id", "text"];
|
|
3928
3999
|
|
|
3929
4000
|
var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
3930
4001
|
var tabs = _ref.tabs,
|
|
3931
|
-
title = _ref.title,
|
|
3932
|
-
links = _ref.links,
|
|
3933
4002
|
onTabClick = _ref.onTabClick,
|
|
3934
4003
|
activeTab = _ref.activeTab;
|
|
3935
4004
|
var tabListRef = React.useRef(null);
|
|
@@ -3950,8 +4019,6 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
3950
4019
|
canScrollToRight = _useState4[0],
|
|
3951
4020
|
setCanScrollToRight = _useState4[1];
|
|
3952
4021
|
|
|
3953
|
-
var hasTitleOrLinks = title || links;
|
|
3954
|
-
|
|
3955
4022
|
var isSelectedItem = function isSelectedItem(id) {
|
|
3956
4023
|
return id === selectedItem;
|
|
3957
4024
|
};
|
|
@@ -3973,7 +4040,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
3973
4040
|
}, [tabListRef]);
|
|
3974
4041
|
React.useEffect(function () {
|
|
3975
4042
|
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
3976
|
-
var elementGap =
|
|
4043
|
+
var elementGap = 100;
|
|
3977
4044
|
var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
|
|
3978
4045
|
var targetSectionElement = document.getElementById(item.id);
|
|
3979
4046
|
if (!targetSectionElement) return false;
|
|
@@ -4010,18 +4077,10 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4010
4077
|
return function () {
|
|
4011
4078
|
return document.removeEventListener('scroll', scrollTriggerCheck);
|
|
4012
4079
|
};
|
|
4013
|
-
}, [tabs, selectedItem,
|
|
4080
|
+
}, [tabs, selectedItem, tabListRef]);
|
|
4014
4081
|
var tabsColumnStart = tabsOverflow ? !canScrollToLeft ? 2 : 1 : 3;
|
|
4015
4082
|
var tabsColumnSpan = tabsOverflow ? !canScrollToLeft ? 14 : 15 : 13;
|
|
4016
4083
|
|
|
4017
|
-
var _ref3 = (links == null ? void 0 : links[0]) || {},
|
|
4018
|
-
primaryButtonText = _ref3.text,
|
|
4019
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
|
|
4020
|
-
|
|
4021
|
-
var _ref4 = (links == null ? void 0 : links[1]) || {},
|
|
4022
|
-
secondaryButtonText = _ref4.text,
|
|
4023
|
-
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref4, _excluded2);
|
|
4024
|
-
|
|
4025
4084
|
var scrollToRight = function scrollToRight() {
|
|
4026
4085
|
if (tabListRef.current) {
|
|
4027
4086
|
var scroll = tabListRef.current.scrollLeft;
|
|
@@ -4039,34 +4098,19 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4039
4098
|
};
|
|
4040
4099
|
|
|
4041
4100
|
var onTabsScroll = function onTabsScroll() {
|
|
4042
|
-
var
|
|
4043
|
-
|
|
4044
|
-
scrollLeft =
|
|
4045
|
-
|
|
4046
|
-
clientWidth =
|
|
4047
|
-
|
|
4048
|
-
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;
|
|
4049
4108
|
|
|
4050
4109
|
setCanScrollToLeft(scrollLeft > 0);
|
|
4051
4110
|
setCanScrollToRight(scrollLeft + clientWidth < scrollWidth);
|
|
4052
4111
|
};
|
|
4053
4112
|
|
|
4054
|
-
return /*#__PURE__*/React__default.createElement(AnchorTapbarWrapper, null,
|
|
4055
|
-
columnStartDesktop: 2,
|
|
4056
|
-
columnSpanDesktop: 9,
|
|
4057
|
-
columnStartDevice: 2,
|
|
4058
|
-
columnSpanDevice: 12
|
|
4059
|
-
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4060
|
-
"data-testid": "anchor-title"
|
|
4061
|
-
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4062
|
-
level: 5
|
|
4063
|
-
}, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
|
|
4064
|
-
columnStartDesktop: 12,
|
|
4065
|
-
columnSpanDesktop: 5,
|
|
4066
|
-
columnStartDevice: 2,
|
|
4067
|
-
columnSpanDevice: 12,
|
|
4068
|
-
"data-testid": "anchor-ctas"
|
|
4069
|
-
}, /*#__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, {
|
|
4070
4114
|
columnStartDesktop: tabsColumnStart,
|
|
4071
4115
|
columnSpanDesktop: tabsColumnSpan,
|
|
4072
4116
|
columnStartDevice: 2,
|
|
@@ -4077,10 +4121,10 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4077
4121
|
ref: tabListRef,
|
|
4078
4122
|
tabsOverflow: tabsOverflow,
|
|
4079
4123
|
onScroll: onTabsScroll
|
|
4080
|
-
}, tabs.map(function (
|
|
4081
|
-
var id =
|
|
4082
|
-
text =
|
|
4083
|
-
rest = _objectWithoutPropertiesLoose(
|
|
4124
|
+
}, tabs.map(function (_ref4) {
|
|
4125
|
+
var id = _ref4.id,
|
|
4126
|
+
text = _ref4.text,
|
|
4127
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$7);
|
|
4084
4128
|
|
|
4085
4129
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
4086
4130
|
key: id
|
|
@@ -4101,7 +4145,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4101
4145
|
onClick: scrollToRight
|
|
4102
4146
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4103
4147
|
iconName: "Arrow"
|
|
4104
|
-
})) : null) : null)))
|
|
4148
|
+
})) : null) : null))));
|
|
4105
4149
|
};
|
|
4106
4150
|
|
|
4107
4151
|
(function (CarouselType) {
|
|
@@ -4110,8 +4154,8 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4110
4154
|
CarouselType["LargeCard"] = "LargeCard";
|
|
4111
4155
|
})(exports.CarouselType || (exports.CarouselType = {}));
|
|
4112
4156
|
|
|
4113
|
-
var _templateObject$
|
|
4114
|
-
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4157
|
+
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8;
|
|
4158
|
+
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (_ref) {
|
|
4115
4159
|
var type = _ref.type,
|
|
4116
4160
|
imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
4117
4161
|
|
|
@@ -4143,8 +4187,8 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_te
|
|
|
4143
4187
|
return "\n &&& {\n .swiper-slide > div{\n height: calc(" + imagesHeightDevice + "px + var(--line-height-body-2) + 12px);\n }\n }";
|
|
4144
4188
|
}
|
|
4145
4189
|
});
|
|
4146
|
-
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
4147
|
-
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4190
|
+
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
4191
|
+
var TitleWrapper = /*#__PURE__*/styled__default.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
4192
|
var ButtonsWrapper = /*#__PURE__*/styled__default.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
4193
|
|
|
4150
4194
|
var Carousel = function Carousel(_ref) {
|
|
@@ -4173,7 +4217,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
4173
4217
|
if (window.matchMedia(devices.mobile).matches) {
|
|
4174
4218
|
setSlidesOffsetBefore(20); // Mobile margin grid
|
|
4175
4219
|
} else if (window.matchMedia(devices.tablet).matches) {
|
|
4176
|
-
setSlidesOffsetBefore(
|
|
4220
|
+
setSlidesOffsetBefore(32); // Tablet margin grid
|
|
4177
4221
|
} else {
|
|
4178
4222
|
setSlidesOffsetBefore(Math.floor(window.innerWidth * 0.1) - 3); // 10% of width
|
|
4179
4223
|
}
|
|
@@ -4252,77 +4296,74 @@ var Carousel = function Carousel(_ref) {
|
|
|
4252
4296
|
})))));
|
|
4253
4297
|
};
|
|
4254
4298
|
|
|
4255
|
-
var _templateObject$
|
|
4256
|
-
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
4257
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4299
|
+
var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1;
|
|
4300
|
+
var HighlightsGrid = /*#__PURE__*/styled__default(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);
|
|
4301
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled__default.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
4302
|
var theme = _ref.theme;
|
|
4259
|
-
return theme.fonts.mobile.sizes.altHeaders[
|
|
4303
|
+
return theme.fonts.mobile.sizes.altHeaders[5];
|
|
4260
4304
|
}, function (_ref2) {
|
|
4261
4305
|
var theme = _ref2.theme;
|
|
4262
|
-
return theme.fonts.mobile.weights.altHeaders[
|
|
4306
|
+
return theme.fonts.mobile.weights.altHeaders[5];
|
|
4263
4307
|
}, function (_ref3) {
|
|
4264
4308
|
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];
|
|
4309
|
+
return theme.fonts.mobile.letterSpacing.altHeaders[5];
|
|
4269
4310
|
}, devices.mobile);
|
|
4270
|
-
var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4271
|
-
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.mobile);
|
|
4272
|
-
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (
|
|
4273
|
-
var theme =
|
|
4311
|
+
var InfoWrapper = /*#__PURE__*/styled__default.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);
|
|
4312
|
+
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4313
|
+
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref4) {
|
|
4314
|
+
var theme = _ref4.theme;
|
|
4274
4315
|
return theme.fonts.mobile.sizes.headers[3];
|
|
4316
|
+
}, function (_ref5) {
|
|
4317
|
+
var theme = _ref5.theme;
|
|
4318
|
+
return theme.fonts.mobile.weights.headers[3];
|
|
4275
4319
|
}, function (_ref6) {
|
|
4276
4320
|
var theme = _ref6.theme;
|
|
4277
|
-
return theme.fonts.mobile.
|
|
4321
|
+
return theme.fonts.mobile.letterSpacing.headers[3];
|
|
4278
4322
|
}, function (_ref7) {
|
|
4279
4323
|
var theme = _ref7.theme;
|
|
4280
|
-
return theme.fonts.mobile.
|
|
4324
|
+
return theme.fonts.mobile.lineHeights.headers[3];
|
|
4281
4325
|
}, function (_ref8) {
|
|
4282
4326
|
var theme = _ref8.theme;
|
|
4283
|
-
return theme.fonts.mobile.
|
|
4327
|
+
return theme.fonts.mobile.sizes.subtitles[2];
|
|
4284
4328
|
}, function (_ref9) {
|
|
4285
4329
|
var theme = _ref9.theme;
|
|
4286
|
-
return theme.fonts.mobile.
|
|
4330
|
+
return theme.fonts.mobile.weights.subtitles[2];
|
|
4287
4331
|
}, function (_ref10) {
|
|
4288
4332
|
var theme = _ref10.theme;
|
|
4289
|
-
return theme.fonts.mobile.
|
|
4333
|
+
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4290
4334
|
}, function (_ref11) {
|
|
4291
4335
|
var theme = _ref11.theme;
|
|
4292
|
-
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4293
|
-
}, function (_ref12) {
|
|
4294
|
-
var theme = _ref12.theme;
|
|
4295
4336
|
return theme.fonts.mobile.lineHeights.subtitles[2];
|
|
4296
4337
|
});
|
|
4297
|
-
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n h6 {\n padding: 0;\n margin: 0 0 4px 0;\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n > div {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n h6 {\n margin: 0 0 8px 0;\n }\n }\n }\n"])), devices.tablet, function (
|
|
4298
|
-
var theme =
|
|
4338
|
+
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n h6 {\n padding: 0;\n margin: 0 0 4px 0;\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n > div {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n h6 {\n margin: 0 0 8px 0;\n }\n }\n }\n"])), devices.tablet, function (_ref12) {
|
|
4339
|
+
var theme = _ref12.theme;
|
|
4299
4340
|
return theme.fonts.mobile.sizes.subtitles[2];
|
|
4341
|
+
}, function (_ref13) {
|
|
4342
|
+
var theme = _ref13.theme;
|
|
4343
|
+
return theme.fonts.mobile.weights.subtitles[2];
|
|
4300
4344
|
}, function (_ref14) {
|
|
4301
4345
|
var theme = _ref14.theme;
|
|
4302
|
-
return theme.fonts.mobile.
|
|
4346
|
+
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4303
4347
|
}, function (_ref15) {
|
|
4304
4348
|
var theme = _ref15.theme;
|
|
4305
|
-
return theme.fonts.mobile.
|
|
4349
|
+
return theme.fonts.mobile.lineHeights.subtitles[2];
|
|
4306
4350
|
}, function (_ref16) {
|
|
4307
4351
|
var theme = _ref16.theme;
|
|
4308
|
-
return theme.fonts.mobile.
|
|
4352
|
+
return theme.fonts.mobile.sizes.body[1];
|
|
4309
4353
|
}, function (_ref17) {
|
|
4310
4354
|
var theme = _ref17.theme;
|
|
4311
|
-
return theme.fonts.mobile.
|
|
4355
|
+
return theme.fonts.mobile.weights.body[1];
|
|
4312
4356
|
}, function (_ref18) {
|
|
4313
4357
|
var theme = _ref18.theme;
|
|
4314
|
-
return theme.fonts.mobile.
|
|
4358
|
+
return theme.fonts.mobile.letterSpacing.body[1];
|
|
4315
4359
|
}, function (_ref19) {
|
|
4316
4360
|
var theme = _ref19.theme;
|
|
4317
|
-
return theme.fonts.mobile.letterSpacing.body[1];
|
|
4318
|
-
}, function (_ref20) {
|
|
4319
|
-
var theme = _ref20.theme;
|
|
4320
4361
|
return theme.fonts.mobile.lineHeights.body[1];
|
|
4321
4362
|
}, devices.mobile);
|
|
4322
|
-
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
4323
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
4324
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
4325
|
-
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.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);
|
|
4363
|
+
var InfoLinkWrapper = /*#__PURE__*/styled__default.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);
|
|
4364
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
4365
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled__default.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);
|
|
4366
|
+
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.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
4367
|
|
|
4327
4368
|
var _excluded$8 = ["text"];
|
|
4328
4369
|
|
|
@@ -4383,6 +4424,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4383
4424
|
}
|
|
4384
4425
|
};
|
|
4385
4426
|
|
|
4427
|
+
var hasMultipleImages = images.length > 1;
|
|
4386
4428
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid, {
|
|
4387
4429
|
onClick: function onClick(e) {
|
|
4388
4430
|
return e.stopPropagation();
|
|
@@ -4393,7 +4435,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4393
4435
|
level: 4
|
|
4394
4436
|
}, carouselTitle), /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4395
4437
|
level: 5
|
|
4396
|
-
}, carouselTitle)), /*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4438
|
+
}, carouselTitle)), hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4397
4439
|
onClickNext: onNext,
|
|
4398
4440
|
onClickPrev: onPrev
|
|
4399
4441
|
})), /*#__PURE__*/React__default.createElement(InfoWrapper, {
|
|
@@ -4410,14 +4452,14 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4410
4452
|
level: 1
|
|
4411
4453
|
}, description)), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
|
|
4412
4454
|
"data-testid": "carousel-wrapper"
|
|
4413
|
-
}, /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4455
|
+
}, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4414
4456
|
"data-testid": "rotator-buttons"
|
|
4415
4457
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4416
4458
|
onClickNext: onNext,
|
|
4417
4459
|
onClickPrev: onPrev
|
|
4418
4460
|
})), /*#__PURE__*/React__default.createElement(swiperReact_js.Swiper, {
|
|
4419
4461
|
slidesPerView: "auto",
|
|
4420
|
-
loop:
|
|
4462
|
+
loop: hasMultipleImages,
|
|
4421
4463
|
loopedSlides: images.length,
|
|
4422
4464
|
onSwiper: onSwiper
|
|
4423
4465
|
}, images.map(function (image) {
|
|
@@ -4481,12 +4523,72 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4481
4523
|
})));
|
|
4482
4524
|
};
|
|
4483
4525
|
|
|
4484
|
-
var _templateObject$
|
|
4485
|
-
var
|
|
4486
|
-
var
|
|
4487
|
-
|
|
4488
|
-
|
|
4489
|
-
var
|
|
4526
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6, _templateObject6$6;
|
|
4527
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.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) {
|
|
4528
|
+
var sticky = _ref.sticky;
|
|
4529
|
+
return sticky ? 'sticky' : 'initial';
|
|
4530
|
+
}, zIndexes.anchor);
|
|
4531
|
+
var CTAGridWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
4532
|
+
var AnchorTitle = /*#__PURE__*/styled__default.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);
|
|
4533
|
+
var ButtonsDesktopGridItem = /*#__PURE__*/styled__default(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);
|
|
4534
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
4535
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(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) {
|
|
4536
|
+
var theme = _ref2.theme;
|
|
4537
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4538
|
+
}, function (_ref3) {
|
|
4539
|
+
var theme = _ref3.theme;
|
|
4540
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4541
|
+
}, function (_ref4) {
|
|
4542
|
+
var theme = _ref4.theme;
|
|
4543
|
+
return theme.colors.primaryButtonReverse;
|
|
4544
|
+
}, function (_ref5) {
|
|
4545
|
+
var theme = _ref5.theme;
|
|
4546
|
+
return theme.colors.primaryButtonReverse;
|
|
4547
|
+
});
|
|
4548
|
+
|
|
4549
|
+
var _excluded$b = ["text"],
|
|
4550
|
+
_excluded2 = ["text"];
|
|
4551
|
+
|
|
4552
|
+
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
4553
|
+
var title = _ref.title,
|
|
4554
|
+
links = _ref.links,
|
|
4555
|
+
_ref$sticky = _ref.sticky,
|
|
4556
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky;
|
|
4557
|
+
|
|
4558
|
+
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
4559
|
+
primaryButtonText = _ref2.text,
|
|
4560
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
|
|
4561
|
+
|
|
4562
|
+
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
4563
|
+
secondaryButtonText = _ref3.text,
|
|
4564
|
+
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
4565
|
+
|
|
4566
|
+
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
4567
|
+
sticky: sticky
|
|
4568
|
+
}, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(GridItem, {
|
|
4569
|
+
columnStartDesktop: 2,
|
|
4570
|
+
columnSpanDesktop: 9,
|
|
4571
|
+
columnStartDevice: 2,
|
|
4572
|
+
columnSpanDevice: 12
|
|
4573
|
+
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4574
|
+
"data-testid": "anchor-title"
|
|
4575
|
+
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4576
|
+
level: 5
|
|
4577
|
+
}, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
|
|
4578
|
+
columnStartDesktop: 12,
|
|
4579
|
+
columnSpanDesktop: 5,
|
|
4580
|
+
columnStartDevice: 2,
|
|
4581
|
+
columnSpanDevice: 12,
|
|
4582
|
+
"data-testid": "anchor-ctas"
|
|
4583
|
+
}, /*#__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);
|
|
4584
|
+
};
|
|
4585
|
+
|
|
4586
|
+
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
|
|
4587
|
+
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4588
|
+
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
4589
|
+
var ChildrenContainer = /*#__PURE__*/styled__default.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);
|
|
4590
|
+
var TitleContainer$1 = /*#__PURE__*/styled__default.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);
|
|
4591
|
+
var ContentContainer = /*#__PURE__*/styled__default.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
4592
|
|
|
4491
4593
|
var Accordion = function Accordion(_ref) {
|
|
4492
4594
|
var _ref$title = _ref.title,
|
|
@@ -4528,8 +4630,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
4528
4630
|
}, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
4529
4631
|
};
|
|
4530
4632
|
|
|
4531
|
-
var _templateObject$
|
|
4532
|
-
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4633
|
+
var _templateObject$C;
|
|
4634
|
+
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4533
4635
|
|
|
4534
4636
|
var Accordions = function Accordions(_ref) {
|
|
4535
4637
|
var _ref$items = _ref.items,
|
|
@@ -4548,25 +4650,25 @@ var Accordions = function Accordions(_ref) {
|
|
|
4548
4650
|
}));
|
|
4549
4651
|
};
|
|
4550
4652
|
|
|
4551
|
-
var _templateObject$
|
|
4653
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$3, _templateObject8$3, _templateObject9$2;
|
|
4552
4654
|
var LENGTH_LARGE_TEXT = 28;
|
|
4553
4655
|
var LENGTH_SMALL_TEXT = 19;
|
|
4554
4656
|
var LENGTH_TEXT_TABLET = 10;
|
|
4555
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4556
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4557
|
-
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4558
|
-
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
4657
|
+
var CardContainer = /*#__PURE__*/styled__default.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"])));
|
|
4658
|
+
var HoverContainer = /*#__PURE__*/styled__default.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);
|
|
4659
|
+
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
4660
|
+
var ContentContainer$1 = /*#__PURE__*/styled__default.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
4661
|
var fullWidth = _ref.fullWidth;
|
|
4560
4662
|
return fullWidth ? '0' : '20px';
|
|
4561
4663
|
}, function (_ref2) {
|
|
4562
4664
|
var fullWidth = _ref2.fullWidth;
|
|
4563
4665
|
return fullWidth ? '0' : '20px';
|
|
4564
4666
|
});
|
|
4565
|
-
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4566
|
-
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
4567
|
-
var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
4568
|
-
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$
|
|
4569
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
4667
|
+
var TitleContainer$2 = /*#__PURE__*/styled__default.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);
|
|
4668
|
+
var TitleContainerMobile = /*#__PURE__*/styled__default.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);
|
|
4669
|
+
var TextContainer = /*#__PURE__*/styled__default.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"])));
|
|
4670
|
+
var SubtitleContainer = /*#__PURE__*/styled__default.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"])));
|
|
4671
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled__default.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
4672
|
var size = _ref3.size,
|
|
4571
4673
|
primaryButtonTextLength = _ref3.primaryButtonTextLength,
|
|
4572
4674
|
tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
|
|
@@ -4589,13 +4691,13 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 ||
|
|
|
4589
4691
|
return '';
|
|
4590
4692
|
});
|
|
4591
4693
|
|
|
4592
|
-
var _templateObject$
|
|
4593
|
-
var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4594
|
-
var ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4694
|
+
var _templateObject$E, _templateObject2$n, _templateObject3$h;
|
|
4695
|
+
var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 10px;\n width: 100%;\n display: flex;\n flex-direction: row;\n"])));
|
|
4696
|
+
var ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-progress);\n flex: ", ";\n"])), function (_ref) {
|
|
4595
4697
|
var progress = _ref.progress;
|
|
4596
4698
|
return progress;
|
|
4597
4699
|
});
|
|
4598
|
-
var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4700
|
+
var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n opacity: 0.5;\n flex: ", ";\n"])), function (_ref2) {
|
|
4599
4701
|
var progress = _ref2.progress;
|
|
4600
4702
|
return progress;
|
|
4601
4703
|
});
|
|
@@ -4612,7 +4714,7 @@ var Progress = function Progress(_ref) {
|
|
|
4612
4714
|
}));
|
|
4613
4715
|
};
|
|
4614
4716
|
|
|
4615
|
-
var _excluded$
|
|
4717
|
+
var _excluded$c = ["text"],
|
|
4616
4718
|
_excluded2$1 = ["text"];
|
|
4617
4719
|
var LENGTH_LARGE_TEXT$1 = 28;
|
|
4618
4720
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
@@ -4651,7 +4753,7 @@ var Card = function Card(_ref) {
|
|
|
4651
4753
|
var _ref2 = primaryButton || {},
|
|
4652
4754
|
_ref2$text = _ref2.text,
|
|
4653
4755
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
4654
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
4756
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
|
|
4655
4757
|
|
|
4656
4758
|
var primaryButtonTextTruncate = size === 'small' ? truncate(primaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(primaryButtonText, LENGTH_LARGE_TEXT$1);
|
|
4657
4759
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -4721,9 +4823,9 @@ var Card = function Card(_ref) {
|
|
|
4721
4823
|
}, 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
4824
|
};
|
|
4723
4825
|
|
|
4724
|
-
var _templateObject$
|
|
4725
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
4726
|
-
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
4826
|
+
var _templateObject$F, _templateObject2$o;
|
|
4827
|
+
var CardsContainer = /*#__PURE__*/styled__default(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);
|
|
4828
|
+
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 1 / span 14;\n }\n }\n"])), devices.mobile);
|
|
4727
4829
|
|
|
4728
4830
|
var Cards = function Cards(_ref) {
|
|
4729
4831
|
var cards = _ref.cards,
|
|
@@ -4760,21 +4862,21 @@ var Cards = function Cards(_ref) {
|
|
|
4760
4862
|
}));
|
|
4761
4863
|
};
|
|
4762
4864
|
|
|
4763
|
-
var _templateObject$
|
|
4764
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4865
|
+
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$9;
|
|
4866
|
+
var EditorialGrid = /*#__PURE__*/styled__default.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
4867
|
var imageToLeft = _ref.imageToLeft;
|
|
4766
4868
|
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
4869
|
}, devices.mobile);
|
|
4768
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4870
|
+
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
4769
4871
|
var imageToLeft = _ref2.imageToLeft;
|
|
4770
4872
|
return imageToLeft ? 'left' : 'right';
|
|
4771
4873
|
}, devices.mobile);
|
|
4772
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4874
|
+
var EditorialTextWrapper = /*#__PURE__*/styled__default.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
4875
|
var imageToLeft = _ref3.imageToLeft;
|
|
4774
4876
|
return imageToLeft ? 'right' : 'left';
|
|
4775
4877
|
}, devices.mobile);
|
|
4776
|
-
var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$
|
|
4777
|
-
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4878
|
+
var EditorialSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
4879
|
+
var EditorialText = /*#__PURE__*/styled__default.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
4880
|
|
|
4779
4881
|
var Editorial = function Editorial(_ref) {
|
|
4780
4882
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -4805,19 +4907,19 @@ var Editorial = function Editorial(_ref) {
|
|
|
4805
4907
|
})))));
|
|
4806
4908
|
};
|
|
4807
4909
|
|
|
4808
|
-
var _templateObject$
|
|
4809
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4910
|
+
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$4;
|
|
4911
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default.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
4912
|
var theme = _ref.theme;
|
|
4811
4913
|
return theme.colors.primary;
|
|
4812
4914
|
}, devices.mobile);
|
|
4813
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
4814
|
-
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4815
|
-
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
4816
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4817
|
-
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
4818
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
4915
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(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);
|
|
4916
|
+
var TitleWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
4917
|
+
var ChildrenWrapper = /*#__PURE__*/styled__default.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);
|
|
4918
|
+
var TextWrapper = /*#__PURE__*/styled__default.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"])));
|
|
4919
|
+
var LogoWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
4920
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled__default.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
4921
|
|
|
4820
|
-
var _excluded$
|
|
4922
|
+
var _excluded$d = ["text"];
|
|
4821
4923
|
|
|
4822
4924
|
var PageHeading = function PageHeading(_ref) {
|
|
4823
4925
|
var title = _ref.title,
|
|
@@ -4829,7 +4931,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
4829
4931
|
|
|
4830
4932
|
var _ref2 = link || {},
|
|
4831
4933
|
linkText = _ref2.text,
|
|
4832
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
4934
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
4833
4935
|
|
|
4834
4936
|
var truncatedText = text == null ? void 0 : text.substring(0, 250);
|
|
4835
4937
|
var truncatedTitle = title.substring(0, 40);
|
|
@@ -4841,18 +4943,20 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
4841
4943
|
level: 2
|
|
4842
4944
|
}, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
|
|
4843
4945
|
"data-testid": "page-heading-text"
|
|
4844
|
-
},
|
|
4946
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4947
|
+
level: 6
|
|
4948
|
+
}, truncatedText)) : null, sponsor ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
|
|
4845
4949
|
"data-testid": "page-heading-sponsor"
|
|
4846
4950
|
}, /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
|
|
4847
4951
|
"data-testid": "page-heading-link"
|
|
4848
4952
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
|
|
4849
4953
|
};
|
|
4850
4954
|
|
|
4851
|
-
var _excluded$
|
|
4955
|
+
var _excluded$e = ["link"];
|
|
4852
4956
|
|
|
4853
4957
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
4854
4958
|
var link = _ref.link,
|
|
4855
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
4959
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
4856
4960
|
|
|
4857
4961
|
var coreLink = link && _extends({}, link, {
|
|
4858
4962
|
color: exports.Colors.White,
|
|
@@ -4866,11 +4970,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
4866
4970
|
})));
|
|
4867
4971
|
};
|
|
4868
4972
|
|
|
4869
|
-
var _excluded$
|
|
4973
|
+
var _excluded$f = ["link"];
|
|
4870
4974
|
|
|
4871
4975
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
4872
4976
|
var link = _ref.link,
|
|
4873
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
4977
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
|
4874
4978
|
|
|
4875
4979
|
var cinemaLink = link && _extends({}, link, {
|
|
4876
4980
|
color: exports.Colors.Black,
|
|
@@ -4884,8 +4988,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4884
4988
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
4885
4989
|
};
|
|
4886
4990
|
|
|
4887
|
-
var _templateObject$
|
|
4888
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4991
|
+
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$5;
|
|
4992
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.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
4993
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
4890
4994
|
return bgUrlDesktop;
|
|
4891
4995
|
}, zIndexes.content, devices.mobile, function (_ref2) {
|
|
@@ -4893,14 +4997,14 @@ var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_temp
|
|
|
4893
4997
|
bgUrlDevice = _ref2.bgUrlDevice;
|
|
4894
4998
|
return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
|
|
4895
4999
|
});
|
|
4896
|
-
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
4897
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4898
|
-
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
4899
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4900
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
4901
|
-
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
5000
|
+
var ImpactGrid = /*#__PURE__*/styled__default(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);
|
|
5001
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.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);
|
|
5002
|
+
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5003
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
5004
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled__default.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);
|
|
5005
|
+
var ScrollDownWrapper = /*#__PURE__*/styled__default.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
5006
|
|
|
4903
|
-
var _excluded$
|
|
5007
|
+
var _excluded$g = ["text"];
|
|
4904
5008
|
|
|
4905
5009
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
4906
5010
|
var children = _ref.children,
|
|
@@ -4915,7 +5019,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
4915
5019
|
|
|
4916
5020
|
var _ref2 = link || {},
|
|
4917
5021
|
linkText = _ref2.text,
|
|
4918
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
5022
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
|
|
4919
5023
|
|
|
4920
5024
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
4921
5025
|
bgUrlDesktop: bgUrlDesktop,
|
|
@@ -4942,11 +5046,11 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
4942
5046
|
}, "Scroll Down")) : null);
|
|
4943
5047
|
};
|
|
4944
5048
|
|
|
4945
|
-
var _excluded$
|
|
5049
|
+
var _excluded$h = ["link"];
|
|
4946
5050
|
|
|
4947
5051
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
4948
5052
|
var link = _ref.link,
|
|
4949
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
5053
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
4950
5054
|
|
|
4951
5055
|
var streamLink = link && _extends({}, link, {
|
|
4952
5056
|
color: exports.Colors.Black,
|
|
@@ -4960,9 +5064,9 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
4960
5064
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
|
|
4961
5065
|
};
|
|
4962
5066
|
|
|
4963
|
-
var _templateObject$
|
|
4964
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4965
|
-
var NameWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5067
|
+
var _templateObject$J, _templateObject2$s;
|
|
5068
|
+
var RoleWrapper = /*#__PURE__*/styled__default.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"])));
|
|
5069
|
+
var NameWrapper = /*#__PURE__*/styled__default.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
5070
|
|
|
4967
5071
|
var IndividualListing = function IndividualListing(_ref) {
|
|
4968
5072
|
var role = _ref.role,
|
|
@@ -4979,8 +5083,8 @@ var IndividualListing = function IndividualListing(_ref) {
|
|
|
4979
5083
|
}, name) : name));
|
|
4980
5084
|
};
|
|
4981
5085
|
|
|
4982
|
-
var _templateObject$
|
|
4983
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
5086
|
+
var _templateObject$K;
|
|
5087
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
|
|
4984
5088
|
|
|
4985
5089
|
var PeopleListing = function PeopleListing(_ref) {
|
|
4986
5090
|
var people = _ref.people;
|
|
@@ -5000,27 +5104,27 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5000
5104
|
}));
|
|
5001
5105
|
};
|
|
5002
5106
|
|
|
5003
|
-
var _templateObject$
|
|
5107
|
+
var _templateObject$L, _templateObject2$t, _templateObject3$l, _templateObject4$g, _templateObject5$c, _templateObject6$a, _templateObject7$6;
|
|
5004
5108
|
var LENGTH_TEXT = 28;
|
|
5005
5109
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5006
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
5110
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(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
5111
|
var imageToLeft = _ref.imageToLeft;
|
|
5008
5112
|
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
5113
|
}, devices.tablet, function (_ref2) {
|
|
5010
5114
|
var imageToLeft = _ref2.imageToLeft;
|
|
5011
5115
|
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
5116
|
}, devices.mobile);
|
|
5013
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5117
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref3) {
|
|
5014
5118
|
var imageToLeft = _ref3.imageToLeft;
|
|
5015
5119
|
return imageToLeft ? 'left' : 'right';
|
|
5016
5120
|
}, devices.mobile);
|
|
5017
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5121
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.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
5122
|
var imageToLeft = _ref4.imageToLeft;
|
|
5019
5123
|
return imageToLeft ? 'right' : 'left';
|
|
5020
5124
|
}, devices.mobile);
|
|
5021
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5022
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
5023
|
-
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
5125
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled__default.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);
|
|
5126
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
5127
|
+
var PromoWithTitleText = /*#__PURE__*/styled__default.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
5128
|
var theme = _ref5.theme;
|
|
5025
5129
|
return theme.colors.black;
|
|
5026
5130
|
}, function (_ref6) {
|
|
@@ -5030,7 +5134,7 @@ var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$9 ||
|
|
|
5030
5134
|
var theme = _ref7.theme;
|
|
5031
5135
|
return theme.colors.primary;
|
|
5032
5136
|
});
|
|
5033
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
5137
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.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
5138
|
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
5035
5139
|
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
5036
5140
|
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
@@ -5056,7 +5160,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
|
|
|
5056
5160
|
return '';
|
|
5057
5161
|
});
|
|
5058
5162
|
|
|
5059
|
-
var _excluded$
|
|
5163
|
+
var _excluded$i = ["text"],
|
|
5060
5164
|
_excluded2$2 = ["text"];
|
|
5061
5165
|
var LENGTH_TEXT$1 = 28;
|
|
5062
5166
|
|
|
@@ -5083,7 +5187,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
5083
5187
|
var _ref2 = primaryButton || {},
|
|
5084
5188
|
_ref2$text = _ref2.text,
|
|
5085
5189
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
5086
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
5190
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
|
|
5087
5191
|
|
|
5088
5192
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$1);
|
|
5089
5193
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -5117,8 +5221,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
5117
5221
|
}, 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
5222
|
};
|
|
5119
5223
|
|
|
5120
|
-
var _templateObject$
|
|
5121
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5224
|
+
var _templateObject$M;
|
|
5225
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.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
5226
|
|
|
5123
5227
|
var SectionTitle = function SectionTitle(_ref) {
|
|
5124
5228
|
var title = _ref.title,
|
|
@@ -5144,8 +5248,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
5144
5248
|
}, description))));
|
|
5145
5249
|
};
|
|
5146
5250
|
|
|
5147
|
-
var _templateObject$
|
|
5148
|
-
var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5251
|
+
var _templateObject$N;
|
|
5252
|
+
var TextContainer$1 = /*#__PURE__*/styled__default.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
5253
|
|
|
5150
5254
|
var TextOnly = function TextOnly(_ref) {
|
|
5151
5255
|
var _ref$text = _ref.text,
|
|
@@ -5170,21 +5274,57 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
5170
5274
|
})));
|
|
5171
5275
|
};
|
|
5172
5276
|
|
|
5173
|
-
var _templateObject$
|
|
5174
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5175
|
-
var
|
|
5277
|
+
var _templateObject$O, _templateObject2$u;
|
|
5278
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.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) {
|
|
5279
|
+
var _ref$aspectRatio = _ref.aspectRatio,
|
|
5280
|
+
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
5281
|
+
return aspectRatio;
|
|
5282
|
+
}, function (_ref2) {
|
|
5283
|
+
var _ref2$aspectRatio = _ref2.aspectRatio,
|
|
5284
|
+
aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio,
|
|
5285
|
+
height = _ref2.height;
|
|
5286
|
+
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
5287
|
+
});
|
|
5288
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.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
5289
|
|
|
5177
5290
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
5178
5291
|
var caption = _ref.caption,
|
|
5179
5292
|
children = _ref.children,
|
|
5180
5293
|
aspectRatio = _ref.aspectRatio;
|
|
5181
|
-
|
|
5294
|
+
var wrapperRef = React.useRef(null);
|
|
5295
|
+
|
|
5296
|
+
var _useState = React.useState(0),
|
|
5297
|
+
height = _useState[0],
|
|
5298
|
+
setHeight = _useState[1];
|
|
5299
|
+
|
|
5300
|
+
React.useEffect(function () {
|
|
5301
|
+
var setWrapperHeight = function setWrapperHeight() {
|
|
5302
|
+
var _wrapperRef$current;
|
|
5303
|
+
|
|
5304
|
+
return setHeight((wrapperRef == null ? void 0 : (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
|
|
5305
|
+
};
|
|
5306
|
+
|
|
5307
|
+
window.addEventListener('resize', setWrapperHeight);
|
|
5308
|
+
|
|
5309
|
+
if (wrapperRef) {
|
|
5310
|
+
setWrapperHeight();
|
|
5311
|
+
}
|
|
5312
|
+
|
|
5313
|
+
return function () {
|
|
5314
|
+
return window.removeEventListener('resize', setWrapperHeight);
|
|
5315
|
+
};
|
|
5316
|
+
}, [wrapperRef]);
|
|
5317
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
5318
|
+
aspectRatio: aspectRatio,
|
|
5319
|
+
ref: wrapperRef,
|
|
5320
|
+
height: height
|
|
5321
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
5182
5322
|
aspectRatio: aspectRatio
|
|
5183
5323
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
5184
5324
|
};
|
|
5185
5325
|
|
|
5186
|
-
var _templateObject$
|
|
5187
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
5326
|
+
var _templateObject$P;
|
|
5327
|
+
var GlobalStyles = /*#__PURE__*/styled.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
5328
|
var theme = _ref.theme;
|
|
5189
5329
|
return theme.colors.primary;
|
|
5190
5330
|
}, function (_ref2) {
|
|
@@ -6060,6 +6200,12 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$N || (_
|
|
|
6060
6200
|
}, function (_ref292) {
|
|
6061
6201
|
var theme = _ref292.theme;
|
|
6062
6202
|
return theme.grid.tablet.margin;
|
|
6203
|
+
}, function (_ref293) {
|
|
6204
|
+
var theme = _ref293.theme;
|
|
6205
|
+
return theme.spacing[10];
|
|
6206
|
+
}, function (_ref294) {
|
|
6207
|
+
var theme = _ref294.theme;
|
|
6208
|
+
return theme.spacing[6];
|
|
6063
6209
|
}, devices.desktop, devices.largeDesktop);
|
|
6064
6210
|
|
|
6065
6211
|
exports.Accordion = Accordion;
|
|
@@ -6101,11 +6247,14 @@ exports.SectionTitle = SectionTitle;
|
|
|
6101
6247
|
exports.Sponsorship = Sponsorship;
|
|
6102
6248
|
exports.StreamBadge = StreamBadge;
|
|
6103
6249
|
exports.Subtitle = Subtitle;
|
|
6250
|
+
exports.Tab = Tab;
|
|
6104
6251
|
exports.TabLink = TabLink;
|
|
6105
6252
|
exports.Tabs = Tabs;
|
|
6106
6253
|
exports.TertiaryButton = Button$1;
|
|
6107
6254
|
exports.TextOnly = TextOnly;
|
|
6108
6255
|
exports.ThemeProvider = Theme;
|
|
6256
|
+
exports.Tickbox = Tickbox;
|
|
6257
|
+
exports.TitleWithCTA = TitleWithCTA;
|
|
6109
6258
|
exports.TypeTags = TypeTags;
|
|
6110
6259
|
exports.devices = devices;
|
|
6111
6260
|
//# sourceMappingURL=chord.cjs.development.js.map
|