@royaloperahouse/chord 0.5.10 → 0.7.1
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 +426 -341
- 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 +426 -343
- 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 +3 -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 +3 -2
- package/dist/components/molecules/PeopleListing/Person.d.ts +7 -0
- package/dist/components/organisms/AnchorTapBar/AnchorTapBar.style.d.ts +0 -6
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.d.ts +4 -0
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +9 -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 +29 -4
- package/package.json +1 -1
- package/dist/components/atoms/IndividualListing/IndividualListing.d.ts +0 -3
- package/dist/components/atoms/IndividualListing/IndividualListing.style.d.ts +0 -2
- package/dist/components/atoms/IndividualListing/index.d.ts +0 -2
package/dist/chord.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { createElement, memo,
|
|
1
|
+
import React__default, { createElement, memo, useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
|
2
2
|
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
|
|
4
4
|
import 'swiper/swiper-bundle.css';
|
|
@@ -2668,92 +2668,40 @@ var TabLink = function TabLink(_ref) {
|
|
|
2668
2668
|
})) : null, children);
|
|
2669
2669
|
};
|
|
2670
2670
|
|
|
2671
|
-
var _templateObject$g;
|
|
2672
|
-
var
|
|
2673
|
-
|
|
2674
|
-
var
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
key: t
|
|
2681
|
-
}, t);
|
|
2682
|
-
}));
|
|
2683
|
-
};
|
|
2684
|
-
|
|
2685
|
-
var _templateObject$h, _templateObject2$4, _templateObject3;
|
|
2686
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
2687
|
-
var IconWrapper = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
2688
|
-
var theme = _ref.theme;
|
|
2689
|
-
return theme.colors.primary;
|
|
2690
|
-
}, devices.mobileAndTablet);
|
|
2691
|
-
var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobileAndTablet);
|
|
2692
|
-
|
|
2693
|
-
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2694
|
-
var onClickPrev = _ref.onClickPrev,
|
|
2695
|
-
onClickNext = _ref.onClickNext,
|
|
2696
|
-
_ref$availablePrev = _ref.availablePrev,
|
|
2697
|
-
availablePrev = _ref$availablePrev === void 0 ? true : _ref$availablePrev,
|
|
2698
|
-
_ref$availableNext = _ref.availableNext,
|
|
2699
|
-
availableNext = _ref$availableNext === void 0 ? true : _ref$availableNext;
|
|
2700
|
-
|
|
2701
|
-
var onClickLeftHandler = function onClickLeftHandler() {
|
|
2702
|
-
if (onClickPrev) {
|
|
2703
|
-
onClickPrev();
|
|
2704
|
-
}
|
|
2705
|
-
};
|
|
2706
|
-
|
|
2707
|
-
var onPrevKeyDownHandler = function onPrevKeyDownHandler(e) {
|
|
2708
|
-
if (e.key === 'Enter') {
|
|
2709
|
-
onClickLeftHandler();
|
|
2710
|
-
}
|
|
2711
|
-
};
|
|
2712
|
-
|
|
2713
|
-
var onClickRightHandler = function onClickRightHandler() {
|
|
2714
|
-
if (onClickNext) {
|
|
2715
|
-
onClickNext();
|
|
2716
|
-
}
|
|
2717
|
-
};
|
|
2718
|
-
|
|
2719
|
-
var onNextKeyDownHandler = function onNextKeyDownHandler(e) {
|
|
2720
|
-
if (e.key === 'Enter') {
|
|
2721
|
-
onClickRightHandler();
|
|
2722
|
-
}
|
|
2723
|
-
};
|
|
2671
|
+
var _templateObject$g, _templateObject2$4;
|
|
2672
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$g || (_templateObject$g = /*#__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) {
|
|
2673
|
+
var iconName = _ref.iconName;
|
|
2674
|
+
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
2675
|
+
}, function (_ref2) {
|
|
2676
|
+
var color = _ref2.color;
|
|
2677
|
+
return color;
|
|
2678
|
+
});
|
|
2679
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
2724
2680
|
|
|
2725
|
-
|
|
2726
|
-
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2727
|
-
iconName: 'CarouselArrow',
|
|
2728
|
-
direction: "reverse"
|
|
2729
|
-
});
|
|
2730
|
-
};
|
|
2681
|
+
var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
|
|
2731
2682
|
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
iconName
|
|
2735
|
-
|
|
2736
|
-
|
|
2683
|
+
var TextLink = function TextLink(_ref) {
|
|
2684
|
+
var children = _ref.children,
|
|
2685
|
+
iconName = _ref.iconName,
|
|
2686
|
+
iconDirection = _ref.iconDirection,
|
|
2687
|
+
color = _ref.color,
|
|
2688
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
2737
2689
|
|
|
2738
|
-
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
|
|
2742
|
-
|
|
2743
|
-
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
"data-testid": "iconnext"
|
|
2750
|
-
}, renderNextIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2751
|
-
"data-testid": "iconnextnoavailable"
|
|
2752
|
-
}, renderNextIcon()));
|
|
2690
|
+
var truncatedString = children.substring(0, 30);
|
|
2691
|
+
return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
|
|
2692
|
+
color: color,
|
|
2693
|
+
iconName: iconName
|
|
2694
|
+
}, rest), truncatedString, iconName ? /*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
|
|
2695
|
+
"data-testid": "text-link-icon"
|
|
2696
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
2697
|
+
iconName: iconName,
|
|
2698
|
+
direction: iconDirection,
|
|
2699
|
+
color: color
|
|
2700
|
+
})) : null);
|
|
2753
2701
|
};
|
|
2754
2702
|
|
|
2755
|
-
var _templateObject$
|
|
2756
|
-
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
2703
|
+
var _templateObject$h;
|
|
2704
|
+
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n"])), function (_ref) {
|
|
2757
2705
|
var typography = _ref.typography;
|
|
2758
2706
|
return typography;
|
|
2759
2707
|
}, function (_ref2) {
|
|
@@ -2859,16 +2807,161 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
2859
2807
|
}, children);
|
|
2860
2808
|
};
|
|
2861
2809
|
|
|
2810
|
+
var _templateObject$i, _templateObject2$5, _templateObject3;
|
|
2811
|
+
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$i || (_templateObject$i = /*#__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) {
|
|
2812
|
+
var dark = _ref.dark;
|
|
2813
|
+
return dark ? 'white' : 'black';
|
|
2814
|
+
});
|
|
2815
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$5 || (_templateObject2$5 = /*#__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) {
|
|
2816
|
+
var dark = _ref2.dark;
|
|
2817
|
+
return dark ? 'white' : 'black';
|
|
2818
|
+
}, devices.mobile);
|
|
2819
|
+
var TickboxInput = /*#__PURE__*/styled.input(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n\n &:checked ~ ", " {\n background-color: var(--base-color-", ");\n & svg {\n display: block;\n path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
2820
|
+
var dark = _ref3.dark;
|
|
2821
|
+
return dark ? 'white' : 'black';
|
|
2822
|
+
}, function (_ref4) {
|
|
2823
|
+
var dark = _ref4.dark;
|
|
2824
|
+
return dark ? 'black' : 'white';
|
|
2825
|
+
});
|
|
2826
|
+
|
|
2827
|
+
var TickboxMode;
|
|
2828
|
+
|
|
2829
|
+
(function (TickboxMode) {
|
|
2830
|
+
TickboxMode["Dark"] = "dark";
|
|
2831
|
+
TickboxMode["Light"] = "light";
|
|
2832
|
+
})(TickboxMode || (TickboxMode = {}));
|
|
2833
|
+
|
|
2834
|
+
var Tickbox = function Tickbox(_ref) {
|
|
2835
|
+
var children = _ref.children,
|
|
2836
|
+
_ref$mode = _ref.mode,
|
|
2837
|
+
mode = _ref$mode === void 0 ? 'light' : _ref$mode,
|
|
2838
|
+
onChange = _ref.onChange,
|
|
2839
|
+
_ref$checked = _ref.checked,
|
|
2840
|
+
checked = _ref$checked === void 0 ? false : _ref$checked;
|
|
2841
|
+
|
|
2842
|
+
var _useState = useState(checked),
|
|
2843
|
+
selected = _useState[0],
|
|
2844
|
+
setSelected = _useState[1];
|
|
2845
|
+
|
|
2846
|
+
var onInputChange = function onInputChange(e) {
|
|
2847
|
+
var inputChecked = e.target.checked;
|
|
2848
|
+
setSelected(inputChecked);
|
|
2849
|
+
onChange == null ? void 0 : onChange(inputChecked);
|
|
2850
|
+
};
|
|
2851
|
+
|
|
2852
|
+
var isDarkMode = mode === TickboxMode.Dark;
|
|
2853
|
+
return /*#__PURE__*/React__default.createElement(TickboxLabel, {
|
|
2854
|
+
dark: isDarkMode,
|
|
2855
|
+
"data-testid": "tickbox"
|
|
2856
|
+
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
2857
|
+
level: 1,
|
|
2858
|
+
tag: "span"
|
|
2859
|
+
}, children), /*#__PURE__*/React__default.createElement(TickboxInput, {
|
|
2860
|
+
type: "checkbox",
|
|
2861
|
+
checked: selected,
|
|
2862
|
+
dark: isDarkMode,
|
|
2863
|
+
onChange: onInputChange
|
|
2864
|
+
}), /*#__PURE__*/React__default.createElement(TickboxCheckmark, {
|
|
2865
|
+
dark: isDarkMode
|
|
2866
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
2867
|
+
iconName: "Tick"
|
|
2868
|
+
})));
|
|
2869
|
+
};
|
|
2870
|
+
|
|
2871
|
+
var _templateObject$j;
|
|
2872
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$j || (_templateObject$j = /*#__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"])));
|
|
2873
|
+
|
|
2874
|
+
var TypeTags = function TypeTags(_ref) {
|
|
2875
|
+
var list = _ref.list;
|
|
2876
|
+
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
2877
|
+
return /*#__PURE__*/React__default.createElement(Overline, {
|
|
2878
|
+
level: 1,
|
|
2879
|
+
tag: "li",
|
|
2880
|
+
key: t
|
|
2881
|
+
}, t);
|
|
2882
|
+
}));
|
|
2883
|
+
};
|
|
2884
|
+
|
|
2885
|
+
var _templateObject$k, _templateObject2$6, _templateObject3$1;
|
|
2886
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
2887
|
+
var IconWrapper = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__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) {
|
|
2888
|
+
var theme = _ref.theme;
|
|
2889
|
+
return theme.colors.primary;
|
|
2890
|
+
}, devices.mobileAndTablet);
|
|
2891
|
+
var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobileAndTablet);
|
|
2892
|
+
|
|
2893
|
+
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2894
|
+
var onClickPrev = _ref.onClickPrev,
|
|
2895
|
+
onClickNext = _ref.onClickNext,
|
|
2896
|
+
_ref$availablePrev = _ref.availablePrev,
|
|
2897
|
+
availablePrev = _ref$availablePrev === void 0 ? true : _ref$availablePrev,
|
|
2898
|
+
_ref$availableNext = _ref.availableNext,
|
|
2899
|
+
availableNext = _ref$availableNext === void 0 ? true : _ref$availableNext;
|
|
2900
|
+
|
|
2901
|
+
var onClickLeftHandler = function onClickLeftHandler() {
|
|
2902
|
+
if (onClickPrev) {
|
|
2903
|
+
onClickPrev();
|
|
2904
|
+
}
|
|
2905
|
+
};
|
|
2906
|
+
|
|
2907
|
+
var onPrevKeyDownHandler = function onPrevKeyDownHandler(e) {
|
|
2908
|
+
if (e.key === 'Enter') {
|
|
2909
|
+
onClickLeftHandler();
|
|
2910
|
+
}
|
|
2911
|
+
};
|
|
2912
|
+
|
|
2913
|
+
var onClickRightHandler = function onClickRightHandler() {
|
|
2914
|
+
if (onClickNext) {
|
|
2915
|
+
onClickNext();
|
|
2916
|
+
}
|
|
2917
|
+
};
|
|
2918
|
+
|
|
2919
|
+
var onNextKeyDownHandler = function onNextKeyDownHandler(e) {
|
|
2920
|
+
if (e.key === 'Enter') {
|
|
2921
|
+
onClickRightHandler();
|
|
2922
|
+
}
|
|
2923
|
+
};
|
|
2924
|
+
|
|
2925
|
+
var renderPrevIcon = function renderPrevIcon() {
|
|
2926
|
+
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2927
|
+
iconName: 'CarouselArrow',
|
|
2928
|
+
direction: "reverse"
|
|
2929
|
+
});
|
|
2930
|
+
};
|
|
2931
|
+
|
|
2932
|
+
var renderNextIcon = function renderNextIcon() {
|
|
2933
|
+
return /*#__PURE__*/React__default.createElement(Icon, {
|
|
2934
|
+
iconName: 'CarouselArrow'
|
|
2935
|
+
});
|
|
2936
|
+
};
|
|
2937
|
+
|
|
2938
|
+
return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2939
|
+
onClick: onClickLeftHandler,
|
|
2940
|
+
onKeyDown: onPrevKeyDownHandler,
|
|
2941
|
+
tabIndex: 0,
|
|
2942
|
+
"data-testid": "iconprev"
|
|
2943
|
+
}, renderPrevIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2944
|
+
"data-testid": "iconprevnoavailable"
|
|
2945
|
+
}, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
2946
|
+
onClick: onClickRightHandler,
|
|
2947
|
+
onKeyDown: onNextKeyDownHandler,
|
|
2948
|
+
tabIndex: 0,
|
|
2949
|
+
"data-testid": "iconnext"
|
|
2950
|
+
}, renderNextIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
2951
|
+
"data-testid": "iconnextnoavailable"
|
|
2952
|
+
}, renderNextIcon()));
|
|
2953
|
+
};
|
|
2954
|
+
|
|
2862
2955
|
var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
|
|
2863
2956
|
var zIndexes = {};
|
|
2864
2957
|
zLevels.forEach(function (name, index) {
|
|
2865
2958
|
zIndexes[name] = index;
|
|
2866
2959
|
});
|
|
2867
2960
|
|
|
2868
|
-
var _templateObject$
|
|
2869
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2870
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
2871
|
-
var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$
|
|
2961
|
+
var _templateObject$l, _templateObject2$7, _templateObject3$2, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
2962
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$l || (_templateObject$l = /*#__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);
|
|
2963
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$7 || (_templateObject2$7 = /*#__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);
|
|
2964
|
+
var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
|
|
2872
2965
|
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n height: 100px;\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n \n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
|
|
2873
2966
|
var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet);
|
|
2874
2967
|
var LogoContainer = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 140px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &&& .logoImg {\n height: 96px;\n width: 66px;\n }\n\n @media ", " {\n height: 80px;\n\n &&& .logoImg {\n width: 100%;\n height: 64px;\n }\n }\n"])), devices.mobile);
|
|
@@ -2877,8 +2970,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8
|
|
|
2877
2970
|
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
2878
2971
|
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
2879
2972
|
|
|
2880
|
-
var _templateObject$
|
|
2881
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
2973
|
+
var _templateObject$m;
|
|
2974
|
+
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
2882
2975
|
|
|
2883
2976
|
var Logo = function Logo(_ref) {
|
|
2884
2977
|
var _ref$id = _ref.id,
|
|
@@ -2907,11 +3000,11 @@ var Logo = function Logo(_ref) {
|
|
|
2907
3000
|
}))));
|
|
2908
3001
|
};
|
|
2909
3002
|
|
|
2910
|
-
var _templateObject$
|
|
2911
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
3003
|
+
var _templateObject$n;
|
|
3004
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__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);
|
|
2912
3005
|
|
|
2913
|
-
var _templateObject$
|
|
2914
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3006
|
+
var _templateObject$o, _templateObject2$8, _templateObject3$3, _templateObject4$1;
|
|
3007
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\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) {
|
|
2915
3008
|
var selected = _ref.selected,
|
|
2916
3009
|
colorPrimary = _ref.colorPrimary;
|
|
2917
3010
|
|
|
@@ -2930,8 +3023,8 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$m || (_templateObj
|
|
|
2930
3023
|
var colorPrimary = _ref4.colorPrimary;
|
|
2931
3024
|
return colorPrimary;
|
|
2932
3025
|
});
|
|
2933
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
2934
|
-
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
3026
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
3027
|
+
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n\n & .basket-num {\n color: white;\n font-size: 10px;\n font-family: var(--font-family-navigation);\n }\n"])));
|
|
2935
3028
|
var BasketText = /*#__PURE__*/styled.a(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n color: var(--base-color-black);\n margin-left: 6px;\n text-decoration: none;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
2936
3029
|
|
|
2937
3030
|
var Basket$1 = function Basket(_ref) {
|
|
@@ -2974,8 +3067,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
2974
3067
|
}, text) : ''));
|
|
2975
3068
|
};
|
|
2976
3069
|
|
|
2977
|
-
var _templateObject$
|
|
2978
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3070
|
+
var _templateObject$p, _templateObject2$9;
|
|
3071
|
+
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__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) {
|
|
2979
3072
|
var selected = _ref.selected,
|
|
2980
3073
|
colorPrimary = _ref.colorPrimary;
|
|
2981
3074
|
|
|
@@ -2991,7 +3084,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObj
|
|
|
2991
3084
|
var colorPrimary = _ref3.colorPrimary;
|
|
2992
3085
|
return colorPrimary;
|
|
2993
3086
|
});
|
|
2994
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
3087
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
2995
3088
|
|
|
2996
3089
|
var Search$1 = function Search(_ref) {
|
|
2997
3090
|
var _ref$selected = _ref.selected,
|
|
@@ -3018,13 +3111,13 @@ var Search$1 = function Search(_ref) {
|
|
|
3018
3111
|
})));
|
|
3019
3112
|
};
|
|
3020
3113
|
|
|
3021
|
-
var _templateObject$
|
|
3022
|
-
var TabContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3023
|
-
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$
|
|
3114
|
+
var _templateObject$q, _templateObject2$a, _templateObject3$4;
|
|
3115
|
+
var TabContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
3116
|
+
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$a || (_templateObject2$a = /*#__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) {
|
|
3024
3117
|
var colorPrimary = _ref.colorPrimary;
|
|
3025
3118
|
return colorPrimary;
|
|
3026
3119
|
});
|
|
3027
|
-
var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
3120
|
+
var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border: 1px solid var(--base-color-light-grey);\n border-top-color: var(--base-color-", ");\n display: flex;\n flex-direction: column;\n row-gap: var(--navigation-small-gap);\n padding: var(--navigation-middle-gap);\n position: absolute;\n top: 24px;\n min-width: calc(100% - calc(2 * var(--navigation-middle-gap)));\n max-width: max-content;\n white-space: nowrap;\n z-index: ", ";\n\n ", "\n\n @media ", " {\n padding-left: 0px;\n padding-bottom: 0px;\n row-gap: var(--navigation-large-gap);\n border: 0;\n background-color: none;\n\n ", "\n }\n"])), function (_ref2) {
|
|
3028
3121
|
var colorPrimary = _ref2.colorPrimary;
|
|
3029
3122
|
return colorPrimary;
|
|
3030
3123
|
}, zIndexes.menu, function (props) {
|
|
@@ -3283,16 +3376,16 @@ var NavTop = function NavTop(_ref) {
|
|
|
3283
3376
|
}));
|
|
3284
3377
|
};
|
|
3285
3378
|
|
|
3286
|
-
var _templateObject$
|
|
3287
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3288
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3379
|
+
var _templateObject$r, _templateObject2$b, _templateObject3$5, _templateObject4$2;
|
|
3380
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
3381
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$b || (_templateObject2$b = /*#__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) {
|
|
3289
3382
|
if (props.showMenu) {
|
|
3290
3383
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
3291
3384
|
}
|
|
3292
3385
|
|
|
3293
3386
|
return "display: none;";
|
|
3294
3387
|
});
|
|
3295
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
3388
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color-", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
|
|
3296
3389
|
var colorPrimary = _ref.colorPrimary;
|
|
3297
3390
|
return colorPrimary;
|
|
3298
3391
|
}, function (_ref2) {
|
|
@@ -3301,9 +3394,9 @@ var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateOb
|
|
|
3301
3394
|
}, devices.mobileAndTablet);
|
|
3302
3395
|
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
3303
3396
|
|
|
3304
|
-
var _templateObject$
|
|
3305
|
-
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3306
|
-
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$
|
|
3397
|
+
var _templateObject$s, _templateObject2$c, _templateObject3$6, _templateObject4$3;
|
|
3398
|
+
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
3399
|
+
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$c || (_templateObject2$c = /*#__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) {
|
|
3307
3400
|
var active = _ref.active,
|
|
3308
3401
|
activeColor = _ref.activeColor;
|
|
3309
3402
|
|
|
@@ -3315,7 +3408,7 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject
|
|
|
3315
3408
|
});
|
|
3316
3409
|
var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled(ControlledDropdownHeaderContainer).attrs({
|
|
3317
3410
|
as: 'a'
|
|
3318
|
-
})(_templateObject3$
|
|
3411
|
+
})(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
3319
3412
|
var IconWrapper$1 = /*#__PURE__*/styled.span(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n"])));
|
|
3320
3413
|
|
|
3321
3414
|
var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
@@ -3562,46 +3655,14 @@ var Tabs = function Tabs(_ref) {
|
|
|
3562
3655
|
}, "MENU"))));
|
|
3563
3656
|
};
|
|
3564
3657
|
|
|
3565
|
-
var _templateObject$
|
|
3566
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3567
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
3568
|
-
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$
|
|
3658
|
+
var _templateObject$t, _templateObject2$d, _templateObject3$7, _templateObject4$4, _templateObject5$1, _templateObject6$1;
|
|
3659
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__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);
|
|
3660
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
3661
|
+
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--base-color-navigation);\n }\n }\n"])));
|
|
3569
3662
|
var InputContainer = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
3570
3663
|
var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
3571
3664
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
3572
3665
|
|
|
3573
|
-
var _templateObject$s, _templateObject2$c;
|
|
3574
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$s || (_templateObject$s = /*#__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) {
|
|
3575
|
-
var iconName = _ref.iconName;
|
|
3576
|
-
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3577
|
-
}, function (_ref2) {
|
|
3578
|
-
var color = _ref2.color;
|
|
3579
|
-
return color;
|
|
3580
|
-
});
|
|
3581
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
3582
|
-
|
|
3583
|
-
var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
|
|
3584
|
-
|
|
3585
|
-
var TextLink = function TextLink(_ref) {
|
|
3586
|
-
var children = _ref.children,
|
|
3587
|
-
iconName = _ref.iconName,
|
|
3588
|
-
iconDirection = _ref.iconDirection,
|
|
3589
|
-
color = _ref.color,
|
|
3590
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
3591
|
-
|
|
3592
|
-
var truncatedString = children.substring(0, 30);
|
|
3593
|
-
return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
|
|
3594
|
-
color: color,
|
|
3595
|
-
iconName: iconName
|
|
3596
|
-
}, rest), truncatedString, iconName ? /*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
|
|
3597
|
-
"data-testid": "text-link-icon"
|
|
3598
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
3599
|
-
iconName: iconName,
|
|
3600
|
-
direction: iconDirection,
|
|
3601
|
-
color: color
|
|
3602
|
-
})) : null);
|
|
3603
|
-
};
|
|
3604
|
-
|
|
3605
3666
|
var SearchBar = function SearchBar(_ref) {
|
|
3606
3667
|
var onClick = _ref.onClick,
|
|
3607
3668
|
onClose = _ref.onClose;
|
|
@@ -3816,18 +3877,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
3816
3877
|
})))));
|
|
3817
3878
|
};
|
|
3818
3879
|
|
|
3819
|
-
var _templateObject$
|
|
3820
|
-
var FooterSection = /*#__PURE__*/styled.section(_templateObject$
|
|
3821
|
-
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3822
|
-
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$
|
|
3880
|
+
var _templateObject$u, _templateObject2$e, _templateObject3$8, _templateObject4$5, _templateObject5$2, _templateObject6$2;
|
|
3881
|
+
var FooterSection = /*#__PURE__*/styled.section(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
3882
|
+
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n --footer-vertical-spacing-sm\n )\n min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2'\n '.'\n 'row3'\n '.'\n 'row4';\n"])));
|
|
3883
|
+
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row1;\n justify-self: center;\n\n @media ", " {\n & {\n justify-self: start;\n grid-area: row2;\n }\n }\n"])), devices.mobile);
|
|
3823
3884
|
var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
3824
3885
|
var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
|
|
3825
3886
|
var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
|
|
3826
3887
|
|
|
3827
|
-
var _templateObject$
|
|
3828
|
-
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$
|
|
3829
|
-
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$
|
|
3830
|
-
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
3888
|
+
var _templateObject$v, _templateObject2$f, _templateObject3$9;
|
|
3889
|
+
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 auto;\n padding: 0;\n list-style: none;\n display: flex;\n gap: var(--footer-items-gap);\n\n @media ", " {\n & {\n margin: 0;\n flex-direction: column;\n }\n }\n"])), devices.mobile);
|
|
3890
|
+
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n text-align: center;\n\n @media ", " {\n & {\n text-align: left;\n }\n }\n"])), devices.mobile);
|
|
3891
|
+
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
|
|
3831
3892
|
|
|
3832
3893
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
3833
3894
|
var _ref$items = _ref.items,
|
|
@@ -3843,10 +3904,10 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
3843
3904
|
}));
|
|
3844
3905
|
};
|
|
3845
3906
|
|
|
3846
|
-
var _templateObject$
|
|
3847
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3848
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$
|
|
3849
|
-
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
3907
|
+
var _templateObject$w, _templateObject2$g, _templateObject3$a, _templateObject4$6, _templateObject5$3, _templateObject6$3, _templateObject7$1, _templateObject8$1;
|
|
3908
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n grid-template-rows: 100px;\n gap: 0;\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content min-content;\n gap: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
3909
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
|
|
3910
|
+
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
3850
3911
|
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
3851
3912
|
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
3852
3913
|
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
@@ -3917,14 +3978,11 @@ var Footer = function Footer(_ref) {
|
|
|
3917
3978
|
}, additionalInfo)))));
|
|
3918
3979
|
};
|
|
3919
3980
|
|
|
3920
|
-
var _templateObject$
|
|
3921
|
-
var AnchorTapbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3922
|
-
var
|
|
3923
|
-
var
|
|
3924
|
-
var
|
|
3925
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
3926
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
3927
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: 32px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref) {
|
|
3981
|
+
var _templateObject$x, _templateObject2$h, _templateObject3$b, _templateObject4$7, _templateObject5$4, _templateObject6$4;
|
|
3982
|
+
var AnchorTapbarWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), zIndexes.anchor);
|
|
3983
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
3984
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
3985
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: 32px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref) {
|
|
3928
3986
|
var tabsOverflow = _ref.tabsOverflow;
|
|
3929
3987
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
3930
3988
|
}, function (_ref2) {
|
|
@@ -3934,31 +3992,13 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject7$2 || (_templateObject7$2
|
|
|
3934
3992
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
3935
3993
|
return tabsOverflow ? 'calc(100% - 50px)' : '100%';
|
|
3936
3994
|
});
|
|
3937
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(
|
|
3938
|
-
var ArrowWrapper = /*#__PURE__*/styled.div(
|
|
3939
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
3940
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref4) {
|
|
3941
|
-
var theme = _ref4.theme;
|
|
3942
|
-
return theme.colors.primaryButtonReverseBg;
|
|
3943
|
-
}, function (_ref5) {
|
|
3944
|
-
var theme = _ref5.theme;
|
|
3945
|
-
return theme.colors.primaryButtonReverseBg;
|
|
3946
|
-
}, function (_ref6) {
|
|
3947
|
-
var theme = _ref6.theme;
|
|
3948
|
-
return theme.colors.primaryButtonReverse;
|
|
3949
|
-
}, function (_ref7) {
|
|
3950
|
-
var theme = _ref7.theme;
|
|
3951
|
-
return theme.colors.primaryButtonReverse;
|
|
3952
|
-
});
|
|
3995
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--base-color-white);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n"])));
|
|
3996
|
+
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n :hover {\n && svg path {\n fill: var(--base-color-primary);\n }\n }\n"])));
|
|
3953
3997
|
|
|
3954
|
-
var _excluded$7 = ["text"]
|
|
3955
|
-
_excluded2 = ["text"],
|
|
3956
|
-
_excluded3 = ["id", "text"];
|
|
3998
|
+
var _excluded$7 = ["id", "text"];
|
|
3957
3999
|
|
|
3958
4000
|
var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
3959
4001
|
var tabs = _ref.tabs,
|
|
3960
|
-
title = _ref.title,
|
|
3961
|
-
links = _ref.links,
|
|
3962
4002
|
onTabClick = _ref.onTabClick,
|
|
3963
4003
|
activeTab = _ref.activeTab;
|
|
3964
4004
|
var tabListRef = useRef(null);
|
|
@@ -3979,8 +4019,6 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
3979
4019
|
canScrollToRight = _useState4[0],
|
|
3980
4020
|
setCanScrollToRight = _useState4[1];
|
|
3981
4021
|
|
|
3982
|
-
var hasTitleOrLinks = title || links;
|
|
3983
|
-
|
|
3984
4022
|
var isSelectedItem = function isSelectedItem(id) {
|
|
3985
4023
|
return id === selectedItem;
|
|
3986
4024
|
};
|
|
@@ -4002,7 +4040,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4002
4040
|
}, [tabListRef]);
|
|
4003
4041
|
useEffect(function () {
|
|
4004
4042
|
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
4005
|
-
var elementGap =
|
|
4043
|
+
var elementGap = 100;
|
|
4006
4044
|
var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
|
|
4007
4045
|
var targetSectionElement = document.getElementById(item.id);
|
|
4008
4046
|
if (!targetSectionElement) return false;
|
|
@@ -4039,18 +4077,10 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4039
4077
|
return function () {
|
|
4040
4078
|
return document.removeEventListener('scroll', scrollTriggerCheck);
|
|
4041
4079
|
};
|
|
4042
|
-
}, [tabs, selectedItem,
|
|
4080
|
+
}, [tabs, selectedItem, tabListRef]);
|
|
4043
4081
|
var tabsColumnStart = tabsOverflow ? !canScrollToLeft ? 2 : 1 : 3;
|
|
4044
4082
|
var tabsColumnSpan = tabsOverflow ? !canScrollToLeft ? 14 : 15 : 13;
|
|
4045
4083
|
|
|
4046
|
-
var _ref3 = (links == null ? void 0 : links[0]) || {},
|
|
4047
|
-
primaryButtonText = _ref3.text,
|
|
4048
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
|
|
4049
|
-
|
|
4050
|
-
var _ref4 = (links == null ? void 0 : links[1]) || {},
|
|
4051
|
-
secondaryButtonText = _ref4.text,
|
|
4052
|
-
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref4, _excluded2);
|
|
4053
|
-
|
|
4054
4084
|
var scrollToRight = function scrollToRight() {
|
|
4055
4085
|
if (tabListRef.current) {
|
|
4056
4086
|
var scroll = tabListRef.current.scrollLeft;
|
|
@@ -4068,34 +4098,19 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4068
4098
|
};
|
|
4069
4099
|
|
|
4070
4100
|
var onTabsScroll = function onTabsScroll() {
|
|
4071
|
-
var
|
|
4072
|
-
|
|
4073
|
-
scrollLeft =
|
|
4074
|
-
|
|
4075
|
-
clientWidth =
|
|
4076
|
-
|
|
4077
|
-
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;
|
|
4078
4108
|
|
|
4079
4109
|
setCanScrollToLeft(scrollLeft > 0);
|
|
4080
4110
|
setCanScrollToRight(scrollLeft + clientWidth < scrollWidth);
|
|
4081
4111
|
};
|
|
4082
4112
|
|
|
4083
|
-
return /*#__PURE__*/React__default.createElement(AnchorTapbarWrapper, null,
|
|
4084
|
-
columnStartDesktop: 2,
|
|
4085
|
-
columnSpanDesktop: 9,
|
|
4086
|
-
columnStartDevice: 2,
|
|
4087
|
-
columnSpanDevice: 12
|
|
4088
|
-
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4089
|
-
"data-testid": "anchor-title"
|
|
4090
|
-
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4091
|
-
level: 5
|
|
4092
|
-
}, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
|
|
4093
|
-
columnStartDesktop: 12,
|
|
4094
|
-
columnSpanDesktop: 5,
|
|
4095
|
-
columnStartDevice: 2,
|
|
4096
|
-
columnSpanDevice: 12,
|
|
4097
|
-
"data-testid": "anchor-ctas"
|
|
4098
|
-
}, /*#__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, {
|
|
4099
4114
|
columnStartDesktop: tabsColumnStart,
|
|
4100
4115
|
columnSpanDesktop: tabsColumnSpan,
|
|
4101
4116
|
columnStartDevice: 2,
|
|
@@ -4106,10 +4121,10 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4106
4121
|
ref: tabListRef,
|
|
4107
4122
|
tabsOverflow: tabsOverflow,
|
|
4108
4123
|
onScroll: onTabsScroll
|
|
4109
|
-
}, tabs.map(function (
|
|
4110
|
-
var id =
|
|
4111
|
-
text =
|
|
4112
|
-
rest = _objectWithoutPropertiesLoose(
|
|
4124
|
+
}, tabs.map(function (_ref4) {
|
|
4125
|
+
var id = _ref4.id,
|
|
4126
|
+
text = _ref4.text,
|
|
4127
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$7);
|
|
4113
4128
|
|
|
4114
4129
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
4115
4130
|
key: id
|
|
@@ -4130,7 +4145,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
|
|
|
4130
4145
|
onClick: scrollToRight
|
|
4131
4146
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4132
4147
|
iconName: "Arrow"
|
|
4133
|
-
})) : null) : null)))
|
|
4148
|
+
})) : null) : null))));
|
|
4134
4149
|
};
|
|
4135
4150
|
|
|
4136
4151
|
var CarouselType;
|
|
@@ -4141,8 +4156,8 @@ var CarouselType;
|
|
|
4141
4156
|
CarouselType["LargeCard"] = "LargeCard";
|
|
4142
4157
|
})(CarouselType || (CarouselType = {}));
|
|
4143
4158
|
|
|
4144
|
-
var _templateObject$
|
|
4145
|
-
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4159
|
+
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8;
|
|
4160
|
+
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (_ref) {
|
|
4146
4161
|
var type = _ref.type,
|
|
4147
4162
|
imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
4148
4163
|
|
|
@@ -4174,8 +4189,8 @@ var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObj
|
|
|
4174
4189
|
return "\n &&& {\n .swiper-slide > div{\n height: calc(" + imagesHeightDevice + "px + var(--line-height-body-2) + 12px);\n }\n }";
|
|
4175
4190
|
}
|
|
4176
4191
|
});
|
|
4177
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4178
|
-
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4192
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
4193
|
+
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n user-select: text;\n\n h4 {\n padding: 0;\n margin: 0;\n }\n"])));
|
|
4179
4194
|
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
4180
4195
|
|
|
4181
4196
|
var Carousel = function Carousel(_ref) {
|
|
@@ -4283,9 +4298,9 @@ var Carousel = function Carousel(_ref) {
|
|
|
4283
4298
|
})))));
|
|
4284
4299
|
};
|
|
4285
4300
|
|
|
4286
|
-
var _templateObject$
|
|
4287
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
4288
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4301
|
+
var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1;
|
|
4302
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
4303
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n h4 {\n margin: 0;\n padding: 0;\n }\n\n h5 {\n display: none;\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: 40px;\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: var(--line-height-altHeader-5);\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n }\n }\n }\n"])), devices.tablet, function (_ref) {
|
|
4289
4304
|
var theme = _ref.theme;
|
|
4290
4305
|
return theme.fonts.mobile.sizes.altHeaders[5];
|
|
4291
4306
|
}, function (_ref2) {
|
|
@@ -4295,7 +4310,7 @@ var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$i || (_templ
|
|
|
4295
4310
|
var theme = _ref3.theme;
|
|
4296
4311
|
return theme.fonts.mobile.letterSpacing.altHeaders[5];
|
|
4297
4312
|
}, devices.mobile);
|
|
4298
|
-
var InfoWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4313
|
+
var InfoWrapper = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4299
4314
|
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4300
4315
|
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref4) {
|
|
4301
4316
|
var theme = _ref4.theme;
|
|
@@ -4347,10 +4362,10 @@ var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject6$5 || (_templateOb
|
|
|
4347
4362
|
var theme = _ref19.theme;
|
|
4348
4363
|
return theme.fonts.mobile.lineHeights.body[1];
|
|
4349
4364
|
}, devices.mobile);
|
|
4350
|
-
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
4351
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$
|
|
4352
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
4353
|
-
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$
|
|
4365
|
+
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4366
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swiper-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4367
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
4368
|
+
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4354
4369
|
|
|
4355
4370
|
var _excluded$8 = ["text"];
|
|
4356
4371
|
|
|
@@ -4510,12 +4525,73 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4510
4525
|
})));
|
|
4511
4526
|
};
|
|
4512
4527
|
|
|
4513
|
-
var _templateObject$
|
|
4514
|
-
var
|
|
4515
|
-
var
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
var
|
|
4528
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6, _templateObject6$6, _templateObject7$3;
|
|
4529
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
4530
|
+
var sticky = _ref.sticky;
|
|
4531
|
+
return sticky ? 'sticky' : 'initial';
|
|
4532
|
+
}, zIndexes.anchor);
|
|
4533
|
+
var CTAGridWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
4534
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n height: 50px;\n }\n }\n"])), devices.mobile);
|
|
4535
|
+
var GridItemTitleWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 2 / span 9;\n }\n }\n"])), devices.tablet);
|
|
4536
|
+
var ButtonsDesktopGridItem = /*#__PURE__*/styled(GridItem)(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n @media ", " {\n {\n grid-column: 12 / span 3;\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
4537
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
4538
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref2) {
|
|
4539
|
+
var theme = _ref2.theme;
|
|
4540
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4541
|
+
}, function (_ref3) {
|
|
4542
|
+
var theme = _ref3.theme;
|
|
4543
|
+
return theme.colors.primaryButtonReverseBg;
|
|
4544
|
+
}, function (_ref4) {
|
|
4545
|
+
var theme = _ref4.theme;
|
|
4546
|
+
return theme.colors.primaryButtonReverse;
|
|
4547
|
+
}, function (_ref5) {
|
|
4548
|
+
var theme = _ref5.theme;
|
|
4549
|
+
return theme.colors.primaryButtonReverse;
|
|
4550
|
+
});
|
|
4551
|
+
|
|
4552
|
+
var _excluded$b = ["text"],
|
|
4553
|
+
_excluded2 = ["text"];
|
|
4554
|
+
|
|
4555
|
+
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
4556
|
+
var title = _ref.title,
|
|
4557
|
+
links = _ref.links,
|
|
4558
|
+
_ref$sticky = _ref.sticky,
|
|
4559
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky;
|
|
4560
|
+
|
|
4561
|
+
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
4562
|
+
primaryButtonText = _ref2.text,
|
|
4563
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
|
|
4564
|
+
|
|
4565
|
+
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
4566
|
+
secondaryButtonText = _ref3.text,
|
|
4567
|
+
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
4568
|
+
|
|
4569
|
+
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
4570
|
+
sticky: sticky
|
|
4571
|
+
}, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(GridItemTitleWrapper, {
|
|
4572
|
+
columnStartDesktop: 2,
|
|
4573
|
+
columnSpanDesktop: 9,
|
|
4574
|
+
columnStartDevice: 2,
|
|
4575
|
+
columnSpanDevice: 12
|
|
4576
|
+
}, /*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
4577
|
+
"data-testid": "anchor-title"
|
|
4578
|
+
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
4579
|
+
level: 5
|
|
4580
|
+
}, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
|
|
4581
|
+
columnStartDesktop: 12,
|
|
4582
|
+
columnSpanDesktop: 5,
|
|
4583
|
+
columnStartDevice: 2,
|
|
4584
|
+
columnSpanDevice: 12,
|
|
4585
|
+
"data-testid": "anchor-ctas"
|
|
4586
|
+
}, /*#__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);
|
|
4587
|
+
};
|
|
4588
|
+
|
|
4589
|
+
var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
|
|
4590
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4591
|
+
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
4592
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
|
|
4593
|
+
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && a {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 28px 20px;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
4594
|
+
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
|
|
4519
4595
|
|
|
4520
4596
|
var Accordion = function Accordion(_ref) {
|
|
4521
4597
|
var _ref$title = _ref.title,
|
|
@@ -4557,8 +4633,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
4557
4633
|
}, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
4558
4634
|
};
|
|
4559
4635
|
|
|
4560
|
-
var _templateObject$
|
|
4561
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4636
|
+
var _templateObject$C;
|
|
4637
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4562
4638
|
|
|
4563
4639
|
var Accordions = function Accordions(_ref) {
|
|
4564
4640
|
var _ref$items = _ref.items,
|
|
@@ -4577,25 +4653,25 @@ var Accordions = function Accordions(_ref) {
|
|
|
4577
4653
|
}));
|
|
4578
4654
|
};
|
|
4579
4655
|
|
|
4580
|
-
var _templateObject$
|
|
4656
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$3, _templateObject9$2;
|
|
4581
4657
|
var LENGTH_LARGE_TEXT = 28;
|
|
4582
4658
|
var LENGTH_SMALL_TEXT = 19;
|
|
4583
4659
|
var LENGTH_TEXT_TABLET = 10;
|
|
4584
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4585
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
4586
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
4587
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
4660
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
4661
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: var(--base-color-primary);\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), zIndexes.contentOverlay);
|
|
4662
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
4663
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref) {
|
|
4588
4664
|
var fullWidth = _ref.fullWidth;
|
|
4589
4665
|
return fullWidth ? '0' : '20px';
|
|
4590
4666
|
}, function (_ref2) {
|
|
4591
4667
|
var fullWidth = _ref2.fullWidth;
|
|
4592
4668
|
return fullWidth ? '0' : '20px';
|
|
4593
4669
|
});
|
|
4594
|
-
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$
|
|
4595
|
-
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$
|
|
4670
|
+
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4671
|
+
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
4596
4672
|
var TextContainer = /*#__PURE__*/styled.div(_templateObject7$4 || (_templateObject7$4 = /*#__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"])));
|
|
4597
|
-
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$
|
|
4598
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
4673
|
+
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4674
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n opacity: 0;\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref3) {
|
|
4599
4675
|
var size = _ref3.size,
|
|
4600
4676
|
primaryButtonTextLength = _ref3.primaryButtonTextLength,
|
|
4601
4677
|
tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
|
|
@@ -4618,13 +4694,13 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templat
|
|
|
4618
4694
|
return '';
|
|
4619
4695
|
});
|
|
4620
4696
|
|
|
4621
|
-
var _templateObject$
|
|
4622
|
-
var ProgressView = /*#__PURE__*/styled.div(_templateObject$
|
|
4623
|
-
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$
|
|
4697
|
+
var _templateObject$E, _templateObject2$n, _templateObject3$h;
|
|
4698
|
+
var ProgressView = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 10px;\n width: 100%;\n display: flex;\n flex-direction: row;\n"])));
|
|
4699
|
+
var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-progress);\n flex: ", ";\n"])), function (_ref) {
|
|
4624
4700
|
var progress = _ref.progress;
|
|
4625
4701
|
return progress;
|
|
4626
4702
|
});
|
|
4627
|
-
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$
|
|
4703
|
+
var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n opacity: 0.5;\n flex: ", ";\n"])), function (_ref2) {
|
|
4628
4704
|
var progress = _ref2.progress;
|
|
4629
4705
|
return progress;
|
|
4630
4706
|
});
|
|
@@ -4641,7 +4717,7 @@ var Progress = function Progress(_ref) {
|
|
|
4641
4717
|
}));
|
|
4642
4718
|
};
|
|
4643
4719
|
|
|
4644
|
-
var _excluded$
|
|
4720
|
+
var _excluded$c = ["text"],
|
|
4645
4721
|
_excluded2$1 = ["text"];
|
|
4646
4722
|
var LENGTH_LARGE_TEXT$1 = 28;
|
|
4647
4723
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
@@ -4680,7 +4756,7 @@ var Card = function Card(_ref) {
|
|
|
4680
4756
|
var _ref2 = primaryButton || {},
|
|
4681
4757
|
_ref2$text = _ref2.text,
|
|
4682
4758
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
4683
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
4759
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
|
|
4684
4760
|
|
|
4685
4761
|
var primaryButtonTextTruncate = size === 'small' ? truncate(primaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(primaryButtonText, LENGTH_LARGE_TEXT$1);
|
|
4686
4762
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -4750,9 +4826,9 @@ var Card = function Card(_ref) {
|
|
|
4750
4826
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
4751
4827
|
};
|
|
4752
4828
|
|
|
4753
|
-
var _templateObject$
|
|
4754
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
4755
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
4829
|
+
var _templateObject$F, _templateObject2$o;
|
|
4830
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n {\n grid-row-gap: var(--cards-spacing-stack);\n }\n }\n"])), devices.mobile);
|
|
4831
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 1 / span 14;\n }\n }\n"])), devices.mobile);
|
|
4756
4832
|
|
|
4757
4833
|
var Cards = function Cards(_ref) {
|
|
4758
4834
|
var cards = _ref.cards,
|
|
@@ -4789,21 +4865,21 @@ var Cards = function Cards(_ref) {
|
|
|
4789
4865
|
}));
|
|
4790
4866
|
};
|
|
4791
4867
|
|
|
4792
|
-
var _templateObject$
|
|
4793
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
4868
|
+
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$9;
|
|
4869
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
4794
4870
|
var imageToLeft = _ref.imageToLeft;
|
|
4795
4871
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
4796
4872
|
}, devices.mobile);
|
|
4797
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4873
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
4798
4874
|
var imageToLeft = _ref2.imageToLeft;
|
|
4799
4875
|
return imageToLeft ? 'left' : 'right';
|
|
4800
4876
|
}, devices.mobile);
|
|
4801
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4877
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
4802
4878
|
var imageToLeft = _ref3.imageToLeft;
|
|
4803
4879
|
return imageToLeft ? 'right' : 'left';
|
|
4804
4880
|
}, devices.mobile);
|
|
4805
|
-
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$
|
|
4806
|
-
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$
|
|
4881
|
+
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4882
|
+
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
4807
4883
|
|
|
4808
4884
|
var Editorial = function Editorial(_ref) {
|
|
4809
4885
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -4834,19 +4910,19 @@ var Editorial = function Editorial(_ref) {
|
|
|
4834
4910
|
})))));
|
|
4835
4911
|
};
|
|
4836
4912
|
|
|
4837
|
-
var _templateObject$
|
|
4838
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4913
|
+
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$5;
|
|
4914
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
4839
4915
|
var theme = _ref.theme;
|
|
4840
4916
|
return theme.colors.primary;
|
|
4841
4917
|
}, devices.mobile);
|
|
4842
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4843
|
-
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
4844
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
4845
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
4846
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
4918
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
4919
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4920
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), devices.mobile);
|
|
4921
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
4922
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4847
4923
|
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
4848
4924
|
|
|
4849
|
-
var _excluded$
|
|
4925
|
+
var _excluded$d = ["text"];
|
|
4850
4926
|
|
|
4851
4927
|
var PageHeading = function PageHeading(_ref) {
|
|
4852
4928
|
var title = _ref.title,
|
|
@@ -4858,7 +4934,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
4858
4934
|
|
|
4859
4935
|
var _ref2 = link || {},
|
|
4860
4936
|
linkText = _ref2.text,
|
|
4861
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
4937
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
4862
4938
|
|
|
4863
4939
|
var truncatedText = text == null ? void 0 : text.substring(0, 250);
|
|
4864
4940
|
var truncatedTitle = title.substring(0, 40);
|
|
@@ -4870,18 +4946,20 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
4870
4946
|
level: 2
|
|
4871
4947
|
}, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
|
|
4872
4948
|
"data-testid": "page-heading-text"
|
|
4873
|
-
},
|
|
4949
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
4950
|
+
level: 6
|
|
4951
|
+
}, truncatedText)) : null, sponsor ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
|
|
4874
4952
|
"data-testid": "page-heading-sponsor"
|
|
4875
4953
|
}, /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
|
|
4876
4954
|
"data-testid": "page-heading-link"
|
|
4877
4955
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
|
|
4878
4956
|
};
|
|
4879
4957
|
|
|
4880
|
-
var _excluded$
|
|
4958
|
+
var _excluded$e = ["link"];
|
|
4881
4959
|
|
|
4882
4960
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
4883
4961
|
var link = _ref.link,
|
|
4884
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
4962
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
4885
4963
|
|
|
4886
4964
|
var coreLink = link && _extends({}, link, {
|
|
4887
4965
|
color: Colors.White,
|
|
@@ -4895,11 +4973,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
4895
4973
|
})));
|
|
4896
4974
|
};
|
|
4897
4975
|
|
|
4898
|
-
var _excluded$
|
|
4976
|
+
var _excluded$f = ["link"];
|
|
4899
4977
|
|
|
4900
4978
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
4901
4979
|
var link = _ref.link,
|
|
4902
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
4980
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
|
4903
4981
|
|
|
4904
4982
|
var cinemaLink = link && _extends({}, link, {
|
|
4905
4983
|
color: Colors.Black,
|
|
@@ -4913,8 +4991,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4913
4991
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
4914
4992
|
};
|
|
4915
4993
|
|
|
4916
|
-
var _templateObject$
|
|
4917
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4994
|
+
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$6;
|
|
4995
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n background-image: url('", "');\n background-repeat: no-repeat;\n background-size: cover;\n position: relative;\n display: flex;\n align-items: center;\n\n ::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--base-color-black);\n filter: opacity(40%);\n z-index: ", ";\n }\n\n @media ", " {\n & {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n background-image: url('", "');\n background-position: center;\n display: flex;\n align-items: start;\n }\n }\n"])), function (_ref) {
|
|
4918
4996
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
4919
4997
|
return bgUrlDesktop;
|
|
4920
4998
|
}, zIndexes.content, devices.mobile, function (_ref2) {
|
|
@@ -4922,14 +5000,14 @@ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObjec
|
|
|
4922
5000
|
bgUrlDevice = _ref2.bgUrlDevice;
|
|
4923
5001
|
return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
|
|
4924
5002
|
});
|
|
4925
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
4926
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4927
|
-
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
4928
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
4929
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$
|
|
5003
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . . logo logo logo logo . . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . . logo logo logo logo logo logo . . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. . . . . logo logo logo logo . . . . .'\n '. text text text text text text text text text text text text .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5004
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.contentOverlay, devices.mobileAndTablet);
|
|
5005
|
+
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5006
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-5);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5007
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
4930
5008
|
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__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);
|
|
4931
5009
|
|
|
4932
|
-
var _excluded$
|
|
5010
|
+
var _excluded$g = ["text"];
|
|
4933
5011
|
|
|
4934
5012
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
4935
5013
|
var children = _ref.children,
|
|
@@ -4944,7 +5022,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
4944
5022
|
|
|
4945
5023
|
var _ref2 = link || {},
|
|
4946
5024
|
linkText = _ref2.text,
|
|
4947
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
5025
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
|
|
4948
5026
|
|
|
4949
5027
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
4950
5028
|
bgUrlDesktop: bgUrlDesktop,
|
|
@@ -4971,11 +5049,11 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
4971
5049
|
}, "Scroll Down")) : null);
|
|
4972
5050
|
};
|
|
4973
5051
|
|
|
4974
|
-
var _excluded$
|
|
5052
|
+
var _excluded$h = ["link"];
|
|
4975
5053
|
|
|
4976
5054
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
4977
5055
|
var link = _ref.link,
|
|
4978
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
5056
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
4979
5057
|
|
|
4980
5058
|
var streamLink = link && _extends({}, link, {
|
|
4981
5059
|
color: Colors.Black,
|
|
@@ -4989,67 +5067,72 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
4989
5067
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
|
|
4990
5068
|
};
|
|
4991
5069
|
|
|
4992
|
-
var _templateObject$
|
|
4993
|
-
var
|
|
4994
|
-
var
|
|
4995
|
-
|
|
4996
|
-
|
|
4997
|
-
|
|
4998
|
-
|
|
4999
|
-
|
|
5000
|
-
|
|
5001
|
-
|
|
5002
|
-
|
|
5003
|
-
|
|
5004
|
-
|
|
5005
|
-
|
|
5006
|
-
href: link
|
|
5007
|
-
|
|
5008
|
-
}, name) : name));
|
|
5070
|
+
var _templateObject$J, _templateObject2$s, _templateObject3$l;
|
|
5071
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
|
|
5072
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
5073
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
5074
|
+
|
|
5075
|
+
var Person = function Person(_ref) {
|
|
5076
|
+
var person = _ref.person,
|
|
5077
|
+
withSeparator = _ref.withSeparator;
|
|
5078
|
+
var link = person.link,
|
|
5079
|
+
name = person.name,
|
|
5080
|
+
_person$separator = person.separator,
|
|
5081
|
+
separator = _person$separator === void 0 ? ', ' : _person$separator;
|
|
5082
|
+
var personSeparator = withSeparator ? separator : '';
|
|
5083
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, link ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PersonLink, {
|
|
5084
|
+
href: link
|
|
5085
|
+
}, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null) : /*#__PURE__*/React__default.createElement("span", null, name, personSeparator));
|
|
5009
5086
|
};
|
|
5010
5087
|
|
|
5011
|
-
var _templateObject$I;
|
|
5012
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
|
|
5013
|
-
|
|
5014
5088
|
var PeopleListing = function PeopleListing(_ref) {
|
|
5015
|
-
var
|
|
5016
|
-
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null,
|
|
5089
|
+
var roles = _ref.roles;
|
|
5090
|
+
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.map(function (role, index) {
|
|
5017
5091
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
5018
|
-
key:
|
|
5092
|
+
key: role.name + "-" + index,
|
|
5019
5093
|
columnStartDesktop: index % 4 * 3 + 3,
|
|
5020
5094
|
columnSpanDesktop: 3,
|
|
5021
5095
|
columnStartDevice: index % 2 * 6 + 2,
|
|
5022
5096
|
columnSpanDevice: 6
|
|
5023
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5024
|
-
|
|
5025
|
-
|
|
5026
|
-
|
|
5027
|
-
|
|
5028
|
-
}))
|
|
5097
|
+
}, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
5098
|
+
title: "role",
|
|
5099
|
+
"data-roh": role.dataROH
|
|
5100
|
+
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
5101
|
+
level: 1
|
|
5102
|
+
}, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
5103
|
+
level: 1,
|
|
5104
|
+
tag: "p"
|
|
5105
|
+
}, role.people.map(function (person, personIndex) {
|
|
5106
|
+
return /*#__PURE__*/React__default.createElement(Person, {
|
|
5107
|
+
key: "" + person.name + personIndex,
|
|
5108
|
+
person: person,
|
|
5109
|
+
withSeparator: role.people.length !== personIndex + 1
|
|
5110
|
+
});
|
|
5111
|
+
})));
|
|
5029
5112
|
}));
|
|
5030
5113
|
};
|
|
5031
5114
|
|
|
5032
|
-
var _templateObject$
|
|
5115
|
+
var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$g, _templateObject5$c, _templateObject6$a, _templateObject7$7;
|
|
5033
5116
|
var LENGTH_TEXT = 28;
|
|
5034
5117
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5035
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
5118
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
5036
5119
|
var imageToLeft = _ref.imageToLeft;
|
|
5037
5120
|
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'";
|
|
5038
5121
|
}, devices.tablet, function (_ref2) {
|
|
5039
5122
|
var imageToLeft = _ref2.imageToLeft;
|
|
5040
5123
|
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'";
|
|
5041
5124
|
}, devices.mobile);
|
|
5042
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5125
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref3) {
|
|
5043
5126
|
var imageToLeft = _ref3.imageToLeft;
|
|
5044
5127
|
return imageToLeft ? 'left' : 'right';
|
|
5045
5128
|
}, devices.mobile);
|
|
5046
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
5129
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref4) {
|
|
5047
5130
|
var imageToLeft = _ref4.imageToLeft;
|
|
5048
5131
|
return imageToLeft ? 'right' : 'left';
|
|
5049
5132
|
}, devices.mobile);
|
|
5050
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
5051
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$
|
|
5052
|
-
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$
|
|
5133
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 32px 0;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n & {\n margin: 0 0 24px 0;\n }\n }\n"])), devices.mobile);
|
|
5134
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
5135
|
+
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
5053
5136
|
var theme = _ref5.theme;
|
|
5054
5137
|
return theme.colors.black;
|
|
5055
5138
|
}, function (_ref6) {
|
|
@@ -5085,7 +5168,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
|
|
|
5085
5168
|
return '';
|
|
5086
5169
|
});
|
|
5087
5170
|
|
|
5088
|
-
var _excluded$
|
|
5171
|
+
var _excluded$i = ["text"],
|
|
5089
5172
|
_excluded2$2 = ["text"];
|
|
5090
5173
|
var LENGTH_TEXT$1 = 28;
|
|
5091
5174
|
|
|
@@ -5112,7 +5195,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
5112
5195
|
var _ref2 = primaryButton || {},
|
|
5113
5196
|
_ref2$text = _ref2.text,
|
|
5114
5197
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
5115
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
5198
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
|
|
5116
5199
|
|
|
5117
5200
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$1);
|
|
5118
5201
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -5146,8 +5229,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
5146
5229
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
5147
5230
|
};
|
|
5148
5231
|
|
|
5149
|
-
var _templateObject$
|
|
5150
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5232
|
+
var _templateObject$L;
|
|
5233
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
5151
5234
|
|
|
5152
5235
|
var SectionTitle = function SectionTitle(_ref) {
|
|
5153
5236
|
var title = _ref.title,
|
|
@@ -5173,8 +5256,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
5173
5256
|
}, description))));
|
|
5174
5257
|
};
|
|
5175
5258
|
|
|
5176
|
-
var _templateObject$
|
|
5177
|
-
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5259
|
+
var _templateObject$M;
|
|
5260
|
+
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin-left: 20px;\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 20px;\n }\n\n & li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n"])));
|
|
5178
5261
|
|
|
5179
5262
|
var TextOnly = function TextOnly(_ref) {
|
|
5180
5263
|
var _ref$text = _ref.text,
|
|
@@ -5199,8 +5282,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
5199
5282
|
})));
|
|
5200
5283
|
};
|
|
5201
5284
|
|
|
5202
|
-
var _templateObject$
|
|
5203
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
5285
|
+
var _templateObject$N, _templateObject2$u;
|
|
5286
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
|
|
5204
5287
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
5205
5288
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
5206
5289
|
return aspectRatio;
|
|
@@ -5210,7 +5293,7 @@ var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M
|
|
|
5210
5293
|
height = _ref2.height;
|
|
5211
5294
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
5212
5295
|
});
|
|
5213
|
-
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
5296
|
+
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
5214
5297
|
|
|
5215
5298
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
5216
5299
|
var caption = _ref.caption,
|
|
@@ -5248,8 +5331,8 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
5248
5331
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
5249
5332
|
};
|
|
5250
5333
|
|
|
5251
|
-
var _templateObject$
|
|
5252
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
5334
|
+
var _templateObject$O;
|
|
5335
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
5253
5336
|
var theme = _ref.theme;
|
|
5254
5337
|
return theme.colors.primary;
|
|
5255
5338
|
}, function (_ref2) {
|
|
@@ -6133,5 +6216,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$N || (_templat
|
|
|
6133
6216
|
return theme.spacing[6];
|
|
6134
6217
|
}, devices.desktop, devices.largeDesktop);
|
|
6135
6218
|
|
|
6136
|
-
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, TypeTags, devices };
|
|
6219
|
+
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
|
|
6137
6220
|
//# sourceMappingURL=chord.esm.js.map
|