@royaloperahouse/harmonic 0.1.1-d → 0.1.2
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 +185 -6
- package/README.GIT +285 -0
- package/README.md +41 -258
- package/dist/components/atoms/ImageAspectRatioWrapper/ImageAspectRatioWrapper.d.ts +3 -2
- package/dist/components/atoms/ImageAspectRatioWrapper/ImageAspectRatioWrapper.style.d.ts +3 -0
- package/dist/components/atoms/SocialLinks/SocialLinks.d.ts +4 -0
- package/dist/components/atoms/SocialLinks/SocialLinks.style.d.ts +2 -0
- package/dist/components/atoms/SocialLinks/index.d.ts +2 -0
- package/dist/components/atoms/SponsorLogo/SponsorLogo.d.ts +1 -1
- package/dist/components/atoms/index.d.ts +2 -1
- package/dist/components/molecules/ImageWithCaption/ImageWithCaption.style.d.ts +2 -2
- package/dist/components/molecules/PolicyLinks/PolicyLinks.d.ts +3 -3
- package/dist/components/molecules/PolicyLinks/PolicyLinks.style.d.ts +1 -3
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/components/organisms/Footer/Footer.d.ts +2 -2
- package/dist/components/organisms/Footer/Footer.style.d.ts +5 -5
- package/dist/harmonic.cjs.development.css +1 -5
- package/dist/harmonic.cjs.development.js +898 -838
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +899 -839
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/helpers/devices.d.ts +6 -0
- package/dist/styles/themes.d.ts +32 -0
- package/dist/types/footer.d.ts +6 -0
- package/dist/types/image.d.ts +14 -4
- package/dist/types/types.d.ts +4 -0
- package/dist/types/typography.d.ts +1 -6
- package/package.json +2 -2
package/dist/harmonic.esm.js
CHANGED
|
@@ -37,7 +37,7 @@ function styleInject(css, ref) {
|
|
|
37
37
|
var css_248z = "/* Global Styles for Harmonic CSS components */\n:root { \n --font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-red: #F40B0B;\n --harmonic-black: #000000;\n --text-link-underline-offset: 4px;\n }\n\n\n/* TODO: store breakpoints here for use in css components */ \n/* export const breakpoints = {\n xs: 320,\n sm: 700,\n md: 1140,\n ml: 1280,\n lg: 1400,\n }; */";
|
|
38
38
|
styleInject(css_248z);
|
|
39
39
|
|
|
40
|
-
var css_248z$1 = "/* ~~~~~ General Styling Classes ~~~~~ */\n .styles_color-black__a05Fo {\n color: var(--harmonic-black);\n }\n \n .styles_color-red__zwTZW {\n color: var(--harmonic-red);\n }\n\n .styles_em__v4FoO {\n font-style: italic;\n }\n/* ~~~ */\n\n/* Display Headers */\n.styles_display__VgnTB {\n font-family: var(--font-family-sans);\n\n &.styles_large__vqVxY {\n font-size: 96px;\n letter-spacing: -5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 68px;\n letter-spacing: -3px;\n font-weight: 500;\n }\n\n &.styles_serif__b-ZjM, &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n @media (max-width: 600px) {\n &.styles_large__vqVxY {\n font-size: 38px;\n letter-spacing: -1.5px; \n }\n \n &.styles_small__e7YDe {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.styles_large__vqVxY.styles_serif__b-ZjM, \n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.styles_header__UDH-H {\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n &.styles_serif__b-ZjM, &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n @media (max-width: 600px) {\n &.styles_large__vqVxY {\n font-size: 28px;\n letter-spacing: -1.5px;\n line-height: 34px;\n }\n \n &.styles_medium__WQPZj {\n font-size: 24px;\n letter-spacing: -1px;\n line-height: 28px;\n }\n \n &.styles_small__e7YDe {\n font-size: 20px;\n letter-spacing: -0.75px;\n line-height: 26px;\n }\n }\n}\n\n/* Subtitle */\n.styles_subtitle__os3DH {\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n }\n\n &.styles_small__e7YDe {\n font-size: 17px;\n line-height: 24px;\n }\n\n @media (max-width: 600px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n }\n \n &.styles_small__e7YDe {\n font-size: 14px;\n letter-spacing: -0.2px;\n line-height: 20px;\n }\n }\n}\n\n/* Body Copy */\n.styles_bodycopy__uEx9r {\n font-family: var(--font-family-sans);\n font-weight: 400;\n letter-spacing: -0.5px;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 17px;\n line-height: 24px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n }\n\n @media (max-width: 600px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n }\n \n &.styles_medium__WQPZj {\n font-size: 14px;\n letter-spacing: -0.2px;\n line-height: 20px;\n }\n \n &.styles_small__e7YDe {\n font-size: 11px;\n letter-spacing: -0.2px;\n line-height: 16px;\n }\n }\n}\n\n/* Overline */\n.styles_overline__5xGDa {\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.styles_large__vqVxY { font-size: 14px; line-height: 18px; letter-spacing: 0.3px; }\n &.styles_small__e7YDe { font-size: 12px; line-height: 14px; letter-spacing: 0.2px; }\n\n @media (max-width: 600px) {\n &.styles_large__vqVxY {\n line-height: 17px;\n }\n \n &.styles_small__e7YDe {\n letter-spacing: 0.3px;\n line-height: 14px;\n }\n }\n}\n\n/* Button Text */\n.styles_buttontext__UPumF {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 20px;\n}\n\n/* Caption Text */\n.styles_captiontext__-TA6x {\n font-size: 17px;\n font-weight: 400;\n font-style: italic;\n line-height: 24px;\n\n @media (max-width: 600px) {\n font-size: 14px;\n line-height: 17px;\n } \n}\n\n/* Navigation Text */\n.styles_navigationtext__qnnIo {\n font-family: var(--font-family-sans);\n font-size: 17px;\n font-weight: 500;\n text-transform: uppercase;\n
|
|
40
|
+
var css_248z$1 = "/* ~~~~~ General Styling Classes ~~~~~ */\n .styles_color-black__a05Fo {\n color: var(--harmonic-black);\n }\n \n .styles_color-red__zwTZW {\n color: var(--harmonic-red);\n }\n\n .styles_em__v4FoO {\n font-style: italic;\n }\n/* ~~~ */\n\n/* Display Headers */\n.styles_display__VgnTB {\n font-family: var(--font-family-sans);\n\n &.styles_large__vqVxY {\n font-size: 96px;\n letter-spacing: -5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 68px;\n letter-spacing: -3px;\n font-weight: 500;\n }\n\n &.styles_serif__b-ZjM, &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n @media (max-width: 600px) {\n &.styles_large__vqVxY {\n font-size: 38px;\n letter-spacing: -1.5px; \n }\n \n &.styles_small__e7YDe {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.styles_large__vqVxY.styles_serif__b-ZjM, \n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.styles_header__UDH-H {\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n &.styles_serif__b-ZjM, &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n @media (max-width: 600px) {\n &.styles_large__vqVxY {\n font-size: 28px;\n letter-spacing: -1.5px;\n line-height: 34px;\n }\n \n &.styles_medium__WQPZj {\n font-size: 24px;\n letter-spacing: -1px;\n line-height: 28px;\n }\n \n &.styles_small__e7YDe {\n font-size: 20px;\n letter-spacing: -0.75px;\n line-height: 26px;\n }\n }\n}\n\n/* Subtitle */\n.styles_subtitle__os3DH {\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n }\n\n &.styles_small__e7YDe {\n font-size: 17px;\n line-height: 24px;\n }\n\n @media (max-width: 600px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n }\n \n &.styles_small__e7YDe {\n font-size: 14px;\n letter-spacing: -0.2px;\n line-height: 20px;\n }\n }\n}\n\n/* Body Copy */\n.styles_bodycopy__uEx9r {\n font-family: var(--font-family-sans);\n font-weight: 400;\n letter-spacing: -0.5px;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 17px;\n line-height: 24px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n }\n\n @media (max-width: 600px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n }\n \n &.styles_medium__WQPZj {\n font-size: 14px;\n letter-spacing: -0.2px;\n line-height: 20px;\n }\n \n &.styles_small__e7YDe {\n font-size: 11px;\n letter-spacing: -0.2px;\n line-height: 16px;\n }\n }\n}\n\n/* Overline */\n.styles_overline__5xGDa {\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.styles_large__vqVxY { font-size: 14px; line-height: 18px; letter-spacing: 0.3px; }\n &.styles_small__e7YDe { font-size: 12px; line-height: 14px; letter-spacing: 0.2px; }\n\n @media (max-width: 600px) {\n &.styles_large__vqVxY {\n line-height: 17px;\n }\n \n &.styles_small__e7YDe {\n letter-spacing: 0.3px;\n line-height: 14px;\n }\n }\n}\n\n/* Button Text */\n.styles_buttontext__UPumF {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 20px;\n}\n\n/* Caption Text */\n.styles_captiontext__-TA6x {\n font-size: 17px;\n font-weight: 400;\n font-style: italic;\n line-height: 24px;\n\n @media (max-width: 600px) {\n font-size: 14px;\n line-height: 17px;\n } \n}\n\n/* Navigation Text */\n.styles_navigationtext__qnnIo {\n font-family: var(--font-family-sans);\n font-size: 17px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n line-height: 17px;\n}";
|
|
41
41
|
styleInject(css_248z$1);
|
|
42
42
|
|
|
43
43
|
// eslint-disable-next-line no-shadow
|
|
@@ -1105,20 +1105,24 @@ var common = {
|
|
|
1105
1105
|
desktop: {
|
|
1106
1106
|
height: '380px',
|
|
1107
1107
|
paddingTop: '44px',
|
|
1108
|
-
paddingBottom: '
|
|
1108
|
+
paddingBottom: '44px',
|
|
1109
1109
|
itemsGap: '32px',
|
|
1110
|
-
mediaGap: '
|
|
1110
|
+
mediaGap: '24px',
|
|
1111
1111
|
mediaIconWidth: '24px',
|
|
1112
1112
|
mediaIconHeight: '24px',
|
|
1113
1113
|
verticalSpacingLarge: '58px',
|
|
1114
1114
|
verticalSpacingSmall: '16px'
|
|
1115
1115
|
},
|
|
1116
|
+
tablet: {
|
|
1117
|
+
paddingTop: '40px',
|
|
1118
|
+
paddingBottom: '40px'
|
|
1119
|
+
},
|
|
1116
1120
|
mobile: {
|
|
1117
1121
|
height: 'auto',
|
|
1118
1122
|
paddingTop: '20px',
|
|
1119
1123
|
paddingBottom: '20px',
|
|
1120
1124
|
itemsGap: '12px',
|
|
1121
|
-
mediaGap: '
|
|
1125
|
+
mediaGap: '32px',
|
|
1122
1126
|
mediaIconWidth: '28px',
|
|
1123
1127
|
mediaIconHeight: '28px',
|
|
1124
1128
|
verticalSpacingLarge: '24px',
|
|
@@ -2973,7 +2977,7 @@ var AspectRatio;
|
|
|
2973
2977
|
AspectRatio["1:1"] = "1 / 1";
|
|
2974
2978
|
AspectRatio["3:4"] = "3 / 4";
|
|
2975
2979
|
AspectRatio["4:3"] = "4 / 3";
|
|
2976
|
-
AspectRatio["3
|
|
2980
|
+
AspectRatio["8:3"] = "8 / 3";
|
|
2977
2981
|
AspectRatio["16:9"] = "16 / 9";
|
|
2978
2982
|
})(AspectRatio || (AspectRatio = {}));
|
|
2979
2983
|
var AspectRatioLegacy;
|
|
@@ -2981,7 +2985,7 @@ var AspectRatioLegacy;
|
|
|
2981
2985
|
AspectRatioLegacy["1 / 1"] = "100";
|
|
2982
2986
|
AspectRatioLegacy["3 / 4"] = "133";
|
|
2983
2987
|
AspectRatioLegacy["4 / 3"] = "75";
|
|
2984
|
-
AspectRatioLegacy["
|
|
2988
|
+
AspectRatioLegacy["8 / 3"] = "37.5";
|
|
2985
2989
|
AspectRatioLegacy["16 / 9"] = "56.25";
|
|
2986
2990
|
})(AspectRatioLegacy || (AspectRatioLegacy = {}));
|
|
2987
2991
|
var AspectRatioWidth;
|
|
@@ -2989,7 +2993,7 @@ var AspectRatioWidth;
|
|
|
2989
2993
|
AspectRatioWidth["1 / 1"] = "1";
|
|
2990
2994
|
AspectRatioWidth["3 / 4"] = "0.75";
|
|
2991
2995
|
AspectRatioWidth["4 / 3"] = "1.33";
|
|
2992
|
-
AspectRatioWidth["
|
|
2996
|
+
AspectRatioWidth["8 / 3"] = "2.67";
|
|
2993
2997
|
AspectRatioWidth["16 / 9"] = "1.78";
|
|
2994
2998
|
})(AspectRatioWidth || (AspectRatioWidth = {}));
|
|
2995
2999
|
|
|
@@ -3281,7 +3285,7 @@ var GridItem = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a =
|
|
|
3281
3285
|
});
|
|
3282
3286
|
|
|
3283
3287
|
var _templateObject$b;
|
|
3284
|
-
var
|
|
3288
|
+
var StyledImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
3285
3289
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
3286
3290
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
3287
3291
|
return aspectRatio;
|
|
@@ -3299,6 +3303,24 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_tem
|
|
|
3299
3303
|
return aspectRatio;
|
|
3300
3304
|
});
|
|
3301
3305
|
|
|
3306
|
+
var ImageAspectRatioWrapper = function ImageAspectRatioWrapper(_ref) {
|
|
3307
|
+
var aspectRatio = _ref.aspectRatio,
|
|
3308
|
+
children = _ref.children,
|
|
3309
|
+
alt = _ref.alt;
|
|
3310
|
+
return /*#__PURE__*/React__default.createElement(StyledImageAspectRatioWrapper, {
|
|
3311
|
+
aspectRatio: aspectRatio
|
|
3312
|
+
}, React__default.Children.map(children, function (child) {
|
|
3313
|
+
if (/*#__PURE__*/React__default.isValidElement(child)) {
|
|
3314
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
3315
|
+
alt: alt || child.props.alt || '',
|
|
3316
|
+
role: alt ? 'img' : 'presentation',
|
|
3317
|
+
'aria-hidden': !alt
|
|
3318
|
+
});
|
|
3319
|
+
}
|
|
3320
|
+
return child;
|
|
3321
|
+
}));
|
|
3322
|
+
};
|
|
3323
|
+
|
|
3302
3324
|
var _templateObject$c, _templateObject2$4, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
3303
3325
|
var ProgressView = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
|
|
3304
3326
|
var height = _ref.height;
|
|
@@ -3759,19 +3781,23 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3759
3781
|
};
|
|
3760
3782
|
|
|
3761
3783
|
var _templateObject$j;
|
|
3762
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width:
|
|
3784
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100%;\n max-width: 90%;\n height: auto;\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n\n svg {\n display: block; /* Avoids inline SVG extra spacing issues */\n width: 100%;\n height: auto;\n max-width: 100%;\n }\n"])), devices.tablet, devices.mobile);
|
|
3763
3785
|
|
|
3764
3786
|
/* eslint-disable max-len */
|
|
3765
3787
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3766
3788
|
var _ref$colorLogo = _ref.colorLogo,
|
|
3767
3789
|
colorLogo = _ref$colorLogo === void 0 ? '#fff' : _ref$colorLogo,
|
|
3768
3790
|
_ref$colorBackground = _ref.colorBackground,
|
|
3769
|
-
colorBackground = _ref$colorBackground === void 0 ? '#1d1d1b' : _ref$colorBackground
|
|
3791
|
+
colorBackground = _ref$colorBackground === void 0 ? '#1d1d1b' : _ref$colorBackground,
|
|
3792
|
+
_ref$alt = _ref.alt,
|
|
3793
|
+
alt = _ref$alt === void 0 ? 'Sponsor Logo' : _ref$alt;
|
|
3770
3794
|
return /*#__PURE__*/React__default.createElement(SponsorLogoWrapper, null, /*#__PURE__*/React__default.createElement("svg", {
|
|
3771
3795
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3772
3796
|
viewBox: "0 0 258.64 57.26",
|
|
3773
|
-
|
|
3774
|
-
|
|
3797
|
+
preserveAspectRatio: "xMidYMid meet" // Maintains the aspect ratio while centering
|
|
3798
|
+
,
|
|
3799
|
+
role: "img",
|
|
3800
|
+
"aria-label": alt
|
|
3775
3801
|
}, /*#__PURE__*/React__default.createElement("g", {
|
|
3776
3802
|
id: "Layer_2",
|
|
3777
3803
|
"data-name": "Layer 2"
|
|
@@ -4472,9 +4498,9 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4472
4498
|
};
|
|
4473
4499
|
|
|
4474
4500
|
var _templateObject$q, _templateObject2$f;
|
|
4475
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--harmonic-font-family-sans);\n font-size: 17px;\n font-weight: 500;\n line-height: 14px;\n letter-spacing:
|
|
4501
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--harmonic-font-family-sans);\n font-size: 17px;\n font-weight: 500;\n line-height: 14px;\n letter-spacing: 0.4px;\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media (max-width: 600px) {\n line-height: 17px;\n }\n"])), function (_ref) {
|
|
4476
4502
|
var iconName = _ref.iconName;
|
|
4477
|
-
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
4503
|
+
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
|
|
4478
4504
|
}, function (_ref2) {
|
|
4479
4505
|
var color = _ref2.color;
|
|
4480
4506
|
return color;
|
|
@@ -5249,12 +5275,37 @@ var Component = function Component(_ref) {
|
|
|
5249
5275
|
}, error))));
|
|
5250
5276
|
};
|
|
5251
5277
|
|
|
5252
|
-
var _templateObject$x, _templateObject2$l
|
|
5253
|
-
var
|
|
5278
|
+
var _templateObject$x, _templateObject2$l;
|
|
5279
|
+
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
|
|
5280
|
+
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n\n &:focus {\n outline: 2px solid ", ";\n }\n"])), function (_ref) {
|
|
5281
|
+
var theme = _ref.theme;
|
|
5282
|
+
return theme.colors.white;
|
|
5283
|
+
});
|
|
5284
|
+
|
|
5285
|
+
var SocialLinks = function SocialLinks(_ref) {
|
|
5286
|
+
var items = _ref.items;
|
|
5287
|
+
return /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, items.map(function (mediaLink, idx) {
|
|
5288
|
+
return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
|
|
5289
|
+
key: mediaLink.name + "-" + idx,
|
|
5290
|
+
href: mediaLink.href,
|
|
5291
|
+
title: mediaLink.name,
|
|
5292
|
+
"aria-label": "Social media link: " + mediaLink.name,
|
|
5293
|
+
rel: "noopener noreferrer" // Ensures security for external links
|
|
5294
|
+
,
|
|
5295
|
+
target: "_blank"
|
|
5296
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5297
|
+
iconName: mediaLink.name,
|
|
5298
|
+
color: "white"
|
|
5299
|
+
}));
|
|
5300
|
+
}));
|
|
5301
|
+
};
|
|
5302
|
+
|
|
5303
|
+
var _templateObject$y, _templateObject2$m, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
5304
|
+
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
5254
5305
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5255
5306
|
return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--base-color-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
5256
5307
|
});
|
|
5257
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5308
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__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);
|
|
5258
5309
|
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$e || (_templateObject3$e = /*#__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);
|
|
5259
5310
|
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\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: 100%;\n top: 80px;\n }\n"])), function (_ref2) {
|
|
5260
5311
|
var visible = _ref2.visible;
|
|
@@ -5274,8 +5325,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObjec
|
|
|
5274
5325
|
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
5275
5326
|
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__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);
|
|
5276
5327
|
|
|
5277
|
-
var _templateObject$
|
|
5278
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5328
|
+
var _templateObject$z;
|
|
5329
|
+
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
5279
5330
|
|
|
5280
5331
|
var Logo = function Logo(_ref) {
|
|
5281
5332
|
var _ref$id = _ref.id,
|
|
@@ -5307,11 +5358,11 @@ var Logo = function Logo(_ref) {
|
|
|
5307
5358
|
}))));
|
|
5308
5359
|
};
|
|
5309
5360
|
|
|
5310
|
-
var _templateObject$
|
|
5311
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5361
|
+
var _templateObject$A;
|
|
5362
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__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);
|
|
5312
5363
|
|
|
5313
|
-
var _templateObject$
|
|
5314
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5364
|
+
var _templateObject$B, _templateObject2$n, _templateObject3$f, _templateObject4$c;
|
|
5365
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__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\n ", "\n"])), function (_ref) {
|
|
5315
5366
|
var selected = _ref.selected,
|
|
5316
5367
|
colorPrimary = _ref.colorPrimary;
|
|
5317
5368
|
if (selected) {
|
|
@@ -5335,7 +5386,7 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObj
|
|
|
5335
5386
|
}
|
|
5336
5387
|
return '';
|
|
5337
5388
|
});
|
|
5338
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5389
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5339
5390
|
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__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"])));
|
|
5340
5391
|
var BasketText = /*#__PURE__*/styled.a(_templateObject4$c || (_templateObject4$c = /*#__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"])));
|
|
5341
5392
|
|
|
@@ -5479,8 +5530,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5479
5530
|
}, expiryTime ? basketText : text) : ''));
|
|
5480
5531
|
};
|
|
5481
5532
|
|
|
5482
|
-
var _templateObject$
|
|
5483
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5533
|
+
var _templateObject$C, _templateObject2$o;
|
|
5534
|
+
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__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) {
|
|
5484
5535
|
var selected = _ref.selected,
|
|
5485
5536
|
colorPrimary = _ref.colorPrimary;
|
|
5486
5537
|
if (selected) {
|
|
@@ -5494,7 +5545,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObj
|
|
|
5494
5545
|
var colorPrimary = _ref3.colorPrimary;
|
|
5495
5546
|
return colorPrimary;
|
|
5496
5547
|
});
|
|
5497
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
5548
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5498
5549
|
|
|
5499
5550
|
var Search$1 = function Search(_ref) {
|
|
5500
5551
|
var _ref$selected = _ref.selected,
|
|
@@ -5747,9 +5798,9 @@ var NavTop = function NavTop(_ref) {
|
|
|
5747
5798
|
}));
|
|
5748
5799
|
};
|
|
5749
5800
|
|
|
5750
|
-
var _templateObject$
|
|
5751
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5752
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5801
|
+
var _templateObject$D, _templateObject2$p, _templateObject3$g, _templateObject4$d;
|
|
5802
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
5803
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__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 div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
5753
5804
|
if (props.showMenu) {
|
|
5754
5805
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
5755
5806
|
}
|
|
@@ -5876,9 +5927,9 @@ var Tabs = function Tabs(_ref) {
|
|
|
5876
5927
|
}, "MENU"))))));
|
|
5877
5928
|
};
|
|
5878
5929
|
|
|
5879
|
-
var _templateObject$
|
|
5880
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5881
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
5930
|
+
var _templateObject$E, _templateObject2$q, _templateObject3$h, _templateObject5$9, _templateObject6$6, _templateObject7$3;
|
|
5931
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: var(--base-color-transparent);\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
5932
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
5882
5933
|
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__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"])));
|
|
5883
5934
|
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__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);
|
|
5884
5935
|
var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
@@ -6090,530 +6141,105 @@ var Navigation = function Navigation(_ref) {
|
|
|
6090
6141
|
}))))));
|
|
6091
6142
|
};
|
|
6092
6143
|
|
|
6093
|
-
|
|
6094
|
-
var
|
|
6095
|
-
|
|
6096
|
-
|
|
6097
|
-
|
|
6098
|
-
|
|
6099
|
-
|
|
6100
|
-
|
|
6101
|
-
|
|
6102
|
-
|
|
6103
|
-
|
|
6104
|
-
|
|
6105
|
-
|
|
6106
|
-
var PolicyLinks = function PolicyLinks(_ref) {
|
|
6107
|
-
var _ref$items = _ref.items,
|
|
6108
|
-
items = _ref$items === void 0 ? [] : _ref$items;
|
|
6109
|
-
return /*#__PURE__*/React__default.createElement(PolicyLinksList, null, items.map(function (item) {
|
|
6110
|
-
return /*#__PURE__*/React__default.createElement(PolicyLinkItem, {
|
|
6111
|
-
key: item.name
|
|
6112
|
-
}, /*#__PURE__*/React__default.createElement(PolicyLink, {
|
|
6113
|
-
"data-roh": item.dataRoh,
|
|
6114
|
-
href: item.href,
|
|
6115
|
-
title: item.title
|
|
6116
|
-
}, item.title));
|
|
6117
|
-
}));
|
|
6144
|
+
// WARNING: Do not use this on server side rendering, it may throw an error.
|
|
6145
|
+
var isIOS = function isIOS() {
|
|
6146
|
+
try {
|
|
6147
|
+
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
6148
|
+
if (typeof navigator === undefined) return false;
|
|
6149
|
+
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
|
|
6150
|
+
// iPad on iOS 13 detection
|
|
6151
|
+
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
6152
|
+
} catch (e) {
|
|
6153
|
+
console.warn('Error checking if device is iOS.', e);
|
|
6154
|
+
return false;
|
|
6155
|
+
}
|
|
6118
6156
|
};
|
|
6119
|
-
|
|
6120
|
-
var
|
|
6121
|
-
var
|
|
6122
|
-
|
|
6123
|
-
|
|
6124
|
-
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
|
|
6128
|
-
|
|
6129
|
-
|
|
6130
|
-
var ContactNewsletter = function ContactNewsletter(_ref) {
|
|
6131
|
-
var signUpText = _ref.signUpText,
|
|
6132
|
-
signUpLink = _ref.signUpLink,
|
|
6133
|
-
socialMediaLinks = _ref.socialMediaLinks,
|
|
6134
|
-
contact = _ref.contact;
|
|
6135
|
-
return /*#__PURE__*/React__default.createElement(ContactNewsletterWrapper, null, /*#__PURE__*/React__default.createElement(SignUpWrapper, null, /*#__PURE__*/React__default.createElement(SignUpText, null, signUpText), /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, null, /*#__PURE__*/React__default.createElement(TextLink, {
|
|
6136
|
-
href: signUpLink.href,
|
|
6137
|
-
title: signUpLink.title
|
|
6138
|
-
}, signUpLink.title))), /*#__PURE__*/React__default.createElement(ContactNewsletterSeparator, null), /*#__PURE__*/React__default.createElement(ContactWrapper, null, /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, socialMediaLinks.map(function (mediaLink) {
|
|
6139
|
-
return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
|
|
6140
|
-
key: mediaLink.name,
|
|
6141
|
-
href: mediaLink.href,
|
|
6142
|
-
title: mediaLink.name
|
|
6143
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
6144
|
-
iconName: mediaLink.name,
|
|
6145
|
-
color: "white"
|
|
6146
|
-
}));
|
|
6147
|
-
})), /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, null, /*#__PURE__*/React__default.createElement(TextLink, {
|
|
6148
|
-
href: contact.href,
|
|
6149
|
-
title: contact.title
|
|
6150
|
-
}, contact.title))));
|
|
6157
|
+
// React hook version of isIOS (for server side rendering)
|
|
6158
|
+
var useIOS = function useIOS() {
|
|
6159
|
+
var _useState = useState(false),
|
|
6160
|
+
IOS = _useState[0],
|
|
6161
|
+
setIOS = _useState[1];
|
|
6162
|
+
useEffect(function () {
|
|
6163
|
+
if (typeof navigator === undefined) return;
|
|
6164
|
+
setIOS(isIOS());
|
|
6165
|
+
}, []);
|
|
6166
|
+
return IOS;
|
|
6151
6167
|
};
|
|
6152
|
-
|
|
6153
|
-
var
|
|
6154
|
-
|
|
6155
|
-
|
|
6156
|
-
|
|
6157
|
-
|
|
6158
|
-
|
|
6159
|
-
|
|
6160
|
-
|
|
6161
|
-
|
|
6162
|
-
artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$b),
|
|
6163
|
-
additionalInfo = data.additionalInfo;
|
|
6164
|
-
var socialMediaLinks = rawSocialMediaLinks;
|
|
6165
|
-
return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
6166
|
-
columnStartDesktop: 3,
|
|
6167
|
-
columnSpanDesktop: 12,
|
|
6168
|
-
columnStartDevice: 2,
|
|
6169
|
-
columnSpanDevice: 12
|
|
6170
|
-
}, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksRow, {
|
|
6171
|
-
"data-testid": "policy-links"
|
|
6172
|
-
}, /*#__PURE__*/React__default.createElement(PolicyLinks, {
|
|
6173
|
-
items: policyLinks
|
|
6174
|
-
})), /*#__PURE__*/React__default.createElement(ContactNewsletterRow, {
|
|
6175
|
-
"data-testid": "contact-newsletter"
|
|
6176
|
-
}, /*#__PURE__*/React__default.createElement(ContactNewsletter, {
|
|
6177
|
-
signUpText: newsletter.text,
|
|
6178
|
-
signUpLink: newsletter.link,
|
|
6179
|
-
socialMediaLinks: socialMediaLinks,
|
|
6180
|
-
contact: contact
|
|
6181
|
-
})), /*#__PURE__*/React__default.createElement(ArtsLogoRow, {
|
|
6182
|
-
"data-testid": "arts-logo"
|
|
6183
|
-
}, /*#__PURE__*/React__default.createElement("a", Object.assign({
|
|
6184
|
-
"data-roh": artsDataRoh,
|
|
6185
|
-
target: "_blank",
|
|
6186
|
-
rel: "noopener noreferrer"
|
|
6187
|
-
}, artsLogo), /*#__PURE__*/React__default.createElement(SponsorLogo, null))), /*#__PURE__*/React__default.createElement(AdditionalInfo, {
|
|
6188
|
-
"data-testid": "additional-info"
|
|
6189
|
-
}, additionalInfo)))));
|
|
6168
|
+
// Checks device size based on window width
|
|
6169
|
+
var isMobile = function isMobile() {
|
|
6170
|
+
try {
|
|
6171
|
+
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
6172
|
+
if (typeof window === undefined) return false;
|
|
6173
|
+
return window.innerWidth < breakpoints.sm;
|
|
6174
|
+
} catch (e) {
|
|
6175
|
+
console.warn('Error checking if device is mobile.', e);
|
|
6176
|
+
return false;
|
|
6177
|
+
}
|
|
6190
6178
|
};
|
|
6191
|
-
|
|
6192
|
-
var
|
|
6193
|
-
var LIST_ITEM_GAP = 32;
|
|
6194
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6195
|
-
var bottomBorder = _ref.bottomBorder;
|
|
6196
|
-
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6197
|
-
}, zIndexes.anchor);
|
|
6198
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
6199
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6200
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\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 background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0.48) 85%,\n rgba(235, 235, 235, 0.4) 99%,\n rgba(255, 255, 255, 0.39) 100%\n );\n }\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref2) {
|
|
6201
|
-
var tabsOverflow = _ref2.tabsOverflow;
|
|
6202
|
-
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
6203
|
-
}, LIST_ITEM_GAP, function (_ref3) {
|
|
6204
|
-
var tabsOverflow = _ref3.tabsOverflow;
|
|
6205
|
-
return tabsOverflow ? 'start' : 'center';
|
|
6206
|
-
}, devices.mobileAndTablet, devices.mobile, function (_ref4) {
|
|
6207
|
-
var tabsOverflow = _ref4.tabsOverflow,
|
|
6208
|
-
hasTwoArrows = _ref4.hasTwoArrows;
|
|
6209
|
-
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
6210
|
-
});
|
|
6211
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\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"])), function (_ref5) {
|
|
6212
|
-
var fullWidth = _ref5.fullWidth;
|
|
6213
|
-
return fullWidth ? '74px' : '46px';
|
|
6214
|
-
});
|
|
6215
|
-
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__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"])));
|
|
6216
|
-
|
|
6217
|
-
var _excluded$c = ["id", "text"];
|
|
6218
|
-
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
6219
|
-
var tabs = _ref.tabs,
|
|
6220
|
-
onTabClick = _ref.onTabClick,
|
|
6221
|
-
activeTab = _ref.activeTab,
|
|
6222
|
-
absolutePositionParams = _ref.absolutePositionParams,
|
|
6223
|
-
_ref$bottomBorder = _ref.bottomBorder,
|
|
6224
|
-
bottomBorder = _ref$bottomBorder === void 0 ? false : _ref$bottomBorder;
|
|
6225
|
-
var tabListRef = useRef(null);
|
|
6226
|
-
var wrapperRef = useRef(null);
|
|
6227
|
-
var _useState = useState(activeTab || ''),
|
|
6228
|
-
selectedItem = _useState[0],
|
|
6229
|
-
setSelectedItem = _useState[1];
|
|
6179
|
+
// React hook version of isMobile (for server side rendering)
|
|
6180
|
+
var useMobile = function useMobile() {
|
|
6230
6181
|
var _useState2 = useState(false),
|
|
6231
|
-
|
|
6232
|
-
|
|
6233
|
-
var _useState3 = useState(false),
|
|
6234
|
-
canScrollToLeft = _useState3[0],
|
|
6235
|
-
setCanScrollToLeft = _useState3[1];
|
|
6236
|
-
var _useState4 = useState(tabsOverflow),
|
|
6237
|
-
canScrollToRight = _useState4[0],
|
|
6238
|
-
setCanScrollToRight = _useState4[1];
|
|
6239
|
-
var timer = null;
|
|
6240
|
-
var hasTwoArrows = canScrollToRight && canScrollToLeft;
|
|
6241
|
-
var isSelectedItem = function isSelectedItem(id) {
|
|
6242
|
-
return id === selectedItem;
|
|
6243
|
-
};
|
|
6244
|
-
var onClicktab = function onClicktab(e, id) {
|
|
6245
|
-
if (onTabClick) {
|
|
6246
|
-
onTabClick(e, id);
|
|
6247
|
-
}
|
|
6248
|
-
setSelectedItem(id);
|
|
6249
|
-
};
|
|
6250
|
-
var getScrollWidth = function getScrollWidth() {
|
|
6251
|
-
var width = 0;
|
|
6252
|
-
var selectedItemIndex = tabs.findIndex(function (el) {
|
|
6253
|
-
return el.id === selectedItem;
|
|
6254
|
-
});
|
|
6255
|
-
var tabLinks = document.getElementsByClassName('anchor-tab-bar-tablink');
|
|
6256
|
-
for (var i = 0; i < selectedItemIndex; ++i) {
|
|
6257
|
-
width += tabLinks[i].scrollWidth + LIST_ITEM_GAP;
|
|
6258
|
-
}
|
|
6259
|
-
return width;
|
|
6260
|
-
};
|
|
6261
|
-
// eslint-disable-next-line default-param-last
|
|
6262
|
-
var changeWrapperVisibility = function changeWrapperVisibility(showWrapper, topOffset) {
|
|
6263
|
-
if (showWrapper === void 0) {
|
|
6264
|
-
showWrapper = false;
|
|
6265
|
-
}
|
|
6266
|
-
var wrapperEl = wrapperRef.current;
|
|
6267
|
-
wrapperEl.style.position = 'absolute';
|
|
6268
|
-
wrapperEl.style.visibility = showWrapper && topOffset !== undefined ? 'visible' : 'hidden';
|
|
6269
|
-
if (showWrapper && topOffset !== undefined) wrapperEl.style.top = topOffset + "px";
|
|
6270
|
-
};
|
|
6271
|
-
var handleScrollForAbsolutePosition = function handleScrollForAbsolutePosition() {
|
|
6272
|
-
var _absolutePositionPara = absolutePositionParams.navigationHeight,
|
|
6273
|
-
navigationHeight = _absolutePositionPara === void 0 ? 0 : _absolutePositionPara,
|
|
6274
|
-
_absolutePositionPara2 = absolutePositionParams.topOffset,
|
|
6275
|
-
topOffset = _absolutePositionPara2 === void 0 ? 0 : _absolutePositionPara2;
|
|
6276
|
-
if (wrapperRef.current && window.pageYOffset > topOffset + navigationHeight) {
|
|
6277
|
-
changeWrapperVisibility();
|
|
6278
|
-
} else if (wrapperRef.current && window.pageYOffset < topOffset + navigationHeight) {
|
|
6279
|
-
changeWrapperVisibility(true, topOffset);
|
|
6280
|
-
}
|
|
6281
|
-
if (timer !== null) clearTimeout(timer);
|
|
6282
|
-
timer = setTimeout(function () {
|
|
6283
|
-
if (window.pageYOffset > topOffset + navigationHeight && wrapperRef.current) {
|
|
6284
|
-
changeWrapperVisibility(true, window.pageYOffset - navigationHeight);
|
|
6285
|
-
}
|
|
6286
|
-
}, 300);
|
|
6287
|
-
};
|
|
6288
|
-
// We use this behavior only on iOS devices because there is a known issue that
|
|
6289
|
-
// sticky elements lose their stickiness when a keyboard appears on the screen
|
|
6290
|
-
useEffect(function () {
|
|
6291
|
-
if (absolutePositionParams) {
|
|
6292
|
-
changeWrapperVisibility(true, absolutePositionParams.topOffset);
|
|
6293
|
-
document.addEventListener('scroll', handleScrollForAbsolutePosition);
|
|
6294
|
-
return function () {
|
|
6295
|
-
document.removeEventListener('scroll', handleScrollForAbsolutePosition);
|
|
6296
|
-
};
|
|
6297
|
-
}
|
|
6298
|
-
return undefined;
|
|
6299
|
-
}, []);
|
|
6182
|
+
mobile = _useState2[0],
|
|
6183
|
+
setMobile = _useState2[1];
|
|
6300
6184
|
useEffect(function () {
|
|
6301
|
-
|
|
6302
|
-
|
|
6303
|
-
}, 500);
|
|
6185
|
+
if (typeof window === undefined) return;
|
|
6186
|
+
setMobile(isMobile());
|
|
6304
6187
|
}, []);
|
|
6188
|
+
return mobile;
|
|
6189
|
+
};
|
|
6190
|
+
var useViewport = function useViewport() {
|
|
6191
|
+
var _useState3 = useState({
|
|
6192
|
+
width: window.innerWidth,
|
|
6193
|
+
isMobile: window.innerWidth < breakpoints.sm,
|
|
6194
|
+
isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
|
|
6195
|
+
isDesktop: window.innerWidth >= breakpoints.md
|
|
6196
|
+
}),
|
|
6197
|
+
viewport = _useState3[0],
|
|
6198
|
+
setViewport = _useState3[1];
|
|
6305
6199
|
useEffect(function () {
|
|
6306
|
-
var
|
|
6307
|
-
|
|
6308
|
-
|
|
6309
|
-
|
|
6310
|
-
|
|
6311
|
-
|
|
6312
|
-
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
6313
|
-
var elementGap = 100;
|
|
6314
|
-
var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
|
|
6315
|
-
var targetSectionElement = document.getElementById(item.id);
|
|
6316
|
-
if (!targetSectionElement) return false;
|
|
6317
|
-
var topDiff = (targetSectionElement == null ? void 0 : targetSectionElement.getBoundingClientRect().top) - elementGap;
|
|
6318
|
-
return selectedItem !== item.id && topDiff > 0 && topDiff < elementGap;
|
|
6200
|
+
var handleResize = function handleResize() {
|
|
6201
|
+
setViewport({
|
|
6202
|
+
width: window.innerWidth,
|
|
6203
|
+
isMobile: window.innerWidth < breakpoints.sm,
|
|
6204
|
+
isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
|
|
6205
|
+
isDesktop: window.innerWidth >= breakpoints.md
|
|
6319
6206
|
});
|
|
6320
|
-
if (window.scrollY === 0) {
|
|
6321
|
-
setSelectedItem(onTabClick ? selectedItem : '');
|
|
6322
|
-
} else if (reachedItem) {
|
|
6323
|
-
var _ref2 = (tabListRef == null ? void 0 : tabListRef.current) || {},
|
|
6324
|
-
_ref2$scrollLeft = _ref2.scrollLeft,
|
|
6325
|
-
scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
|
|
6326
|
-
_ref2$clientWidth = _ref2.clientWidth,
|
|
6327
|
-
clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
|
|
6328
|
-
var tabLinkElement = document.getElementById("tablink-" + reachedItem.id) || {
|
|
6329
|
-
offsetLeft: 0,
|
|
6330
|
-
offsetWidth: 0
|
|
6331
|
-
};
|
|
6332
|
-
var offsetLeft = tabLinkElement.offsetLeft,
|
|
6333
|
-
offsetWidth = tabLinkElement.offsetWidth;
|
|
6334
|
-
var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
|
|
6335
|
-
if (!isInView && tabListRef != null && tabListRef.current) {
|
|
6336
|
-
tabListRef.current.scrollLeft = offsetLeft;
|
|
6337
|
-
}
|
|
6338
|
-
setSelectedItem(reachedItem.id);
|
|
6339
|
-
}
|
|
6340
6207
|
};
|
|
6341
|
-
|
|
6208
|
+
window.addEventListener('resize', handleResize);
|
|
6342
6209
|
return function () {
|
|
6343
|
-
return
|
|
6210
|
+
return window.removeEventListener('resize', handleResize);
|
|
6344
6211
|
};
|
|
6345
|
-
}, [
|
|
6346
|
-
|
|
6347
|
-
if (tabsOverflow) {
|
|
6348
|
-
tabsColumnStart = canScrollToLeft ? 1 : 2;
|
|
6349
|
-
} else {
|
|
6350
|
-
tabsColumnStart = 3;
|
|
6351
|
-
}
|
|
6352
|
-
var tabsColumnSpan;
|
|
6353
|
-
if (tabsOverflow) {
|
|
6354
|
-
tabsColumnSpan = canScrollToLeft ? 15 : 14;
|
|
6355
|
-
} else {
|
|
6356
|
-
tabsColumnSpan = 12;
|
|
6357
|
-
}
|
|
6358
|
-
var scrollToRight = function scrollToRight() {
|
|
6359
|
-
if (tabListRef.current) {
|
|
6360
|
-
var scroll = tabListRef.current.scrollLeft;
|
|
6361
|
-
var newScroll = Math.min(tabListRef.current.clientWidth, tabListRef.current.scrollWidth - scroll);
|
|
6362
|
-
if (scroll - newScroll < LIST_ITEM_GAP) {
|
|
6363
|
-
tabListRef.current.scrollLeft += newScroll + LIST_ITEM_GAP;
|
|
6364
|
-
return;
|
|
6365
|
-
}
|
|
6366
|
-
tabListRef.current.scrollLeft += newScroll;
|
|
6367
|
-
}
|
|
6368
|
-
};
|
|
6369
|
-
var scrollToLeft = function scrollToLeft() {
|
|
6370
|
-
if (tabListRef.current) {
|
|
6371
|
-
var scroll = tabListRef.current.scrollLeft;
|
|
6372
|
-
var newScroll = Math.max(0, scroll - tabListRef.current.clientWidth);
|
|
6373
|
-
if (newScroll < LIST_ITEM_GAP) {
|
|
6374
|
-
tabListRef.current.scrollLeft = newScroll - LIST_ITEM_GAP;
|
|
6375
|
-
return;
|
|
6376
|
-
}
|
|
6377
|
-
tabListRef.current.scrollLeft = newScroll;
|
|
6378
|
-
}
|
|
6379
|
-
};
|
|
6380
|
-
var onTabsScroll = function onTabsScroll() {
|
|
6381
|
-
var _ref3 = (tabListRef == null ? void 0 : tabListRef.current) || {},
|
|
6382
|
-
_ref3$scrollLeft = _ref3.scrollLeft,
|
|
6383
|
-
scrollLeft = _ref3$scrollLeft === void 0 ? 0 : _ref3$scrollLeft,
|
|
6384
|
-
_ref3$clientWidth = _ref3.clientWidth,
|
|
6385
|
-
clientWidth = _ref3$clientWidth === void 0 ? 0 : _ref3$clientWidth,
|
|
6386
|
-
_ref3$scrollWidth = _ref3.scrollWidth,
|
|
6387
|
-
scrollWidth = _ref3$scrollWidth === void 0 ? 0 : _ref3$scrollWidth;
|
|
6388
|
-
setCanScrollToLeft(scrollLeft > LIST_ITEM_GAP);
|
|
6389
|
-
setCanScrollToRight(scrollLeft + clientWidth + LIST_ITEM_GAP < scrollWidth);
|
|
6390
|
-
};
|
|
6391
|
-
return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, {
|
|
6392
|
-
bottomBorder: bottomBorder,
|
|
6393
|
-
ref: wrapperRef,
|
|
6394
|
-
id: "AnchorTabbarWrapper"
|
|
6395
|
-
}, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
6396
|
-
columnStartDesktop: tabsColumnStart,
|
|
6397
|
-
columnSpanDesktop: tabsColumnSpan,
|
|
6398
|
-
columnStartDevice: 2,
|
|
6399
|
-
columnSpanDevice: 12
|
|
6400
|
-
}, /*#__PURE__*/React__default.createElement(TabsWrapper, {
|
|
6401
|
-
"data-testid": "anchor-tabs"
|
|
6402
|
-
}, /*#__PURE__*/React__default.createElement(TabsList, {
|
|
6403
|
-
hasTwoArrows: hasTwoArrows,
|
|
6404
|
-
ref: tabListRef,
|
|
6405
|
-
tabsOverflow: tabsOverflow,
|
|
6406
|
-
onScroll: onTabsScroll
|
|
6407
|
-
}, tabs.map(function (_ref4) {
|
|
6408
|
-
var id = _ref4.id,
|
|
6409
|
-
text = _ref4.text,
|
|
6410
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$c);
|
|
6411
|
-
return /*#__PURE__*/React__default.createElement("li", {
|
|
6412
|
-
key: id
|
|
6413
|
-
}, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
|
|
6414
|
-
selected: isSelectedItem(id),
|
|
6415
|
-
className: "anchor-tab-bar-tablink",
|
|
6416
|
-
id: "tablink-" + id,
|
|
6417
|
-
onClick: function onClick(e) {
|
|
6418
|
-
return onClicktab(e, id);
|
|
6419
|
-
},
|
|
6420
|
-
tabIndex: 0
|
|
6421
|
-
}, rest), text));
|
|
6422
|
-
})), tabsOverflow ? (/*#__PURE__*/React__default.createElement(ArrowsContainer, {
|
|
6423
|
-
fullWidth: hasTwoArrows
|
|
6424
|
-
}, canScrollToLeft ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
6425
|
-
onClick: scrollToLeft
|
|
6426
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
6427
|
-
iconName: "Arrow",
|
|
6428
|
-
direction: "reverse"
|
|
6429
|
-
}))) : null, canScrollToRight ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
6430
|
-
onClick: scrollToRight
|
|
6431
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
6432
|
-
iconName: "Arrow"
|
|
6433
|
-
}))) : null)) : null))));
|
|
6434
|
-
};
|
|
6435
|
-
|
|
6436
|
-
var _templateObject$I, _templateObject2$u, _templateObject3$m, _templateObject4$h, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
|
|
6437
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6438
|
-
var sticky = _ref.sticky;
|
|
6439
|
-
return sticky ? 'sticky' : 'initial';
|
|
6440
|
-
}, zIndexes.anchor);
|
|
6441
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
6442
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
6443
|
-
var title = _ref2.title;
|
|
6444
|
-
return title ? 'row' : 'row-reverse';
|
|
6445
|
-
}, devices.tablet, devices.mobile);
|
|
6446
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
6447
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
6448
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
6449
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
6450
|
-
var theme = _ref3.theme;
|
|
6451
|
-
return theme.colors.primaryButtonReverseBg;
|
|
6452
|
-
}, function (_ref4) {
|
|
6453
|
-
var theme = _ref4.theme;
|
|
6454
|
-
return theme.colors.primaryButtonReverseBg;
|
|
6455
|
-
}, function (_ref5) {
|
|
6456
|
-
var theme = _ref5.theme;
|
|
6457
|
-
return theme.colors.primaryButtonReverse;
|
|
6458
|
-
}, function (_ref6) {
|
|
6459
|
-
var theme = _ref6.theme;
|
|
6460
|
-
return theme.colors.primaryButtonReverse;
|
|
6461
|
-
});
|
|
6462
|
-
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
6463
|
-
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
6464
|
-
|
|
6465
|
-
var _excluded$d = ["text"],
|
|
6466
|
-
_excluded2 = ["text"];
|
|
6467
|
-
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
6468
|
-
var title = _ref.title,
|
|
6469
|
-
links = _ref.links,
|
|
6470
|
-
_ref$sticky = _ref.sticky,
|
|
6471
|
-
sticky = _ref$sticky === void 0 ? false : _ref$sticky,
|
|
6472
|
-
message = _ref.message;
|
|
6473
|
-
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
6474
|
-
primaryButtonText = _ref2.text,
|
|
6475
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
6476
|
-
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
6477
|
-
secondaryButtonText = _ref3.text,
|
|
6478
|
-
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
6479
|
-
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
6480
|
-
sticky: sticky
|
|
6481
|
-
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
6482
|
-
title: title
|
|
6483
|
-
}, title ? (/*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
6484
|
-
"data-testid": "anchor-title"
|
|
6485
|
-
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
6486
|
-
level: 5
|
|
6487
|
-
}, title))) : null, links != null && links[0] ? (/*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
|
|
6488
|
-
"data-testid": "anchor-ctas"
|
|
6489
|
-
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? (/*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText)) : null)) : message && (/*#__PURE__*/React__default.createElement(MessageWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
6490
|
-
level: 6
|
|
6491
|
-
}, message))))), links != null && links[0] ? (/*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText))) : message && (/*#__PURE__*/React__default.createElement(MessageWrapperMobile, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
6492
|
-
level: 6
|
|
6493
|
-
}, message))));
|
|
6494
|
-
};
|
|
6495
|
-
|
|
6496
|
-
var _templateObject$J, _templateObject2$v, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
6497
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-lightgrey);\n padding: 40px;\n\n display: block;\n position: relative;\n\n @media ", " {\n margin-top: 0;\n padding: 40px 20px;\n }\n"])), devices.tablet);
|
|
6498
|
-
var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
|
|
6499
|
-
var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
|
|
6500
|
-
var theme = _ref.theme;
|
|
6501
|
-
return theme.colors.primary;
|
|
6502
|
-
}, Colors.White);
|
|
6503
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
6504
|
-
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
6505
|
-
var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
6506
|
-
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
|
|
6507
|
-
var LineThrough = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
6508
|
-
|
|
6509
|
-
/* eslint-disable react/no-danger */
|
|
6510
|
-
var OfferText = function OfferText(_ref) {
|
|
6511
|
-
var title = _ref.title,
|
|
6512
|
-
description = _ref.description;
|
|
6513
|
-
return /*#__PURE__*/React__default.createElement(OfferTextWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
6514
|
-
semanticLevel: 5,
|
|
6515
|
-
level: 1
|
|
6516
|
-
}, title), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
6517
|
-
level: 1
|
|
6518
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
6519
|
-
dangerouslySetInnerHTML: {
|
|
6520
|
-
__html: description != null ? description : ''
|
|
6521
|
-
}
|
|
6522
|
-
})));
|
|
6523
|
-
};
|
|
6524
|
-
|
|
6525
|
-
// Set max. character length
|
|
6526
|
-
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
6527
|
-
return value.slice(0, maxLength);
|
|
6528
|
-
};
|
|
6529
|
-
// Format price to contain £ if not already present
|
|
6530
|
-
var formatPrice = function formatPrice(value) {
|
|
6531
|
-
if (Number.isNaN(Number(value))) return value != null ? value : '';
|
|
6532
|
-
return "\xA3" + Number(value).toFixed(2);
|
|
6533
|
-
};
|
|
6534
|
-
|
|
6535
|
-
var LENGTH_SMALL_TEXT = 19;
|
|
6536
|
-
var OFFER_TEXTS_LIMIT = 3;
|
|
6537
|
-
var FLAG_CHAR_LIMIT = 30;
|
|
6538
|
-
var UpsellCard = function UpsellCard(_ref) {
|
|
6539
|
-
var _ref$title = _ref.title,
|
|
6540
|
-
title = _ref$title === void 0 ? '' : _ref$title,
|
|
6541
|
-
subTitle = _ref.subTitle,
|
|
6542
|
-
price = _ref.price,
|
|
6543
|
-
promoPrice = _ref.promoPrice,
|
|
6544
|
-
flag = _ref.flag,
|
|
6545
|
-
offerTexts = _ref.offerTexts,
|
|
6546
|
-
link = _ref.link,
|
|
6547
|
-
_ref$theme = _ref.theme,
|
|
6548
|
-
theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme;
|
|
6549
|
-
var truncate = function truncate(str, n) {
|
|
6550
|
-
return str.length >= n ? str.slice(0, n) : str;
|
|
6551
|
-
};
|
|
6552
|
-
var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
|
|
6553
|
-
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
6554
|
-
theme: theme
|
|
6555
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$2, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabelWrapper, null, /*#__PURE__*/React__default.createElement(PromoLabel, null, setMaxCharLength(flag, FLAG_CHAR_LIMIT)))), /*#__PURE__*/React__default.createElement(TitleContainer$1, null, /*#__PURE__*/React__default.createElement(Subtitle, {
|
|
6556
|
-
semanticLevel: 2,
|
|
6557
|
-
level: 1
|
|
6558
|
-
}, title), subTitle && (/*#__PURE__*/React__default.createElement(Overline, {
|
|
6559
|
-
semanticLevel: 3,
|
|
6560
|
-
level: 1
|
|
6561
|
-
}, subTitle)), promoPrice ? (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
6562
|
-
level: 4
|
|
6563
|
-
}, formatPrice(price))), /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
6564
|
-
level: 4
|
|
6565
|
-
}, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
6566
|
-
level: 4
|
|
6567
|
-
}, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText) {
|
|
6568
|
-
return /*#__PURE__*/React__default.createElement(OfferText, {
|
|
6569
|
-
key: offerText.title,
|
|
6570
|
-
title: offerText.title,
|
|
6571
|
-
description: offerText.description
|
|
6572
|
-
});
|
|
6573
|
-
}), link && (/*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT))))));
|
|
6574
|
-
};
|
|
6575
|
-
|
|
6576
|
-
var _templateObject$K;
|
|
6577
|
-
var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n padding-left: 0;\n padding-right: 0;\n }\n\n @media ", " {\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.tablet, devices.mobile);
|
|
6578
|
-
|
|
6579
|
-
var UpsellCards = function UpsellCards(_ref) {
|
|
6580
|
-
var upsellCards = _ref.upsellCards;
|
|
6581
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$3, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
|
|
6582
|
-
return /*#__PURE__*/React__default.createElement(UpsellCard, {
|
|
6583
|
-
key: "upsell-card-" + index,
|
|
6584
|
-
title: card.title,
|
|
6585
|
-
subTitle: card.subTitle,
|
|
6586
|
-
price: card.price,
|
|
6587
|
-
promoPrice: card.promoPrice,
|
|
6588
|
-
flag: card.flag,
|
|
6589
|
-
offerTexts: card.offerTexts,
|
|
6590
|
-
link: card.link,
|
|
6591
|
-
theme: card.theme
|
|
6592
|
-
});
|
|
6593
|
-
}));
|
|
6212
|
+
}, []);
|
|
6213
|
+
return viewport;
|
|
6594
6214
|
};
|
|
6595
6215
|
|
|
6596
|
-
var _templateObject$
|
|
6597
|
-
var
|
|
6216
|
+
var _templateObject$F, _templateObject2$r, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$7;
|
|
6217
|
+
var FooterSection = /*#__PURE__*/styled.footer(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n padding: 40px 20px;\n\n @media ", " {\n padding: 32px 20px;\n }\n\n @media ", " {\n padding: 20px;\n }\n"])), function (_ref) {
|
|
6598
6218
|
var theme = _ref.theme;
|
|
6599
|
-
return theme.colors.
|
|
6600
|
-
},
|
|
6601
|
-
var
|
|
6602
|
-
|
|
6603
|
-
|
|
6604
|
-
var
|
|
6605
|
-
var
|
|
6606
|
-
var
|
|
6607
|
-
var
|
|
6219
|
+
return theme.colors.black;
|
|
6220
|
+
}, function (_ref2) {
|
|
6221
|
+
var theme = _ref2.theme;
|
|
6222
|
+
return theme.colors.white;
|
|
6223
|
+
}, devices.tablet, devices.mobile);
|
|
6224
|
+
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: 40px;\n max-width: 1140px;\n margin: 0 auto;\n\n @media ", " {\n gap: 24px;\n }\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n"])), devices.tablet, devices.mobile);
|
|
6225
|
+
var PolicyLinksSection = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: span 4;\n display: flex;\n flex-direction: column;\n gap: 12px;\n\n @media ", " {\n order: 2;\n }\n"])), devices.mobile);
|
|
6226
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: span 4;\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n order: 1;\n gap: 24px;\n }\n"])), devices.mobile);
|
|
6227
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: span 4;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n img {\n width: 120px;\n margin-bottom: 12px;\n }\n\n @media ", " {\n order: 3;\n gap: 24px;\n }\n"])), devices.mobile);
|
|
6228
|
+
var NewsletterBodyTextWrapper = /*#__PURE__*/styled(BodyText)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n\n @media ", " {\n margin-top: 16px;\n }\n"])), devices.mobile);
|
|
6229
|
+
|
|
6230
|
+
var _templateObject$G, _templateObject2$s, _templateObject3$j, _templateObject4$f, _templateObject5$b, _templateObject6$8;
|
|
6231
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
6232
|
+
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
6233
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n visibility: ", ";\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref) {
|
|
6608
6234
|
var isVisible = _ref.isVisible;
|
|
6609
6235
|
return isVisible ? 'visible' : 'hidden';
|
|
6610
6236
|
}, devices.mobile);
|
|
6611
|
-
var TitleContainer$
|
|
6612
|
-
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
6237
|
+
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\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);
|
|
6238
|
+
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__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 max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\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 @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref2) {
|
|
6613
6239
|
var textHeight = _ref2.textHeight;
|
|
6614
6240
|
return textHeight;
|
|
6615
6241
|
}, devices.mobile);
|
|
6616
|
-
var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
6242
|
+
var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
6617
6243
|
|
|
6618
6244
|
/* eslint-disable react/no-unstable-nested-components */
|
|
6619
6245
|
var Accordion = function Accordion(_ref) {
|
|
@@ -6695,7 +6321,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
6695
6321
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, {
|
|
6696
6322
|
tabIndex: 0,
|
|
6697
6323
|
onKeyDown: keyDown
|
|
6698
|
-
}, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$
|
|
6324
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$1, {
|
|
6699
6325
|
onClick: toggleAccordion,
|
|
6700
6326
|
tabIndex: -1,
|
|
6701
6327
|
role: "button",
|
|
@@ -6718,8 +6344,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6718
6344
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
6719
6345
|
};
|
|
6720
6346
|
|
|
6721
|
-
var _templateObject$
|
|
6722
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6347
|
+
var _templateObject$H;
|
|
6348
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6723
6349
|
|
|
6724
6350
|
var Accordions = function Accordions(_ref) {
|
|
6725
6351
|
var _ref$items = _ref.items,
|
|
@@ -6749,13 +6375,13 @@ var Theme = function Theme(_ref) {
|
|
|
6749
6375
|
}, children);
|
|
6750
6376
|
};
|
|
6751
6377
|
|
|
6752
|
-
var _templateObject$
|
|
6753
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6378
|
+
var _templateObject$I, _templateObject2$t, _templateObject3$k;
|
|
6379
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: ", ";\n color: var(--base-color-white);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), function (_ref) {
|
|
6754
6380
|
var theme = _ref.theme;
|
|
6755
6381
|
return theme.colors.primary;
|
|
6756
6382
|
}, devices.mobile);
|
|
6757
|
-
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
6758
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
6383
|
+
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n @media ", " {\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
6384
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__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 color: var(--base-color-white);\n a {\n color: var(--base-color-white);\n text-decoration: underline;\n }\n"])));
|
|
6759
6385
|
|
|
6760
6386
|
/* eslint-disable react/no-danger */
|
|
6761
6387
|
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
@@ -6793,8 +6419,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
6793
6419
|
}))))));
|
|
6794
6420
|
};
|
|
6795
6421
|
|
|
6796
|
-
var _templateObject$
|
|
6797
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$
|
|
6422
|
+
var _templateObject$J;
|
|
6423
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
6798
6424
|
var bgColor = _ref.bgColor,
|
|
6799
6425
|
theme = _ref.theme;
|
|
6800
6426
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
@@ -6803,48 +6429,48 @@ var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$P || (_
|
|
|
6803
6429
|
return color;
|
|
6804
6430
|
});
|
|
6805
6431
|
|
|
6806
|
-
var _excluded$
|
|
6432
|
+
var _excluded$b = ["children"];
|
|
6807
6433
|
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
6808
6434
|
var _props$color;
|
|
6809
6435
|
var children = _ref.children,
|
|
6810
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
6436
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
6811
6437
|
return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
|
|
6812
6438
|
color: (_props$color = props.color) != null ? _props$color : Colors.Black,
|
|
6813
6439
|
iconClassName: "auxiliaryButtonIcon"
|
|
6814
6440
|
}), children);
|
|
6815
6441
|
};
|
|
6816
6442
|
|
|
6817
|
-
var _templateObject$
|
|
6443
|
+
var _templateObject$K, _templateObject2$u, _templateObject3$l, _templateObject4$g, _templateObject5$c, _templateObject6$9, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
|
|
6818
6444
|
var LENGTH_LARGE_TEXT = 28;
|
|
6819
|
-
var LENGTH_SMALL_TEXT
|
|
6445
|
+
var LENGTH_SMALL_TEXT = 19;
|
|
6820
6446
|
var LENGTH_TEXT_TABLET = 10;
|
|
6821
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6447
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
6822
6448
|
var isCardClickable = _ref.isCardClickable;
|
|
6823
6449
|
return isCardClickable ? 'pointer' : 'default';
|
|
6824
6450
|
}, function (_ref2) {
|
|
6825
6451
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
6826
6452
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
6827
6453
|
});
|
|
6828
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6454
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
6829
6455
|
var lineColor = _ref3.lineColor,
|
|
6830
6456
|
theme = _ref3.theme;
|
|
6831
6457
|
if (lineColor === Colors.Cinema) return 'var(--base-color-white)';
|
|
6832
6458
|
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
6833
6459
|
}, zIndexes.contentOverlay);
|
|
6834
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
6835
|
-
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
6460
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
6461
|
+
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__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 (_ref4) {
|
|
6836
6462
|
var fullWidth = _ref4.fullWidth;
|
|
6837
6463
|
return fullWidth ? '0' : '20px';
|
|
6838
6464
|
}, function (_ref5) {
|
|
6839
6465
|
var fullWidth = _ref5.fullWidth;
|
|
6840
6466
|
return fullWidth ? '0' : '20px';
|
|
6841
6467
|
});
|
|
6842
|
-
var TitleContainer$
|
|
6843
|
-
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$
|
|
6844
|
-
var TextContainer
|
|
6845
|
-
var HighlightTextContainer = /*#__PURE__*/styled(TextContainer
|
|
6846
|
-
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$
|
|
6847
|
-
var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$
|
|
6468
|
+
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$c || (_templateObject5$c = /*#__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.mobileAndTablet);
|
|
6469
|
+
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__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.mobileAndTablet);
|
|
6470
|
+
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"])));
|
|
6471
|
+
var HighlightTextContainer = /*#__PURE__*/styled(TextContainer)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
|
|
6472
|
+
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$2 || (_templateObject9$2 = /*#__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"])));
|
|
6473
|
+
var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 30px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref6) {
|
|
6848
6474
|
var isVisible = _ref6.isVisible;
|
|
6849
6475
|
return isVisible ? "visible" : 'hidden';
|
|
6850
6476
|
}, devices.mobile, function (_ref7) {
|
|
@@ -6876,7 +6502,7 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14 || (_template
|
|
|
6876
6502
|
var size = _ref13.size,
|
|
6877
6503
|
primaryButtonTextLength = _ref13.primaryButtonTextLength,
|
|
6878
6504
|
tertiaryButtonTextLength = _ref13.tertiaryButtonTextLength;
|
|
6879
|
-
var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT
|
|
6505
|
+
var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
|
|
6880
6506
|
if (isLinksLayoutColumn) {
|
|
6881
6507
|
return "\n flex-direction: column;\n ";
|
|
6882
6508
|
}
|
|
@@ -6954,11 +6580,11 @@ var truncateReactNodeString = function truncateReactNodeString(node, resultLengt
|
|
|
6954
6580
|
return truncateHtmlString(nodeString, resultLength, addDots);
|
|
6955
6581
|
};
|
|
6956
6582
|
|
|
6957
|
-
var _excluded$
|
|
6958
|
-
_excluded2
|
|
6583
|
+
var _excluded$c = ["text"],
|
|
6584
|
+
_excluded2 = ["text"];
|
|
6959
6585
|
var _buttonTypeToButton;
|
|
6960
6586
|
var LENGTH_LARGE_TEXT$1 = 28;
|
|
6961
|
-
var LENGTH_SMALL_TEXT$
|
|
6587
|
+
var LENGTH_SMALL_TEXT$1 = 19;
|
|
6962
6588
|
var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = Button$1, _buttonTypeToButton);
|
|
6963
6589
|
var Card = function Card(_ref) {
|
|
6964
6590
|
var _labelParams$color;
|
|
@@ -7002,14 +6628,14 @@ var Card = function Card(_ref) {
|
|
|
7002
6628
|
var _ref2 = firstButton || {},
|
|
7003
6629
|
_ref2$text = _ref2.text,
|
|
7004
6630
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
7005
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7006
|
-
var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$
|
|
6631
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
|
|
6632
|
+
var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$1) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
|
|
7007
6633
|
var secondButton = links == null ? void 0 : links[1];
|
|
7008
6634
|
var _ref3 = secondButton || {},
|
|
7009
6635
|
_ref3$text = _ref3.text,
|
|
7010
6636
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
7011
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2
|
|
7012
|
-
var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$
|
|
6637
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
6638
|
+
var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$1) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
|
|
7013
6639
|
var hoverHandler = function hoverHandler(value) {
|
|
7014
6640
|
if (value) {
|
|
7015
6641
|
node.current.style.opacity = '1';
|
|
@@ -7065,11 +6691,11 @@ var Card = function Card(_ref) {
|
|
|
7065
6691
|
fullWidth: fullWidth
|
|
7066
6692
|
}, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
|
|
7067
6693
|
list: tags
|
|
7068
|
-
}) : null, /*#__PURE__*/React__default.createElement(TitleContainer$
|
|
6694
|
+
}) : null, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
7069
6695
|
level: size === 'small' ? 6 : 5
|
|
7070
6696
|
}, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
7071
6697
|
level: 6
|
|
7072
|
-
}, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer
|
|
6698
|
+
}, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer, {
|
|
7073
6699
|
dangerouslySetInnerHTML: {
|
|
7074
6700
|
__html: truncatedText
|
|
7075
6701
|
}
|
|
@@ -7089,9 +6715,9 @@ var Card = function Card(_ref) {
|
|
|
7089
6715
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)))));
|
|
7090
6716
|
};
|
|
7091
6717
|
|
|
7092
|
-
var _templateObject$
|
|
7093
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7094
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
6718
|
+
var _templateObject$L, _templateObject2$v;
|
|
6719
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
6720
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7095
6721
|
|
|
7096
6722
|
var Cards = function Cards(_ref) {
|
|
7097
6723
|
var cards = _ref.cards,
|
|
@@ -7133,18 +6759,18 @@ var Cards = function Cards(_ref) {
|
|
|
7133
6759
|
}));
|
|
7134
6760
|
};
|
|
7135
6761
|
|
|
7136
|
-
var _templateObject$
|
|
7137
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7138
|
-
var Wrapper$
|
|
6762
|
+
var _templateObject$M, _templateObject2$w, _templateObject3$m, _templateObject4$h, _templateObject5$d;
|
|
6763
|
+
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
|
|
6764
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
|
|
7139
6765
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7140
6766
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7141
6767
|
}, function (_ref2) {
|
|
7142
6768
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
7143
6769
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7144
6770
|
}, devices.mobileAndTablet);
|
|
7145
|
-
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$
|
|
7146
|
-
var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$
|
|
7147
|
-
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
6771
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6772
|
+
var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
6773
|
+
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n a {\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 color: var(--base-color-black);\n text-decoration: underline;\n\n &:before {\n display: inline-block;\n content: '';\n background-color: var(--base-color-black);\n width: 1px;\n height: 18px;\n margin: 0 8px -4px;\n\n @media ", " {\n display: none;\n }\n }\n\n &:first-child:before {\n display: none;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
7148
6774
|
|
|
7149
6775
|
var divideAddressString = function divideAddressString(address) {
|
|
7150
6776
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -7173,7 +6799,7 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7173
6799
|
columnSpanDesktop: 8,
|
|
7174
6800
|
columnStartDevice: 1,
|
|
7175
6801
|
columnSpanDevice: 14
|
|
7176
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$
|
|
6802
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
7177
6803
|
"data-testid": "contact-card-wrapper",
|
|
7178
6804
|
hideBottomBorder: hideBottomBorder,
|
|
7179
6805
|
hideTopBorder: hideTopBorder
|
|
@@ -7201,18 +6827,18 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7201
6827
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
|
|
7202
6828
|
};
|
|
7203
6829
|
|
|
7204
|
-
var _templateObject$
|
|
7205
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$
|
|
7206
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
6830
|
+
var _templateObject$N, _templateObject2$x, _templateObject3$n, _templateObject4$i, _templateObject5$e, _templateObject6$a, _templateObject7$5;
|
|
6831
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6832
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7207
6833
|
return props.clickable ? 'pointer' : 'default';
|
|
7208
6834
|
}, devices.mobile);
|
|
7209
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7210
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
6835
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
6836
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 22px;\n\n & > * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n gap: 12px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7211
6837
|
return props.showImage ? 2 : '1 / span 4';
|
|
7212
6838
|
}, devices.mobile);
|
|
7213
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7214
|
-
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$
|
|
7215
|
-
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
6839
|
+
var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin: 0;\n }\n\n @media ", " {\n & > * {\n font-size: var(--font-size-header-5);\n font-weight: var(--font-weight-header-5);\n }\n }\n"])), devices.mobile);
|
|
6840
|
+
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
6841
|
+
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
7216
6842
|
return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
|
|
7217
6843
|
});
|
|
7218
6844
|
|
|
@@ -7284,21 +6910,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7284
6910
|
}), link.text))));
|
|
7285
6911
|
};
|
|
7286
6912
|
|
|
7287
|
-
var _templateObject$
|
|
7288
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
6913
|
+
var _templateObject$O, _templateObject2$y, _templateObject3$o, _templateObject4$j, _templateObject5$f;
|
|
6914
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__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) {
|
|
7289
6915
|
var imageToLeft = _ref.imageToLeft;
|
|
7290
6916
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7291
6917
|
}, devices.mobile);
|
|
7292
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
6918
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7293
6919
|
var imageToLeft = _ref2.imageToLeft;
|
|
7294
6920
|
return imageToLeft ? 'left' : 'right';
|
|
7295
6921
|
}, devices.mobile);
|
|
7296
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
6922
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7297
6923
|
var imageToLeft = _ref3.imageToLeft;
|
|
7298
6924
|
return imageToLeft ? 'right' : 'left';
|
|
7299
6925
|
}, devices.mobile);
|
|
7300
|
-
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$
|
|
7301
|
-
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$
|
|
6926
|
+
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$j || (_templateObject4$j = /*#__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"])));
|
|
6927
|
+
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__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"])));
|
|
7302
6928
|
|
|
7303
6929
|
var Editorial = function Editorial(_ref) {
|
|
7304
6930
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7329,10 +6955,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7329
6955
|
})))));
|
|
7330
6956
|
};
|
|
7331
6957
|
|
|
7332
|
-
var _templateObject$
|
|
7333
|
-
var InfoContent = /*#__PURE__*/styled('div')(_templateObject$
|
|
7334
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7335
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
6958
|
+
var _templateObject$P, _templateObject2$z, _templateObject3$p, _templateObject4$k, _templateObject5$g;
|
|
6959
|
+
var InfoContent = /*#__PURE__*/styled('div')(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
|
|
6960
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
6961
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
7336
6962
|
if (!props.infoThemed) {
|
|
7337
6963
|
return '';
|
|
7338
6964
|
}
|
|
@@ -7341,12 +6967,12 @@ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_template
|
|
|
7341
6967
|
}
|
|
7342
6968
|
return "a {\n color: var(--base-color-white);\n background: var(--base-color-transparent});\n }\n svg > path {\n fill: var(--base-color-white);\n stroke: var(--base-color-white);\n stroke-width: 1;\n }\n ";
|
|
7343
6969
|
});
|
|
7344
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
6970
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
|
|
7345
6971
|
return props.background !== IInformationBackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
|
|
7346
6972
|
}, function (props) {
|
|
7347
6973
|
return "var(--base-color-" + props.background + ")";
|
|
7348
6974
|
});
|
|
7349
|
-
var InfoBodyWrapper = /*#__PURE__*/styled('div')(_templateObject5$
|
|
6975
|
+
var InfoBodyWrapper = /*#__PURE__*/styled('div')(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n text-decoration: underline;\n color: ", ";\n }\n"])), function (props) {
|
|
7350
6976
|
return props.background === IInformationBackgroundColour.White ? 'var(--base-color-black)' : 'var(--base-color-white)';
|
|
7351
6977
|
});
|
|
7352
6978
|
|
|
@@ -7491,29 +7117,29 @@ var Information = function Information(_ref) {
|
|
|
7491
7117
|
})))));
|
|
7492
7118
|
};
|
|
7493
7119
|
|
|
7494
|
-
var _templateObject$
|
|
7495
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7120
|
+
var _templateObject$Q, _templateObject2$A, _templateObject3$q, _templateObject4$l, _templateObject5$h, _templateObject6$b, _templateObject7$6, _templateObject8$4;
|
|
7121
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n // remove spacing above/below for all semantic levels of the title\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7496
7122
|
var theme = _ref.theme;
|
|
7497
7123
|
return theme.colors.primary;
|
|
7498
7124
|
}, function (_ref2) {
|
|
7499
7125
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7500
7126
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7501
7127
|
}, devices.mobile);
|
|
7502
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
7503
|
-
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7128
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$A || (_templateObject2$A = /*#__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);
|
|
7129
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
|
|
7504
7130
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7505
7131
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7506
7132
|
}, devices.mobile);
|
|
7507
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7133
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref4) {
|
|
7508
7134
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7509
7135
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7510
7136
|
}, devices.mobile);
|
|
7511
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7512
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
7513
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$
|
|
7514
|
-
var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$
|
|
7137
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
7138
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__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);
|
|
7139
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__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);
|
|
7140
|
+
var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
|
|
7515
7141
|
|
|
7516
|
-
var _excluded$
|
|
7142
|
+
var _excluded$d = ["text"];
|
|
7517
7143
|
var PageHeading = function PageHeading(_ref) {
|
|
7518
7144
|
var title = _ref.title,
|
|
7519
7145
|
text = _ref.text,
|
|
@@ -7529,7 +7155,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7529
7155
|
titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
|
|
7530
7156
|
var _ref2 = link || {},
|
|
7531
7157
|
linkText = _ref2.text,
|
|
7532
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7158
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
7533
7159
|
var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
|
|
7534
7160
|
var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
|
|
7535
7161
|
var isTitleUnAvailable = !title;
|
|
@@ -7557,10 +7183,10 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7557
7183
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
|
|
7558
7184
|
};
|
|
7559
7185
|
|
|
7560
|
-
var _excluded$
|
|
7186
|
+
var _excluded$e = ["link"];
|
|
7561
7187
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
7562
7188
|
var link = _ref.link,
|
|
7563
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7189
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
7564
7190
|
var coreLink = link && _extends({}, link, {
|
|
7565
7191
|
color: Colors.White,
|
|
7566
7192
|
bgColor: Colors.Black
|
|
@@ -7572,10 +7198,10 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
7572
7198
|
})));
|
|
7573
7199
|
};
|
|
7574
7200
|
|
|
7575
|
-
var _excluded$
|
|
7201
|
+
var _excluded$f = ["link"];
|
|
7576
7202
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
7577
7203
|
var link = _ref.link,
|
|
7578
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7204
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
|
7579
7205
|
var cinemaLink = link && _extends({}, link, {
|
|
7580
7206
|
color: Colors.Black,
|
|
7581
7207
|
bgColor: Colors.White
|
|
@@ -7589,17 +7215,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
7589
7215
|
})));
|
|
7590
7216
|
};
|
|
7591
7217
|
|
|
7592
|
-
var _templateObject$
|
|
7593
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7594
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7595
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
7596
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7597
|
-
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7598
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
7599
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$
|
|
7600
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
7218
|
+
var _templateObject$R, _templateObject2$B, _templateObject3$r, _templateObject4$m, _templateObject5$i, _templateObject6$c, _templateObject7$7, _templateObject8$5;
|
|
7219
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
7220
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
7221
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\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 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 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 align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo 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 }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7222
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$m || (_templateObject4$m = /*#__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.sponsorship, devices.mobileAndTablet);
|
|
7223
|
+
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7224
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__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(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7225
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__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: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
7226
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\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);
|
|
7601
7227
|
|
|
7602
|
-
var _excluded$
|
|
7228
|
+
var _excluded$g = ["text"];
|
|
7603
7229
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
7604
7230
|
var children = _ref.children,
|
|
7605
7231
|
text = _ref.text,
|
|
@@ -7617,7 +7243,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7617
7243
|
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
7618
7244
|
var _ref2 = link || {},
|
|
7619
7245
|
linkText = _ref2.text,
|
|
7620
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7246
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
|
|
7621
7247
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
7622
7248
|
bgUrlDesktop: bgUrlDesktop,
|
|
7623
7249
|
bgUrlDevice: bgUrlDevice,
|
|
@@ -7662,21 +7288,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7662
7288
|
}, "Scroll Down"))) : null);
|
|
7663
7289
|
};
|
|
7664
7290
|
|
|
7665
|
-
var _templateObject$
|
|
7666
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7291
|
+
var _templateObject$S, _templateObject2$C, _templateObject3$s, _templateObject4$n, _templateObject5$j;
|
|
7292
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
7667
7293
|
var color = _ref.color;
|
|
7668
7294
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
7669
7295
|
}, devices.mobileAndTablet);
|
|
7670
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
7296
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
7671
7297
|
var hasImage = _ref2.hasImage;
|
|
7672
7298
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7673
7299
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7674
7300
|
var hasImage = _ref3.hasImage;
|
|
7675
7301
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7676
7302
|
});
|
|
7677
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
7678
|
-
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7679
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7303
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
7304
|
+
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
7305
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\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 font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7680
7306
|
|
|
7681
7307
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7682
7308
|
var _image$src, _image$alt;
|
|
@@ -7706,13 +7332,13 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7706
7332
|
})))));
|
|
7707
7333
|
};
|
|
7708
7334
|
|
|
7709
|
-
var _templateObject$
|
|
7710
|
-
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7335
|
+
var _templateObject$T;
|
|
7336
|
+
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
7711
7337
|
|
|
7712
|
-
var _excluded$
|
|
7338
|
+
var _excluded$h = ["link"];
|
|
7713
7339
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
7714
7340
|
var link = _ref.link,
|
|
7715
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7341
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
7716
7342
|
var streamLink = link && _extends({}, link, {
|
|
7717
7343
|
color: Colors.Black,
|
|
7718
7344
|
bgColor: Colors.White
|
|
@@ -7726,12 +7352,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
7726
7352
|
}))));
|
|
7727
7353
|
};
|
|
7728
7354
|
|
|
7729
|
-
var _templateObject$
|
|
7730
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
7731
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
7732
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7733
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7734
|
-
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$
|
|
7355
|
+
var _templateObject$U, _templateObject2$D, _templateObject3$t, _templateObject5$k, _templateObject6$d, _templateObject7$8, _templateObject8$6, _templateObject9$3, _templateObject10$3;
|
|
7356
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
7357
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
7358
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
7359
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
7360
|
+
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
7735
7361
|
var invert = _ref.invert,
|
|
7736
7362
|
theme = _ref.theme;
|
|
7737
7363
|
return invert ? theme.colors.white : theme.colors.primary;
|
|
@@ -7747,10 +7373,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$h || (
|
|
|
7747
7373
|
var theme = _ref4.theme;
|
|
7748
7374
|
return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
|
|
7749
7375
|
}, devices.tablet, devices.mobile);
|
|
7750
|
-
var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
7751
|
-
var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
7752
|
-
var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
7753
|
-
var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject10$
|
|
7376
|
+
var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
|
|
7377
|
+
var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
|
|
7378
|
+
var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
|
|
7379
|
+
var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
|
|
7754
7380
|
var invert = _ref5.invert,
|
|
7755
7381
|
theme = _ref5.theme;
|
|
7756
7382
|
return invert ? theme.colors.primary : theme.colors.white;
|
|
@@ -7839,54 +7465,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
7839
7465
|
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
7840
7466
|
};
|
|
7841
7467
|
|
|
7842
|
-
|
|
7843
|
-
var isIOS = function isIOS() {
|
|
7844
|
-
try {
|
|
7845
|
-
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
7846
|
-
if (typeof navigator === undefined) return false;
|
|
7847
|
-
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
|
|
7848
|
-
// iPad on iOS 13 detection
|
|
7849
|
-
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
7850
|
-
} catch (e) {
|
|
7851
|
-
console.warn('Error checking if device is iOS.', e);
|
|
7852
|
-
return false;
|
|
7853
|
-
}
|
|
7854
|
-
};
|
|
7855
|
-
// React hook version of isIOS (for server side rendering)
|
|
7856
|
-
var useIOS = function useIOS() {
|
|
7857
|
-
var _useState = useState(false),
|
|
7858
|
-
IOS = _useState[0],
|
|
7859
|
-
setIOS = _useState[1];
|
|
7860
|
-
useEffect(function () {
|
|
7861
|
-
if (typeof navigator === undefined) return;
|
|
7862
|
-
setIOS(isIOS());
|
|
7863
|
-
}, []);
|
|
7864
|
-
return IOS;
|
|
7865
|
-
};
|
|
7866
|
-
// Checks device size based on window width
|
|
7867
|
-
var isMobile = function isMobile() {
|
|
7868
|
-
try {
|
|
7869
|
-
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
7870
|
-
if (typeof window === undefined) return false;
|
|
7871
|
-
return window.innerWidth < breakpoints.sm;
|
|
7872
|
-
} catch (e) {
|
|
7873
|
-
console.warn('Error checking if device is mobile.', e);
|
|
7874
|
-
return false;
|
|
7875
|
-
}
|
|
7876
|
-
};
|
|
7877
|
-
// React hook version of isMobile (for server side rendering)
|
|
7878
|
-
var useMobile = function useMobile() {
|
|
7879
|
-
var _useState2 = useState(false),
|
|
7880
|
-
mobile = _useState2[0],
|
|
7881
|
-
setMobile = _useState2[1];
|
|
7882
|
-
useEffect(function () {
|
|
7883
|
-
if (typeof window === undefined) return;
|
|
7884
|
-
setMobile(isMobile());
|
|
7885
|
-
}, []);
|
|
7886
|
-
return mobile;
|
|
7887
|
-
};
|
|
7888
|
-
|
|
7889
|
-
var _excluded$l = ["text"];
|
|
7468
|
+
var _excluded$i = ["text"];
|
|
7890
7469
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7891
7470
|
var mobileVideo = video.mobile || video.desktop;
|
|
7892
7471
|
var desktopVideo = video.desktop || video.mobile;
|
|
@@ -7993,7 +7572,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7993
7572
|
semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
|
|
7994
7573
|
var _ref5 = link || {},
|
|
7995
7574
|
linkText = _ref5.text,
|
|
7996
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
7575
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$i);
|
|
7997
7576
|
var titleSize = title && title.length > 20 ? 4 : 3;
|
|
7998
7577
|
var video = {
|
|
7999
7578
|
elementId: 'compact-header-video',
|
|
@@ -8031,15 +7610,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8031
7610
|
}), linkText))))));
|
|
8032
7611
|
};
|
|
8033
7612
|
|
|
8034
|
-
var _templateObject
|
|
8035
|
-
var MorePages = /*#__PURE__*/styled.span(_templateObject
|
|
8036
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$
|
|
7613
|
+
var _templateObject$V, _templateObject2$E, _templateObject3$u, _templateObject4$o;
|
|
7614
|
+
var MorePages = /*#__PURE__*/styled.span(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
7615
|
+
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"])));
|
|
8037
7616
|
// PageNumber extends bodyText but uses subtitle-1 font size
|
|
8038
|
-
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$
|
|
7617
|
+
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
|
|
8039
7618
|
var active = _ref.active;
|
|
8040
7619
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
8041
7620
|
});
|
|
8042
|
-
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$
|
|
7621
|
+
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
|
|
8043
7622
|
|
|
8044
7623
|
var reducePages = function reducePages(pages, currentPage) {
|
|
8045
7624
|
// If there are less than 6 pages, return all pages
|
|
@@ -8105,14 +7684,14 @@ var Pagination = function Pagination(_ref) {
|
|
|
8105
7684
|
})))));
|
|
8106
7685
|
};
|
|
8107
7686
|
|
|
8108
|
-
var _templateObject$
|
|
8109
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8110
|
-
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8111
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8112
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8113
|
-
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8114
|
-
var PersonLink = /*#__PURE__*/styled.a(_templateObject6$
|
|
8115
|
-
var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$
|
|
7687
|
+
var _templateObject$W, _templateObject2$F, _templateObject3$v, _templateObject4$p, _templateObject5$l, _templateObject6$e, _templateObject7$9;
|
|
7688
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
7689
|
+
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
7690
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
7691
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
7692
|
+
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
7693
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\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"])));
|
|
7694
|
+
var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8116
7695
|
|
|
8117
7696
|
var Person = function Person(_ref) {
|
|
8118
7697
|
var person = _ref.person,
|
|
@@ -8169,14 +7748,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8169
7748
|
}));
|
|
8170
7749
|
};
|
|
8171
7750
|
|
|
8172
|
-
var _templateObject$
|
|
8173
|
-
var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
8174
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
7751
|
+
var _templateObject$X, _templateObject2$G, _templateObject3$w, _templateObject4$q;
|
|
7752
|
+
var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
7753
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8175
7754
|
var columnCount = _ref.columnCount;
|
|
8176
7755
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8177
7756
|
}, devices.mobile, devices.tablet);
|
|
8178
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8179
|
-
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7757
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
7758
|
+
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8180
7759
|
|
|
8181
7760
|
// Get the total character length of a property in an array of objects
|
|
8182
7761
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8251,14 +7830,30 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8251
7830
|
}));
|
|
8252
7831
|
};
|
|
8253
7832
|
|
|
8254
|
-
var _templateObject$
|
|
7833
|
+
var _templateObject$Y;
|
|
7834
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n\n @media ", " {\n margin-bottom: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.tablet, devices.mobile);
|
|
7835
|
+
|
|
7836
|
+
var PolicyLinks = function PolicyLinks(_ref) {
|
|
7837
|
+
var items = _ref.items;
|
|
7838
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, items.map(function (link, idx) {
|
|
7839
|
+
return /*#__PURE__*/React__default.createElement(PolicyLinksTextLinkWrapper, {
|
|
7840
|
+
key: link.href + "-" + idx,
|
|
7841
|
+
target: link.href,
|
|
7842
|
+
href: link.href,
|
|
7843
|
+
"data-roh": link.dataRoh,
|
|
7844
|
+
"aria-label": "Policy link: " + link.title
|
|
7845
|
+
}, link.title);
|
|
7846
|
+
}));
|
|
7847
|
+
};
|
|
7848
|
+
|
|
7849
|
+
var _templateObject$Z, _templateObject2$H, _templateObject3$x, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$a, _templateObject8$7, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
8255
7850
|
var LENGTH_TEXT = 28;
|
|
8256
7851
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8257
7852
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8258
7853
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8259
7854
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8260
7855
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8261
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7856
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__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\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8262
7857
|
var imageToLeft = _ref.imageToLeft;
|
|
8263
7858
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8264
7859
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8268,8 +7863,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templa
|
|
|
8268
7863
|
var asCard = _ref3.asCard;
|
|
8269
7864
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8270
7865
|
});
|
|
8271
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$
|
|
8272
|
-
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$
|
|
7866
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$H || (_templateObject2$H = /*#__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"])));
|
|
7867
|
+
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__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 h5,\n h6 {\n margin: 0 0 4px 0;\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 overflow-wrap: break-word;\n }\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 (_ref4) {
|
|
8273
7868
|
var theme = _ref4.theme;
|
|
8274
7869
|
return theme.colors.black;
|
|
8275
7870
|
}, function (_ref5) {
|
|
@@ -8279,7 +7874,7 @@ var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$D || (_template
|
|
|
8279
7874
|
var theme = _ref6.theme;
|
|
8280
7875
|
return theme.colors.primary;
|
|
8281
7876
|
});
|
|
8282
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7877
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref7) {
|
|
8283
7878
|
var hasTextLinks = _ref7.hasTextLinks;
|
|
8284
7879
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8285
7880
|
}, function (_ref8) {
|
|
@@ -8303,15 +7898,15 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$v || (_templat
|
|
|
8303
7898
|
}
|
|
8304
7899
|
return '';
|
|
8305
7900
|
});
|
|
8306
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7901
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref10) {
|
|
8307
7902
|
var marginBottom = _ref10.marginBottom;
|
|
8308
7903
|
return marginBottom + "px";
|
|
8309
7904
|
});
|
|
8310
|
-
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$
|
|
8311
|
-
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$
|
|
8312
|
-
var TextLinkWrapper$
|
|
8313
|
-
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
8314
|
-
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$
|
|
7905
|
+
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
7906
|
+
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
7907
|
+
var TextLinkWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
7908
|
+
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
7909
|
+
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
8315
7910
|
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
8316
7911
|
var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
8317
7912
|
var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
@@ -8336,8 +7931,8 @@ var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject19 || (_temp
|
|
|
8336
7931
|
var TimerWrapper$1 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
8337
7932
|
var EndDateText = /*#__PURE__*/styled.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid var(--base-color-black);\n padding-bottom: 32px;\n margin-bottom: 32px;\n\n @media ", " {\n padding-bottom: 20px;\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
8338
7933
|
|
|
8339
|
-
var _excluded$
|
|
8340
|
-
_excluded2$
|
|
7934
|
+
var _excluded$j = ["text"],
|
|
7935
|
+
_excluded2$1 = ["text"],
|
|
8341
7936
|
_excluded3 = ["text"];
|
|
8342
7937
|
var _buttonTypeToButton$1;
|
|
8343
7938
|
var LENGTH_TEXT$1 = 28;
|
|
@@ -8398,13 +7993,13 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8398
7993
|
var _ref2 = firstButton || {},
|
|
8399
7994
|
_ref2$text = _ref2.text,
|
|
8400
7995
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
8401
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7996
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
|
|
8402
7997
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
8403
7998
|
var secondButton = links == null ? void 0 : links[1];
|
|
8404
7999
|
var _ref3 = secondButton || {},
|
|
8405
8000
|
_ref3$text = _ref3.text,
|
|
8406
8001
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
8407
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
8002
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
|
|
8408
8003
|
var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
|
|
8409
8004
|
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
8410
8005
|
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
|
|
@@ -8413,7 +8008,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8413
8008
|
var _link$text = link.text,
|
|
8414
8009
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
8415
8010
|
restTextLink = _objectWithoutPropertiesLoose(link, _excluded3);
|
|
8416
|
-
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$
|
|
8011
|
+
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, {
|
|
8417
8012
|
key: index
|
|
8418
8013
|
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTextLink, Object.assign({}, restTextLink), textLinkText));
|
|
8419
8014
|
}) : null;
|
|
@@ -8511,27 +8106,27 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8511
8106
|
}))));
|
|
8512
8107
|
};
|
|
8513
8108
|
|
|
8514
|
-
var _templateObject$
|
|
8109
|
+
var _templateObject$_, _templateObject2$I, _templateObject3$y, _templateObject4$s, _templateObject5$n, _templateObject6$g, _templateObject7$b;
|
|
8515
8110
|
var LENGTH_TEXT$2 = 28;
|
|
8516
8111
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
8517
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8112
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$_ || (_templateObject$_ = /*#__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) {
|
|
8518
8113
|
var imageToLeft = _ref.imageToLeft;
|
|
8519
8114
|
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'";
|
|
8520
8115
|
}, devices.tablet, function (_ref2) {
|
|
8521
8116
|
var imageToLeft = _ref2.imageToLeft;
|
|
8522
8117
|
return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
|
|
8523
8118
|
}, devices.mobile);
|
|
8524
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8119
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
8525
8120
|
var imageToLeft = _ref3.imageToLeft;
|
|
8526
8121
|
return imageToLeft ? 'left' : 'right';
|
|
8527
8122
|
}, devices.mobile);
|
|
8528
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8123
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
8529
8124
|
var imageToLeft = _ref4.imageToLeft;
|
|
8530
8125
|
return imageToLeft ? 'right' : 'left';
|
|
8531
8126
|
}, devices.mobile);
|
|
8532
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
8533
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$
|
|
8534
|
-
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$
|
|
8127
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
|
|
8128
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$n || (_templateObject5$n = /*#__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"])));
|
|
8129
|
+
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__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 h5,\n h6 {\n margin: 0 0 4px 0;\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 overflow-wrap: break-word;\n }\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) {
|
|
8535
8130
|
var theme = _ref5.theme;
|
|
8536
8131
|
return theme.colors.black;
|
|
8537
8132
|
}, function (_ref6) {
|
|
@@ -8541,7 +8136,7 @@ var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$k || (_templat
|
|
|
8541
8136
|
var theme = _ref7.theme;
|
|
8542
8137
|
return theme.colors.primary;
|
|
8543
8138
|
});
|
|
8544
|
-
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$
|
|
8139
|
+
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref8) {
|
|
8545
8140
|
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
8546
8141
|
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
8547
8142
|
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
@@ -8563,8 +8158,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$e || (_templat
|
|
|
8563
8158
|
return '';
|
|
8564
8159
|
});
|
|
8565
8160
|
|
|
8566
|
-
var _templateObject
|
|
8567
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject
|
|
8161
|
+
var _templateObject$$;
|
|
8162
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
8568
8163
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8569
8164
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8570
8165
|
return aspectRatio;
|
|
@@ -8689,8 +8284,8 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
8689
8284
|
}));
|
|
8690
8285
|
};
|
|
8691
8286
|
|
|
8692
|
-
var _excluded$
|
|
8693
|
-
_excluded2$
|
|
8287
|
+
var _excluded$k = ["text"],
|
|
8288
|
+
_excluded2$2 = ["text"];
|
|
8694
8289
|
var LENGTH_TEXT$3 = 28;
|
|
8695
8290
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
8696
8291
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -8714,13 +8309,13 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8714
8309
|
var _ref2 = primaryButton || {},
|
|
8715
8310
|
_ref2$text = _ref2.text,
|
|
8716
8311
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
8717
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
8312
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
|
|
8718
8313
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
8719
8314
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
8720
8315
|
var _ref3 = tertiaryButton || {},
|
|
8721
8316
|
_ref3$text = _ref3.text,
|
|
8722
8317
|
tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
8723
|
-
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
8318
|
+
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
|
|
8724
8319
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
|
|
8725
8320
|
var defaultVideoSettings = {
|
|
8726
8321
|
muted: true,
|
|
@@ -8755,8 +8350,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8755
8350
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
8756
8351
|
};
|
|
8757
8352
|
|
|
8758
|
-
var _templateObject$
|
|
8759
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
8353
|
+
var _templateObject$10;
|
|
8354
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
8760
8355
|
|
|
8761
8356
|
/**
|
|
8762
8357
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -8811,9 +8406,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
8811
8406
|
})));
|
|
8812
8407
|
};
|
|
8813
8408
|
|
|
8814
|
-
var _templateObject$
|
|
8815
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
8816
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8409
|
+
var _templateObject$11, _templateObject2$J, _templateObject3$z;
|
|
8410
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8411
|
+
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
8817
8412
|
var horizontalMode = _ref.horizontalMode;
|
|
8818
8413
|
if (horizontalMode) return 'row';
|
|
8819
8414
|
return 'column';
|
|
@@ -8821,7 +8416,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObjec
|
|
|
8821
8416
|
var gap = _ref2.gap;
|
|
8822
8417
|
return gap + "px";
|
|
8823
8418
|
});
|
|
8824
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8419
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
8825
8420
|
var darkMode = _ref3.darkMode;
|
|
8826
8421
|
if (darkMode) return 'var(--base-color-white)';
|
|
8827
8422
|
return 'var(--base-color-errorstate)';
|
|
@@ -8898,10 +8493,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
8898
8493
|
}, error))));
|
|
8899
8494
|
};
|
|
8900
8495
|
|
|
8901
|
-
var _templateObject$
|
|
8902
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8903
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8904
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8496
|
+
var _templateObject$12, _templateObject2$K, _templateObject3$A;
|
|
8497
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-lightgrey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
8498
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\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"])));
|
|
8499
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
8905
8500
|
|
|
8906
8501
|
/* eslint-disable react/no-danger */
|
|
8907
8502
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -8957,8 +8552,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
8957
8552
|
return null;
|
|
8958
8553
|
};
|
|
8959
8554
|
|
|
8960
|
-
var _templateObject$
|
|
8961
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8555
|
+
var _templateObject$13;
|
|
8556
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__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);
|
|
8962
8557
|
|
|
8963
8558
|
var SectionTitle = function SectionTitle(_ref) {
|
|
8964
8559
|
var title = _ref.title,
|
|
@@ -8986,8 +8581,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
8986
8581
|
}, description)))));
|
|
8987
8582
|
};
|
|
8988
8583
|
|
|
8989
|
-
var _templateObject$
|
|
8990
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
8584
|
+
var _templateObject$14, _templateObject2$L, _templateObject3$B, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject10$5, _templateObject11$3;
|
|
8585
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
8991
8586
|
var theme = _ref.theme;
|
|
8992
8587
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
8993
8588
|
}, function (_ref2) {
|
|
@@ -8997,12 +8592,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /
|
|
|
8997
8592
|
var theme = _ref3.theme;
|
|
8998
8593
|
return theme.colors.lightgrey;
|
|
8999
8594
|
});
|
|
9000
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
8595
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9001
8596
|
var theme = _ref4.theme;
|
|
9002
8597
|
return theme.colors.darkgrey;
|
|
9003
8598
|
});
|
|
9004
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
9005
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$
|
|
8599
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
8600
|
+
var listItemStyles = /*#__PURE__*/css(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9006
8601
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9007
8602
|
var theme = _ref5.theme;
|
|
9008
8603
|
return {
|
|
@@ -9010,11 +8605,11 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
|
9010
8605
|
color: theme.colors.black,
|
|
9011
8606
|
title: 'Select Arrow'
|
|
9012
8607
|
};
|
|
9013
|
-
})(_templateObject5$
|
|
9014
|
-
var Wrapper$
|
|
9015
|
-
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
9016
|
-
var Options = /*#__PURE__*/styled.div(_templateObject8$
|
|
9017
|
-
var Option = /*#__PURE__*/styled.li(_templateObject9$
|
|
8608
|
+
})(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
8609
|
+
var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
8610
|
+
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
8611
|
+
var Options = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
8612
|
+
var Option = /*#__PURE__*/styled.li(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9018
8613
|
var theme = _ref6.theme,
|
|
9019
8614
|
hover = _ref6.hover;
|
|
9020
8615
|
var _theme$colors = theme.colors,
|
|
@@ -9024,7 +8619,7 @@ var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 =
|
|
|
9024
8619
|
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
9025
8620
|
});
|
|
9026
8621
|
var selectStyles = function selectStyles(width, height) {
|
|
9027
|
-
return css(_templateObject10$
|
|
8622
|
+
return css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
|
|
9028
8623
|
};
|
|
9029
8624
|
var SelectList = /*#__PURE__*/styled.ul(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
9030
8625
|
var width = _ref7.width,
|
|
@@ -9320,7 +8915,7 @@ function Select(_ref3) {
|
|
|
9320
8915
|
}
|
|
9321
8916
|
setSelectedValue(options[0]);
|
|
9322
8917
|
}, [options, resetWhenOptionsUpdate]);
|
|
9323
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
8918
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$3, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
9324
8919
|
level: 1,
|
|
9325
8920
|
tag: "p",
|
|
9326
8921
|
"data-testid": "select-label"
|
|
@@ -9367,9 +8962,9 @@ function Select(_ref3) {
|
|
|
9367
8962
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9368
8963
|
}
|
|
9369
8964
|
|
|
9370
|
-
var _templateObject$
|
|
9371
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
9372
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8965
|
+
var _templateObject$15, _templateObject2$M, _templateObject3$C, _templateObject4$u;
|
|
8966
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
8967
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\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 letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9373
8968
|
var width = _ref.width;
|
|
9374
8969
|
if (!width) return 'none';
|
|
9375
8970
|
return width + "px";
|
|
@@ -9386,18 +8981,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateOb
|
|
|
9386
8981
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9387
8982
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9388
8983
|
});
|
|
9389
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8984
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9390
8985
|
var darkMode = _ref5.darkMode;
|
|
9391
8986
|
if (darkMode) return "var(--base-color-white)";
|
|
9392
8987
|
return "var(--base-color-black)";
|
|
9393
8988
|
});
|
|
9394
|
-
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8989
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9395
8990
|
var darkMode = _ref6.darkMode;
|
|
9396
8991
|
if (darkMode) return "var(--base-color-white)";
|
|
9397
8992
|
return "var(--base-color-errorstate)";
|
|
9398
8993
|
});
|
|
9399
8994
|
|
|
9400
|
-
var _excluded$
|
|
8995
|
+
var _excluded$l = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
9401
8996
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
9402
8997
|
return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
9403
8998
|
iconName: "DropdownArrow"
|
|
@@ -9448,7 +9043,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
9448
9043
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
9449
9044
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
9450
9045
|
components = _ref2.components,
|
|
9451
|
-
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9046
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
9452
9047
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
9453
9048
|
label: label,
|
|
9454
9049
|
error: error,
|
|
@@ -9466,7 +9061,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
9466
9061
|
})));
|
|
9467
9062
|
};
|
|
9468
9063
|
|
|
9469
|
-
var _excluded$
|
|
9064
|
+
var _excluded$m = ["label", "error", "width", "darkMode", "components"];
|
|
9470
9065
|
/**
|
|
9471
9066
|
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
9472
9067
|
* component for select instead of regular react-select component. This can be used
|
|
@@ -9488,7 +9083,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9488
9083
|
_ref$darkMode = _ref.darkMode,
|
|
9489
9084
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
9490
9085
|
components = _ref.components,
|
|
9491
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9086
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$m);
|
|
9492
9087
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
9493
9088
|
label: label,
|
|
9494
9089
|
error: error,
|
|
@@ -9505,8 +9100,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9505
9100
|
})));
|
|
9506
9101
|
};
|
|
9507
9102
|
|
|
9508
|
-
var _templateObject$
|
|
9509
|
-
var TextContainer$
|
|
9103
|
+
var _templateObject$16;
|
|
9104
|
+
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__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 h2,\n h3,\n h4 {\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 margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\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 margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n }\n\n p {\n margin: 30px 0;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & strong {\n font-weight: bold;\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: 0 0 0 30px;\n\n li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n }\n\n & ol {\n padding: 0;\n margin: 0 0 0 20px;\n\n li {\n line-height: var(--line-height-listing);\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 12px;\n margin-right: 8px;\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
9510
9105
|
var theme = _ref.theme;
|
|
9511
9106
|
return theme.colors.primary;
|
|
9512
9107
|
});
|
|
@@ -9527,15 +9122,95 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
9527
9122
|
columnSpanDesktop: columnSpanDesktop,
|
|
9528
9123
|
columnStartDevice: columnStartDevice,
|
|
9529
9124
|
columnSpanDevice: columnSpanDevice
|
|
9530
|
-
}, /*#__PURE__*/React__default.createElement(TextContainer$
|
|
9125
|
+
}, /*#__PURE__*/React__default.createElement(TextContainer$1, {
|
|
9531
9126
|
dangerouslySetInnerHTML: {
|
|
9532
9127
|
__html: text
|
|
9533
9128
|
}
|
|
9534
9129
|
})));
|
|
9535
9130
|
};
|
|
9536
9131
|
|
|
9537
|
-
var _templateObject$
|
|
9538
|
-
var Wrapper$
|
|
9132
|
+
var _templateObject$17, _templateObject2$N, _templateObject3$D, _templateObject4$v, _templateObject5$p, _templateObject6$i, _templateObject7$d, _templateObject8$9;
|
|
9133
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-lightgrey);\n padding: 40px;\n\n display: block;\n position: relative;\n\n @media ", " {\n margin-top: 0;\n padding: 40px 20px;\n }\n"])), devices.tablet);
|
|
9134
|
+
var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
|
|
9135
|
+
var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
|
|
9136
|
+
var theme = _ref.theme;
|
|
9137
|
+
return theme.colors.primary;
|
|
9138
|
+
}, Colors.White);
|
|
9139
|
+
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
9140
|
+
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
9141
|
+
var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
9142
|
+
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
|
|
9143
|
+
var LineThrough = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
9144
|
+
|
|
9145
|
+
/* eslint-disable react/no-danger */
|
|
9146
|
+
var OfferText = function OfferText(_ref) {
|
|
9147
|
+
var title = _ref.title,
|
|
9148
|
+
description = _ref.description;
|
|
9149
|
+
return /*#__PURE__*/React__default.createElement(OfferTextWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
9150
|
+
semanticLevel: 5,
|
|
9151
|
+
level: 1
|
|
9152
|
+
}, title), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
9153
|
+
level: 1
|
|
9154
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
9155
|
+
dangerouslySetInnerHTML: {
|
|
9156
|
+
__html: description != null ? description : ''
|
|
9157
|
+
}
|
|
9158
|
+
})));
|
|
9159
|
+
};
|
|
9160
|
+
|
|
9161
|
+
// Set max. character length
|
|
9162
|
+
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
9163
|
+
return value.slice(0, maxLength);
|
|
9164
|
+
};
|
|
9165
|
+
// Format price to contain £ if not already present
|
|
9166
|
+
var formatPrice = function formatPrice(value) {
|
|
9167
|
+
if (Number.isNaN(Number(value))) return value != null ? value : '';
|
|
9168
|
+
return "\xA3" + Number(value).toFixed(2);
|
|
9169
|
+
};
|
|
9170
|
+
|
|
9171
|
+
var LENGTH_SMALL_TEXT$2 = 19;
|
|
9172
|
+
var OFFER_TEXTS_LIMIT = 3;
|
|
9173
|
+
var FLAG_CHAR_LIMIT = 30;
|
|
9174
|
+
var UpsellCard = function UpsellCard(_ref) {
|
|
9175
|
+
var _ref$title = _ref.title,
|
|
9176
|
+
title = _ref$title === void 0 ? '' : _ref$title,
|
|
9177
|
+
subTitle = _ref.subTitle,
|
|
9178
|
+
price = _ref.price,
|
|
9179
|
+
promoPrice = _ref.promoPrice,
|
|
9180
|
+
flag = _ref.flag,
|
|
9181
|
+
offerTexts = _ref.offerTexts,
|
|
9182
|
+
link = _ref.link,
|
|
9183
|
+
_ref$theme = _ref.theme,
|
|
9184
|
+
theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme;
|
|
9185
|
+
var truncate = function truncate(str, n) {
|
|
9186
|
+
return str.length >= n ? str.slice(0, n) : str;
|
|
9187
|
+
};
|
|
9188
|
+
var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
|
|
9189
|
+
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
9190
|
+
theme: theme
|
|
9191
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$4, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabelWrapper, null, /*#__PURE__*/React__default.createElement(PromoLabel, null, setMaxCharLength(flag, FLAG_CHAR_LIMIT)))), /*#__PURE__*/React__default.createElement(TitleContainer$3, null, /*#__PURE__*/React__default.createElement(Subtitle, {
|
|
9192
|
+
semanticLevel: 2,
|
|
9193
|
+
level: 1
|
|
9194
|
+
}, title), subTitle && (/*#__PURE__*/React__default.createElement(Overline, {
|
|
9195
|
+
semanticLevel: 3,
|
|
9196
|
+
level: 1
|
|
9197
|
+
}, subTitle)), promoPrice ? (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9198
|
+
level: 4
|
|
9199
|
+
}, formatPrice(price))), /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9200
|
+
level: 4
|
|
9201
|
+
}, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9202
|
+
level: 4
|
|
9203
|
+
}, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText) {
|
|
9204
|
+
return /*#__PURE__*/React__default.createElement(OfferText, {
|
|
9205
|
+
key: offerText.title,
|
|
9206
|
+
title: offerText.title,
|
|
9207
|
+
description: offerText.description
|
|
9208
|
+
});
|
|
9209
|
+
}), link && (/*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT$2))))));
|
|
9210
|
+
};
|
|
9211
|
+
|
|
9212
|
+
var _templateObject$18, _templateObject2$O;
|
|
9213
|
+
var Wrapper$5 = /*#__PURE__*/styled.figure(_templateObject$18 || (_templateObject$18 = /*#__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"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
9539
9214
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9540
9215
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9541
9216
|
return aspectRatio;
|
|
@@ -9545,7 +9220,7 @@ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1
|
|
|
9545
9220
|
height = _ref2.height;
|
|
9546
9221
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
9547
9222
|
});
|
|
9548
|
-
var CaptionWrapper = /*#__PURE__*/styled.
|
|
9223
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$O || (_templateObject2$O = /*#__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"])));
|
|
9549
9224
|
|
|
9550
9225
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
9551
9226
|
var caption = _ref.caption,
|
|
@@ -9560,30 +9235,32 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9560
9235
|
var _wrapperRef$current;
|
|
9561
9236
|
return setHeight((wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
|
|
9562
9237
|
};
|
|
9238
|
+
setWrapperHeight(); // Initial height calculation
|
|
9563
9239
|
window.addEventListener('resize', setWrapperHeight);
|
|
9564
|
-
if (wrapperRef) {
|
|
9565
|
-
setWrapperHeight();
|
|
9566
|
-
}
|
|
9567
9240
|
return function () {
|
|
9568
9241
|
return window.removeEventListener('resize', setWrapperHeight);
|
|
9569
9242
|
};
|
|
9570
|
-
}, [
|
|
9571
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9243
|
+
}, []);
|
|
9244
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$5, {
|
|
9572
9245
|
aspectRatio: aspectRatio,
|
|
9573
9246
|
ref: wrapperRef,
|
|
9574
9247
|
height: height
|
|
9575
9248
|
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
9576
9249
|
aspectRatio: aspectRatio
|
|
9577
|
-
},
|
|
9250
|
+
}, React__default.Children.map(children, function (child) {
|
|
9251
|
+
return /*#__PURE__*/React__default.isValidElement(child) ? /*#__PURE__*/React__default.cloneElement(child, {
|
|
9252
|
+
alt: child.props.alt || 'Visual representation'
|
|
9253
|
+
}) : child;
|
|
9254
|
+
})), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
9578
9255
|
};
|
|
9579
9256
|
|
|
9580
|
-
var _templateObject$
|
|
9581
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9582
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9257
|
+
var _templateObject$19, _templateObject2$P, _templateObject3$E;
|
|
9258
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
9259
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9583
9260
|
var displayAttribution = _ref.displayAttribution;
|
|
9584
9261
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
9585
9262
|
});
|
|
9586
|
-
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9263
|
+
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
|
|
9587
9264
|
|
|
9588
9265
|
/* eslint-disable react/no-danger */
|
|
9589
9266
|
var Quote = function Quote(_ref) {
|
|
@@ -9608,13 +9285,13 @@ var Quote = function Quote(_ref) {
|
|
|
9608
9285
|
}, attribution))));
|
|
9609
9286
|
};
|
|
9610
9287
|
|
|
9611
|
-
var _templateObject$
|
|
9612
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
9613
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9614
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
9615
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9616
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
9617
|
-
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$
|
|
9288
|
+
var _templateObject$1a, _templateObject2$Q, _templateObject3$F, _templateObject4$w, _templateObject5$q, _templateObject6$j;
|
|
9289
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
9290
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
9291
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
9292
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
9293
|
+
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
9294
|
+
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
9618
9295
|
|
|
9619
9296
|
var MiniCard = function MiniCard(_ref) {
|
|
9620
9297
|
var _ref$title = _ref.title,
|
|
@@ -9652,18 +9329,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9652
9329
|
}, title)))));
|
|
9653
9330
|
};
|
|
9654
9331
|
|
|
9655
|
-
var _templateObject$
|
|
9656
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9657
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
9658
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
9332
|
+
var _templateObject$1b, _templateObject2$R, _templateObject3$G, _templateObject4$x, _templateObject5$r;
|
|
9333
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
9334
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
9335
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
9659
9336
|
var isVisible = _ref.isVisible;
|
|
9660
9337
|
return isVisible ? 'visible' : 'hidden';
|
|
9661
9338
|
});
|
|
9662
|
-
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
9339
|
+
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
9663
9340
|
var isVisible = _ref2.isVisible;
|
|
9664
9341
|
return isVisible ? 'visible' : 'hidden';
|
|
9665
9342
|
});
|
|
9666
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
9343
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s 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 @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
9667
9344
|
|
|
9668
9345
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9669
9346
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -9744,15 +9421,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
9744
9421
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
9745
9422
|
};
|
|
9746
9423
|
|
|
9747
|
-
var _templateObject$
|
|
9748
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
9749
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
9750
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
9751
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
9424
|
+
var _templateObject$1c, _templateObject2$S, _templateObject3$H, _templateObject4$y, _templateObject5$s;
|
|
9425
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
9426
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
|
|
9427
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\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-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
9428
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\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-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
9752
9429
|
var isActive = _ref.isActive;
|
|
9753
9430
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
9754
9431
|
}, Colors.MidGrey);
|
|
9755
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
9432
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
9756
9433
|
var isOpen = _ref2.isOpen;
|
|
9757
9434
|
return isOpen ? 'block' : 'none';
|
|
9758
9435
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -9908,19 +9585,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
9908
9585
|
});
|
|
9909
9586
|
};
|
|
9910
9587
|
|
|
9911
|
-
var _templateObject$
|
|
9912
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
9913
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
9914
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
9588
|
+
var _templateObject$1d, _templateObject2$T, _templateObject3$I, _templateObject4$z, _templateObject5$t, _templateObject6$k;
|
|
9589
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
9590
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
9591
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
9915
9592
|
var color = _ref.color;
|
|
9916
9593
|
return "var(--base-color-" + color + ")";
|
|
9917
9594
|
});
|
|
9918
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
9919
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$
|
|
9595
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
9596
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
9920
9597
|
var color = _ref2.color;
|
|
9921
9598
|
return "var(--base-color-" + color + ")";
|
|
9922
9599
|
});
|
|
9923
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$
|
|
9600
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
9924
9601
|
var color = _ref3.color;
|
|
9925
9602
|
return "var(--base-color-" + color + ")";
|
|
9926
9603
|
});
|
|
@@ -10002,28 +9679,28 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10002
9679
|
}, strengthLabel))));
|
|
10003
9680
|
};
|
|
10004
9681
|
|
|
10005
|
-
var _templateObject$
|
|
10006
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
10007
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10008
|
-
var Wrapper$
|
|
10009
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
9682
|
+
var _templateObject$1e, _templateObject2$U, _templateObject3$J, _templateObject4$A, _templateObject5$u, _templateObject6$l, _templateObject7$e, _templateObject8$a, _templateObject9$6, _templateObject10$6;
|
|
9683
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
9684
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
9685
|
+
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
9686
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ", ";\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10010
9687
|
return "var(--base-color-" + props.lineColor + ")";
|
|
10011
9688
|
}, function (props) {
|
|
10012
9689
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10013
9690
|
}, devices.tablet, devices.mobile);
|
|
10014
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
9691
|
+
var TableCell = /*#__PURE__*/styled.td(_templateObject5$u || (_templateObject5$u = /*#__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 padding: 30px 30px 30px 0;\n text-align: left;\n vertical-align: top;\n border-bottom: 1px solid;\n border-color: ", ";\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n }\n"])), function (props) {
|
|
10015
9692
|
return "var(--base-color-" + props.lineColor + ")";
|
|
10016
9693
|
}, function (props) {
|
|
10017
9694
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10018
9695
|
}, devices.mobile);
|
|
10019
|
-
var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
10020
|
-
var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$
|
|
9696
|
+
var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: none;\n }\n"])));
|
|
9697
|
+
var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: none;\n border: none;\n padding: 0;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n border-bottom: 1px solid var(--base-color-transparent);\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n\n :hover {\n outline: none;\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n\n /* Active state */\n ", "\n"])), function (_ref) {
|
|
10021
9698
|
var active = _ref.active;
|
|
10022
9699
|
return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
|
|
10023
9700
|
});
|
|
10024
|
-
var Next = /*#__PURE__*/styled.span(_templateObject8$
|
|
10025
|
-
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$
|
|
10026
|
-
var AriaDescription$1 = /*#__PURE__*/styled.span(_templateObject10$
|
|
9701
|
+
var Next = /*#__PURE__*/styled.span(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
|
|
9702
|
+
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n\n div:hover {\n background-color: var(--base-color-light-grey);\n }\n\n > div > div {\n background-color: var(--base-color-light-grey);\n }\n\n svg path {\n fill: var(--base-color-black) !important;\n }\n"])));
|
|
9703
|
+
var AriaDescription$1 = /*#__PURE__*/styled.span(_templateObject10$6 || (_templateObject10$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10027
9704
|
|
|
10028
9705
|
/* eslint-disable react/no-danger */
|
|
10029
9706
|
var Content = function Content(_ref) {
|
|
@@ -10131,7 +9808,7 @@ var Table = function Table(_ref) {
|
|
|
10131
9808
|
} else {
|
|
10132
9809
|
visibleRows = totalRows;
|
|
10133
9810
|
}
|
|
10134
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9811
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$6, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
10135
9812
|
onClickPrev: function onClickPrev() {
|
|
10136
9813
|
return scrollTable(tableRef, 'left');
|
|
10137
9814
|
},
|
|
@@ -10206,6 +9883,383 @@ var Table = function Table(_ref) {
|
|
|
10206
9883
|
}))))))))));
|
|
10207
9884
|
};
|
|
10208
9885
|
|
|
9886
|
+
var _excluded$n = ["dataRoh"];
|
|
9887
|
+
var Footer = function Footer(_ref) {
|
|
9888
|
+
var data = _ref.data;
|
|
9889
|
+
var policyLinks = data.policyLinks,
|
|
9890
|
+
newsletter = data.newsletter,
|
|
9891
|
+
rawSocialMediaLinks = data.socialMediaLinks,
|
|
9892
|
+
contact = data.contact,
|
|
9893
|
+
_data$artsLogo = data.artsLogo,
|
|
9894
|
+
artsDataRoh = _data$artsLogo.dataRoh,
|
|
9895
|
+
artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$n),
|
|
9896
|
+
additionalInfo = data.additionalInfo;
|
|
9897
|
+
var _useViewport = useViewport(),
|
|
9898
|
+
isMobile = _useViewport.isMobile;
|
|
9899
|
+
return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksSection, {
|
|
9900
|
+
"data-testid": "policy-links"
|
|
9901
|
+
}, /*#__PURE__*/React__default.createElement(PolicyLinks, {
|
|
9902
|
+
items: policyLinks
|
|
9903
|
+
})), /*#__PURE__*/React__default.createElement(SocialAndNewsletterSection, {
|
|
9904
|
+
"data-testid": "contact-newsletter"
|
|
9905
|
+
}, /*#__PURE__*/React__default.createElement(SocialLinks, {
|
|
9906
|
+
items: rawSocialMediaLinks
|
|
9907
|
+
}), /*#__PURE__*/React__default.createElement(TextLink, {
|
|
9908
|
+
href: contact.href,
|
|
9909
|
+
"aria-label": "Contact us: " + contact.title
|
|
9910
|
+
}, contact.title), /*#__PURE__*/React__default.createElement(NewsletterBodyTextWrapper, {
|
|
9911
|
+
level: 1
|
|
9912
|
+
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLink, {
|
|
9913
|
+
href: newsletter.link.href,
|
|
9914
|
+
"data-roh": newsletter.link.dataRoh,
|
|
9915
|
+
"aria-label": "Newsletter link: " + newsletter.link.title
|
|
9916
|
+
}, newsletter.link.title)), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement("div", {
|
|
9917
|
+
"data-testid": "arts-logo"
|
|
9918
|
+
}, /*#__PURE__*/React__default.createElement("a", Object.assign({
|
|
9919
|
+
"data-roh": artsDataRoh,
|
|
9920
|
+
target: "_blank",
|
|
9921
|
+
rel: "noopener noreferrer"
|
|
9922
|
+
}, artsLogo, {
|
|
9923
|
+
"aria-label": "Sponsor Logo link"
|
|
9924
|
+
}), /*#__PURE__*/React__default.createElement(SponsorLogo, null))), /*#__PURE__*/React__default.createElement("div", {
|
|
9925
|
+
"data-testid": "additional-info"
|
|
9926
|
+
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
9927
|
+
level: isMobile ? 2 : 3
|
|
9928
|
+
}, additionalInfo)))));
|
|
9929
|
+
};
|
|
9930
|
+
|
|
9931
|
+
var _templateObject$1f, _templateObject2$V, _templateObject3$K, _templateObject4$B, _templateObject5$v, _templateObject6$m;
|
|
9932
|
+
var LIST_ITEM_GAP = 32;
|
|
9933
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
9934
|
+
var bottomBorder = _ref.bottomBorder;
|
|
9935
|
+
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
9936
|
+
}, zIndexes.anchor);
|
|
9937
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
9938
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
9939
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\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 background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0.48) 85%,\n rgba(235, 235, 235, 0.4) 99%,\n rgba(255, 255, 255, 0.39) 100%\n );\n }\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref2) {
|
|
9940
|
+
var tabsOverflow = _ref2.tabsOverflow;
|
|
9941
|
+
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
9942
|
+
}, LIST_ITEM_GAP, function (_ref3) {
|
|
9943
|
+
var tabsOverflow = _ref3.tabsOverflow;
|
|
9944
|
+
return tabsOverflow ? 'start' : 'center';
|
|
9945
|
+
}, devices.mobileAndTablet, devices.mobile, function (_ref4) {
|
|
9946
|
+
var tabsOverflow = _ref4.tabsOverflow,
|
|
9947
|
+
hasTwoArrows = _ref4.hasTwoArrows;
|
|
9948
|
+
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
9949
|
+
});
|
|
9950
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\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"])), function (_ref5) {
|
|
9951
|
+
var fullWidth = _ref5.fullWidth;
|
|
9952
|
+
return fullWidth ? '74px' : '46px';
|
|
9953
|
+
});
|
|
9954
|
+
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__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"])));
|
|
9955
|
+
|
|
9956
|
+
var _excluded$o = ["id", "text"];
|
|
9957
|
+
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
9958
|
+
var tabs = _ref.tabs,
|
|
9959
|
+
onTabClick = _ref.onTabClick,
|
|
9960
|
+
activeTab = _ref.activeTab,
|
|
9961
|
+
absolutePositionParams = _ref.absolutePositionParams,
|
|
9962
|
+
_ref$bottomBorder = _ref.bottomBorder,
|
|
9963
|
+
bottomBorder = _ref$bottomBorder === void 0 ? false : _ref$bottomBorder;
|
|
9964
|
+
var tabListRef = useRef(null);
|
|
9965
|
+
var wrapperRef = useRef(null);
|
|
9966
|
+
var _useState = useState(activeTab || ''),
|
|
9967
|
+
selectedItem = _useState[0],
|
|
9968
|
+
setSelectedItem = _useState[1];
|
|
9969
|
+
var _useState2 = useState(false),
|
|
9970
|
+
tabsOverflow = _useState2[0],
|
|
9971
|
+
setTabsOverflow = _useState2[1];
|
|
9972
|
+
var _useState3 = useState(false),
|
|
9973
|
+
canScrollToLeft = _useState3[0],
|
|
9974
|
+
setCanScrollToLeft = _useState3[1];
|
|
9975
|
+
var _useState4 = useState(tabsOverflow),
|
|
9976
|
+
canScrollToRight = _useState4[0],
|
|
9977
|
+
setCanScrollToRight = _useState4[1];
|
|
9978
|
+
var timer = null;
|
|
9979
|
+
var hasTwoArrows = canScrollToRight && canScrollToLeft;
|
|
9980
|
+
var isSelectedItem = function isSelectedItem(id) {
|
|
9981
|
+
return id === selectedItem;
|
|
9982
|
+
};
|
|
9983
|
+
var onClicktab = function onClicktab(e, id) {
|
|
9984
|
+
if (onTabClick) {
|
|
9985
|
+
onTabClick(e, id);
|
|
9986
|
+
}
|
|
9987
|
+
setSelectedItem(id);
|
|
9988
|
+
};
|
|
9989
|
+
var getScrollWidth = function getScrollWidth() {
|
|
9990
|
+
var width = 0;
|
|
9991
|
+
var selectedItemIndex = tabs.findIndex(function (el) {
|
|
9992
|
+
return el.id === selectedItem;
|
|
9993
|
+
});
|
|
9994
|
+
var tabLinks = document.getElementsByClassName('anchor-tab-bar-tablink');
|
|
9995
|
+
for (var i = 0; i < selectedItemIndex; ++i) {
|
|
9996
|
+
width += tabLinks[i].scrollWidth + LIST_ITEM_GAP;
|
|
9997
|
+
}
|
|
9998
|
+
return width;
|
|
9999
|
+
};
|
|
10000
|
+
// eslint-disable-next-line default-param-last
|
|
10001
|
+
var changeWrapperVisibility = function changeWrapperVisibility(showWrapper, topOffset) {
|
|
10002
|
+
if (showWrapper === void 0) {
|
|
10003
|
+
showWrapper = false;
|
|
10004
|
+
}
|
|
10005
|
+
var wrapperEl = wrapperRef.current;
|
|
10006
|
+
wrapperEl.style.position = 'absolute';
|
|
10007
|
+
wrapperEl.style.visibility = showWrapper && topOffset !== undefined ? 'visible' : 'hidden';
|
|
10008
|
+
if (showWrapper && topOffset !== undefined) wrapperEl.style.top = topOffset + "px";
|
|
10009
|
+
};
|
|
10010
|
+
var handleScrollForAbsolutePosition = function handleScrollForAbsolutePosition() {
|
|
10011
|
+
var _absolutePositionPara = absolutePositionParams.navigationHeight,
|
|
10012
|
+
navigationHeight = _absolutePositionPara === void 0 ? 0 : _absolutePositionPara,
|
|
10013
|
+
_absolutePositionPara2 = absolutePositionParams.topOffset,
|
|
10014
|
+
topOffset = _absolutePositionPara2 === void 0 ? 0 : _absolutePositionPara2;
|
|
10015
|
+
if (wrapperRef.current && window.pageYOffset > topOffset + navigationHeight) {
|
|
10016
|
+
changeWrapperVisibility();
|
|
10017
|
+
} else if (wrapperRef.current && window.pageYOffset < topOffset + navigationHeight) {
|
|
10018
|
+
changeWrapperVisibility(true, topOffset);
|
|
10019
|
+
}
|
|
10020
|
+
if (timer !== null) clearTimeout(timer);
|
|
10021
|
+
timer = setTimeout(function () {
|
|
10022
|
+
if (window.pageYOffset > topOffset + navigationHeight && wrapperRef.current) {
|
|
10023
|
+
changeWrapperVisibility(true, window.pageYOffset - navigationHeight);
|
|
10024
|
+
}
|
|
10025
|
+
}, 300);
|
|
10026
|
+
};
|
|
10027
|
+
// We use this behavior only on iOS devices because there is a known issue that
|
|
10028
|
+
// sticky elements lose their stickiness when a keyboard appears on the screen
|
|
10029
|
+
useEffect(function () {
|
|
10030
|
+
if (absolutePositionParams) {
|
|
10031
|
+
changeWrapperVisibility(true, absolutePositionParams.topOffset);
|
|
10032
|
+
document.addEventListener('scroll', handleScrollForAbsolutePosition);
|
|
10033
|
+
return function () {
|
|
10034
|
+
document.removeEventListener('scroll', handleScrollForAbsolutePosition);
|
|
10035
|
+
};
|
|
10036
|
+
}
|
|
10037
|
+
return undefined;
|
|
10038
|
+
}, []);
|
|
10039
|
+
useEffect(function () {
|
|
10040
|
+
setTimeout(function () {
|
|
10041
|
+
if (tabListRef.current) tabListRef.current.scrollLeft += getScrollWidth();
|
|
10042
|
+
}, 500);
|
|
10043
|
+
}, []);
|
|
10044
|
+
useEffect(function () {
|
|
10045
|
+
var _tabListRef$current, _tabListRef$current2;
|
|
10046
|
+
var tabsIsOverflowed = (((_tabListRef$current = tabListRef.current) == null ? void 0 : _tabListRef$current.scrollWidth) || 0) > (((_tabListRef$current2 = tabListRef.current) == null ? void 0 : _tabListRef$current2.clientWidth) || 0);
|
|
10047
|
+
setTabsOverflow(tabsIsOverflowed);
|
|
10048
|
+
setCanScrollToRight(tabsIsOverflowed);
|
|
10049
|
+
}, [tabListRef]);
|
|
10050
|
+
useEffect(function () {
|
|
10051
|
+
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
10052
|
+
var elementGap = 100;
|
|
10053
|
+
var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
|
|
10054
|
+
var targetSectionElement = document.getElementById(item.id);
|
|
10055
|
+
if (!targetSectionElement) return false;
|
|
10056
|
+
var topDiff = (targetSectionElement == null ? void 0 : targetSectionElement.getBoundingClientRect().top) - elementGap;
|
|
10057
|
+
return selectedItem !== item.id && topDiff > 0 && topDiff < elementGap;
|
|
10058
|
+
});
|
|
10059
|
+
if (window.scrollY === 0) {
|
|
10060
|
+
setSelectedItem(onTabClick ? selectedItem : '');
|
|
10061
|
+
} else if (reachedItem) {
|
|
10062
|
+
var _ref2 = (tabListRef == null ? void 0 : tabListRef.current) || {},
|
|
10063
|
+
_ref2$scrollLeft = _ref2.scrollLeft,
|
|
10064
|
+
scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
|
|
10065
|
+
_ref2$clientWidth = _ref2.clientWidth,
|
|
10066
|
+
clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
|
|
10067
|
+
var tabLinkElement = document.getElementById("tablink-" + reachedItem.id) || {
|
|
10068
|
+
offsetLeft: 0,
|
|
10069
|
+
offsetWidth: 0
|
|
10070
|
+
};
|
|
10071
|
+
var offsetLeft = tabLinkElement.offsetLeft,
|
|
10072
|
+
offsetWidth = tabLinkElement.offsetWidth;
|
|
10073
|
+
var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
|
|
10074
|
+
if (!isInView && tabListRef != null && tabListRef.current) {
|
|
10075
|
+
tabListRef.current.scrollLeft = offsetLeft;
|
|
10076
|
+
}
|
|
10077
|
+
setSelectedItem(reachedItem.id);
|
|
10078
|
+
}
|
|
10079
|
+
};
|
|
10080
|
+
document.addEventListener('scroll', scrollTriggerCheck);
|
|
10081
|
+
return function () {
|
|
10082
|
+
return document.removeEventListener('scroll', scrollTriggerCheck);
|
|
10083
|
+
};
|
|
10084
|
+
}, [tabs, selectedItem, tabListRef]);
|
|
10085
|
+
var tabsColumnStart;
|
|
10086
|
+
if (tabsOverflow) {
|
|
10087
|
+
tabsColumnStart = canScrollToLeft ? 1 : 2;
|
|
10088
|
+
} else {
|
|
10089
|
+
tabsColumnStart = 3;
|
|
10090
|
+
}
|
|
10091
|
+
var tabsColumnSpan;
|
|
10092
|
+
if (tabsOverflow) {
|
|
10093
|
+
tabsColumnSpan = canScrollToLeft ? 15 : 14;
|
|
10094
|
+
} else {
|
|
10095
|
+
tabsColumnSpan = 12;
|
|
10096
|
+
}
|
|
10097
|
+
var scrollToRight = function scrollToRight() {
|
|
10098
|
+
if (tabListRef.current) {
|
|
10099
|
+
var scroll = tabListRef.current.scrollLeft;
|
|
10100
|
+
var newScroll = Math.min(tabListRef.current.clientWidth, tabListRef.current.scrollWidth - scroll);
|
|
10101
|
+
if (scroll - newScroll < LIST_ITEM_GAP) {
|
|
10102
|
+
tabListRef.current.scrollLeft += newScroll + LIST_ITEM_GAP;
|
|
10103
|
+
return;
|
|
10104
|
+
}
|
|
10105
|
+
tabListRef.current.scrollLeft += newScroll;
|
|
10106
|
+
}
|
|
10107
|
+
};
|
|
10108
|
+
var scrollToLeft = function scrollToLeft() {
|
|
10109
|
+
if (tabListRef.current) {
|
|
10110
|
+
var scroll = tabListRef.current.scrollLeft;
|
|
10111
|
+
var newScroll = Math.max(0, scroll - tabListRef.current.clientWidth);
|
|
10112
|
+
if (newScroll < LIST_ITEM_GAP) {
|
|
10113
|
+
tabListRef.current.scrollLeft = newScroll - LIST_ITEM_GAP;
|
|
10114
|
+
return;
|
|
10115
|
+
}
|
|
10116
|
+
tabListRef.current.scrollLeft = newScroll;
|
|
10117
|
+
}
|
|
10118
|
+
};
|
|
10119
|
+
var onTabsScroll = function onTabsScroll() {
|
|
10120
|
+
var _ref3 = (tabListRef == null ? void 0 : tabListRef.current) || {},
|
|
10121
|
+
_ref3$scrollLeft = _ref3.scrollLeft,
|
|
10122
|
+
scrollLeft = _ref3$scrollLeft === void 0 ? 0 : _ref3$scrollLeft,
|
|
10123
|
+
_ref3$clientWidth = _ref3.clientWidth,
|
|
10124
|
+
clientWidth = _ref3$clientWidth === void 0 ? 0 : _ref3$clientWidth,
|
|
10125
|
+
_ref3$scrollWidth = _ref3.scrollWidth,
|
|
10126
|
+
scrollWidth = _ref3$scrollWidth === void 0 ? 0 : _ref3$scrollWidth;
|
|
10127
|
+
setCanScrollToLeft(scrollLeft > LIST_ITEM_GAP);
|
|
10128
|
+
setCanScrollToRight(scrollLeft + clientWidth + LIST_ITEM_GAP < scrollWidth);
|
|
10129
|
+
};
|
|
10130
|
+
return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, {
|
|
10131
|
+
bottomBorder: bottomBorder,
|
|
10132
|
+
ref: wrapperRef,
|
|
10133
|
+
id: "AnchorTabbarWrapper"
|
|
10134
|
+
}, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
10135
|
+
columnStartDesktop: tabsColumnStart,
|
|
10136
|
+
columnSpanDesktop: tabsColumnSpan,
|
|
10137
|
+
columnStartDevice: 2,
|
|
10138
|
+
columnSpanDevice: 12
|
|
10139
|
+
}, /*#__PURE__*/React__default.createElement(TabsWrapper, {
|
|
10140
|
+
"data-testid": "anchor-tabs"
|
|
10141
|
+
}, /*#__PURE__*/React__default.createElement(TabsList, {
|
|
10142
|
+
hasTwoArrows: hasTwoArrows,
|
|
10143
|
+
ref: tabListRef,
|
|
10144
|
+
tabsOverflow: tabsOverflow,
|
|
10145
|
+
onScroll: onTabsScroll
|
|
10146
|
+
}, tabs.map(function (_ref4) {
|
|
10147
|
+
var id = _ref4.id,
|
|
10148
|
+
text = _ref4.text,
|
|
10149
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$o);
|
|
10150
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
10151
|
+
key: id
|
|
10152
|
+
}, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
|
|
10153
|
+
selected: isSelectedItem(id),
|
|
10154
|
+
className: "anchor-tab-bar-tablink",
|
|
10155
|
+
id: "tablink-" + id,
|
|
10156
|
+
onClick: function onClick(e) {
|
|
10157
|
+
return onClicktab(e, id);
|
|
10158
|
+
},
|
|
10159
|
+
tabIndex: 0
|
|
10160
|
+
}, rest), text));
|
|
10161
|
+
})), tabsOverflow ? (/*#__PURE__*/React__default.createElement(ArrowsContainer, {
|
|
10162
|
+
fullWidth: hasTwoArrows
|
|
10163
|
+
}, canScrollToLeft ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
10164
|
+
onClick: scrollToLeft
|
|
10165
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10166
|
+
iconName: "Arrow",
|
|
10167
|
+
direction: "reverse"
|
|
10168
|
+
}))) : null, canScrollToRight ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
10169
|
+
onClick: scrollToRight
|
|
10170
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10171
|
+
iconName: "Arrow"
|
|
10172
|
+
}))) : null)) : null))));
|
|
10173
|
+
};
|
|
10174
|
+
|
|
10175
|
+
var _templateObject$1g, _templateObject2$W, _templateObject3$L, _templateObject4$C, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$7, _templateObject10$7;
|
|
10176
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
10177
|
+
var sticky = _ref.sticky;
|
|
10178
|
+
return sticky ? 'sticky' : 'initial';
|
|
10179
|
+
}, zIndexes.anchor);
|
|
10180
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
10181
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
10182
|
+
var title = _ref2.title;
|
|
10183
|
+
return title ? 'row' : 'row-reverse';
|
|
10184
|
+
}, devices.tablet, devices.mobile);
|
|
10185
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
10186
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
10187
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
10188
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
10189
|
+
var theme = _ref3.theme;
|
|
10190
|
+
return theme.colors.primaryButtonReverseBg;
|
|
10191
|
+
}, function (_ref4) {
|
|
10192
|
+
var theme = _ref4.theme;
|
|
10193
|
+
return theme.colors.primaryButtonReverseBg;
|
|
10194
|
+
}, function (_ref5) {
|
|
10195
|
+
var theme = _ref5.theme;
|
|
10196
|
+
return theme.colors.primaryButtonReverse;
|
|
10197
|
+
}, function (_ref6) {
|
|
10198
|
+
var theme = _ref6.theme;
|
|
10199
|
+
return theme.colors.primaryButtonReverse;
|
|
10200
|
+
});
|
|
10201
|
+
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
10202
|
+
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
10203
|
+
|
|
10204
|
+
var _excluded$p = ["text"],
|
|
10205
|
+
_excluded2$3 = ["text"];
|
|
10206
|
+
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
10207
|
+
var title = _ref.title,
|
|
10208
|
+
links = _ref.links,
|
|
10209
|
+
_ref$sticky = _ref.sticky,
|
|
10210
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky,
|
|
10211
|
+
message = _ref.message;
|
|
10212
|
+
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
10213
|
+
primaryButtonText = _ref2.text,
|
|
10214
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
|
|
10215
|
+
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
10216
|
+
secondaryButtonText = _ref3.text,
|
|
10217
|
+
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
|
|
10218
|
+
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
10219
|
+
sticky: sticky
|
|
10220
|
+
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
10221
|
+
title: title
|
|
10222
|
+
}, title ? (/*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
10223
|
+
"data-testid": "anchor-title"
|
|
10224
|
+
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
10225
|
+
level: 5
|
|
10226
|
+
}, title))) : null, links != null && links[0] ? (/*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
|
|
10227
|
+
"data-testid": "anchor-ctas"
|
|
10228
|
+
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? (/*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText)) : null)) : message && (/*#__PURE__*/React__default.createElement(MessageWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10229
|
+
level: 6
|
|
10230
|
+
}, message))))), links != null && links[0] ? (/*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText))) : message && (/*#__PURE__*/React__default.createElement(MessageWrapperMobile, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10231
|
+
level: 6
|
|
10232
|
+
}, message))));
|
|
10233
|
+
};
|
|
10234
|
+
|
|
10235
|
+
var _templateObject$1h;
|
|
10236
|
+
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n padding-left: 0;\n padding-right: 0;\n }\n\n @media ", " {\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.tablet, devices.mobile);
|
|
10237
|
+
|
|
10238
|
+
var UpsellCards = function UpsellCards(_ref) {
|
|
10239
|
+
var upsellCards = _ref.upsellCards;
|
|
10240
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
|
|
10241
|
+
return /*#__PURE__*/React__default.createElement(UpsellCard, {
|
|
10242
|
+
key: "upsell-card-" + index,
|
|
10243
|
+
title: card.title,
|
|
10244
|
+
subTitle: card.subTitle,
|
|
10245
|
+
price: card.price,
|
|
10246
|
+
promoPrice: card.promoPrice,
|
|
10247
|
+
flag: card.flag,
|
|
10248
|
+
offerTexts: card.offerTexts,
|
|
10249
|
+
link: card.link,
|
|
10250
|
+
theme: card.theme
|
|
10251
|
+
});
|
|
10252
|
+
}));
|
|
10253
|
+
};
|
|
10254
|
+
|
|
10255
|
+
var _templateObject$1i, _templateObject2$X, _templateObject3$M;
|
|
10256
|
+
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: ", ";\n padding: 80px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding-top: 2.5em;\n padding-left: 0;\n padding-right: 0;\n padding-bottom: 2.5em;\n }\n }\n\n @media ", " {\n & {\n padding: 25px;\n padding-top: 2.5em;\n }\n }\n"])), function (_ref) {
|
|
10257
|
+
var theme = _ref.theme;
|
|
10258
|
+
return theme.colors.primary;
|
|
10259
|
+
}, devices.mobile, devices.tablet);
|
|
10260
|
+
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n }\n"])), devices.mobile);
|
|
10261
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 2.5em;\n div > :first-child {\n margin-top: 1.5em;\n }\n\n @media ", " {\n margin-top: 0;\n div > :first-child {\n margin-top: 0.5em;\n }\n }\n\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n & {\n div > :first-child {\n margin-top: 1em;\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
10262
|
+
|
|
10209
10263
|
var UpsellSection = function UpsellSection(_ref) {
|
|
10210
10264
|
var title = _ref.title,
|
|
10211
10265
|
richText = _ref.richText,
|
|
@@ -10227,9 +10281,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
10227
10281
|
columnSpanDevice: 12,
|
|
10228
10282
|
columnStartSmallDevice: 1,
|
|
10229
10283
|
columnSpanSmallDevice: 14
|
|
10230
|
-
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$
|
|
10284
|
+
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$4, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10231
10285
|
level: 4
|
|
10232
|
-
}, title)), /*#__PURE__*/React__default.createElement(TextContainer, null, /*#__PURE__*/React__default.createElement(TextOnly, {
|
|
10286
|
+
}, title)), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextOnly, {
|
|
10233
10287
|
text: richText != null ? richText : '',
|
|
10234
10288
|
columnStartDesktop: 1,
|
|
10235
10289
|
columnSpanDesktop: 14,
|
|
@@ -10289,9 +10343,9 @@ var LiveChat = function LiveChat() {
|
|
|
10289
10343
|
});
|
|
10290
10344
|
};
|
|
10291
10345
|
|
|
10292
|
-
var _templateObject$1j, _templateObject2$
|
|
10346
|
+
var _templateObject$1j, _templateObject2$Y;
|
|
10293
10347
|
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
10294
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
10348
|
+
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
10295
10349
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
10296
10350
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
10297
10351
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -10319,11 +10373,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
10319
10373
|
}, children)));
|
|
10320
10374
|
};
|
|
10321
10375
|
|
|
10322
|
-
var _templateObject$1k, _templateObject2$
|
|
10376
|
+
var _templateObject$1k, _templateObject2$Z, _templateObject3$N, _templateObject4$D;
|
|
10323
10377
|
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
10324
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
10325
|
-
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10326
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
10378
|
+
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
10379
|
+
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10380
|
+
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
10327
10381
|
|
|
10328
10382
|
var _excluded$q = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
10329
10383
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -10439,7 +10493,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
10439
10493
|
};
|
|
10440
10494
|
|
|
10441
10495
|
var _templateObject$1l;
|
|
10442
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__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 --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\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 --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-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-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\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 --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\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 --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
10496
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__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 --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\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 --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-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-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\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 --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 6px;\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 --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
10443
10497
|
var theme = _ref.theme;
|
|
10444
10498
|
return theme.colors.primary;
|
|
10445
10499
|
}, function (_ref2) {
|
|
@@ -11378,6 +11432,12 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templa
|
|
|
11378
11432
|
}, function (_ref313) {
|
|
11379
11433
|
var theme = _ref313.theme;
|
|
11380
11434
|
return theme.fonts.tablet.sizes.body[1];
|
|
11435
|
+
}, function (_ref314) {
|
|
11436
|
+
var theme = _ref314.theme;
|
|
11437
|
+
return theme.footer.tablet.paddingTop;
|
|
11438
|
+
}, function (_ref315) {
|
|
11439
|
+
var theme = _ref315.theme;
|
|
11440
|
+
return theme.footer.tablet.paddingBottom;
|
|
11381
11441
|
}, devices.desktop, devices.largeDesktop);
|
|
11382
11442
|
|
|
11383
11443
|
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, IInformationBackgroundColour, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
|