@royaloperahouse/chord 0.5.9 → 0.7.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 +17 -0
- package/README.md +2 -2
- package/dist/chord.cjs.development.js +430 -353
- 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 +431 -355
- 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/PeopleListing/PeopleListing.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +4 -2
- 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/index.d.ts +2 -1
- package/dist/types/navigation.d.ts +16 -10
- package/dist/types/tickbox.d.ts +40 -0
- package/dist/types/types.d.ts +25 -4
- package/package.json +1 -1
- package/dist/components/atoms/IndividualListing/IndividualListing.d.ts +0 -3
- package/dist/components/atoms/IndividualListing/IndividualListing.style.d.ts +0 -2
- package/dist/components/atoms/IndividualListing/index.d.ts +0 -2
package/dist/chord.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { createElement, memo,
|
|
1
|
+
import React__default, { createElement, memo, useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
|
2
2
|
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
|
|
4
4
|
import 'swiper/swiper-bundle.css';
|
|
@@ -2669,91 +2669,7 @@ var TabLink = function TabLink(_ref) {
|
|
|
2669
2669
|
};
|
|
2670
2670
|
|
|
2671
2671
|
var _templateObject$g;
|
|
2672
|
-
var
|
|
2673
|
-
|
|
2674
|
-
var TypeTags = function TypeTags(_ref) {
|
|
2675
|
-
var list = _ref.list;
|
|
2676
|
-
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
2677
|
-
return /*#__PURE__*/React__default.createElement(Overline, {
|
|
2678
|
-
level: 1,
|
|
2679
|
-
tag: "li",
|
|
2680
|
-
key: t
|
|
2681
|
-
}, t);
|
|
2682
|
-
}));
|
|
2683
|
-
};
|
|
2684
|
-
|
|
2685
|
-
var _templateObject$h, _templateObject2$4, _templateObject3;
|
|
2686
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
2687
|
-
var IconWrapper = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
2688
|
-
var theme = _ref.theme;
|
|
2689
|
-
return theme.colors.primary;
|
|
2690
|
-
}, devices.mobile);
|
|
2691
|
-
var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobile);
|
|
2692
|
-
|
|
2693
|
-
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2694
|
-
var onClickPrev = _ref.onClickPrev,
|
|
2695
|
-
onClickNext = _ref.onClickNext,
|
|
2696
|
-
_ref$availablePrev = _ref.availablePrev,
|
|
2697
|
-
availablePrev = _ref$availablePrev === void 0 ? true : _ref$availablePrev,
|
|
2698
|
-
_ref$availableNext = _ref.availableNext,
|
|
2699
|
-
availableNext = _ref$availableNext === void 0 ? true : _ref$availableNext;
|
|
2700
|
-
|
|
2701
|
-
var onClickLeftHandler = function onClickLeftHandler() {
|
|
2702
|
-
if (onClickPrev) {
|
|
2703
|
-
onClickPrev();
|
|
2704
|
-
}
|
|
2705
|
-
};
|
|
2706
|
-
|
|
2707
|
-
var onPrevKeyDownHandler = function onPrevKeyDownHandler(e) {
|
|
2708
|
-
if (e.key === 'Enter') {
|
|
2709
|
-
onClickLeftHandler();
|
|
2710
|
-
}
|
|
2711
|
-
};
|
|
2712
|
-
|
|
2713
|
-
var onClickRightHandler = function onClickRightHandler() {
|
|
2714
|
-
if (onClickNext) {
|
|
2715
|
-
onClickNext();
|
|
2716
|
-
}
|
|
2717
|
-
};
|
|
2718
|
-
|
|
2719
|
-
var onNextKeyDownHandler = function onNextKeyDownHandler(e) {
|
|
2720
|
-
if (e.key === 'Enter') {
|
|
2721
|
-
onClickRightHandler();
|
|
2722
|
-
}
|
|
2723
|
-
};
|
|
2724
|
-
|
|
2725
|
-
var renderPrevIcon = function renderPrevIcon() {
|
|
2726
|
-
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2727
|
-
iconName: 'CarouselArrow',
|
|
2728
|
-
direction: "reverse"
|
|
2729
|
-
});
|
|
2730
|
-
};
|
|
2731
|
-
|
|
2732
|
-
var renderNextIcon = function renderNextIcon() {
|
|
2733
|
-
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2734
|
-
iconName: 'CarouselArrow'
|
|
2735
|
-
});
|
|
2736
|
-
};
|
|
2737
|
-
|
|
2738
|
-
return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2739
|
-
onClick: onClickLeftHandler,
|
|
2740
|
-
onKeyDown: onPrevKeyDownHandler,
|
|
2741
|
-
tabIndex: 0,
|
|
2742
|
-
"data-testid": "iconprev"
|
|
2743
|
-
}, renderPrevIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2744
|
-
"data-testid": "iconprevnoavailable"
|
|
2745
|
-
}, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2746
|
-
onClick: onClickRightHandler,
|
|
2747
|
-
onKeyDown: onNextKeyDownHandler,
|
|
2748
|
-
tabIndex: 0,
|
|
2749
|
-
"data-testid": "iconnext"
|
|
2750
|
-
}, renderNextIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2751
|
-
"data-testid": "iconnextnoavailable"
|
|
2752
|
-
}, renderNextIcon()));
|
|
2753
|
-
};
|
|
2754
|
-
|
|
2755
|
-
var _templateObject$i;
|
|
2756
|
-
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n"])), function (_ref) {
|
|
2672
|
+
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n"])), function (_ref) {
|
|
2757
2673
|
var typography = _ref.typography;
|
|
2758
2674
|
return typography;
|
|
2759
2675
|
}, function (_ref2) {
|
|
@@ -2859,25 +2775,171 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
2859
2775
|
}, children);
|
|
2860
2776
|
};
|
|
2861
2777
|
|
|
2778
|
+
var _templateObject$h, _templateObject2$4, _templateObject3;
|
|
2779
|
+
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(--base-color-", ");\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n"])), function (_ref) {
|
|
2780
|
+
var dark = _ref.dark;
|
|
2781
|
+
return dark ? 'white' : 'black';
|
|
2782
|
+
});
|
|
2783
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid var(--base-color-", ");\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref2) {
|
|
2784
|
+
var dark = _ref2.dark;
|
|
2785
|
+
return dark ? 'white' : 'black';
|
|
2786
|
+
}, devices.mobile);
|
|
2787
|
+
var TickboxInput = /*#__PURE__*/styled.input(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n\n &:checked ~ ", " {\n background-color: var(--base-color-", ");\n & svg {\n display: block;\n path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
2788
|
+
var dark = _ref3.dark;
|
|
2789
|
+
return dark ? 'white' : 'black';
|
|
2790
|
+
}, function (_ref4) {
|
|
2791
|
+
var dark = _ref4.dark;
|
|
2792
|
+
return dark ? 'black' : 'white';
|
|
2793
|
+
});
|
|
2794
|
+
|
|
2795
|
+
var TickboxMode;
|
|
2796
|
+
|
|
2797
|
+
(function (TickboxMode) {
|
|
2798
|
+
TickboxMode["Dark"] = "dark";
|
|
2799
|
+
TickboxMode["Light"] = "light";
|
|
2800
|
+
})(TickboxMode || (TickboxMode = {}));
|
|
2801
|
+
|
|
2802
|
+
var Tickbox = function Tickbox(_ref) {
|
|
2803
|
+
var children = _ref.children,
|
|
2804
|
+
_ref$mode = _ref.mode,
|
|
2805
|
+
mode = _ref$mode === void 0 ? 'light' : _ref$mode,
|
|
2806
|
+
onChange = _ref.onChange,
|
|
2807
|
+
_ref$checked = _ref.checked,
|
|
2808
|
+
checked = _ref$checked === void 0 ? false : _ref$checked;
|
|
2809
|
+
|
|
2810
|
+
var _useState = useState(checked),
|
|
2811
|
+
selected = _useState[0],
|
|
2812
|
+
setSelected = _useState[1];
|
|
2813
|
+
|
|
2814
|
+
var onInputChange = function onInputChange(e) {
|
|
2815
|
+
var inputChecked = e.target.checked;
|
|
2816
|
+
setSelected(inputChecked);
|
|
2817
|
+
onChange == null ? void 0 : onChange(inputChecked);
|
|
2818
|
+
};
|
|
2819
|
+
|
|
2820
|
+
var isDarkMode = mode === TickboxMode.Dark;
|
|
2821
|
+
return /*#__PURE__*/React__default.createElement(TickboxLabel, {
|
|
2822
|
+
dark: isDarkMode,
|
|
2823
|
+
"data-testid": "tickbox"
|
|
2824
|
+
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
2825
|
+
level: 1,
|
|
2826
|
+
tag: "span"
|
|
2827
|
+
}, children), /*#__PURE__*/React__default.createElement(TickboxInput, {
|
|
2828
|
+
type: "checkbox",
|
|
2829
|
+
checked: selected,
|
|
2830
|
+
dark: isDarkMode,
|
|
2831
|
+
onChange: onInputChange
|
|
2832
|
+
}), /*#__PURE__*/React__default.createElement(TickboxCheckmark, {
|
|
2833
|
+
dark: isDarkMode
|
|
2834
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
2835
|
+
iconName: "Tick"
|
|
2836
|
+
})));
|
|
2837
|
+
};
|
|
2838
|
+
|
|
2839
|
+
var _templateObject$i;
|
|
2840
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n & li {\n color: var(--base-color-black);\n display: inline-block;\n margin: 0;\n }\n\n & li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n & li:first-child:before {\n display: none;\n }\n"])));
|
|
2841
|
+
|
|
2842
|
+
var TypeTags = function TypeTags(_ref) {
|
|
2843
|
+
var list = _ref.list;
|
|
2844
|
+
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
2845
|
+
return /*#__PURE__*/React__default.createElement(Overline, {
|
|
2846
|
+
level: 1,
|
|
2847
|
+
tag: "li",
|
|
2848
|
+
key: t
|
|
2849
|
+
}, t);
|
|
2850
|
+
}));
|
|
2851
|
+
};
|
|
2852
|
+
|
|
2853
|
+
var _templateObject$j, _templateObject2$5, _templateObject3$1;
|
|
2854
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
2855
|
+
var IconWrapper = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
2856
|
+
var theme = _ref.theme;
|
|
2857
|
+
return theme.colors.primary;
|
|
2858
|
+
}, devices.mobileAndTablet);
|
|
2859
|
+
var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobileAndTablet);
|
|
2860
|
+
|
|
2861
|
+
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2862
|
+
var onClickPrev = _ref.onClickPrev,
|
|
2863
|
+
onClickNext = _ref.onClickNext,
|
|
2864
|
+
_ref$availablePrev = _ref.availablePrev,
|
|
2865
|
+
availablePrev = _ref$availablePrev === void 0 ? true : _ref$availablePrev,
|
|
2866
|
+
_ref$availableNext = _ref.availableNext,
|
|
2867
|
+
availableNext = _ref$availableNext === void 0 ? true : _ref$availableNext;
|
|
2868
|
+
|
|
2869
|
+
var onClickLeftHandler = function onClickLeftHandler() {
|
|
2870
|
+
if (onClickPrev) {
|
|
2871
|
+
onClickPrev();
|
|
2872
|
+
}
|
|
2873
|
+
};
|
|
2874
|
+
|
|
2875
|
+
var onPrevKeyDownHandler = function onPrevKeyDownHandler(e) {
|
|
2876
|
+
if (e.key === 'Enter') {
|
|
2877
|
+
onClickLeftHandler();
|
|
2878
|
+
}
|
|
2879
|
+
};
|
|
2880
|
+
|
|
2881
|
+
var onClickRightHandler = function onClickRightHandler() {
|
|
2882
|
+
if (onClickNext) {
|
|
2883
|
+
onClickNext();
|
|
2884
|
+
}
|
|
2885
|
+
};
|
|
2886
|
+
|
|
2887
|
+
var onNextKeyDownHandler = function onNextKeyDownHandler(e) {
|
|
2888
|
+
if (e.key === 'Enter') {
|
|
2889
|
+
onClickRightHandler();
|
|
2890
|
+
}
|
|
2891
|
+
};
|
|
2892
|
+
|
|
2893
|
+
var renderPrevIcon = function renderPrevIcon() {
|
|
2894
|
+
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2895
|
+
iconName: 'CarouselArrow',
|
|
2896
|
+
direction: "reverse"
|
|
2897
|
+
});
|
|
2898
|
+
};
|
|
2899
|
+
|
|
2900
|
+
var renderNextIcon = function renderNextIcon() {
|
|
2901
|
+
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2902
|
+
iconName: 'CarouselArrow'
|
|
2903
|
+
});
|
|
2904
|
+
};
|
|
2905
|
+
|
|
2906
|
+
return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2907
|
+
onClick: onClickLeftHandler,
|
|
2908
|
+
onKeyDown: onPrevKeyDownHandler,
|
|
2909
|
+
tabIndex: 0,
|
|
2910
|
+
"data-testid": "iconprev"
|
|
2911
|
+
}, renderPrevIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2912
|
+
"data-testid": "iconprevnoavailable"
|
|
2913
|
+
}, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2914
|
+
onClick: onClickRightHandler,
|
|
2915
|
+
onKeyDown: onNextKeyDownHandler,
|
|
2916
|
+
tabIndex: 0,
|
|
2917
|
+
"data-testid": "iconnext"
|
|
2918
|
+
}, renderNextIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2919
|
+
"data-testid": "iconnextnoavailable"
|
|
2920
|
+
}, renderNextIcon()));
|
|
2921
|
+
};
|
|
2922
|
+
|
|
2862
2923
|
var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
|
|
2863
2924
|
var zIndexes = {};
|
|
2864
2925
|
zLevels.forEach(function (name, index) {
|
|
2865
2926
|
zIndexes[name] = index;
|
|
2866
2927
|
});
|
|
2867
2928
|
|
|
2868
|
-
var _templateObject$
|
|
2869
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2870
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
2871
|
-
var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$
|
|
2929
|
+
var _templateObject$k, _templateObject2$6, _templateObject3$2, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
2930
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0.4;\n"])), zIndexes.searchOverlay);
|
|
2931
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--base-color-white);\n height: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n }\n"])), zIndexes.navigation, devices.mobile);
|
|
2932
|
+
var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
|
|
2872
2933
|
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n height: 100px;\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n \n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
|
|
2873
2934
|
var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet);
|
|
2874
2935
|
var LogoContainer = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 140px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &&& .logoImg {\n height: 96px;\n width: 66px;\n }\n\n @media ", " {\n height: 80px;\n\n &&& .logoImg {\n width: 100%;\n height: 64px;\n }\n }\n"])), devices.mobile);
|
|
2875
2936
|
var MenuContainer = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n\n @media ", " {\n flex-direction: row;\n height: 80px;\n justify-content: flex-end;\n }\n"])), devices.mobileAndTablet);
|
|
2876
2937
|
var NavContainer = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 40px;\n margin-top: auto;\n\n @media ", " {\n background-color: var(--base-color-white);\n height: auto;\n margin-top: 0px;\n }\n"])), devices.mobileAndTablet);
|
|
2877
|
-
var
|
|
2938
|
+
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
2939
|
+
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
2878
2940
|
|
|
2879
|
-
var _templateObject$
|
|
2880
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
2941
|
+
var _templateObject$l;
|
|
2942
|
+
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
2881
2943
|
|
|
2882
2944
|
var Logo = function Logo(_ref) {
|
|
2883
2945
|
var _ref$id = _ref.id,
|
|
@@ -2906,11 +2968,11 @@ var Logo = function Logo(_ref) {
|
|
|
2906
2968
|
}))));
|
|
2907
2969
|
};
|
|
2908
2970
|
|
|
2909
|
-
var _templateObject$
|
|
2910
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
2971
|
+
var _templateObject$m;
|
|
2972
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
|
|
2911
2973
|
|
|
2912
|
-
var _templateObject$
|
|
2913
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2974
|
+
var _templateObject$n, _templateObject2$7, _templateObject3$3, _templateObject4$1;
|
|
2975
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
2914
2976
|
var selected = _ref.selected,
|
|
2915
2977
|
colorPrimary = _ref.colorPrimary;
|
|
2916
2978
|
|
|
@@ -2929,8 +2991,8 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$m || (_templateObj
|
|
|
2929
2991
|
var colorPrimary = _ref4.colorPrimary;
|
|
2930
2992
|
return colorPrimary;
|
|
2931
2993
|
});
|
|
2932
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
2933
|
-
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
2994
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
2995
|
+
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n\n & .basket-num {\n color: white;\n font-size: 10px;\n font-family: var(--font-family-navigation);\n }\n"])));
|
|
2934
2996
|
var BasketText = /*#__PURE__*/styled.a(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n color: var(--base-color-black);\n margin-left: 6px;\n text-decoration: none;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
2935
2997
|
|
|
2936
2998
|
var Basket$1 = function Basket(_ref) {
|
|
@@ -2973,8 +3035,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
2973
3035
|
}, text) : ''));
|
|
2974
3036
|
};
|
|
2975
3037
|
|
|
2976
|
-
var _templateObject$
|
|
2977
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3038
|
+
var _templateObject$o, _templateObject2$8;
|
|
3039
|
+
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
2978
3040
|
var selected = _ref.selected,
|
|
2979
3041
|
colorPrimary = _ref.colorPrimary;
|
|
2980
3042
|
|
|
@@ -2990,7 +3052,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObj
|
|
|
2990
3052
|
var colorPrimary = _ref3.colorPrimary;
|
|
2991
3053
|
return colorPrimary;
|
|
2992
3054
|
});
|
|
2993
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
3055
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
2994
3056
|
|
|
2995
3057
|
var Search$1 = function Search(_ref) {
|
|
2996
3058
|
var _ref$selected = _ref.selected,
|
|
@@ -3017,13 +3079,13 @@ var Search$1 = function Search(_ref) {
|
|
|
3017
3079
|
})));
|
|
3018
3080
|
};
|
|
3019
3081
|
|
|
3020
|
-
var _templateObject$
|
|
3021
|
-
var TabContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3022
|
-
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$
|
|
3082
|
+
var _templateObject$p, _templateObject2$9, _templateObject3$4;
|
|
3083
|
+
var TabContainer = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
3084
|
+
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n text-transform: uppercase;\n\n :hover,\n :focus {\n color: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3023
3085
|
var colorPrimary = _ref.colorPrimary;
|
|
3024
3086
|
return colorPrimary;
|
|
3025
3087
|
});
|
|
3026
|
-
var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
3088
|
+
var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border: 1px solid var(--base-color-light-grey);\n border-top-color: var(--base-color-", ");\n display: flex;\n flex-direction: column;\n row-gap: var(--navigation-small-gap);\n padding: var(--navigation-middle-gap);\n position: absolute;\n top: 24px;\n min-width: calc(100% - calc(2 * var(--navigation-middle-gap)));\n max-width: max-content;\n white-space: nowrap;\n z-index: ", ";\n\n ", "\n\n @media ", " {\n padding-left: 0px;\n padding-bottom: 0px;\n row-gap: var(--navigation-large-gap);\n border: 0;\n background-color: none;\n\n ", "\n }\n"])), function (_ref2) {
|
|
3027
3089
|
var colorPrimary = _ref2.colorPrimary;
|
|
3028
3090
|
return colorPrimary;
|
|
3029
3091
|
}, zIndexes.menu, function (props) {
|
|
@@ -3282,16 +3344,16 @@ var NavTop = function NavTop(_ref) {
|
|
|
3282
3344
|
}));
|
|
3283
3345
|
};
|
|
3284
3346
|
|
|
3285
|
-
var _templateObject$
|
|
3286
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3287
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3347
|
+
var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
|
|
3348
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
3349
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.mobileAndTablet, function (props) {
|
|
3288
3350
|
if (props.showMenu) {
|
|
3289
3351
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
3290
3352
|
}
|
|
3291
3353
|
|
|
3292
3354
|
return "display: none;";
|
|
3293
3355
|
});
|
|
3294
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
3356
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color-", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
|
|
3295
3357
|
var colorPrimary = _ref.colorPrimary;
|
|
3296
3358
|
return colorPrimary;
|
|
3297
3359
|
}, function (_ref2) {
|
|
@@ -3300,9 +3362,9 @@ var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateOb
|
|
|
3300
3362
|
}, devices.mobileAndTablet);
|
|
3301
3363
|
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
3302
3364
|
|
|
3303
|
-
var _templateObject$
|
|
3304
|
-
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3305
|
-
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$
|
|
3365
|
+
var _templateObject$r, _templateObject2$b, _templateObject3$6, _templateObject4$3;
|
|
3366
|
+
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
3367
|
+
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 6px;\n border-bottom: 1px solid transparent;\n height: 24px;\n line-height: 24px;\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n text-transform: uppercase;\n cursor: pointer;\n\n ", "\n"])), function (_ref) {
|
|
3306
3368
|
var active = _ref.active,
|
|
3307
3369
|
activeColor = _ref.activeColor;
|
|
3308
3370
|
|
|
@@ -3314,7 +3376,7 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject
|
|
|
3314
3376
|
});
|
|
3315
3377
|
var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled(ControlledDropdownHeaderContainer).attrs({
|
|
3316
3378
|
as: 'a'
|
|
3317
|
-
})(_templateObject3$
|
|
3379
|
+
})(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
3318
3380
|
var IconWrapper$1 = /*#__PURE__*/styled.span(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n"])));
|
|
3319
3381
|
|
|
3320
3382
|
var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
@@ -3561,23 +3623,23 @@ var Tabs = function Tabs(_ref) {
|
|
|
3561
3623
|
}, "MENU"))));
|
|
3562
3624
|
};
|
|
3563
3625
|
|
|
3564
|
-
var _templateObject$
|
|
3565
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3566
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
3567
|
-
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$
|
|
3626
|
+
var _templateObject$s, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$1, _templateObject6$1;
|
|
3627
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100px;\n background-color: var(--base-color-white);\n\n @media ", " {\n column-gap: 12px;\n height: 80px;\n }\n"])), devices.mobile);
|
|
3628
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
3629
|
+
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--base-color-navigation);\n }\n }\n"])));
|
|
3568
3630
|
var InputContainer = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
3569
3631
|
var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
3570
3632
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
3571
3633
|
|
|
3572
|
-
var _templateObject$
|
|
3573
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
3634
|
+
var _templateObject$t, _templateObject2$d;
|
|
3635
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
3574
3636
|
var iconName = _ref.iconName;
|
|
3575
3637
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3576
3638
|
}, function (_ref2) {
|
|
3577
3639
|
var color = _ref2.color;
|
|
3578
3640
|
return color;
|
|
3579
3641
|
});
|
|
3580
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
3642
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
3581
3643
|
|
|
3582
3644
|
var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
|
|
3583
3645
|
|
|
@@ -3774,7 +3836,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
3774
3836
|
urlLink: logoLink,
|
|
3775
3837
|
desktopImage: desktopLogoUrl,
|
|
3776
3838
|
devicesImage: devicesLogoUrl
|
|
3777
|
-
}))), /*#__PURE__*/React__default.createElement(
|
|
3839
|
+
}))), /*#__PURE__*/React__default.createElement(NavContainerGridItem, {
|
|
3778
3840
|
columnStartDesktop: 3,
|
|
3779
3841
|
columnSpanDesktop: 12,
|
|
3780
3842
|
columnStartDevice: 4,
|
|
@@ -3815,18 +3877,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
3815
3877
|
})))));
|
|
3816
3878
|
};
|
|
3817
3879
|
|
|
3818
|
-
var _templateObject$
|
|
3819
|
-
var FooterSection = /*#__PURE__*/styled.section(_templateObject$
|
|
3820
|
-
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3821
|
-
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$
|
|
3880
|
+
var _templateObject$u, _templateObject2$e, _templateObject3$8, _templateObject4$5, _templateObject5$2, _templateObject6$2;
|
|
3881
|
+
var FooterSection = /*#__PURE__*/styled.section(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
3882
|
+
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n --footer-vertical-spacing-sm\n )\n min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2'\n '.'\n 'row3'\n '.'\n 'row4';\n"])));
|
|
3883
|
+
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row1;\n justify-self: center;\n\n @media ", " {\n & {\n justify-self: start;\n grid-area: row2;\n }\n }\n"])), devices.mobile);
|
|
3822
3884
|
var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
3823
3885
|
var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
|
|
3824
3886
|
var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
|
|
3825
3887
|
|
|
3826
|
-
var _templateObject$
|
|
3827
|
-
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$
|
|
3828
|
-
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$
|
|
3829
|
-
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
3888
|
+
var _templateObject$v, _templateObject2$f, _templateObject3$9;
|
|
3889
|
+
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 auto;\n padding: 0;\n list-style: none;\n display: flex;\n gap: var(--footer-items-gap);\n\n @media ", " {\n & {\n margin: 0;\n flex-direction: column;\n }\n }\n"])), devices.mobile);
|
|
3890
|
+
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n text-align: center;\n\n @media ", " {\n & {\n text-align: left;\n }\n }\n"])), devices.mobile);
|
|
3891
|
+
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
|
|
3830
3892
|
|
|
3831
3893
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
3832
3894
|
var _ref$items = _ref.items,
|
|
@@ -3842,10 +3904,10 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
3842
3904
|
}));
|
|
3843
3905
|
};
|
|
3844
3906
|
|
|
3845
|
-
var _templateObject$
|
|
3846
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3847
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$
|
|
3848
|
-
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
3907
|
+
var _templateObject$w, _templateObject2$g, _templateObject3$a, _templateObject4$6, _templateObject5$3, _templateObject6$3, _templateObject7$1, _templateObject8$1;
|
|
3908
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n grid-template-rows: 100px;\n gap: 0;\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content min-content;\n gap: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
3909
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
|
|
3910
|
+
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
3849
3911
|
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
3850
3912
|
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
3851
3913
|
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
@@ -3916,14 +3978,11 @@ var Footer = function Footer(_ref) {
|
|
|
3916
3978
|
}, additionalInfo)))));
|
|
3917
3979
|
};
|
|
3918
3980
|
|
|
3919
|
-
var _templateObject$
|
|
3920
|
-
var AnchorTapbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3921
|
-
var
|
|
3922
|
-
var
|
|
3923
|
-
var
|
|
3924
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
3925
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
3926
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: 32px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref) {
|
|
3981
|
+
var _templateObject$x, _templateObject2$h, _templateObject3$b, _templateObject4$7, _templateObject5$4, _templateObject6$4;
|
|
3982
|
+
var AnchorTapbarWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), zIndexes.anchor);
|
|
3983
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
3984
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
3985
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: 32px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref) {
|
|
3927
3986
|
var tabsOverflow = _ref.tabsOverflow;
|
|
3928
3987
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
3929
3988
|
}, function (_ref2) {
|
|
@@ -3933,31 +3992,13 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject7$2 || (_templateObject7$2
|
|
|
3933
3992
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
3934
3993
|
return tabsOverflow ? 'calc(100% - 50px)' : '100%';
|
|
3935
3994
|
});
|
|
3936
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(
|
|
3937
|
-
var ArrowWrapper = /*#__PURE__*/styled.div(
|
|
3938
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
3939
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref4) {
|
|
3940
|
-
var theme = _ref4.theme;
|
|
3941
|
-
return theme.colors.primaryButtonReverseBg;
|
|
3942
|
-
}, function (_ref5) {
|
|
3943
|
-
var theme = _ref5.theme;
|
|
3944
|
-
return theme.colors.primaryButtonReverseBg;
|
|
3945
|
-
}, function (_ref6) {
|
|
3946
|
-
var theme = _ref6.theme;
|
|
3947
|
-
return theme.colors.primaryButtonReverse;
|
|
3948
|
-
}, function (_ref7) {
|
|
3949
|
-
var theme = _ref7.theme;
|
|
3950
|
-
return theme.colors.primaryButtonReverse;
|
|
3951
|
-
});
|
|
3995
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--base-color-white);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n"])));
|
|
3996
|
+
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n :hover {\n && svg path {\n fill: var(--base-color-primary);\n }\n }\n"])));
|
|
3952
3997
|
|
|
3953
|
-
var _excluded$7 = ["text"]
|
|
3954
|
-
_excluded2 = ["text"],
|
|
3955
|
-
_excluded3 = ["id", "text"];
|
|
3998
|
+
var _excluded$7 = ["id", "text"];
|
|
3956
3999
|
|
|
3957
4000
|
var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
3958
4001
|
var tabs = _ref.tabs,
|
|
3959
|
-
title = _ref.title,
|
|
3960
|
-
links = _ref.links,
|
|
3961
4002
|
onTabClick = _ref.onTabClick,
|
|
3962
4003
|
activeTab = _ref.activeTab;
|
|
3963
4004
|
var tabListRef = useRef(null);
|
|
@@ -3978,8 +4019,6 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
3978
4019
|
canScrollToRight = _useState4[0],
|
|
3979
4020
|
setCanScrollToRight = _useState4[1];
|
|
3980
4021
|
|
|
3981
|
-
var hasTitleOrLinks = title || links;
|
|
3982
|
-
|
|
3983
4022
|
var isSelectedItem = function isSelectedItem(id) {
|
|
3984
4023
|
return id === selectedItem;
|
|
3985
4024
|
};
|
|
@@ -4001,7 +4040,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4001
4040
|
}, [tabListRef]);
|
|
4002
4041
|
useEffect(function () {
|
|
4003
4042
|
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
4004
|
-
var elementGap =
|
|
4043
|
+
var elementGap = 100;
|
|
4005
4044
|
var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
|
|
4006
4045
|
var targetSectionElement = document.getElementById(item.id);
|
|
4007
4046
|
if (!targetSectionElement) return false;
|
|
@@ -4038,18 +4077,10 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4038
4077
|
return function () {
|
|
4039
4078
|
return document.removeEventListener('scroll', scrollTriggerCheck);
|
|
4040
4079
|
};
|
|
4041
|
-
}, [tabs, selectedItem,
|
|
4080
|
+
}, [tabs, selectedItem, tabListRef]);
|
|
4042
4081
|
var tabsColumnStart = tabsOverflow ? !canScrollToLeft ? 2 : 1 : 3;
|
|
4043
4082
|
var tabsColumnSpan = tabsOverflow ? !canScrollToLeft ? 14 : 15 : 13;
|
|
4044
4083
|
|
|
4045
|
-
var _ref3 = (links == null ? void 0 : links[0]) || {},
|
|
4046
|
-
primaryButtonText = _ref3.text,
|
|
4047
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
|
|
4048
|
-
|
|
4049
|
-
var _ref4 = (links == null ? void 0 : links[1]) || {},
|
|
4050
|
-
secondaryButtonText = _ref4.text,
|
|
4051
|
-
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref4, _excluded2);
|
|
4052
|
-
|
|
4053
4084
|
var scrollToRight = function scrollToRight() {
|
|
4054
4085
|
if (tabListRef.current) {
|
|
4055
4086
|
var scroll = tabListRef.current.scrollLeft;
|
|
@@ -4067,34 +4098,19 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4067
4098
|
};
|
|
4068
4099
|
|
|
4069
4100
|
var onTabsScroll = function onTabsScroll() {
|
|
4070
|
-
var
|
|
4071
|
-
|
|
4072
|
-
scrollLeft =
|
|
4073
|
-
|
|
4074
|
-
clientWidth =
|
|
4075
|
-
|
|
4076
|
-
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;
|
|
4077
4108
|
|
|
4078
4109
|
setCanScrollToLeft(scrollLeft > 0);
|
|
4079
4110
|
setCanScrollToRight(scrollLeft + clientWidth < scrollWidth);
|
|
4080
4111
|
};
|
|
4081
4112
|
|
|
4082
|
-
return /*#__PURE__*/React__default.createElement(AnchorTapbarWrapper, null,
|
|
4083
|
-
columnStartDesktop: 2,
|
|
4084
|
-
columnSpanDesktop: 9,
|
|
4085
|
-
columnStartDevice: 2,
|
|
4086
|
-
columnSpanDevice: 12
|
|
4087
|
-
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4088
|
-
"data-testid": "anchor-title"
|
|
4089
|
-
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4090
|
-
level: 5
|
|
4091
|
-
}, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
|
|
4092
|
-
columnStartDesktop: 12,
|
|
4093
|
-
columnSpanDesktop: 5,
|
|
4094
|
-
columnStartDevice: 2,
|
|
4095
|
-
columnSpanDevice: 12,
|
|
4096
|
-
"data-testid": "anchor-ctas"
|
|
4097
|
-
}, /*#__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, {
|
|
4098
4114
|
columnStartDesktop: tabsColumnStart,
|
|
4099
4115
|
columnSpanDesktop: tabsColumnSpan,
|
|
4100
4116
|
columnStartDevice: 2,
|
|
@@ -4105,10 +4121,10 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4105
4121
|
ref: tabListRef,
|
|
4106
4122
|
tabsOverflow: tabsOverflow,
|
|
4107
4123
|
onScroll: onTabsScroll
|
|
4108
|
-
}, tabs.map(function (
|
|
4109
|
-
var id =
|
|
4110
|
-
text =
|
|
4111
|
-
rest = _objectWithoutPropertiesLoose(
|
|
4124
|
+
}, tabs.map(function (_ref4) {
|
|
4125
|
+
var id = _ref4.id,
|
|
4126
|
+
text = _ref4.text,
|
|
4127
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$7);
|
|
4112
4128
|
|
|
4113
4129
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
4114
4130
|
key: id
|
|
@@ -4129,7 +4145,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4129
4145
|
onClick: scrollToRight
|
|
4130
4146
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4131
4147
|
iconName: "Arrow"
|
|
4132
|
-
})) : null) : null)))
|
|
4148
|
+
})) : null) : null))));
|
|
4133
4149
|
};
|
|
4134
4150
|
|
|
4135
4151
|
var CarouselType;
|
|
@@ -4140,8 +4156,8 @@ var CarouselType;
|
|
|
4140
4156
|
CarouselType["LargeCard"] = "LargeCard";
|
|
4141
4157
|
})(CarouselType || (CarouselType = {}));
|
|
4142
4158
|
|
|
4143
|
-
var _templateObject$
|
|
4144
|
-
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4159
|
+
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8;
|
|
4160
|
+
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (_ref) {
|
|
4145
4161
|
var type = _ref.type,
|
|
4146
4162
|
imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
4147
4163
|
|
|
@@ -4173,8 +4189,8 @@ var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObj
|
|
|
4173
4189
|
return "\n &&& {\n .swiper-slide > div{\n height: calc(" + imagesHeightDevice + "px + var(--line-height-body-2) + 12px);\n }\n }";
|
|
4174
4190
|
}
|
|
4175
4191
|
});
|
|
4176
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4177
|
-
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4192
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
4193
|
+
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n user-select: text;\n\n h4 {\n padding: 0;\n margin: 0;\n }\n"])));
|
|
4178
4194
|
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
4179
4195
|
|
|
4180
4196
|
var Carousel = function Carousel(_ref) {
|
|
@@ -4282,77 +4298,74 @@ var Carousel = function Carousel(_ref) {
|
|
|
4282
4298
|
})))));
|
|
4283
4299
|
};
|
|
4284
4300
|
|
|
4285
|
-
var _templateObject$
|
|
4286
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
4287
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4301
|
+
var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1;
|
|
4302
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
4303
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n h4 {\n margin: 0;\n padding: 0;\n }\n\n h5 {\n display: none;\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: 40px;\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: var(--line-height-altHeader-5);\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n }\n }\n }\n"])), devices.tablet, function (_ref) {
|
|
4288
4304
|
var theme = _ref.theme;
|
|
4289
|
-
return theme.fonts.mobile.sizes.altHeaders[
|
|
4305
|
+
return theme.fonts.mobile.sizes.altHeaders[5];
|
|
4290
4306
|
}, function (_ref2) {
|
|
4291
4307
|
var theme = _ref2.theme;
|
|
4292
|
-
return theme.fonts.mobile.weights.altHeaders[
|
|
4308
|
+
return theme.fonts.mobile.weights.altHeaders[5];
|
|
4293
4309
|
}, function (_ref3) {
|
|
4294
4310
|
var theme = _ref3.theme;
|
|
4295
|
-
return theme.fonts.mobile.letterSpacing.altHeaders[
|
|
4296
|
-
}, function (_ref4) {
|
|
4297
|
-
var theme = _ref4.theme;
|
|
4298
|
-
return theme.fonts.mobile.lineHeights.altHeaders[4];
|
|
4311
|
+
return theme.fonts.mobile.letterSpacing.altHeaders[5];
|
|
4299
4312
|
}, devices.mobile);
|
|
4300
|
-
var InfoWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4301
|
-
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.mobile);
|
|
4302
|
-
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (
|
|
4303
|
-
var theme =
|
|
4313
|
+
var InfoWrapper = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4314
|
+
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4315
|
+
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref4) {
|
|
4316
|
+
var theme = _ref4.theme;
|
|
4304
4317
|
return theme.fonts.mobile.sizes.headers[3];
|
|
4318
|
+
}, function (_ref5) {
|
|
4319
|
+
var theme = _ref5.theme;
|
|
4320
|
+
return theme.fonts.mobile.weights.headers[3];
|
|
4305
4321
|
}, function (_ref6) {
|
|
4306
4322
|
var theme = _ref6.theme;
|
|
4307
|
-
return theme.fonts.mobile.
|
|
4323
|
+
return theme.fonts.mobile.letterSpacing.headers[3];
|
|
4308
4324
|
}, function (_ref7) {
|
|
4309
4325
|
var theme = _ref7.theme;
|
|
4310
|
-
return theme.fonts.mobile.
|
|
4326
|
+
return theme.fonts.mobile.lineHeights.headers[3];
|
|
4311
4327
|
}, function (_ref8) {
|
|
4312
4328
|
var theme = _ref8.theme;
|
|
4313
|
-
return theme.fonts.mobile.
|
|
4329
|
+
return theme.fonts.mobile.sizes.subtitles[2];
|
|
4314
4330
|
}, function (_ref9) {
|
|
4315
4331
|
var theme = _ref9.theme;
|
|
4316
|
-
return theme.fonts.mobile.
|
|
4332
|
+
return theme.fonts.mobile.weights.subtitles[2];
|
|
4317
4333
|
}, function (_ref10) {
|
|
4318
4334
|
var theme = _ref10.theme;
|
|
4319
|
-
return theme.fonts.mobile.
|
|
4335
|
+
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4320
4336
|
}, function (_ref11) {
|
|
4321
4337
|
var theme = _ref11.theme;
|
|
4322
|
-
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4323
|
-
}, function (_ref12) {
|
|
4324
|
-
var theme = _ref12.theme;
|
|
4325
4338
|
return theme.fonts.mobile.lineHeights.subtitles[2];
|
|
4326
4339
|
});
|
|
4327
|
-
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n h6 {\n padding: 0;\n margin: 0 0 4px 0;\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n > div {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n h6 {\n margin: 0 0 8px 0;\n }\n }\n }\n"])), devices.tablet, function (
|
|
4328
|
-
var theme =
|
|
4340
|
+
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n h6 {\n padding: 0;\n margin: 0 0 4px 0;\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n > div {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n h6 {\n margin: 0 0 8px 0;\n }\n }\n }\n"])), devices.tablet, function (_ref12) {
|
|
4341
|
+
var theme = _ref12.theme;
|
|
4329
4342
|
return theme.fonts.mobile.sizes.subtitles[2];
|
|
4343
|
+
}, function (_ref13) {
|
|
4344
|
+
var theme = _ref13.theme;
|
|
4345
|
+
return theme.fonts.mobile.weights.subtitles[2];
|
|
4330
4346
|
}, function (_ref14) {
|
|
4331
4347
|
var theme = _ref14.theme;
|
|
4332
|
-
return theme.fonts.mobile.
|
|
4348
|
+
return theme.fonts.mobile.letterSpacing.subtitles[2];
|
|
4333
4349
|
}, function (_ref15) {
|
|
4334
4350
|
var theme = _ref15.theme;
|
|
4335
|
-
return theme.fonts.mobile.
|
|
4351
|
+
return theme.fonts.mobile.lineHeights.subtitles[2];
|
|
4336
4352
|
}, function (_ref16) {
|
|
4337
4353
|
var theme = _ref16.theme;
|
|
4338
|
-
return theme.fonts.mobile.
|
|
4354
|
+
return theme.fonts.mobile.sizes.body[1];
|
|
4339
4355
|
}, function (_ref17) {
|
|
4340
4356
|
var theme = _ref17.theme;
|
|
4341
|
-
return theme.fonts.mobile.
|
|
4357
|
+
return theme.fonts.mobile.weights.body[1];
|
|
4342
4358
|
}, function (_ref18) {
|
|
4343
4359
|
var theme = _ref18.theme;
|
|
4344
|
-
return theme.fonts.mobile.
|
|
4360
|
+
return theme.fonts.mobile.letterSpacing.body[1];
|
|
4345
4361
|
}, function (_ref19) {
|
|
4346
4362
|
var theme = _ref19.theme;
|
|
4347
|
-
return theme.fonts.mobile.letterSpacing.body[1];
|
|
4348
|
-
}, function (_ref20) {
|
|
4349
|
-
var theme = _ref20.theme;
|
|
4350
4363
|
return theme.fonts.mobile.lineHeights.body[1];
|
|
4351
4364
|
}, devices.mobile);
|
|
4352
|
-
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
4353
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$
|
|
4354
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
4355
|
-
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
|
|
4365
|
+
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4366
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swiper-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4367
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
4368
|
+
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4356
4369
|
|
|
4357
4370
|
var _excluded$8 = ["text"];
|
|
4358
4371
|
|
|
@@ -4413,6 +4426,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4413
4426
|
}
|
|
4414
4427
|
};
|
|
4415
4428
|
|
|
4429
|
+
var hasMultipleImages = images.length > 1;
|
|
4416
4430
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid, {
|
|
4417
4431
|
onClick: function onClick(e) {
|
|
4418
4432
|
return e.stopPropagation();
|
|
@@ -4423,7 +4437,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4423
4437
|
level: 4
|
|
4424
4438
|
}, carouselTitle), /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4425
4439
|
level: 5
|
|
4426
|
-
}, carouselTitle)), /*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4440
|
+
}, carouselTitle)), hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4427
4441
|
onClickNext: onNext,
|
|
4428
4442
|
onClickPrev: onPrev
|
|
4429
4443
|
})), /*#__PURE__*/React__default.createElement(InfoWrapper, {
|
|
@@ -4440,14 +4454,14 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
4440
4454
|
level: 1
|
|
4441
4455
|
}, description)), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
|
|
4442
4456
|
"data-testid": "carousel-wrapper"
|
|
4443
|
-
}, /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4457
|
+
}, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
4444
4458
|
"data-testid": "rotator-buttons"
|
|
4445
4459
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
4446
4460
|
onClickNext: onNext,
|
|
4447
4461
|
onClickPrev: onPrev
|
|
4448
4462
|
})), /*#__PURE__*/React__default.createElement(Swiper, {
|
|
4449
4463
|
slidesPerView: "auto",
|
|
4450
|
-
loop:
|
|
4464
|
+
loop: hasMultipleImages,
|
|
4451
4465
|
loopedSlides: images.length,
|
|
4452
4466
|
onSwiper: onSwiper
|
|
4453
4467
|
}, images.map(function (image) {
|
|
@@ -4511,12 +4525,72 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4511
4525
|
})));
|
|
4512
4526
|
};
|
|
4513
4527
|
|
|
4514
|
-
var _templateObject$
|
|
4515
|
-
var
|
|
4516
|
-
var
|
|
4517
|
-
|
|
4518
|
-
|
|
4519
|
-
var
|
|
4528
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6, _templateObject6$6;
|
|
4529
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
4530
|
+
var sticky = _ref.sticky;
|
|
4531
|
+
return sticky ? 'sticky' : 'initial';
|
|
4532
|
+
}, zIndexes.anchor);
|
|
4533
|
+
var CTAGridWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
4534
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n height: 50px;\n }\n }\n"])), devices.mobile);
|
|
4535
|
+
var ButtonsDesktopGridItem = /*#__PURE__*/styled(GridItem)(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4536
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
4537
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref2) {
|
|
4538
|
+
var theme = _ref2.theme;
|
|
4539
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4540
|
+
}, function (_ref3) {
|
|
4541
|
+
var theme = _ref3.theme;
|
|
4542
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4543
|
+
}, function (_ref4) {
|
|
4544
|
+
var theme = _ref4.theme;
|
|
4545
|
+
return theme.colors.primaryButtonReverse;
|
|
4546
|
+
}, function (_ref5) {
|
|
4547
|
+
var theme = _ref5.theme;
|
|
4548
|
+
return theme.colors.primaryButtonReverse;
|
|
4549
|
+
});
|
|
4550
|
+
|
|
4551
|
+
var _excluded$b = ["text"],
|
|
4552
|
+
_excluded2 = ["text"];
|
|
4553
|
+
|
|
4554
|
+
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
4555
|
+
var title = _ref.title,
|
|
4556
|
+
links = _ref.links,
|
|
4557
|
+
_ref$sticky = _ref.sticky,
|
|
4558
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky;
|
|
4559
|
+
|
|
4560
|
+
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
4561
|
+
primaryButtonText = _ref2.text,
|
|
4562
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
|
|
4563
|
+
|
|
4564
|
+
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
4565
|
+
secondaryButtonText = _ref3.text,
|
|
4566
|
+
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
4567
|
+
|
|
4568
|
+
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
4569
|
+
sticky: sticky
|
|
4570
|
+
}, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(GridItem, {
|
|
4571
|
+
columnStartDesktop: 2,
|
|
4572
|
+
columnSpanDesktop: 9,
|
|
4573
|
+
columnStartDevice: 2,
|
|
4574
|
+
columnSpanDevice: 12
|
|
4575
|
+
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4576
|
+
"data-testid": "anchor-title"
|
|
4577
|
+
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4578
|
+
level: 5
|
|
4579
|
+
}, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
|
|
4580
|
+
columnStartDesktop: 12,
|
|
4581
|
+
columnSpanDesktop: 5,
|
|
4582
|
+
columnStartDevice: 2,
|
|
4583
|
+
columnSpanDevice: 12,
|
|
4584
|
+
"data-testid": "anchor-ctas"
|
|
4585
|
+
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : null), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : null);
|
|
4586
|
+
};
|
|
4587
|
+
|
|
4588
|
+
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
|
|
4589
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4590
|
+
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
4591
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
|
|
4592
|
+
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && a {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 28px 20px;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
4593
|
+
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
|
|
4520
4594
|
|
|
4521
4595
|
var Accordion = function Accordion(_ref) {
|
|
4522
4596
|
var _ref$title = _ref.title,
|
|
@@ -4558,8 +4632,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
4558
4632
|
}, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
4559
4633
|
};
|
|
4560
4634
|
|
|
4561
|
-
var _templateObject$
|
|
4562
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4635
|
+
var _templateObject$C;
|
|
4636
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4563
4637
|
|
|
4564
4638
|
var Accordions = function Accordions(_ref) {
|
|
4565
4639
|
var _ref$items = _ref.items,
|
|
@@ -4578,25 +4652,25 @@ var Accordions = function Accordions(_ref) {
|
|
|
4578
4652
|
}));
|
|
4579
4653
|
};
|
|
4580
4654
|
|
|
4581
|
-
var _templateObject$
|
|
4655
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$3, _templateObject8$3, _templateObject9$2;
|
|
4582
4656
|
var LENGTH_LARGE_TEXT = 28;
|
|
4583
4657
|
var LENGTH_SMALL_TEXT = 19;
|
|
4584
4658
|
var LENGTH_TEXT_TABLET = 10;
|
|
4585
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4586
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
4587
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
4588
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
4659
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
4660
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: var(--base-color-primary);\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), zIndexes.contentOverlay);
|
|
4661
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
4662
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref) {
|
|
4589
4663
|
var fullWidth = _ref.fullWidth;
|
|
4590
4664
|
return fullWidth ? '0' : '20px';
|
|
4591
4665
|
}, function (_ref2) {
|
|
4592
4666
|
var fullWidth = _ref2.fullWidth;
|
|
4593
4667
|
return fullWidth ? '0' : '20px';
|
|
4594
4668
|
});
|
|
4595
|
-
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$
|
|
4596
|
-
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$
|
|
4597
|
-
var TextContainer = /*#__PURE__*/styled.div(_templateObject7$
|
|
4598
|
-
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$
|
|
4599
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
4669
|
+
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4670
|
+
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
4671
|
+
var TextContainer = /*#__PURE__*/styled.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
4672
|
+
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4673
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n opacity: 0;\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref3) {
|
|
4600
4674
|
var size = _ref3.size,
|
|
4601
4675
|
primaryButtonTextLength = _ref3.primaryButtonTextLength,
|
|
4602
4676
|
tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
|
|
@@ -4619,13 +4693,13 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templat
|
|
|
4619
4693
|
return '';
|
|
4620
4694
|
});
|
|
4621
4695
|
|
|
4622
|
-
var _templateObject$
|
|
4623
|
-
var ProgressView = /*#__PURE__*/styled.div(_templateObject$
|
|
4624
|
-
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$
|
|
4696
|
+
var _templateObject$E, _templateObject2$n, _templateObject3$h;
|
|
4697
|
+
var ProgressView = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 10px;\n width: 100%;\n display: flex;\n flex-direction: row;\n"])));
|
|
4698
|
+
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-progress);\n flex: ", ";\n"])), function (_ref) {
|
|
4625
4699
|
var progress = _ref.progress;
|
|
4626
4700
|
return progress;
|
|
4627
4701
|
});
|
|
4628
|
-
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$
|
|
4702
|
+
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n opacity: 0.5;\n flex: ", ";\n"])), function (_ref2) {
|
|
4629
4703
|
var progress = _ref2.progress;
|
|
4630
4704
|
return progress;
|
|
4631
4705
|
});
|
|
@@ -4642,7 +4716,7 @@ var Progress = function Progress(_ref) {
|
|
|
4642
4716
|
}));
|
|
4643
4717
|
};
|
|
4644
4718
|
|
|
4645
|
-
var _excluded$
|
|
4719
|
+
var _excluded$c = ["text"],
|
|
4646
4720
|
_excluded2$1 = ["text"];
|
|
4647
4721
|
var LENGTH_LARGE_TEXT$1 = 28;
|
|
4648
4722
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
@@ -4681,7 +4755,7 @@ var Card = function Card(_ref) {
|
|
|
4681
4755
|
var _ref2 = primaryButton || {},
|
|
4682
4756
|
_ref2$text = _ref2.text,
|
|
4683
4757
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
4684
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
4758
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
|
|
4685
4759
|
|
|
4686
4760
|
var primaryButtonTextTruncate = size === 'small' ? truncate(primaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(primaryButtonText, LENGTH_LARGE_TEXT$1);
|
|
4687
4761
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -4751,9 +4825,9 @@ var Card = function Card(_ref) {
|
|
|
4751
4825
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
4752
4826
|
};
|
|
4753
4827
|
|
|
4754
|
-
var _templateObject$
|
|
4755
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
4756
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
4828
|
+
var _templateObject$F, _templateObject2$o;
|
|
4829
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n {\n grid-row-gap: var(--cards-spacing-stack);\n }\n }\n"])), devices.mobile);
|
|
4830
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 1 / span 14;\n }\n }\n"])), devices.mobile);
|
|
4757
4831
|
|
|
4758
4832
|
var Cards = function Cards(_ref) {
|
|
4759
4833
|
var cards = _ref.cards,
|
|
@@ -4790,21 +4864,21 @@ var Cards = function Cards(_ref) {
|
|
|
4790
4864
|
}));
|
|
4791
4865
|
};
|
|
4792
4866
|
|
|
4793
|
-
var _templateObject$
|
|
4794
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
4867
|
+
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$9;
|
|
4868
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
4795
4869
|
var imageToLeft = _ref.imageToLeft;
|
|
4796
4870
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
4797
4871
|
}, devices.mobile);
|
|
4798
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4872
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
4799
4873
|
var imageToLeft = _ref2.imageToLeft;
|
|
4800
4874
|
return imageToLeft ? 'left' : 'right';
|
|
4801
4875
|
}, devices.mobile);
|
|
4802
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4876
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
4803
4877
|
var imageToLeft = _ref3.imageToLeft;
|
|
4804
4878
|
return imageToLeft ? 'right' : 'left';
|
|
4805
4879
|
}, devices.mobile);
|
|
4806
|
-
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$
|
|
4807
|
-
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$
|
|
4880
|
+
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4881
|
+
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
4808
4882
|
|
|
4809
4883
|
var Editorial = function Editorial(_ref) {
|
|
4810
4884
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -4835,19 +4909,19 @@ var Editorial = function Editorial(_ref) {
|
|
|
4835
4909
|
})))));
|
|
4836
4910
|
};
|
|
4837
4911
|
|
|
4838
|
-
var _templateObject$
|
|
4839
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4912
|
+
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$4;
|
|
4913
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
4840
4914
|
var theme = _ref.theme;
|
|
4841
4915
|
return theme.colors.primary;
|
|
4842
4916
|
}, devices.mobile);
|
|
4843
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4844
|
-
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
4845
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
4846
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
4847
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
4848
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$
|
|
4917
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
4918
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4919
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), devices.mobile);
|
|
4920
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
4921
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4922
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
4849
4923
|
|
|
4850
|
-
var _excluded$
|
|
4924
|
+
var _excluded$d = ["text"];
|
|
4851
4925
|
|
|
4852
4926
|
var PageHeading = function PageHeading(_ref) {
|
|
4853
4927
|
var title = _ref.title,
|
|
@@ -4859,7 +4933,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
4859
4933
|
|
|
4860
4934
|
var _ref2 = link || {},
|
|
4861
4935
|
linkText = _ref2.text,
|
|
4862
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
4936
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
4863
4937
|
|
|
4864
4938
|
var truncatedText = text == null ? void 0 : text.substring(0, 250);
|
|
4865
4939
|
var truncatedTitle = title.substring(0, 40);
|
|
@@ -4871,18 +4945,20 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
4871
4945
|
level: 2
|
|
4872
4946
|
}, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
|
|
4873
4947
|
"data-testid": "page-heading-text"
|
|
4874
|
-
},
|
|
4948
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4949
|
+
level: 6
|
|
4950
|
+
}, truncatedText)) : null, sponsor ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
|
|
4875
4951
|
"data-testid": "page-heading-sponsor"
|
|
4876
4952
|
}, /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
|
|
4877
4953
|
"data-testid": "page-heading-link"
|
|
4878
4954
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
|
|
4879
4955
|
};
|
|
4880
4956
|
|
|
4881
|
-
var _excluded$
|
|
4957
|
+
var _excluded$e = ["link"];
|
|
4882
4958
|
|
|
4883
4959
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
4884
4960
|
var link = _ref.link,
|
|
4885
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
4961
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
4886
4962
|
|
|
4887
4963
|
var coreLink = link && _extends({}, link, {
|
|
4888
4964
|
color: Colors.White,
|
|
@@ -4896,11 +4972,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
4896
4972
|
})));
|
|
4897
4973
|
};
|
|
4898
4974
|
|
|
4899
|
-
var _excluded$
|
|
4975
|
+
var _excluded$f = ["link"];
|
|
4900
4976
|
|
|
4901
4977
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
4902
4978
|
var link = _ref.link,
|
|
4903
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
4979
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
|
4904
4980
|
|
|
4905
4981
|
var cinemaLink = link && _extends({}, link, {
|
|
4906
4982
|
color: Colors.Black,
|
|
@@ -4914,8 +4990,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4914
4990
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
4915
4991
|
};
|
|
4916
4992
|
|
|
4917
|
-
var _templateObject$
|
|
4918
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4993
|
+
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$5;
|
|
4994
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n background-image: url('", "');\n background-repeat: no-repeat;\n background-size: cover;\n position: relative;\n display: flex;\n align-items: center;\n\n ::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--base-color-black);\n filter: opacity(40%);\n z-index: ", ";\n }\n\n @media ", " {\n & {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n background-image: url('", "');\n background-position: center;\n display: flex;\n align-items: start;\n }\n }\n"])), function (_ref) {
|
|
4919
4995
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
4920
4996
|
return bgUrlDesktop;
|
|
4921
4997
|
}, zIndexes.content, devices.mobile, function (_ref2) {
|
|
@@ -4923,14 +4999,14 @@ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObjec
|
|
|
4923
4999
|
bgUrlDevice = _ref2.bgUrlDevice;
|
|
4924
5000
|
return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
|
|
4925
5001
|
});
|
|
4926
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4927
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4928
|
-
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
4929
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
4930
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$
|
|
4931
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
5002
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . . logo logo logo logo . . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . . logo logo logo logo logo logo . . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. . . . . logo logo logo logo . . . . .'\n '. text text text text text text text text text text text text .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5003
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.contentOverlay, devices.mobileAndTablet);
|
|
5004
|
+
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5005
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-5);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5006
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
5007
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
4932
5008
|
|
|
4933
|
-
var _excluded$
|
|
5009
|
+
var _excluded$g = ["text"];
|
|
4934
5010
|
|
|
4935
5011
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
4936
5012
|
var children = _ref.children,
|
|
@@ -4945,7 +5021,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
4945
5021
|
|
|
4946
5022
|
var _ref2 = link || {},
|
|
4947
5023
|
linkText = _ref2.text,
|
|
4948
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
5024
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
|
|
4949
5025
|
|
|
4950
5026
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
4951
5027
|
bgUrlDesktop: bgUrlDesktop,
|
|
@@ -4972,11 +5048,11 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
4972
5048
|
}, "Scroll Down")) : null);
|
|
4973
5049
|
};
|
|
4974
5050
|
|
|
4975
|
-
var _excluded$
|
|
5051
|
+
var _excluded$h = ["link"];
|
|
4976
5052
|
|
|
4977
5053
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
4978
5054
|
var link = _ref.link,
|
|
4979
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
5055
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
4980
5056
|
|
|
4981
5057
|
var streamLink = link && _extends({}, link, {
|
|
4982
5058
|
color: Colors.Black,
|
|
@@ -4990,67 +5066,61 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
4990
5066
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
|
|
4991
5067
|
};
|
|
4992
5068
|
|
|
4993
|
-
var _templateObject$
|
|
4994
|
-
var
|
|
4995
|
-
var
|
|
4996
|
-
|
|
4997
|
-
var
|
|
4998
|
-
var role = _ref.role,
|
|
4999
|
-
name = _ref.name,
|
|
5000
|
-
link = _ref.link,
|
|
5001
|
-
dataROH = _ref.dataROH;
|
|
5002
|
-
return /*#__PURE__*/React__default.createElement("span", {
|
|
5003
|
-
"data-roh": dataROH
|
|
5004
|
-
}, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
5005
|
-
title: "role"
|
|
5006
|
-
}, role), /*#__PURE__*/React__default.createElement(NameWrapper, null, link ? /*#__PURE__*/React__default.createElement("a", {
|
|
5007
|
-
href: link,
|
|
5008
|
-
title: name
|
|
5009
|
-
}, name) : name));
|
|
5010
|
-
};
|
|
5011
|
-
|
|
5012
|
-
var _templateObject$I;
|
|
5013
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
|
|
5069
|
+
var _templateObject$J, _templateObject2$s, _templateObject3$l, _templateObject4$g;
|
|
5070
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
|
|
5071
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
5072
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n\n :not(:last-child):after {\n content: ',';\n margin-right: 4px;\n }\n"])));
|
|
5073
|
+
var PersonText = /*#__PURE__*/styled.span(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n :not(:last-child):after {\n content: ',';\n margin-right: 4px;\n }\n"])));
|
|
5014
5074
|
|
|
5015
5075
|
var PeopleListing = function PeopleListing(_ref) {
|
|
5016
|
-
var
|
|
5017
|
-
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null,
|
|
5076
|
+
var roles = _ref.roles;
|
|
5077
|
+
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.map(function (role, index) {
|
|
5018
5078
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
5019
|
-
key:
|
|
5079
|
+
key: role.name + "-" + index,
|
|
5020
5080
|
columnStartDesktop: index % 4 * 3 + 3,
|
|
5021
5081
|
columnSpanDesktop: 3,
|
|
5022
5082
|
columnStartDevice: index % 2 * 6 + 2,
|
|
5023
5083
|
columnSpanDevice: 6
|
|
5024
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5025
|
-
|
|
5026
|
-
|
|
5027
|
-
|
|
5028
|
-
|
|
5029
|
-
}))
|
|
5084
|
+
}, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
5085
|
+
title: "role",
|
|
5086
|
+
"data-roh": role.dataROH
|
|
5087
|
+
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
5088
|
+
level: 1
|
|
5089
|
+
}, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
5090
|
+
level: 1,
|
|
5091
|
+
tag: "p"
|
|
5092
|
+
}, role.people.map(function (person, personIndex) {
|
|
5093
|
+
return person.link ? /*#__PURE__*/React__default.createElement(PersonLink, {
|
|
5094
|
+
key: "" + person.name + personIndex,
|
|
5095
|
+
href: person.link
|
|
5096
|
+
}, person.name) : /*#__PURE__*/React__default.createElement(PersonText, {
|
|
5097
|
+
key: "" + person.name + personIndex
|
|
5098
|
+
}, person.name);
|
|
5099
|
+
})));
|
|
5030
5100
|
}));
|
|
5031
5101
|
};
|
|
5032
5102
|
|
|
5033
|
-
var _templateObject$
|
|
5103
|
+
var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject5$c, _templateObject6$a, _templateObject7$6;
|
|
5034
5104
|
var LENGTH_TEXT = 28;
|
|
5035
5105
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5036
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
5106
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
5037
5107
|
var imageToLeft = _ref.imageToLeft;
|
|
5038
5108
|
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'";
|
|
5039
5109
|
}, devices.tablet, function (_ref2) {
|
|
5040
5110
|
var imageToLeft = _ref2.imageToLeft;
|
|
5041
5111
|
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'";
|
|
5042
5112
|
}, devices.mobile);
|
|
5043
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5113
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref3) {
|
|
5044
5114
|
var imageToLeft = _ref3.imageToLeft;
|
|
5045
5115
|
return imageToLeft ? 'left' : 'right';
|
|
5046
5116
|
}, devices.mobile);
|
|
5047
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
5117
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref4) {
|
|
5048
5118
|
var imageToLeft = _ref4.imageToLeft;
|
|
5049
5119
|
return imageToLeft ? 'right' : 'left';
|
|
5050
5120
|
}, devices.mobile);
|
|
5051
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
5052
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$
|
|
5053
|
-
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$
|
|
5121
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$h || (_templateObject4$h = /*#__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);
|
|
5122
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
5123
|
+
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
5054
5124
|
var theme = _ref5.theme;
|
|
5055
5125
|
return theme.colors.black;
|
|
5056
5126
|
}, function (_ref6) {
|
|
@@ -5060,7 +5130,7 @@ var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$9 || (_templat
|
|
|
5060
5130
|
var theme = _ref7.theme;
|
|
5061
5131
|
return theme.colors.primary;
|
|
5062
5132
|
});
|
|
5063
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$
|
|
5133
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref8) {
|
|
5064
5134
|
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
5065
5135
|
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
5066
5136
|
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
@@ -5086,7 +5156,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
|
|
|
5086
5156
|
return '';
|
|
5087
5157
|
});
|
|
5088
5158
|
|
|
5089
|
-
var _excluded$
|
|
5159
|
+
var _excluded$i = ["text"],
|
|
5090
5160
|
_excluded2$2 = ["text"];
|
|
5091
5161
|
var LENGTH_TEXT$1 = 28;
|
|
5092
5162
|
|
|
@@ -5113,7 +5183,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
5113
5183
|
var _ref2 = primaryButton || {},
|
|
5114
5184
|
_ref2$text = _ref2.text,
|
|
5115
5185
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
5116
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
5186
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
|
|
5117
5187
|
|
|
5118
5188
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$1);
|
|
5119
5189
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -5147,8 +5217,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
5147
5217
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
5148
5218
|
};
|
|
5149
5219
|
|
|
5150
|
-
var _templateObject$
|
|
5151
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5220
|
+
var _templateObject$L;
|
|
5221
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
5152
5222
|
|
|
5153
5223
|
var SectionTitle = function SectionTitle(_ref) {
|
|
5154
5224
|
var title = _ref.title,
|
|
@@ -5174,8 +5244,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
5174
5244
|
}, description))));
|
|
5175
5245
|
};
|
|
5176
5246
|
|
|
5177
|
-
var _templateObject$
|
|
5178
|
-
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5247
|
+
var _templateObject$M;
|
|
5248
|
+
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin-left: 20px;\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 20px;\n }\n\n & li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n"])));
|
|
5179
5249
|
|
|
5180
5250
|
var TextOnly = function TextOnly(_ref) {
|
|
5181
5251
|
var _ref$text = _ref.text,
|
|
@@ -5200,8 +5270,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
5200
5270
|
})));
|
|
5201
5271
|
};
|
|
5202
5272
|
|
|
5203
|
-
var _templateObject$
|
|
5204
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
5273
|
+
var _templateObject$N, _templateObject2$u;
|
|
5274
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
|
|
5205
5275
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
5206
5276
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
5207
5277
|
return aspectRatio;
|
|
@@ -5211,7 +5281,7 @@ var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M
|
|
|
5211
5281
|
height = _ref2.height;
|
|
5212
5282
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
5213
5283
|
});
|
|
5214
|
-
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5284
|
+
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
5215
5285
|
|
|
5216
5286
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
5217
5287
|
var caption = _ref.caption,
|
|
@@ -5249,8 +5319,8 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
5249
5319
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
5250
5320
|
};
|
|
5251
5321
|
|
|
5252
|
-
var _templateObject$
|
|
5253
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
5322
|
+
var _templateObject$O;
|
|
5323
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
5254
5324
|
var theme = _ref.theme;
|
|
5255
5325
|
return theme.colors.primary;
|
|
5256
5326
|
}, function (_ref2) {
|
|
@@ -6126,7 +6196,13 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$N || (_templat
|
|
|
6126
6196
|
}, function (_ref292) {
|
|
6127
6197
|
var theme = _ref292.theme;
|
|
6128
6198
|
return theme.grid.tablet.margin;
|
|
6199
|
+
}, function (_ref293) {
|
|
6200
|
+
var theme = _ref293.theme;
|
|
6201
|
+
return theme.spacing[10];
|
|
6202
|
+
}, function (_ref294) {
|
|
6203
|
+
var theme = _ref294.theme;
|
|
6204
|
+
return theme.spacing[6];
|
|
6129
6205
|
}, devices.desktop, devices.largeDesktop);
|
|
6130
6206
|
|
|
6131
|
-
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, TypeTags, devices };
|
|
6207
|
+
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
|
|
6132
6208
|
//# sourceMappingURL=chord.esm.js.map
|