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