@royaloperahouse/harmonic 0.1.1-d → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +185 -6
- package/README.GIT +286 -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
|
@@ -1078,20 +1078,24 @@ var common = {
|
|
|
1078
1078
|
desktop: {
|
|
1079
1079
|
height: '380px',
|
|
1080
1080
|
paddingTop: '44px',
|
|
1081
|
-
paddingBottom: '
|
|
1081
|
+
paddingBottom: '44px',
|
|
1082
1082
|
itemsGap: '32px',
|
|
1083
|
-
mediaGap: '
|
|
1083
|
+
mediaGap: '24px',
|
|
1084
1084
|
mediaIconWidth: '24px',
|
|
1085
1085
|
mediaIconHeight: '24px',
|
|
1086
1086
|
verticalSpacingLarge: '58px',
|
|
1087
1087
|
verticalSpacingSmall: '16px'
|
|
1088
1088
|
},
|
|
1089
|
+
tablet: {
|
|
1090
|
+
paddingTop: '40px',
|
|
1091
|
+
paddingBottom: '40px'
|
|
1092
|
+
},
|
|
1089
1093
|
mobile: {
|
|
1090
1094
|
height: 'auto',
|
|
1091
1095
|
paddingTop: '20px',
|
|
1092
1096
|
paddingBottom: '20px',
|
|
1093
1097
|
itemsGap: '12px',
|
|
1094
|
-
mediaGap: '
|
|
1098
|
+
mediaGap: '32px',
|
|
1095
1099
|
mediaIconWidth: '28px',
|
|
1096
1100
|
mediaIconHeight: '28px',
|
|
1097
1101
|
verticalSpacingLarge: '24px',
|
|
@@ -2944,7 +2948,7 @@ var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject2 || (_te
|
|
|
2944
2948
|
AspectRatio["1:1"] = "1 / 1";
|
|
2945
2949
|
AspectRatio["3:4"] = "3 / 4";
|
|
2946
2950
|
AspectRatio["4:3"] = "4 / 3";
|
|
2947
|
-
AspectRatio["3
|
|
2951
|
+
AspectRatio["8:3"] = "8 / 3";
|
|
2948
2952
|
AspectRatio["16:9"] = "16 / 9";
|
|
2949
2953
|
})(exports.AspectRatio || (exports.AspectRatio = {}));
|
|
2950
2954
|
var AspectRatioLegacy;
|
|
@@ -2952,7 +2956,7 @@ var AspectRatioLegacy;
|
|
|
2952
2956
|
AspectRatioLegacy["1 / 1"] = "100";
|
|
2953
2957
|
AspectRatioLegacy["3 / 4"] = "133";
|
|
2954
2958
|
AspectRatioLegacy["4 / 3"] = "75";
|
|
2955
|
-
AspectRatioLegacy["
|
|
2959
|
+
AspectRatioLegacy["8 / 3"] = "37.5";
|
|
2956
2960
|
AspectRatioLegacy["16 / 9"] = "56.25";
|
|
2957
2961
|
})(AspectRatioLegacy || (AspectRatioLegacy = {}));
|
|
2958
2962
|
var AspectRatioWidth;
|
|
@@ -2960,7 +2964,7 @@ var AspectRatioWidth;
|
|
|
2960
2964
|
AspectRatioWidth["1 / 1"] = "1";
|
|
2961
2965
|
AspectRatioWidth["3 / 4"] = "0.75";
|
|
2962
2966
|
AspectRatioWidth["4 / 3"] = "1.33";
|
|
2963
|
-
AspectRatioWidth["
|
|
2967
|
+
AspectRatioWidth["8 / 3"] = "2.67";
|
|
2964
2968
|
AspectRatioWidth["16 / 9"] = "1.78";
|
|
2965
2969
|
})(AspectRatioWidth || (AspectRatioWidth = {}));
|
|
2966
2970
|
|
|
@@ -3249,7 +3253,7 @@ var GridItem = /*#__PURE__*/styled__default.div(_templateObject$a || (_templateO
|
|
|
3249
3253
|
});
|
|
3250
3254
|
|
|
3251
3255
|
var _templateObject$b;
|
|
3252
|
-
var
|
|
3256
|
+
var StyledImageAspectRatioWrapper = /*#__PURE__*/styled__default.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) {
|
|
3253
3257
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
3254
3258
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
3255
3259
|
return aspectRatio;
|
|
@@ -3267,6 +3271,24 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$b
|
|
|
3267
3271
|
return aspectRatio;
|
|
3268
3272
|
});
|
|
3269
3273
|
|
|
3274
|
+
var ImageAspectRatioWrapper = function ImageAspectRatioWrapper(_ref) {
|
|
3275
|
+
var aspectRatio = _ref.aspectRatio,
|
|
3276
|
+
children = _ref.children,
|
|
3277
|
+
alt = _ref.alt;
|
|
3278
|
+
return /*#__PURE__*/React__default.createElement(StyledImageAspectRatioWrapper, {
|
|
3279
|
+
aspectRatio: aspectRatio
|
|
3280
|
+
}, React__default.Children.map(children, function (child) {
|
|
3281
|
+
if (/*#__PURE__*/React__default.isValidElement(child)) {
|
|
3282
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
3283
|
+
alt: alt || child.props.alt || '',
|
|
3284
|
+
role: alt ? 'img' : 'presentation',
|
|
3285
|
+
'aria-hidden': !alt
|
|
3286
|
+
});
|
|
3287
|
+
}
|
|
3288
|
+
return child;
|
|
3289
|
+
}));
|
|
3290
|
+
};
|
|
3291
|
+
|
|
3270
3292
|
var _templateObject$c, _templateObject2$4, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
3271
3293
|
var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
|
|
3272
3294
|
var height = _ref.height;
|
|
@@ -3727,19 +3749,23 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3727
3749
|
};
|
|
3728
3750
|
|
|
3729
3751
|
var _templateObject$j;
|
|
3730
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width:
|
|
3752
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled__default.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);
|
|
3731
3753
|
|
|
3732
3754
|
/* eslint-disable max-len */
|
|
3733
3755
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3734
3756
|
var _ref$colorLogo = _ref.colorLogo,
|
|
3735
3757
|
colorLogo = _ref$colorLogo === void 0 ? '#fff' : _ref$colorLogo,
|
|
3736
3758
|
_ref$colorBackground = _ref.colorBackground,
|
|
3737
|
-
colorBackground = _ref$colorBackground === void 0 ? '#1d1d1b' : _ref$colorBackground
|
|
3759
|
+
colorBackground = _ref$colorBackground === void 0 ? '#1d1d1b' : _ref$colorBackground,
|
|
3760
|
+
_ref$alt = _ref.alt,
|
|
3761
|
+
alt = _ref$alt === void 0 ? 'Sponsor Logo' : _ref$alt;
|
|
3738
3762
|
return /*#__PURE__*/React__default.createElement(SponsorLogoWrapper, null, /*#__PURE__*/React__default.createElement("svg", {
|
|
3739
3763
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3740
3764
|
viewBox: "0 0 258.64 57.26",
|
|
3741
|
-
|
|
3742
|
-
|
|
3765
|
+
preserveAspectRatio: "xMidYMid meet" // Maintains the aspect ratio while centering
|
|
3766
|
+
,
|
|
3767
|
+
role: "img",
|
|
3768
|
+
"aria-label": alt
|
|
3743
3769
|
}, /*#__PURE__*/React__default.createElement("g", {
|
|
3744
3770
|
id: "Layer_2",
|
|
3745
3771
|
"data-name": "Layer 2"
|
|
@@ -4440,9 +4466,9 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4440
4466
|
};
|
|
4441
4467
|
|
|
4442
4468
|
var _templateObject$q, _templateObject2$f;
|
|
4443
|
-
var TextLinkWrapper = /*#__PURE__*/styled__default.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:
|
|
4469
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.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) {
|
|
4444
4470
|
var iconName = _ref.iconName;
|
|
4445
|
-
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
4471
|
+
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
|
|
4446
4472
|
}, function (_ref2) {
|
|
4447
4473
|
var color = _ref2.color;
|
|
4448
4474
|
return color;
|
|
@@ -5217,12 +5243,37 @@ var Component = function Component(_ref) {
|
|
|
5217
5243
|
}, error))));
|
|
5218
5244
|
};
|
|
5219
5245
|
|
|
5220
|
-
var _templateObject$x, _templateObject2$l
|
|
5221
|
-
var
|
|
5246
|
+
var _templateObject$x, _templateObject2$l;
|
|
5247
|
+
var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
|
|
5248
|
+
var MediaIconWrapper = /*#__PURE__*/styled__default.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) {
|
|
5249
|
+
var theme = _ref.theme;
|
|
5250
|
+
return theme.colors.white;
|
|
5251
|
+
});
|
|
5252
|
+
|
|
5253
|
+
var SocialLinks = function SocialLinks(_ref) {
|
|
5254
|
+
var items = _ref.items;
|
|
5255
|
+
return /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, items.map(function (mediaLink, idx) {
|
|
5256
|
+
return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
|
|
5257
|
+
key: mediaLink.name + "-" + idx,
|
|
5258
|
+
href: mediaLink.href,
|
|
5259
|
+
title: mediaLink.name,
|
|
5260
|
+
"aria-label": "Social media link: " + mediaLink.name,
|
|
5261
|
+
rel: "noopener noreferrer" // Ensures security for external links
|
|
5262
|
+
,
|
|
5263
|
+
target: "_blank"
|
|
5264
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5265
|
+
iconName: mediaLink.name,
|
|
5266
|
+
color: "white"
|
|
5267
|
+
}));
|
|
5268
|
+
}));
|
|
5269
|
+
};
|
|
5270
|
+
|
|
5271
|
+
var _templateObject$y, _templateObject2$m, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
5272
|
+
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
5222
5273
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5223
5274
|
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 ";
|
|
5224
5275
|
});
|
|
5225
|
-
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5276
|
+
var FullScreenContainer = /*#__PURE__*/styled__default.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);
|
|
5226
5277
|
var NavigationGrid = /*#__PURE__*/styled__default(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);
|
|
5227
5278
|
var SearchBackground = /*#__PURE__*/styled__default.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) {
|
|
5228
5279
|
var visible = _ref2.visible;
|
|
@@ -5242,8 +5293,8 @@ var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_temp
|
|
|
5242
5293
|
var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
5243
5294
|
var NavTopContainer = /*#__PURE__*/styled__default.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);
|
|
5244
5295
|
|
|
5245
|
-
var _templateObject$
|
|
5246
|
-
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5296
|
+
var _templateObject$z;
|
|
5297
|
+
var LogoWrapper = /*#__PURE__*/styled__default.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"])));
|
|
5247
5298
|
|
|
5248
5299
|
var Logo = function Logo(_ref) {
|
|
5249
5300
|
var _ref$id = _ref.id,
|
|
@@ -5275,11 +5326,11 @@ var Logo = function Logo(_ref) {
|
|
|
5275
5326
|
}))));
|
|
5276
5327
|
};
|
|
5277
5328
|
|
|
5278
|
-
var _templateObject$
|
|
5279
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5329
|
+
var _templateObject$A;
|
|
5330
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.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);
|
|
5280
5331
|
|
|
5281
|
-
var _templateObject$
|
|
5282
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5332
|
+
var _templateObject$B, _templateObject2$n, _templateObject3$f, _templateObject4$c;
|
|
5333
|
+
var BasketContainer = /*#__PURE__*/styled__default.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) {
|
|
5283
5334
|
var selected = _ref.selected,
|
|
5284
5335
|
colorPrimary = _ref.colorPrimary;
|
|
5285
5336
|
if (selected) {
|
|
@@ -5303,7 +5354,7 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_te
|
|
|
5303
5354
|
}
|
|
5304
5355
|
return '';
|
|
5305
5356
|
});
|
|
5306
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5357
|
+
var SvgContainer = /*#__PURE__*/styled__default.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"])));
|
|
5307
5358
|
var NumContainer = /*#__PURE__*/styled__default.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"])));
|
|
5308
5359
|
var BasketText = /*#__PURE__*/styled__default.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"])));
|
|
5309
5360
|
|
|
@@ -5447,8 +5498,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5447
5498
|
}, expiryTime ? basketText : text) : ''));
|
|
5448
5499
|
};
|
|
5449
5500
|
|
|
5450
|
-
var _templateObject$
|
|
5451
|
-
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5501
|
+
var _templateObject$C, _templateObject2$o;
|
|
5502
|
+
var SearchContainer = /*#__PURE__*/styled__default.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) {
|
|
5452
5503
|
var selected = _ref.selected,
|
|
5453
5504
|
colorPrimary = _ref.colorPrimary;
|
|
5454
5505
|
if (selected) {
|
|
@@ -5462,7 +5513,7 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_te
|
|
|
5462
5513
|
var colorPrimary = _ref3.colorPrimary;
|
|
5463
5514
|
return colorPrimary;
|
|
5464
5515
|
});
|
|
5465
|
-
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5516
|
+
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5466
5517
|
|
|
5467
5518
|
var Search$1 = function Search(_ref) {
|
|
5468
5519
|
var _ref$selected = _ref.selected,
|
|
@@ -5715,9 +5766,9 @@ var NavTop = function NavTop(_ref) {
|
|
|
5715
5766
|
}));
|
|
5716
5767
|
};
|
|
5717
5768
|
|
|
5718
|
-
var _templateObject$
|
|
5719
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5720
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5769
|
+
var _templateObject$D, _templateObject2$p, _templateObject3$g, _templateObject4$d;
|
|
5770
|
+
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
5771
|
+
var ItemsContainer = /*#__PURE__*/styled__default.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) {
|
|
5721
5772
|
if (props.showMenu) {
|
|
5722
5773
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
5723
5774
|
}
|
|
@@ -5844,9 +5895,9 @@ var Tabs = function Tabs(_ref) {
|
|
|
5844
5895
|
}, "MENU"))))));
|
|
5845
5896
|
};
|
|
5846
5897
|
|
|
5847
|
-
var _templateObject$
|
|
5848
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5849
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5898
|
+
var _templateObject$E, _templateObject2$q, _templateObject3$h, _templateObject5$9, _templateObject6$6, _templateObject7$3;
|
|
5899
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.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);
|
|
5900
|
+
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
5850
5901
|
var SvgContainerClose = /*#__PURE__*/styled__default.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"])));
|
|
5851
5902
|
var InputContainer = /*#__PURE__*/styled__default.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);
|
|
5852
5903
|
var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
@@ -6058,530 +6109,105 @@ var Navigation = function Navigation(_ref) {
|
|
|
6058
6109
|
}))))));
|
|
6059
6110
|
};
|
|
6060
6111
|
|
|
6061
|
-
|
|
6062
|
-
var
|
|
6063
|
-
|
|
6064
|
-
|
|
6065
|
-
|
|
6066
|
-
|
|
6067
|
-
|
|
6068
|
-
|
|
6069
|
-
|
|
6070
|
-
|
|
6071
|
-
|
|
6072
|
-
|
|
6073
|
-
|
|
6074
|
-
var PolicyLinks = function PolicyLinks(_ref) {
|
|
6075
|
-
var _ref$items = _ref.items,
|
|
6076
|
-
items = _ref$items === void 0 ? [] : _ref$items;
|
|
6077
|
-
return /*#__PURE__*/React__default.createElement(PolicyLinksList, null, items.map(function (item) {
|
|
6078
|
-
return /*#__PURE__*/React__default.createElement(PolicyLinkItem, {
|
|
6079
|
-
key: item.name
|
|
6080
|
-
}, /*#__PURE__*/React__default.createElement(PolicyLink, {
|
|
6081
|
-
"data-roh": item.dataRoh,
|
|
6082
|
-
href: item.href,
|
|
6083
|
-
title: item.title
|
|
6084
|
-
}, item.title));
|
|
6085
|
-
}));
|
|
6112
|
+
// WARNING: Do not use this on server side rendering, it may throw an error.
|
|
6113
|
+
var isIOS = function isIOS() {
|
|
6114
|
+
try {
|
|
6115
|
+
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
6116
|
+
if (typeof navigator === undefined) return false;
|
|
6117
|
+
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
|
|
6118
|
+
// iPad on iOS 13 detection
|
|
6119
|
+
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
6120
|
+
} catch (e) {
|
|
6121
|
+
console.warn('Error checking if device is iOS.', e);
|
|
6122
|
+
return false;
|
|
6123
|
+
}
|
|
6086
6124
|
};
|
|
6087
|
-
|
|
6088
|
-
var
|
|
6089
|
-
var
|
|
6090
|
-
|
|
6091
|
-
|
|
6092
|
-
|
|
6093
|
-
|
|
6094
|
-
|
|
6095
|
-
|
|
6096
|
-
|
|
6097
|
-
|
|
6098
|
-
var ContactNewsletter = function ContactNewsletter(_ref) {
|
|
6099
|
-
var signUpText = _ref.signUpText,
|
|
6100
|
-
signUpLink = _ref.signUpLink,
|
|
6101
|
-
socialMediaLinks = _ref.socialMediaLinks,
|
|
6102
|
-
contact = _ref.contact;
|
|
6103
|
-
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, {
|
|
6104
|
-
href: signUpLink.href,
|
|
6105
|
-
title: signUpLink.title
|
|
6106
|
-
}, signUpLink.title))), /*#__PURE__*/React__default.createElement(ContactNewsletterSeparator, null), /*#__PURE__*/React__default.createElement(ContactWrapper, null, /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, socialMediaLinks.map(function (mediaLink) {
|
|
6107
|
-
return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
|
|
6108
|
-
key: mediaLink.name,
|
|
6109
|
-
href: mediaLink.href,
|
|
6110
|
-
title: mediaLink.name
|
|
6111
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
6112
|
-
iconName: mediaLink.name,
|
|
6113
|
-
color: "white"
|
|
6114
|
-
}));
|
|
6115
|
-
})), /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, null, /*#__PURE__*/React__default.createElement(TextLink, {
|
|
6116
|
-
href: contact.href,
|
|
6117
|
-
title: contact.title
|
|
6118
|
-
}, contact.title))));
|
|
6125
|
+
// React hook version of isIOS (for server side rendering)
|
|
6126
|
+
var useIOS = function useIOS() {
|
|
6127
|
+
var _useState = React.useState(false),
|
|
6128
|
+
IOS = _useState[0],
|
|
6129
|
+
setIOS = _useState[1];
|
|
6130
|
+
React.useEffect(function () {
|
|
6131
|
+
if (typeof navigator === undefined) return;
|
|
6132
|
+
setIOS(isIOS());
|
|
6133
|
+
}, []);
|
|
6134
|
+
return IOS;
|
|
6119
6135
|
};
|
|
6120
|
-
|
|
6121
|
-
var
|
|
6122
|
-
|
|
6123
|
-
|
|
6124
|
-
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
|
|
6128
|
-
|
|
6129
|
-
|
|
6130
|
-
artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$b),
|
|
6131
|
-
additionalInfo = data.additionalInfo;
|
|
6132
|
-
var socialMediaLinks = rawSocialMediaLinks;
|
|
6133
|
-
return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
6134
|
-
columnStartDesktop: 3,
|
|
6135
|
-
columnSpanDesktop: 12,
|
|
6136
|
-
columnStartDevice: 2,
|
|
6137
|
-
columnSpanDevice: 12
|
|
6138
|
-
}, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksRow, {
|
|
6139
|
-
"data-testid": "policy-links"
|
|
6140
|
-
}, /*#__PURE__*/React__default.createElement(PolicyLinks, {
|
|
6141
|
-
items: policyLinks
|
|
6142
|
-
})), /*#__PURE__*/React__default.createElement(ContactNewsletterRow, {
|
|
6143
|
-
"data-testid": "contact-newsletter"
|
|
6144
|
-
}, /*#__PURE__*/React__default.createElement(ContactNewsletter, {
|
|
6145
|
-
signUpText: newsletter.text,
|
|
6146
|
-
signUpLink: newsletter.link,
|
|
6147
|
-
socialMediaLinks: socialMediaLinks,
|
|
6148
|
-
contact: contact
|
|
6149
|
-
})), /*#__PURE__*/React__default.createElement(ArtsLogoRow, {
|
|
6150
|
-
"data-testid": "arts-logo"
|
|
6151
|
-
}, /*#__PURE__*/React__default.createElement("a", Object.assign({
|
|
6152
|
-
"data-roh": artsDataRoh,
|
|
6153
|
-
target: "_blank",
|
|
6154
|
-
rel: "noopener noreferrer"
|
|
6155
|
-
}, artsLogo), /*#__PURE__*/React__default.createElement(SponsorLogo, null))), /*#__PURE__*/React__default.createElement(AdditionalInfo, {
|
|
6156
|
-
"data-testid": "additional-info"
|
|
6157
|
-
}, additionalInfo)))));
|
|
6136
|
+
// Checks device size based on window width
|
|
6137
|
+
var isMobile = function isMobile() {
|
|
6138
|
+
try {
|
|
6139
|
+
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
6140
|
+
if (typeof window === undefined) return false;
|
|
6141
|
+
return window.innerWidth < breakpoints.sm;
|
|
6142
|
+
} catch (e) {
|
|
6143
|
+
console.warn('Error checking if device is mobile.', e);
|
|
6144
|
+
return false;
|
|
6145
|
+
}
|
|
6158
6146
|
};
|
|
6159
|
-
|
|
6160
|
-
var
|
|
6161
|
-
var LIST_ITEM_GAP = 32;
|
|
6162
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.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) {
|
|
6163
|
-
var bottomBorder = _ref.bottomBorder;
|
|
6164
|
-
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6165
|
-
}, zIndexes.anchor);
|
|
6166
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
6167
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6168
|
-
var TabsList = /*#__PURE__*/styled__default.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) {
|
|
6169
|
-
var tabsOverflow = _ref2.tabsOverflow;
|
|
6170
|
-
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
6171
|
-
}, LIST_ITEM_GAP, function (_ref3) {
|
|
6172
|
-
var tabsOverflow = _ref3.tabsOverflow;
|
|
6173
|
-
return tabsOverflow ? 'start' : 'center';
|
|
6174
|
-
}, devices.mobileAndTablet, devices.mobile, function (_ref4) {
|
|
6175
|
-
var tabsOverflow = _ref4.tabsOverflow,
|
|
6176
|
-
hasTwoArrows = _ref4.hasTwoArrows;
|
|
6177
|
-
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
6178
|
-
});
|
|
6179
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.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) {
|
|
6180
|
-
var fullWidth = _ref5.fullWidth;
|
|
6181
|
-
return fullWidth ? '74px' : '46px';
|
|
6182
|
-
});
|
|
6183
|
-
var ArrowWrapper = /*#__PURE__*/styled__default.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"])));
|
|
6184
|
-
|
|
6185
|
-
var _excluded$c = ["id", "text"];
|
|
6186
|
-
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
6187
|
-
var tabs = _ref.tabs,
|
|
6188
|
-
onTabClick = _ref.onTabClick,
|
|
6189
|
-
activeTab = _ref.activeTab,
|
|
6190
|
-
absolutePositionParams = _ref.absolutePositionParams,
|
|
6191
|
-
_ref$bottomBorder = _ref.bottomBorder,
|
|
6192
|
-
bottomBorder = _ref$bottomBorder === void 0 ? false : _ref$bottomBorder;
|
|
6193
|
-
var tabListRef = React.useRef(null);
|
|
6194
|
-
var wrapperRef = React.useRef(null);
|
|
6195
|
-
var _useState = React.useState(activeTab || ''),
|
|
6196
|
-
selectedItem = _useState[0],
|
|
6197
|
-
setSelectedItem = _useState[1];
|
|
6147
|
+
// React hook version of isMobile (for server side rendering)
|
|
6148
|
+
var useMobile = function useMobile() {
|
|
6198
6149
|
var _useState2 = React.useState(false),
|
|
6199
|
-
|
|
6200
|
-
|
|
6201
|
-
var _useState3 = React.useState(false),
|
|
6202
|
-
canScrollToLeft = _useState3[0],
|
|
6203
|
-
setCanScrollToLeft = _useState3[1];
|
|
6204
|
-
var _useState4 = React.useState(tabsOverflow),
|
|
6205
|
-
canScrollToRight = _useState4[0],
|
|
6206
|
-
setCanScrollToRight = _useState4[1];
|
|
6207
|
-
var timer = null;
|
|
6208
|
-
var hasTwoArrows = canScrollToRight && canScrollToLeft;
|
|
6209
|
-
var isSelectedItem = function isSelectedItem(id) {
|
|
6210
|
-
return id === selectedItem;
|
|
6211
|
-
};
|
|
6212
|
-
var onClicktab = function onClicktab(e, id) {
|
|
6213
|
-
if (onTabClick) {
|
|
6214
|
-
onTabClick(e, id);
|
|
6215
|
-
}
|
|
6216
|
-
setSelectedItem(id);
|
|
6217
|
-
};
|
|
6218
|
-
var getScrollWidth = function getScrollWidth() {
|
|
6219
|
-
var width = 0;
|
|
6220
|
-
var selectedItemIndex = tabs.findIndex(function (el) {
|
|
6221
|
-
return el.id === selectedItem;
|
|
6222
|
-
});
|
|
6223
|
-
var tabLinks = document.getElementsByClassName('anchor-tab-bar-tablink');
|
|
6224
|
-
for (var i = 0; i < selectedItemIndex; ++i) {
|
|
6225
|
-
width += tabLinks[i].scrollWidth + LIST_ITEM_GAP;
|
|
6226
|
-
}
|
|
6227
|
-
return width;
|
|
6228
|
-
};
|
|
6229
|
-
// eslint-disable-next-line default-param-last
|
|
6230
|
-
var changeWrapperVisibility = function changeWrapperVisibility(showWrapper, topOffset) {
|
|
6231
|
-
if (showWrapper === void 0) {
|
|
6232
|
-
showWrapper = false;
|
|
6233
|
-
}
|
|
6234
|
-
var wrapperEl = wrapperRef.current;
|
|
6235
|
-
wrapperEl.style.position = 'absolute';
|
|
6236
|
-
wrapperEl.style.visibility = showWrapper && topOffset !== undefined ? 'visible' : 'hidden';
|
|
6237
|
-
if (showWrapper && topOffset !== undefined) wrapperEl.style.top = topOffset + "px";
|
|
6238
|
-
};
|
|
6239
|
-
var handleScrollForAbsolutePosition = function handleScrollForAbsolutePosition() {
|
|
6240
|
-
var _absolutePositionPara = absolutePositionParams.navigationHeight,
|
|
6241
|
-
navigationHeight = _absolutePositionPara === void 0 ? 0 : _absolutePositionPara,
|
|
6242
|
-
_absolutePositionPara2 = absolutePositionParams.topOffset,
|
|
6243
|
-
topOffset = _absolutePositionPara2 === void 0 ? 0 : _absolutePositionPara2;
|
|
6244
|
-
if (wrapperRef.current && window.pageYOffset > topOffset + navigationHeight) {
|
|
6245
|
-
changeWrapperVisibility();
|
|
6246
|
-
} else if (wrapperRef.current && window.pageYOffset < topOffset + navigationHeight) {
|
|
6247
|
-
changeWrapperVisibility(true, topOffset);
|
|
6248
|
-
}
|
|
6249
|
-
if (timer !== null) clearTimeout(timer);
|
|
6250
|
-
timer = setTimeout(function () {
|
|
6251
|
-
if (window.pageYOffset > topOffset + navigationHeight && wrapperRef.current) {
|
|
6252
|
-
changeWrapperVisibility(true, window.pageYOffset - navigationHeight);
|
|
6253
|
-
}
|
|
6254
|
-
}, 300);
|
|
6255
|
-
};
|
|
6256
|
-
// We use this behavior only on iOS devices because there is a known issue that
|
|
6257
|
-
// sticky elements lose their stickiness when a keyboard appears on the screen
|
|
6258
|
-
React.useEffect(function () {
|
|
6259
|
-
if (absolutePositionParams) {
|
|
6260
|
-
changeWrapperVisibility(true, absolutePositionParams.topOffset);
|
|
6261
|
-
document.addEventListener('scroll', handleScrollForAbsolutePosition);
|
|
6262
|
-
return function () {
|
|
6263
|
-
document.removeEventListener('scroll', handleScrollForAbsolutePosition);
|
|
6264
|
-
};
|
|
6265
|
-
}
|
|
6266
|
-
return undefined;
|
|
6267
|
-
}, []);
|
|
6150
|
+
mobile = _useState2[0],
|
|
6151
|
+
setMobile = _useState2[1];
|
|
6268
6152
|
React.useEffect(function () {
|
|
6269
|
-
|
|
6270
|
-
|
|
6271
|
-
}, 500);
|
|
6153
|
+
if (typeof window === undefined) return;
|
|
6154
|
+
setMobile(isMobile());
|
|
6272
6155
|
}, []);
|
|
6156
|
+
return mobile;
|
|
6157
|
+
};
|
|
6158
|
+
var useViewport = function useViewport() {
|
|
6159
|
+
var _useState3 = React.useState({
|
|
6160
|
+
width: window.innerWidth,
|
|
6161
|
+
isMobile: window.innerWidth < breakpoints.sm,
|
|
6162
|
+
isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
|
|
6163
|
+
isDesktop: window.innerWidth >= breakpoints.md
|
|
6164
|
+
}),
|
|
6165
|
+
viewport = _useState3[0],
|
|
6166
|
+
setViewport = _useState3[1];
|
|
6273
6167
|
React.useEffect(function () {
|
|
6274
|
-
var
|
|
6275
|
-
|
|
6276
|
-
|
|
6277
|
-
|
|
6278
|
-
|
|
6279
|
-
|
|
6280
|
-
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
6281
|
-
var elementGap = 100;
|
|
6282
|
-
var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
|
|
6283
|
-
var targetSectionElement = document.getElementById(item.id);
|
|
6284
|
-
if (!targetSectionElement) return false;
|
|
6285
|
-
var topDiff = (targetSectionElement == null ? void 0 : targetSectionElement.getBoundingClientRect().top) - elementGap;
|
|
6286
|
-
return selectedItem !== item.id && topDiff > 0 && topDiff < elementGap;
|
|
6168
|
+
var handleResize = function handleResize() {
|
|
6169
|
+
setViewport({
|
|
6170
|
+
width: window.innerWidth,
|
|
6171
|
+
isMobile: window.innerWidth < breakpoints.sm,
|
|
6172
|
+
isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
|
|
6173
|
+
isDesktop: window.innerWidth >= breakpoints.md
|
|
6287
6174
|
});
|
|
6288
|
-
if (window.scrollY === 0) {
|
|
6289
|
-
setSelectedItem(onTabClick ? selectedItem : '');
|
|
6290
|
-
} else if (reachedItem) {
|
|
6291
|
-
var _ref2 = (tabListRef == null ? void 0 : tabListRef.current) || {},
|
|
6292
|
-
_ref2$scrollLeft = _ref2.scrollLeft,
|
|
6293
|
-
scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
|
|
6294
|
-
_ref2$clientWidth = _ref2.clientWidth,
|
|
6295
|
-
clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
|
|
6296
|
-
var tabLinkElement = document.getElementById("tablink-" + reachedItem.id) || {
|
|
6297
|
-
offsetLeft: 0,
|
|
6298
|
-
offsetWidth: 0
|
|
6299
|
-
};
|
|
6300
|
-
var offsetLeft = tabLinkElement.offsetLeft,
|
|
6301
|
-
offsetWidth = tabLinkElement.offsetWidth;
|
|
6302
|
-
var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
|
|
6303
|
-
if (!isInView && tabListRef != null && tabListRef.current) {
|
|
6304
|
-
tabListRef.current.scrollLeft = offsetLeft;
|
|
6305
|
-
}
|
|
6306
|
-
setSelectedItem(reachedItem.id);
|
|
6307
|
-
}
|
|
6308
6175
|
};
|
|
6309
|
-
|
|
6176
|
+
window.addEventListener('resize', handleResize);
|
|
6310
6177
|
return function () {
|
|
6311
|
-
return
|
|
6178
|
+
return window.removeEventListener('resize', handleResize);
|
|
6312
6179
|
};
|
|
6313
|
-
}, [
|
|
6314
|
-
|
|
6315
|
-
if (tabsOverflow) {
|
|
6316
|
-
tabsColumnStart = canScrollToLeft ? 1 : 2;
|
|
6317
|
-
} else {
|
|
6318
|
-
tabsColumnStart = 3;
|
|
6319
|
-
}
|
|
6320
|
-
var tabsColumnSpan;
|
|
6321
|
-
if (tabsOverflow) {
|
|
6322
|
-
tabsColumnSpan = canScrollToLeft ? 15 : 14;
|
|
6323
|
-
} else {
|
|
6324
|
-
tabsColumnSpan = 12;
|
|
6325
|
-
}
|
|
6326
|
-
var scrollToRight = function scrollToRight() {
|
|
6327
|
-
if (tabListRef.current) {
|
|
6328
|
-
var scroll = tabListRef.current.scrollLeft;
|
|
6329
|
-
var newScroll = Math.min(tabListRef.current.clientWidth, tabListRef.current.scrollWidth - scroll);
|
|
6330
|
-
if (scroll - newScroll < LIST_ITEM_GAP) {
|
|
6331
|
-
tabListRef.current.scrollLeft += newScroll + LIST_ITEM_GAP;
|
|
6332
|
-
return;
|
|
6333
|
-
}
|
|
6334
|
-
tabListRef.current.scrollLeft += newScroll;
|
|
6335
|
-
}
|
|
6336
|
-
};
|
|
6337
|
-
var scrollToLeft = function scrollToLeft() {
|
|
6338
|
-
if (tabListRef.current) {
|
|
6339
|
-
var scroll = tabListRef.current.scrollLeft;
|
|
6340
|
-
var newScroll = Math.max(0, scroll - tabListRef.current.clientWidth);
|
|
6341
|
-
if (newScroll < LIST_ITEM_GAP) {
|
|
6342
|
-
tabListRef.current.scrollLeft = newScroll - LIST_ITEM_GAP;
|
|
6343
|
-
return;
|
|
6344
|
-
}
|
|
6345
|
-
tabListRef.current.scrollLeft = newScroll;
|
|
6346
|
-
}
|
|
6347
|
-
};
|
|
6348
|
-
var onTabsScroll = function onTabsScroll() {
|
|
6349
|
-
var _ref3 = (tabListRef == null ? void 0 : tabListRef.current) || {},
|
|
6350
|
-
_ref3$scrollLeft = _ref3.scrollLeft,
|
|
6351
|
-
scrollLeft = _ref3$scrollLeft === void 0 ? 0 : _ref3$scrollLeft,
|
|
6352
|
-
_ref3$clientWidth = _ref3.clientWidth,
|
|
6353
|
-
clientWidth = _ref3$clientWidth === void 0 ? 0 : _ref3$clientWidth,
|
|
6354
|
-
_ref3$scrollWidth = _ref3.scrollWidth,
|
|
6355
|
-
scrollWidth = _ref3$scrollWidth === void 0 ? 0 : _ref3$scrollWidth;
|
|
6356
|
-
setCanScrollToLeft(scrollLeft > LIST_ITEM_GAP);
|
|
6357
|
-
setCanScrollToRight(scrollLeft + clientWidth + LIST_ITEM_GAP < scrollWidth);
|
|
6358
|
-
};
|
|
6359
|
-
return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, {
|
|
6360
|
-
bottomBorder: bottomBorder,
|
|
6361
|
-
ref: wrapperRef,
|
|
6362
|
-
id: "AnchorTabbarWrapper"
|
|
6363
|
-
}, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
6364
|
-
columnStartDesktop: tabsColumnStart,
|
|
6365
|
-
columnSpanDesktop: tabsColumnSpan,
|
|
6366
|
-
columnStartDevice: 2,
|
|
6367
|
-
columnSpanDevice: 12
|
|
6368
|
-
}, /*#__PURE__*/React__default.createElement(TabsWrapper, {
|
|
6369
|
-
"data-testid": "anchor-tabs"
|
|
6370
|
-
}, /*#__PURE__*/React__default.createElement(TabsList, {
|
|
6371
|
-
hasTwoArrows: hasTwoArrows,
|
|
6372
|
-
ref: tabListRef,
|
|
6373
|
-
tabsOverflow: tabsOverflow,
|
|
6374
|
-
onScroll: onTabsScroll
|
|
6375
|
-
}, tabs.map(function (_ref4) {
|
|
6376
|
-
var id = _ref4.id,
|
|
6377
|
-
text = _ref4.text,
|
|
6378
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$c);
|
|
6379
|
-
return /*#__PURE__*/React__default.createElement("li", {
|
|
6380
|
-
key: id
|
|
6381
|
-
}, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
|
|
6382
|
-
selected: isSelectedItem(id),
|
|
6383
|
-
className: "anchor-tab-bar-tablink",
|
|
6384
|
-
id: "tablink-" + id,
|
|
6385
|
-
onClick: function onClick(e) {
|
|
6386
|
-
return onClicktab(e, id);
|
|
6387
|
-
},
|
|
6388
|
-
tabIndex: 0
|
|
6389
|
-
}, rest), text));
|
|
6390
|
-
})), tabsOverflow ? (/*#__PURE__*/React__default.createElement(ArrowsContainer, {
|
|
6391
|
-
fullWidth: hasTwoArrows
|
|
6392
|
-
}, canScrollToLeft ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
6393
|
-
onClick: scrollToLeft
|
|
6394
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
6395
|
-
iconName: "Arrow",
|
|
6396
|
-
direction: "reverse"
|
|
6397
|
-
}))) : null, canScrollToRight ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
6398
|
-
onClick: scrollToRight
|
|
6399
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
6400
|
-
iconName: "Arrow"
|
|
6401
|
-
}))) : null)) : null))));
|
|
6402
|
-
};
|
|
6403
|
-
|
|
6404
|
-
var _templateObject$I, _templateObject2$u, _templateObject3$m, _templateObject4$h, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
|
|
6405
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.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) {
|
|
6406
|
-
var sticky = _ref.sticky;
|
|
6407
|
-
return sticky ? 'sticky' : 'initial';
|
|
6408
|
-
}, zIndexes.anchor);
|
|
6409
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
6410
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.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) {
|
|
6411
|
-
var title = _ref2.title;
|
|
6412
|
-
return title ? 'row' : 'row-reverse';
|
|
6413
|
-
}, devices.tablet, devices.mobile);
|
|
6414
|
-
var AnchorTitle = /*#__PURE__*/styled__default.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);
|
|
6415
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.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);
|
|
6416
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
6417
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled__default(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) {
|
|
6418
|
-
var theme = _ref3.theme;
|
|
6419
|
-
return theme.colors.primaryButtonReverseBg;
|
|
6420
|
-
}, function (_ref4) {
|
|
6421
|
-
var theme = _ref4.theme;
|
|
6422
|
-
return theme.colors.primaryButtonReverseBg;
|
|
6423
|
-
}, function (_ref5) {
|
|
6424
|
-
var theme = _ref5.theme;
|
|
6425
|
-
return theme.colors.primaryButtonReverse;
|
|
6426
|
-
}, function (_ref6) {
|
|
6427
|
-
var theme = _ref6.theme;
|
|
6428
|
-
return theme.colors.primaryButtonReverse;
|
|
6429
|
-
});
|
|
6430
|
-
var MessageWrapper = /*#__PURE__*/styled__default.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);
|
|
6431
|
-
var MessageWrapperMobile = /*#__PURE__*/styled__default.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);
|
|
6432
|
-
|
|
6433
|
-
var _excluded$d = ["text"],
|
|
6434
|
-
_excluded2 = ["text"];
|
|
6435
|
-
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
6436
|
-
var title = _ref.title,
|
|
6437
|
-
links = _ref.links,
|
|
6438
|
-
_ref$sticky = _ref.sticky,
|
|
6439
|
-
sticky = _ref$sticky === void 0 ? false : _ref$sticky,
|
|
6440
|
-
message = _ref.message;
|
|
6441
|
-
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
6442
|
-
primaryButtonText = _ref2.text,
|
|
6443
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
6444
|
-
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
6445
|
-
secondaryButtonText = _ref3.text,
|
|
6446
|
-
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
6447
|
-
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
6448
|
-
sticky: sticky
|
|
6449
|
-
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
6450
|
-
title: title
|
|
6451
|
-
}, title ? (/*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
6452
|
-
"data-testid": "anchor-title"
|
|
6453
|
-
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
6454
|
-
level: 5
|
|
6455
|
-
}, title))) : null, links != null && links[0] ? (/*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
|
|
6456
|
-
"data-testid": "anchor-ctas"
|
|
6457
|
-
}, /*#__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, {
|
|
6458
|
-
level: 6
|
|
6459
|
-
}, 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, {
|
|
6460
|
-
level: 6
|
|
6461
|
-
}, message))));
|
|
6462
|
-
};
|
|
6463
|
-
|
|
6464
|
-
var _templateObject$J, _templateObject2$v, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
6465
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.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);
|
|
6466
|
-
var PromoLabelWrapper = /*#__PURE__*/styled__default.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"])));
|
|
6467
|
-
var PromoLabel = /*#__PURE__*/styled__default.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) {
|
|
6468
|
-
var theme = _ref.theme;
|
|
6469
|
-
return theme.colors.primary;
|
|
6470
|
-
}, exports.Colors.White);
|
|
6471
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
6472
|
-
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
6473
|
-
var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
6474
|
-
var PriceRow = /*#__PURE__*/styled__default.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"])));
|
|
6475
|
-
var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
6476
|
-
|
|
6477
|
-
/* eslint-disable react/no-danger */
|
|
6478
|
-
var OfferText = function OfferText(_ref) {
|
|
6479
|
-
var title = _ref.title,
|
|
6480
|
-
description = _ref.description;
|
|
6481
|
-
return /*#__PURE__*/React__default.createElement(OfferTextWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
6482
|
-
semanticLevel: 5,
|
|
6483
|
-
level: 1
|
|
6484
|
-
}, title), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
6485
|
-
level: 1
|
|
6486
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
6487
|
-
dangerouslySetInnerHTML: {
|
|
6488
|
-
__html: description != null ? description : ''
|
|
6489
|
-
}
|
|
6490
|
-
})));
|
|
6491
|
-
};
|
|
6492
|
-
|
|
6493
|
-
// Set max. character length
|
|
6494
|
-
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
6495
|
-
return value.slice(0, maxLength);
|
|
6496
|
-
};
|
|
6497
|
-
// Format price to contain £ if not already present
|
|
6498
|
-
var formatPrice = function formatPrice(value) {
|
|
6499
|
-
if (Number.isNaN(Number(value))) return value != null ? value : '';
|
|
6500
|
-
return "\xA3" + Number(value).toFixed(2);
|
|
6501
|
-
};
|
|
6502
|
-
|
|
6503
|
-
var LENGTH_SMALL_TEXT = 19;
|
|
6504
|
-
var OFFER_TEXTS_LIMIT = 3;
|
|
6505
|
-
var FLAG_CHAR_LIMIT = 30;
|
|
6506
|
-
var UpsellCard = function UpsellCard(_ref) {
|
|
6507
|
-
var _ref$title = _ref.title,
|
|
6508
|
-
title = _ref$title === void 0 ? '' : _ref$title,
|
|
6509
|
-
subTitle = _ref.subTitle,
|
|
6510
|
-
price = _ref.price,
|
|
6511
|
-
promoPrice = _ref.promoPrice,
|
|
6512
|
-
flag = _ref.flag,
|
|
6513
|
-
offerTexts = _ref.offerTexts,
|
|
6514
|
-
link = _ref.link,
|
|
6515
|
-
_ref$theme = _ref.theme,
|
|
6516
|
-
theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
|
|
6517
|
-
var truncate = function truncate(str, n) {
|
|
6518
|
-
return str.length >= n ? str.slice(0, n) : str;
|
|
6519
|
-
};
|
|
6520
|
-
var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
|
|
6521
|
-
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
6522
|
-
theme: theme
|
|
6523
|
-
}, /*#__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, {
|
|
6524
|
-
semanticLevel: 2,
|
|
6525
|
-
level: 1
|
|
6526
|
-
}, title), subTitle && (/*#__PURE__*/React__default.createElement(Overline, {
|
|
6527
|
-
semanticLevel: 3,
|
|
6528
|
-
level: 1
|
|
6529
|
-
}, subTitle)), promoPrice ? (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
6530
|
-
level: 4
|
|
6531
|
-
}, formatPrice(price))), /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
6532
|
-
level: 4
|
|
6533
|
-
}, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
6534
|
-
level: 4
|
|
6535
|
-
}, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText) {
|
|
6536
|
-
return /*#__PURE__*/React__default.createElement(OfferText, {
|
|
6537
|
-
key: offerText.title,
|
|
6538
|
-
title: offerText.title,
|
|
6539
|
-
description: offerText.description
|
|
6540
|
-
});
|
|
6541
|
-
}), link && (/*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT))))));
|
|
6542
|
-
};
|
|
6543
|
-
|
|
6544
|
-
var _templateObject$K;
|
|
6545
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.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);
|
|
6546
|
-
|
|
6547
|
-
var UpsellCards = function UpsellCards(_ref) {
|
|
6548
|
-
var upsellCards = _ref.upsellCards;
|
|
6549
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$3, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
|
|
6550
|
-
return /*#__PURE__*/React__default.createElement(UpsellCard, {
|
|
6551
|
-
key: "upsell-card-" + index,
|
|
6552
|
-
title: card.title,
|
|
6553
|
-
subTitle: card.subTitle,
|
|
6554
|
-
price: card.price,
|
|
6555
|
-
promoPrice: card.promoPrice,
|
|
6556
|
-
flag: card.flag,
|
|
6557
|
-
offerTexts: card.offerTexts,
|
|
6558
|
-
link: card.link,
|
|
6559
|
-
theme: card.theme
|
|
6560
|
-
});
|
|
6561
|
-
}));
|
|
6180
|
+
}, []);
|
|
6181
|
+
return viewport;
|
|
6562
6182
|
};
|
|
6563
6183
|
|
|
6564
|
-
var _templateObject$
|
|
6565
|
-
var
|
|
6184
|
+
var _templateObject$F, _templateObject2$r, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$7;
|
|
6185
|
+
var FooterSection = /*#__PURE__*/styled__default.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) {
|
|
6566
6186
|
var theme = _ref.theme;
|
|
6567
|
-
return theme.colors.
|
|
6568
|
-
},
|
|
6569
|
-
var
|
|
6570
|
-
|
|
6571
|
-
|
|
6572
|
-
var
|
|
6573
|
-
var
|
|
6574
|
-
var
|
|
6575
|
-
var
|
|
6187
|
+
return theme.colors.black;
|
|
6188
|
+
}, function (_ref2) {
|
|
6189
|
+
var theme = _ref2.theme;
|
|
6190
|
+
return theme.colors.white;
|
|
6191
|
+
}, devices.tablet, devices.mobile);
|
|
6192
|
+
var FooterContainer = /*#__PURE__*/styled__default.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);
|
|
6193
|
+
var PolicyLinksSection = /*#__PURE__*/styled__default.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);
|
|
6194
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled__default.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);
|
|
6195
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled__default.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);
|
|
6196
|
+
var NewsletterBodyTextWrapper = /*#__PURE__*/styled__default(BodyText)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n\n @media ", " {\n margin-top: 16px;\n }\n"])), devices.mobile);
|
|
6197
|
+
|
|
6198
|
+
var _templateObject$G, _templateObject2$s, _templateObject3$j, _templateObject4$f, _templateObject5$b, _templateObject6$8;
|
|
6199
|
+
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
6200
|
+
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
6201
|
+
var ChildrenContainer = /*#__PURE__*/styled__default.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) {
|
|
6576
6202
|
var isVisible = _ref.isVisible;
|
|
6577
6203
|
return isVisible ? 'visible' : 'hidden';
|
|
6578
6204
|
}, devices.mobile);
|
|
6579
|
-
var TitleContainer$
|
|
6580
|
-
var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6205
|
+
var TitleContainer$1 = /*#__PURE__*/styled__default.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);
|
|
6206
|
+
var ContentContainer = /*#__PURE__*/styled__default.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) {
|
|
6581
6207
|
var textHeight = _ref2.textHeight;
|
|
6582
6208
|
return textHeight;
|
|
6583
6209
|
}, devices.mobile);
|
|
6584
|
-
var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6210
|
+
var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
6585
6211
|
|
|
6586
6212
|
/* eslint-disable react/no-unstable-nested-components */
|
|
6587
6213
|
var Accordion = function Accordion(_ref) {
|
|
@@ -6663,7 +6289,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
6663
6289
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, {
|
|
6664
6290
|
tabIndex: 0,
|
|
6665
6291
|
onKeyDown: keyDown
|
|
6666
|
-
}, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$
|
|
6292
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$1, {
|
|
6667
6293
|
onClick: toggleAccordion,
|
|
6668
6294
|
tabIndex: -1,
|
|
6669
6295
|
role: "button",
|
|
@@ -6686,8 +6312,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6686
6312
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
6687
6313
|
};
|
|
6688
6314
|
|
|
6689
|
-
var _templateObject$
|
|
6690
|
-
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6315
|
+
var _templateObject$H;
|
|
6316
|
+
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6691
6317
|
|
|
6692
6318
|
var Accordions = function Accordions(_ref) {
|
|
6693
6319
|
var _ref$items = _ref.items,
|
|
@@ -6717,13 +6343,13 @@ var Theme = function Theme(_ref) {
|
|
|
6717
6343
|
}, children);
|
|
6718
6344
|
};
|
|
6719
6345
|
|
|
6720
|
-
var _templateObject$
|
|
6721
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6346
|
+
var _templateObject$I, _templateObject2$t, _templateObject3$k;
|
|
6347
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.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) {
|
|
6722
6348
|
var theme = _ref.theme;
|
|
6723
6349
|
return theme.colors.primary;
|
|
6724
6350
|
}, devices.mobile);
|
|
6725
|
-
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6726
|
-
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6351
|
+
var SvgContainer$2 = /*#__PURE__*/styled__default.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);
|
|
6352
|
+
var ContentContainer$1 = /*#__PURE__*/styled__default.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"])));
|
|
6727
6353
|
|
|
6728
6354
|
/* eslint-disable react/no-danger */
|
|
6729
6355
|
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
@@ -6761,8 +6387,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
6761
6387
|
}))))));
|
|
6762
6388
|
};
|
|
6763
6389
|
|
|
6764
|
-
var _templateObject$
|
|
6765
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
6390
|
+
var _templateObject$J;
|
|
6391
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(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) {
|
|
6766
6392
|
var bgColor = _ref.bgColor,
|
|
6767
6393
|
theme = _ref.theme;
|
|
6768
6394
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
@@ -6771,48 +6397,48 @@ var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObjec
|
|
|
6771
6397
|
return color;
|
|
6772
6398
|
});
|
|
6773
6399
|
|
|
6774
|
-
var _excluded$
|
|
6400
|
+
var _excluded$b = ["children"];
|
|
6775
6401
|
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
6776
6402
|
var _props$color;
|
|
6777
6403
|
var children = _ref.children,
|
|
6778
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
6404
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
6779
6405
|
return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
|
|
6780
6406
|
color: (_props$color = props.color) != null ? _props$color : exports.Colors.Black,
|
|
6781
6407
|
iconClassName: "auxiliaryButtonIcon"
|
|
6782
6408
|
}), children);
|
|
6783
6409
|
};
|
|
6784
6410
|
|
|
6785
|
-
var _templateObject$
|
|
6411
|
+
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;
|
|
6786
6412
|
var LENGTH_LARGE_TEXT = 28;
|
|
6787
|
-
var LENGTH_SMALL_TEXT
|
|
6413
|
+
var LENGTH_SMALL_TEXT = 19;
|
|
6788
6414
|
var LENGTH_TEXT_TABLET = 10;
|
|
6789
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6415
|
+
var CardContainer = /*#__PURE__*/styled__default.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) {
|
|
6790
6416
|
var isCardClickable = _ref.isCardClickable;
|
|
6791
6417
|
return isCardClickable ? 'pointer' : 'default';
|
|
6792
6418
|
}, function (_ref2) {
|
|
6793
6419
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
6794
6420
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
6795
6421
|
});
|
|
6796
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6422
|
+
var HoverContainer = /*#__PURE__*/styled__default.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) {
|
|
6797
6423
|
var lineColor = _ref3.lineColor,
|
|
6798
6424
|
theme = _ref3.theme;
|
|
6799
6425
|
if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
|
|
6800
6426
|
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
6801
6427
|
}, zIndexes.contentOverlay);
|
|
6802
|
-
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6803
|
-
var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6428
|
+
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
6429
|
+
var ContentContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
6804
6430
|
var fullWidth = _ref4.fullWidth;
|
|
6805
6431
|
return fullWidth ? '0' : '20px';
|
|
6806
6432
|
}, function (_ref5) {
|
|
6807
6433
|
var fullWidth = _ref5.fullWidth;
|
|
6808
6434
|
return fullWidth ? '0' : '20px';
|
|
6809
6435
|
});
|
|
6810
|
-
var TitleContainer$
|
|
6811
|
-
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6812
|
-
var TextContainer
|
|
6813
|
-
var HighlightTextContainer = /*#__PURE__*/styled__default(TextContainer
|
|
6814
|
-
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$
|
|
6815
|
-
var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject10$
|
|
6436
|
+
var TitleContainer$2 = /*#__PURE__*/styled__default.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);
|
|
6437
|
+
var TitleContainerMobile = /*#__PURE__*/styled__default.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);
|
|
6438
|
+
var TextContainer = /*#__PURE__*/styled__default.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"])));
|
|
6439
|
+
var HighlightTextContainer = /*#__PURE__*/styled__default(TextContainer)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
|
|
6440
|
+
var SubtitleContainer = /*#__PURE__*/styled__default.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"])));
|
|
6441
|
+
var LabelContainer = /*#__PURE__*/styled__default.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) {
|
|
6816
6442
|
var isVisible = _ref6.isVisible;
|
|
6817
6443
|
return isVisible ? "visible" : 'hidden';
|
|
6818
6444
|
}, devices.mobile, function (_ref7) {
|
|
@@ -6844,7 +6470,7 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14 || (
|
|
|
6844
6470
|
var size = _ref13.size,
|
|
6845
6471
|
primaryButtonTextLength = _ref13.primaryButtonTextLength,
|
|
6846
6472
|
tertiaryButtonTextLength = _ref13.tertiaryButtonTextLength;
|
|
6847
|
-
var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT
|
|
6473
|
+
var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
|
|
6848
6474
|
if (isLinksLayoutColumn) {
|
|
6849
6475
|
return "\n flex-direction: column;\n ";
|
|
6850
6476
|
}
|
|
@@ -6922,11 +6548,11 @@ var truncateReactNodeString = function truncateReactNodeString(node, resultLengt
|
|
|
6922
6548
|
return truncateHtmlString(nodeString, resultLength, addDots);
|
|
6923
6549
|
};
|
|
6924
6550
|
|
|
6925
|
-
var _excluded$
|
|
6926
|
-
_excluded2
|
|
6551
|
+
var _excluded$c = ["text"],
|
|
6552
|
+
_excluded2 = ["text"];
|
|
6927
6553
|
var _buttonTypeToButton;
|
|
6928
6554
|
var LENGTH_LARGE_TEXT$1 = 28;
|
|
6929
|
-
var LENGTH_SMALL_TEXT$
|
|
6555
|
+
var LENGTH_SMALL_TEXT$1 = 19;
|
|
6930
6556
|
var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[exports.ButtonType.Tertiary] = Button$1, _buttonTypeToButton);
|
|
6931
6557
|
var Card = function Card(_ref) {
|
|
6932
6558
|
var _labelParams$color;
|
|
@@ -6970,14 +6596,14 @@ var Card = function Card(_ref) {
|
|
|
6970
6596
|
var _ref2 = firstButton || {},
|
|
6971
6597
|
_ref2$text = _ref2.text,
|
|
6972
6598
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
6973
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6974
|
-
var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$
|
|
6599
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
|
|
6600
|
+
var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$1) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
|
|
6975
6601
|
var secondButton = links == null ? void 0 : links[1];
|
|
6976
6602
|
var _ref3 = secondButton || {},
|
|
6977
6603
|
_ref3$text = _ref3.text,
|
|
6978
6604
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
6979
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2
|
|
6980
|
-
var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$
|
|
6605
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
6606
|
+
var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$1) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
|
|
6981
6607
|
var hoverHandler = function hoverHandler(value) {
|
|
6982
6608
|
if (value) {
|
|
6983
6609
|
node.current.style.opacity = '1';
|
|
@@ -7033,11 +6659,11 @@ var Card = function Card(_ref) {
|
|
|
7033
6659
|
fullWidth: fullWidth
|
|
7034
6660
|
}, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
|
|
7035
6661
|
list: tags
|
|
7036
|
-
}) : null, /*#__PURE__*/React__default.createElement(TitleContainer$
|
|
6662
|
+
}) : null, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
7037
6663
|
level: size === 'small' ? 6 : 5
|
|
7038
6664
|
}, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
7039
6665
|
level: 6
|
|
7040
|
-
}, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer
|
|
6666
|
+
}, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer, {
|
|
7041
6667
|
dangerouslySetInnerHTML: {
|
|
7042
6668
|
__html: truncatedText
|
|
7043
6669
|
}
|
|
@@ -7057,9 +6683,9 @@ var Card = function Card(_ref) {
|
|
|
7057
6683
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)))));
|
|
7058
6684
|
};
|
|
7059
6685
|
|
|
7060
|
-
var _templateObject$
|
|
7061
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7062
|
-
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
6686
|
+
var _templateObject$L, _templateObject2$v;
|
|
6687
|
+
var CardsContainer = /*#__PURE__*/styled__default(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);
|
|
6688
|
+
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7063
6689
|
|
|
7064
6690
|
var Cards = function Cards(_ref) {
|
|
7065
6691
|
var cards = _ref.cards,
|
|
@@ -7101,18 +6727,18 @@ var Cards = function Cards(_ref) {
|
|
|
7101
6727
|
}));
|
|
7102
6728
|
};
|
|
7103
6729
|
|
|
7104
|
-
var _templateObject$
|
|
7105
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7106
|
-
var Wrapper$
|
|
6730
|
+
var _templateObject$M, _templateObject2$w, _templateObject3$m, _templateObject4$h, _templateObject5$d;
|
|
6731
|
+
var ContentWrapper = /*#__PURE__*/styled__default.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);
|
|
6732
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.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) {
|
|
7107
6733
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7108
6734
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7109
6735
|
}, function (_ref2) {
|
|
7110
6736
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
7111
6737
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7112
6738
|
}, devices.mobileAndTablet);
|
|
7113
|
-
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7114
|
-
var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7115
|
-
var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6739
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6740
|
+
var AddressWrapperMobile = /*#__PURE__*/styled__default.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);
|
|
6741
|
+
var DetailsWrapper = /*#__PURE__*/styled__default.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);
|
|
7116
6742
|
|
|
7117
6743
|
var divideAddressString = function divideAddressString(address) {
|
|
7118
6744
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -7141,7 +6767,7 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7141
6767
|
columnSpanDesktop: 8,
|
|
7142
6768
|
columnStartDevice: 1,
|
|
7143
6769
|
columnSpanDevice: 14
|
|
7144
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$
|
|
6770
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
7145
6771
|
"data-testid": "contact-card-wrapper",
|
|
7146
6772
|
hideBottomBorder: hideBottomBorder,
|
|
7147
6773
|
hideTopBorder: hideTopBorder
|
|
@@ -7169,18 +6795,18 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7169
6795
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
|
|
7170
6796
|
};
|
|
7171
6797
|
|
|
7172
|
-
var _templateObject$
|
|
7173
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$
|
|
7174
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$
|
|
6798
|
+
var _templateObject$N, _templateObject2$x, _templateObject3$n, _templateObject4$i, _templateObject5$e, _templateObject6$a, _templateObject7$5;
|
|
6799
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6800
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled__default.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) {
|
|
7175
6801
|
return props.clickable ? 'pointer' : 'default';
|
|
7176
6802
|
}, devices.mobile);
|
|
7177
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7178
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6803
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
6804
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.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) {
|
|
7179
6805
|
return props.showImage ? 2 : '1 / span 4';
|
|
7180
6806
|
}, devices.mobile);
|
|
7181
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7182
|
-
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7183
|
-
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
6807
|
+
var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
6808
|
+
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
6809
|
+
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.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) {
|
|
7184
6810
|
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 ";
|
|
7185
6811
|
});
|
|
7186
6812
|
|
|
@@ -7252,21 +6878,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7252
6878
|
}), link.text))));
|
|
7253
6879
|
};
|
|
7254
6880
|
|
|
7255
|
-
var _templateObject$
|
|
7256
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6881
|
+
var _templateObject$O, _templateObject2$y, _templateObject3$o, _templateObject4$j, _templateObject5$f;
|
|
6882
|
+
var EditorialGrid = /*#__PURE__*/styled__default.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) {
|
|
7257
6883
|
var imageToLeft = _ref.imageToLeft;
|
|
7258
6884
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7259
6885
|
}, devices.mobile);
|
|
7260
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6886
|
+
var EditorialImageWrapper = /*#__PURE__*/styled__default.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) {
|
|
7261
6887
|
var imageToLeft = _ref2.imageToLeft;
|
|
7262
6888
|
return imageToLeft ? 'left' : 'right';
|
|
7263
6889
|
}, devices.mobile);
|
|
7264
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6890
|
+
var EditorialTextWrapper = /*#__PURE__*/styled__default.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) {
|
|
7265
6891
|
var imageToLeft = _ref3.imageToLeft;
|
|
7266
6892
|
return imageToLeft ? 'right' : 'left';
|
|
7267
6893
|
}, devices.mobile);
|
|
7268
|
-
var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$
|
|
7269
|
-
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6894
|
+
var EditorialSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
6895
|
+
var EditorialText = /*#__PURE__*/styled__default.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"])));
|
|
7270
6896
|
|
|
7271
6897
|
var Editorial = function Editorial(_ref) {
|
|
7272
6898
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7297,10 +6923,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7297
6923
|
})))));
|
|
7298
6924
|
};
|
|
7299
6925
|
|
|
7300
|
-
var _templateObject$
|
|
7301
|
-
var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
7302
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
7303
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
6926
|
+
var _templateObject$P, _templateObject2$z, _templateObject3$p, _templateObject4$k, _templateObject5$g;
|
|
6927
|
+
var InfoContent = /*#__PURE__*/styled__default('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"])));
|
|
6928
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
6929
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
7304
6930
|
if (!props.infoThemed) {
|
|
7305
6931
|
return '';
|
|
7306
6932
|
}
|
|
@@ -7309,12 +6935,12 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$v || (
|
|
|
7309
6935
|
}
|
|
7310
6936
|
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 ";
|
|
7311
6937
|
});
|
|
7312
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
6938
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
|
|
7313
6939
|
return props.background !== exports.IInformationBackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
|
|
7314
6940
|
}, function (props) {
|
|
7315
6941
|
return "var(--base-color-" + props.background + ")";
|
|
7316
6942
|
});
|
|
7317
|
-
var InfoBodyWrapper = /*#__PURE__*/styled__default('div')(_templateObject5$
|
|
6943
|
+
var InfoBodyWrapper = /*#__PURE__*/styled__default('div')(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n text-decoration: underline;\n color: ", ";\n }\n"])), function (props) {
|
|
7318
6944
|
return props.background === exports.IInformationBackgroundColour.White ? 'var(--base-color-black)' : 'var(--base-color-white)';
|
|
7319
6945
|
});
|
|
7320
6946
|
|
|
@@ -7459,29 +7085,29 @@ var Information = function Information(_ref) {
|
|
|
7459
7085
|
})))));
|
|
7460
7086
|
};
|
|
7461
7087
|
|
|
7462
|
-
var _templateObject$
|
|
7463
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7088
|
+
var _templateObject$Q, _templateObject2$A, _templateObject3$q, _templateObject4$l, _templateObject5$h, _templateObject6$b, _templateObject7$6, _templateObject8$4;
|
|
7089
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default.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) {
|
|
7464
7090
|
var theme = _ref.theme;
|
|
7465
7091
|
return theme.colors.primary;
|
|
7466
7092
|
}, function (_ref2) {
|
|
7467
7093
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7468
7094
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7469
7095
|
}, devices.mobile);
|
|
7470
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
7471
|
-
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7096
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(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);
|
|
7097
|
+
var TitleWrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
7472
7098
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7473
7099
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7474
7100
|
}, devices.mobile);
|
|
7475
|
-
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7101
|
+
var ChildrenWrapper = /*#__PURE__*/styled__default.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) {
|
|
7476
7102
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7477
7103
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7478
7104
|
}, devices.mobile);
|
|
7479
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7480
|
-
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7481
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
7482
|
-
var PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
7105
|
+
var TextWrapper = /*#__PURE__*/styled__default.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"])));
|
|
7106
|
+
var LogoWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7107
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7108
|
+
var PageHeadingText = /*#__PURE__*/styled__default.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"])));
|
|
7483
7109
|
|
|
7484
|
-
var _excluded$
|
|
7110
|
+
var _excluded$d = ["text"];
|
|
7485
7111
|
var PageHeading = function PageHeading(_ref) {
|
|
7486
7112
|
var title = _ref.title,
|
|
7487
7113
|
text = _ref.text,
|
|
@@ -7497,7 +7123,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7497
7123
|
titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
|
|
7498
7124
|
var _ref2 = link || {},
|
|
7499
7125
|
linkText = _ref2.text,
|
|
7500
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7126
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
7501
7127
|
var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
|
|
7502
7128
|
var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
|
|
7503
7129
|
var isTitleUnAvailable = !title;
|
|
@@ -7525,10 +7151,10 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7525
7151
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
|
|
7526
7152
|
};
|
|
7527
7153
|
|
|
7528
|
-
var _excluded$
|
|
7154
|
+
var _excluded$e = ["link"];
|
|
7529
7155
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
7530
7156
|
var link = _ref.link,
|
|
7531
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7157
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
7532
7158
|
var coreLink = link && _extends({}, link, {
|
|
7533
7159
|
color: exports.Colors.White,
|
|
7534
7160
|
bgColor: exports.Colors.Black
|
|
@@ -7540,10 +7166,10 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
7540
7166
|
})));
|
|
7541
7167
|
};
|
|
7542
7168
|
|
|
7543
|
-
var _excluded$
|
|
7169
|
+
var _excluded$f = ["link"];
|
|
7544
7170
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
7545
7171
|
var link = _ref.link,
|
|
7546
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7172
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
|
7547
7173
|
var cinemaLink = link && _extends({}, link, {
|
|
7548
7174
|
color: exports.Colors.Black,
|
|
7549
7175
|
bgColor: exports.Colors.White
|
|
@@ -7557,17 +7183,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
7557
7183
|
})));
|
|
7558
7184
|
};
|
|
7559
7185
|
|
|
7560
|
-
var _templateObject$
|
|
7561
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7562
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7563
|
-
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
7564
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7565
|
-
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7566
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7567
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
7568
|
-
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
7186
|
+
var _templateObject$R, _templateObject2$B, _templateObject3$r, _templateObject4$m, _templateObject5$i, _templateObject6$c, _templateObject7$7, _templateObject8$5;
|
|
7187
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.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);
|
|
7188
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.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);
|
|
7189
|
+
var ImpactGrid = /*#__PURE__*/styled__default(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);
|
|
7190
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.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);
|
|
7191
|
+
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7192
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7193
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled__default.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);
|
|
7194
|
+
var ScrollDownWrapper = /*#__PURE__*/styled__default.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);
|
|
7569
7195
|
|
|
7570
|
-
var _excluded$
|
|
7196
|
+
var _excluded$g = ["text"];
|
|
7571
7197
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
7572
7198
|
var children = _ref.children,
|
|
7573
7199
|
text = _ref.text,
|
|
@@ -7585,7 +7211,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7585
7211
|
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
7586
7212
|
var _ref2 = link || {},
|
|
7587
7213
|
linkText = _ref2.text,
|
|
7588
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7214
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
|
|
7589
7215
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
7590
7216
|
bgUrlDesktop: bgUrlDesktop,
|
|
7591
7217
|
bgUrlDevice: bgUrlDevice,
|
|
@@ -7630,21 +7256,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7630
7256
|
}, "Scroll Down"))) : null);
|
|
7631
7257
|
};
|
|
7632
7258
|
|
|
7633
|
-
var _templateObject$
|
|
7634
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7259
|
+
var _templateObject$S, _templateObject2$C, _templateObject3$s, _templateObject4$n, _templateObject5$j;
|
|
7260
|
+
var PanelGrid = /*#__PURE__*/styled__default(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) {
|
|
7635
7261
|
var color = _ref.color;
|
|
7636
7262
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
7637
7263
|
}, devices.mobileAndTablet);
|
|
7638
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7264
|
+
var LeftPanel = /*#__PURE__*/styled__default.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) {
|
|
7639
7265
|
var hasImage = _ref2.hasImage;
|
|
7640
7266
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7641
7267
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7642
7268
|
var hasImage = _ref3.hasImage;
|
|
7643
7269
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7644
7270
|
});
|
|
7645
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7646
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7647
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7271
|
+
var RightPanel = /*#__PURE__*/styled__default.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);
|
|
7272
|
+
var InfoWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7273
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7648
7274
|
|
|
7649
7275
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7650
7276
|
var _image$src, _image$alt;
|
|
@@ -7674,13 +7300,13 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7674
7300
|
})))));
|
|
7675
7301
|
};
|
|
7676
7302
|
|
|
7677
|
-
var _templateObject$
|
|
7678
|
-
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7303
|
+
var _templateObject$T;
|
|
7304
|
+
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
7679
7305
|
|
|
7680
|
-
var _excluded$
|
|
7306
|
+
var _excluded$h = ["link"];
|
|
7681
7307
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
7682
7308
|
var link = _ref.link,
|
|
7683
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7309
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
7684
7310
|
var streamLink = link && _extends({}, link, {
|
|
7685
7311
|
color: exports.Colors.Black,
|
|
7686
7312
|
bgColor: exports.Colors.White
|
|
@@ -7694,12 +7320,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
7694
7320
|
}))));
|
|
7695
7321
|
};
|
|
7696
7322
|
|
|
7697
|
-
var _templateObject$
|
|
7698
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7699
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7700
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7701
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7702
|
-
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$
|
|
7323
|
+
var _templateObject$U, _templateObject2$D, _templateObject3$t, _templateObject5$k, _templateObject6$d, _templateObject7$8, _templateObject8$6, _templateObject9$3, _templateObject10$3;
|
|
7324
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.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);
|
|
7325
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.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"])));
|
|
7326
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
7327
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.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);
|
|
7328
|
+
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(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) {
|
|
7703
7329
|
var invert = _ref.invert,
|
|
7704
7330
|
theme = _ref.theme;
|
|
7705
7331
|
return invert ? theme.colors.white : theme.colors.primary;
|
|
@@ -7715,10 +7341,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
|
|
|
7715
7341
|
var theme = _ref4.theme;
|
|
7716
7342
|
return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
|
|
7717
7343
|
}, devices.tablet, devices.mobile);
|
|
7718
|
-
var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
7719
|
-
var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
7720
|
-
var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
7721
|
-
var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject10$
|
|
7344
|
+
var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.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);
|
|
7345
|
+
var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
7346
|
+
var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.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);
|
|
7347
|
+
var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(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) {
|
|
7722
7348
|
var invert = _ref5.invert,
|
|
7723
7349
|
theme = _ref5.theme;
|
|
7724
7350
|
return invert ? theme.colors.primary : theme.colors.white;
|
|
@@ -7807,54 +7433,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
7807
7433
|
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
7808
7434
|
};
|
|
7809
7435
|
|
|
7810
|
-
|
|
7811
|
-
var isIOS = function isIOS() {
|
|
7812
|
-
try {
|
|
7813
|
-
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
7814
|
-
if (typeof navigator === undefined) return false;
|
|
7815
|
-
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
|
|
7816
|
-
// iPad on iOS 13 detection
|
|
7817
|
-
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
7818
|
-
} catch (e) {
|
|
7819
|
-
console.warn('Error checking if device is iOS.', e);
|
|
7820
|
-
return false;
|
|
7821
|
-
}
|
|
7822
|
-
};
|
|
7823
|
-
// React hook version of isIOS (for server side rendering)
|
|
7824
|
-
var useIOS = function useIOS() {
|
|
7825
|
-
var _useState = React.useState(false),
|
|
7826
|
-
IOS = _useState[0],
|
|
7827
|
-
setIOS = _useState[1];
|
|
7828
|
-
React.useEffect(function () {
|
|
7829
|
-
if (typeof navigator === undefined) return;
|
|
7830
|
-
setIOS(isIOS());
|
|
7831
|
-
}, []);
|
|
7832
|
-
return IOS;
|
|
7833
|
-
};
|
|
7834
|
-
// Checks device size based on window width
|
|
7835
|
-
var isMobile = function isMobile() {
|
|
7836
|
-
try {
|
|
7837
|
-
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
7838
|
-
if (typeof window === undefined) return false;
|
|
7839
|
-
return window.innerWidth < breakpoints.sm;
|
|
7840
|
-
} catch (e) {
|
|
7841
|
-
console.warn('Error checking if device is mobile.', e);
|
|
7842
|
-
return false;
|
|
7843
|
-
}
|
|
7844
|
-
};
|
|
7845
|
-
// React hook version of isMobile (for server side rendering)
|
|
7846
|
-
var useMobile = function useMobile() {
|
|
7847
|
-
var _useState2 = React.useState(false),
|
|
7848
|
-
mobile = _useState2[0],
|
|
7849
|
-
setMobile = _useState2[1];
|
|
7850
|
-
React.useEffect(function () {
|
|
7851
|
-
if (typeof window === undefined) return;
|
|
7852
|
-
setMobile(isMobile());
|
|
7853
|
-
}, []);
|
|
7854
|
-
return mobile;
|
|
7855
|
-
};
|
|
7856
|
-
|
|
7857
|
-
var _excluded$l = ["text"];
|
|
7436
|
+
var _excluded$i = ["text"];
|
|
7858
7437
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7859
7438
|
var mobileVideo = video.mobile || video.desktop;
|
|
7860
7439
|
var desktopVideo = video.desktop || video.mobile;
|
|
@@ -7961,7 +7540,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7961
7540
|
semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
|
|
7962
7541
|
var _ref5 = link || {},
|
|
7963
7542
|
linkText = _ref5.text,
|
|
7964
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
7543
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$i);
|
|
7965
7544
|
var titleSize = title && title.length > 20 ? 4 : 3;
|
|
7966
7545
|
var video = {
|
|
7967
7546
|
elementId: 'compact-header-video',
|
|
@@ -7999,15 +7578,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7999
7578
|
}), linkText))))));
|
|
8000
7579
|
};
|
|
8001
7580
|
|
|
8002
|
-
var _templateObject
|
|
8003
|
-
var MorePages = /*#__PURE__*/styled__default.span(_templateObject
|
|
8004
|
-
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$
|
|
7581
|
+
var _templateObject$V, _templateObject2$E, _templateObject3$u, _templateObject4$o;
|
|
7582
|
+
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
7583
|
+
var PageNumberWrapper = /*#__PURE__*/styled__default.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"])));
|
|
8005
7584
|
// PageNumber extends bodyText but uses subtitle-1 font size
|
|
8006
|
-
var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
7585
|
+
var PageNumber = /*#__PURE__*/styled__default.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) {
|
|
8007
7586
|
var active = _ref.active;
|
|
8008
7587
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
8009
7588
|
});
|
|
8010
|
-
var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$
|
|
7589
|
+
var NextPage = /*#__PURE__*/styled__default(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"])));
|
|
8011
7590
|
|
|
8012
7591
|
var reducePages = function reducePages(pages, currentPage) {
|
|
8013
7592
|
// If there are less than 6 pages, return all pages
|
|
@@ -8073,14 +7652,14 @@ var Pagination = function Pagination(_ref) {
|
|
|
8073
7652
|
})))));
|
|
8074
7653
|
};
|
|
8075
7654
|
|
|
8076
|
-
var _templateObject$
|
|
8077
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8078
|
-
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8079
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8080
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8081
|
-
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8082
|
-
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$
|
|
8083
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$
|
|
7655
|
+
var _templateObject$W, _templateObject2$F, _templateObject3$v, _templateObject4$p, _templateObject5$l, _templateObject6$e, _templateObject7$9;
|
|
7656
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(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);
|
|
7657
|
+
var PersonWrapper = /*#__PURE__*/styled__default.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"])));
|
|
7658
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
7659
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
7660
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
7661
|
+
var PersonLink = /*#__PURE__*/styled__default.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"])));
|
|
7662
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8084
7663
|
|
|
8085
7664
|
var Person = function Person(_ref) {
|
|
8086
7665
|
var person = _ref.person,
|
|
@@ -8137,14 +7716,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8137
7716
|
}));
|
|
8138
7717
|
};
|
|
8139
7718
|
|
|
8140
|
-
var _templateObject$
|
|
8141
|
-
var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8142
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
7719
|
+
var _templateObject$X, _templateObject2$G, _templateObject3$w, _templateObject4$q;
|
|
7720
|
+
var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
7721
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(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) {
|
|
8143
7722
|
var columnCount = _ref.columnCount;
|
|
8144
7723
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8145
7724
|
}, devices.mobile, devices.tablet);
|
|
8146
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8147
|
-
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7725
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.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"])));
|
|
7726
|
+
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8148
7727
|
|
|
8149
7728
|
// Get the total character length of a property in an array of objects
|
|
8150
7729
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8219,14 +7798,30 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8219
7798
|
}));
|
|
8220
7799
|
};
|
|
8221
7800
|
|
|
8222
|
-
var _templateObject$
|
|
7801
|
+
var _templateObject$Y;
|
|
7802
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(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);
|
|
7803
|
+
|
|
7804
|
+
var PolicyLinks = function PolicyLinks(_ref) {
|
|
7805
|
+
var items = _ref.items;
|
|
7806
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, items.map(function (link, idx) {
|
|
7807
|
+
return /*#__PURE__*/React__default.createElement(PolicyLinksTextLinkWrapper, {
|
|
7808
|
+
key: link.href + "-" + idx,
|
|
7809
|
+
target: link.href,
|
|
7810
|
+
href: link.href,
|
|
7811
|
+
"data-roh": link.dataRoh,
|
|
7812
|
+
"aria-label": "Policy link: " + link.title
|
|
7813
|
+
}, link.title);
|
|
7814
|
+
}));
|
|
7815
|
+
};
|
|
7816
|
+
|
|
7817
|
+
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;
|
|
8223
7818
|
var LENGTH_TEXT = 28;
|
|
8224
7819
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8225
7820
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8226
7821
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8227
7822
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8228
7823
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8229
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7824
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(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) {
|
|
8230
7825
|
var imageToLeft = _ref.imageToLeft;
|
|
8231
7826
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8232
7827
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8236,8 +7831,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 ||
|
|
|
8236
7831
|
var asCard = _ref3.asCard;
|
|
8237
7832
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8238
7833
|
});
|
|
8239
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
8240
|
-
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7834
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
7835
|
+
var PromoWithTagsText = /*#__PURE__*/styled__default.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) {
|
|
8241
7836
|
var theme = _ref4.theme;
|
|
8242
7837
|
return theme.colors.black;
|
|
8243
7838
|
}, function (_ref5) {
|
|
@@ -8247,7 +7842,7 @@ var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$D || (
|
|
|
8247
7842
|
var theme = _ref6.theme;
|
|
8248
7843
|
return theme.colors.primary;
|
|
8249
7844
|
});
|
|
8250
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7845
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
8251
7846
|
var hasTextLinks = _ref7.hasTextLinks;
|
|
8252
7847
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8253
7848
|
}, function (_ref8) {
|
|
@@ -8271,15 +7866,15 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$v ||
|
|
|
8271
7866
|
}
|
|
8272
7867
|
return '';
|
|
8273
7868
|
});
|
|
8274
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7869
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref10) {
|
|
8275
7870
|
var marginBottom = _ref10.marginBottom;
|
|
8276
7871
|
return marginBottom + "px";
|
|
8277
7872
|
});
|
|
8278
|
-
var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$
|
|
8279
|
-
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
8280
|
-
var TextLinkWrapper$
|
|
8281
|
-
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
8282
|
-
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$
|
|
7873
|
+
var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
7874
|
+
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
7875
|
+
var TextLinkWrapper$1 = /*#__PURE__*/styled__default.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"])));
|
|
7876
|
+
var ExtraContentWrapper = /*#__PURE__*/styled__default.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);
|
|
7877
|
+
var IconWrapper$2 = /*#__PURE__*/styled__default.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);
|
|
8283
7878
|
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
8284
7879
|
var MobileTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
8285
7880
|
var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
@@ -8304,8 +7899,8 @@ var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject19
|
|
|
8304
7899
|
var TimerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
8305
7900
|
var EndDateText = /*#__PURE__*/styled__default.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);
|
|
8306
7901
|
|
|
8307
|
-
var _excluded$
|
|
8308
|
-
_excluded2$
|
|
7902
|
+
var _excluded$j = ["text"],
|
|
7903
|
+
_excluded2$1 = ["text"],
|
|
8309
7904
|
_excluded3 = ["text"];
|
|
8310
7905
|
var _buttonTypeToButton$1;
|
|
8311
7906
|
var LENGTH_TEXT$1 = 28;
|
|
@@ -8366,13 +7961,13 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8366
7961
|
var _ref2 = firstButton || {},
|
|
8367
7962
|
_ref2$text = _ref2.text,
|
|
8368
7963
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
8369
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7964
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
|
|
8370
7965
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
8371
7966
|
var secondButton = links == null ? void 0 : links[1];
|
|
8372
7967
|
var _ref3 = secondButton || {},
|
|
8373
7968
|
_ref3$text = _ref3.text,
|
|
8374
7969
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
8375
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
7970
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
|
|
8376
7971
|
var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
|
|
8377
7972
|
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
8378
7973
|
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
|
|
@@ -8381,7 +7976,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8381
7976
|
var _link$text = link.text,
|
|
8382
7977
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
8383
7978
|
restTextLink = _objectWithoutPropertiesLoose(link, _excluded3);
|
|
8384
|
-
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$
|
|
7979
|
+
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, {
|
|
8385
7980
|
key: index
|
|
8386
7981
|
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTextLink, Object.assign({}, restTextLink), textLinkText));
|
|
8387
7982
|
}) : null;
|
|
@@ -8479,27 +8074,27 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8479
8074
|
}))));
|
|
8480
8075
|
};
|
|
8481
8076
|
|
|
8482
|
-
var _templateObject$
|
|
8077
|
+
var _templateObject$_, _templateObject2$I, _templateObject3$y, _templateObject4$s, _templateObject5$n, _templateObject6$g, _templateObject7$b;
|
|
8483
8078
|
var LENGTH_TEXT$2 = 28;
|
|
8484
8079
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
8485
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8080
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(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) {
|
|
8486
8081
|
var imageToLeft = _ref.imageToLeft;
|
|
8487
8082
|
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'";
|
|
8488
8083
|
}, devices.tablet, function (_ref2) {
|
|
8489
8084
|
var imageToLeft = _ref2.imageToLeft;
|
|
8490
8085
|
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'";
|
|
8491
8086
|
}, devices.mobile);
|
|
8492
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8087
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.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) {
|
|
8493
8088
|
var imageToLeft = _ref3.imageToLeft;
|
|
8494
8089
|
return imageToLeft ? 'left' : 'right';
|
|
8495
8090
|
}, devices.mobile);
|
|
8496
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8091
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.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) {
|
|
8497
8092
|
var imageToLeft = _ref4.imageToLeft;
|
|
8498
8093
|
return imageToLeft ? 'right' : 'left';
|
|
8499
8094
|
}, devices.mobile);
|
|
8500
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8501
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
8502
|
-
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8095
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled__default.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);
|
|
8096
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
8097
|
+
var PromoWithTitleText = /*#__PURE__*/styled__default.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) {
|
|
8503
8098
|
var theme = _ref5.theme;
|
|
8504
8099
|
return theme.colors.black;
|
|
8505
8100
|
}, function (_ref6) {
|
|
@@ -8509,7 +8104,7 @@ var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$k ||
|
|
|
8509
8104
|
var theme = _ref7.theme;
|
|
8510
8105
|
return theme.colors.primary;
|
|
8511
8106
|
});
|
|
8512
|
-
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
8107
|
+
var ButtonsContainer$3 = /*#__PURE__*/styled__default.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) {
|
|
8513
8108
|
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
8514
8109
|
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
8515
8110
|
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
@@ -8531,8 +8126,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$e ||
|
|
|
8531
8126
|
return '';
|
|
8532
8127
|
});
|
|
8533
8128
|
|
|
8534
|
-
var _templateObject
|
|
8535
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject
|
|
8129
|
+
var _templateObject$$;
|
|
8130
|
+
var VideoContainer = /*#__PURE__*/styled__default.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) {
|
|
8536
8131
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8537
8132
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8538
8133
|
return aspectRatio;
|
|
@@ -8657,8 +8252,8 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
8657
8252
|
}));
|
|
8658
8253
|
};
|
|
8659
8254
|
|
|
8660
|
-
var _excluded$
|
|
8661
|
-
_excluded2$
|
|
8255
|
+
var _excluded$k = ["text"],
|
|
8256
|
+
_excluded2$2 = ["text"];
|
|
8662
8257
|
var LENGTH_TEXT$3 = 28;
|
|
8663
8258
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
8664
8259
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -8682,13 +8277,13 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8682
8277
|
var _ref2 = primaryButton || {},
|
|
8683
8278
|
_ref2$text = _ref2.text,
|
|
8684
8279
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
8685
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
8280
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
|
|
8686
8281
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
8687
8282
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
8688
8283
|
var _ref3 = tertiaryButton || {},
|
|
8689
8284
|
_ref3$text = _ref3.text,
|
|
8690
8285
|
tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
8691
|
-
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
8286
|
+
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
|
|
8692
8287
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
|
|
8693
8288
|
var defaultVideoSettings = {
|
|
8694
8289
|
muted: true,
|
|
@@ -8723,8 +8318,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8723
8318
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
8724
8319
|
};
|
|
8725
8320
|
|
|
8726
|
-
var _templateObject$
|
|
8727
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8321
|
+
var _templateObject$10;
|
|
8322
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
8728
8323
|
|
|
8729
8324
|
/**
|
|
8730
8325
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -8779,9 +8374,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
8779
8374
|
})));
|
|
8780
8375
|
};
|
|
8781
8376
|
|
|
8782
|
-
var _templateObject$
|
|
8783
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8784
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8377
|
+
var _templateObject$11, _templateObject2$J, _templateObject3$z;
|
|
8378
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8379
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.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) {
|
|
8785
8380
|
var horizontalMode = _ref.horizontalMode;
|
|
8786
8381
|
if (horizontalMode) return 'row';
|
|
8787
8382
|
return 'column';
|
|
@@ -8789,7 +8384,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$O || (_temp
|
|
|
8789
8384
|
var gap = _ref2.gap;
|
|
8790
8385
|
return gap + "px";
|
|
8791
8386
|
});
|
|
8792
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8387
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
8793
8388
|
var darkMode = _ref3.darkMode;
|
|
8794
8389
|
if (darkMode) return 'var(--base-color-white)';
|
|
8795
8390
|
return 'var(--base-color-errorstate)';
|
|
@@ -8866,10 +8461,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
8866
8461
|
}, error))));
|
|
8867
8462
|
};
|
|
8868
8463
|
|
|
8869
|
-
var _templateObject$
|
|
8870
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8871
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8872
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8464
|
+
var _templateObject$12, _templateObject2$K, _templateObject3$A;
|
|
8465
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.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);
|
|
8466
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.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"])));
|
|
8467
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.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);
|
|
8873
8468
|
|
|
8874
8469
|
/* eslint-disable react/no-danger */
|
|
8875
8470
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -8925,8 +8520,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
8925
8520
|
return null;
|
|
8926
8521
|
};
|
|
8927
8522
|
|
|
8928
|
-
var _templateObject$
|
|
8929
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8523
|
+
var _templateObject$13;
|
|
8524
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
8930
8525
|
|
|
8931
8526
|
var SectionTitle = function SectionTitle(_ref) {
|
|
8932
8527
|
var title = _ref.title,
|
|
@@ -8954,8 +8549,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
8954
8549
|
}, description)))));
|
|
8955
8550
|
};
|
|
8956
8551
|
|
|
8957
|
-
var _templateObject$
|
|
8958
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8552
|
+
var _templateObject$14, _templateObject2$L, _templateObject3$B, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject10$5, _templateObject11$3;
|
|
8553
|
+
var stateStyles = /*#__PURE__*/styled.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) {
|
|
8959
8554
|
var theme = _ref.theme;
|
|
8960
8555
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
8961
8556
|
}, function (_ref2) {
|
|
@@ -8965,12 +8560,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject
|
|
|
8965
8560
|
var theme = _ref3.theme;
|
|
8966
8561
|
return theme.colors.lightgrey;
|
|
8967
8562
|
});
|
|
8968
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
8563
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
8969
8564
|
var theme = _ref4.theme;
|
|
8970
8565
|
return theme.colors.darkgrey;
|
|
8971
8566
|
});
|
|
8972
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
8973
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$
|
|
8567
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
8568
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
8974
8569
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
8975
8570
|
var theme = _ref5.theme;
|
|
8976
8571
|
return {
|
|
@@ -8978,11 +8573,11 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
8978
8573
|
color: theme.colors.black,
|
|
8979
8574
|
title: 'Select Arrow'
|
|
8980
8575
|
};
|
|
8981
|
-
})(_templateObject5$
|
|
8982
|
-
var Wrapper$
|
|
8983
|
-
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
8984
|
-
var Options = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
8985
|
-
var Option = /*#__PURE__*/styled__default.li(_templateObject9$
|
|
8576
|
+
})(_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"])));
|
|
8577
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
8578
|
+
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
8579
|
+
var Options = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
8580
|
+
var Option = /*#__PURE__*/styled__default.li(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
8986
8581
|
var theme = _ref6.theme,
|
|
8987
8582
|
hover = _ref6.hover;
|
|
8988
8583
|
var _theme$colors = theme.colors,
|
|
@@ -8992,7 +8587,7 @@ var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObj
|
|
|
8992
8587
|
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
8993
8588
|
});
|
|
8994
8589
|
var selectStyles = function selectStyles(width, height) {
|
|
8995
|
-
return styled.css(_templateObject10$
|
|
8590
|
+
return styled.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);
|
|
8996
8591
|
};
|
|
8997
8592
|
var SelectList = /*#__PURE__*/styled__default.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) {
|
|
8998
8593
|
var width = _ref7.width,
|
|
@@ -9288,7 +8883,7 @@ function Select(_ref3) {
|
|
|
9288
8883
|
}
|
|
9289
8884
|
setSelectedValue(options[0]);
|
|
9290
8885
|
}, [options, resetWhenOptionsUpdate]);
|
|
9291
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
8886
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$3, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
9292
8887
|
level: 1,
|
|
9293
8888
|
tag: "p",
|
|
9294
8889
|
"data-testid": "select-label"
|
|
@@ -9335,9 +8930,9 @@ function Select(_ref3) {
|
|
|
9335
8930
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9336
8931
|
}
|
|
9337
8932
|
|
|
9338
|
-
var _templateObject$
|
|
9339
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9340
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8933
|
+
var _templateObject$15, _templateObject2$M, _templateObject3$C, _templateObject4$u;
|
|
8934
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
8935
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
9341
8936
|
var width = _ref.width;
|
|
9342
8937
|
if (!width) return 'none';
|
|
9343
8938
|
return width + "px";
|
|
@@ -9354,18 +8949,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_t
|
|
|
9354
8949
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9355
8950
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9356
8951
|
});
|
|
9357
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8952
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9358
8953
|
var darkMode = _ref5.darkMode;
|
|
9359
8954
|
if (darkMode) return "var(--base-color-white)";
|
|
9360
8955
|
return "var(--base-color-black)";
|
|
9361
8956
|
});
|
|
9362
|
-
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8957
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9363
8958
|
var darkMode = _ref6.darkMode;
|
|
9364
8959
|
if (darkMode) return "var(--base-color-white)";
|
|
9365
8960
|
return "var(--base-color-errorstate)";
|
|
9366
8961
|
});
|
|
9367
8962
|
|
|
9368
|
-
var _excluded$
|
|
8963
|
+
var _excluded$l = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
9369
8964
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
9370
8965
|
return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
9371
8966
|
iconName: "DropdownArrow"
|
|
@@ -9416,7 +9011,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
9416
9011
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
9417
9012
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
9418
9013
|
components = _ref2.components,
|
|
9419
|
-
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9014
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
9420
9015
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
9421
9016
|
label: label,
|
|
9422
9017
|
error: error,
|
|
@@ -9434,7 +9029,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
9434
9029
|
})));
|
|
9435
9030
|
};
|
|
9436
9031
|
|
|
9437
|
-
var _excluded$
|
|
9032
|
+
var _excluded$m = ["label", "error", "width", "darkMode", "components"];
|
|
9438
9033
|
/**
|
|
9439
9034
|
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
9440
9035
|
* component for select instead of regular react-select component. This can be used
|
|
@@ -9456,7 +9051,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9456
9051
|
_ref$darkMode = _ref.darkMode,
|
|
9457
9052
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
9458
9053
|
components = _ref.components,
|
|
9459
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9054
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$m);
|
|
9460
9055
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
9461
9056
|
label: label,
|
|
9462
9057
|
error: error,
|
|
@@ -9473,8 +9068,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9473
9068
|
})));
|
|
9474
9069
|
};
|
|
9475
9070
|
|
|
9476
|
-
var _templateObject$
|
|
9477
|
-
var TextContainer$
|
|
9071
|
+
var _templateObject$16;
|
|
9072
|
+
var TextContainer$1 = /*#__PURE__*/styled__default.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) {
|
|
9478
9073
|
var theme = _ref.theme;
|
|
9479
9074
|
return theme.colors.primary;
|
|
9480
9075
|
});
|
|
@@ -9495,15 +9090,95 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
9495
9090
|
columnSpanDesktop: columnSpanDesktop,
|
|
9496
9091
|
columnStartDevice: columnStartDevice,
|
|
9497
9092
|
columnSpanDevice: columnSpanDevice
|
|
9498
|
-
}, /*#__PURE__*/React__default.createElement(TextContainer$
|
|
9093
|
+
}, /*#__PURE__*/React__default.createElement(TextContainer$1, {
|
|
9499
9094
|
dangerouslySetInnerHTML: {
|
|
9500
9095
|
__html: text
|
|
9501
9096
|
}
|
|
9502
9097
|
})));
|
|
9503
9098
|
};
|
|
9504
9099
|
|
|
9505
|
-
var _templateObject$
|
|
9506
|
-
var Wrapper$
|
|
9100
|
+
var _templateObject$17, _templateObject2$N, _templateObject3$D, _templateObject4$v, _templateObject5$p, _templateObject6$i, _templateObject7$d, _templateObject8$9;
|
|
9101
|
+
var Wrapper$4 = /*#__PURE__*/styled__default.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);
|
|
9102
|
+
var PromoLabelWrapper = /*#__PURE__*/styled__default.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"])));
|
|
9103
|
+
var PromoLabel = /*#__PURE__*/styled__default.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) {
|
|
9104
|
+
var theme = _ref.theme;
|
|
9105
|
+
return theme.colors.primary;
|
|
9106
|
+
}, exports.Colors.White);
|
|
9107
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
9108
|
+
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
9109
|
+
var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
9110
|
+
var PriceRow = /*#__PURE__*/styled__default.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"])));
|
|
9111
|
+
var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
9112
|
+
|
|
9113
|
+
/* eslint-disable react/no-danger */
|
|
9114
|
+
var OfferText = function OfferText(_ref) {
|
|
9115
|
+
var title = _ref.title,
|
|
9116
|
+
description = _ref.description;
|
|
9117
|
+
return /*#__PURE__*/React__default.createElement(OfferTextWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
9118
|
+
semanticLevel: 5,
|
|
9119
|
+
level: 1
|
|
9120
|
+
}, title), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
9121
|
+
level: 1
|
|
9122
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
9123
|
+
dangerouslySetInnerHTML: {
|
|
9124
|
+
__html: description != null ? description : ''
|
|
9125
|
+
}
|
|
9126
|
+
})));
|
|
9127
|
+
};
|
|
9128
|
+
|
|
9129
|
+
// Set max. character length
|
|
9130
|
+
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
9131
|
+
return value.slice(0, maxLength);
|
|
9132
|
+
};
|
|
9133
|
+
// Format price to contain £ if not already present
|
|
9134
|
+
var formatPrice = function formatPrice(value) {
|
|
9135
|
+
if (Number.isNaN(Number(value))) return value != null ? value : '';
|
|
9136
|
+
return "\xA3" + Number(value).toFixed(2);
|
|
9137
|
+
};
|
|
9138
|
+
|
|
9139
|
+
var LENGTH_SMALL_TEXT$2 = 19;
|
|
9140
|
+
var OFFER_TEXTS_LIMIT = 3;
|
|
9141
|
+
var FLAG_CHAR_LIMIT = 30;
|
|
9142
|
+
var UpsellCard = function UpsellCard(_ref) {
|
|
9143
|
+
var _ref$title = _ref.title,
|
|
9144
|
+
title = _ref$title === void 0 ? '' : _ref$title,
|
|
9145
|
+
subTitle = _ref.subTitle,
|
|
9146
|
+
price = _ref.price,
|
|
9147
|
+
promoPrice = _ref.promoPrice,
|
|
9148
|
+
flag = _ref.flag,
|
|
9149
|
+
offerTexts = _ref.offerTexts,
|
|
9150
|
+
link = _ref.link,
|
|
9151
|
+
_ref$theme = _ref.theme,
|
|
9152
|
+
theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
|
|
9153
|
+
var truncate = function truncate(str, n) {
|
|
9154
|
+
return str.length >= n ? str.slice(0, n) : str;
|
|
9155
|
+
};
|
|
9156
|
+
var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
|
|
9157
|
+
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
9158
|
+
theme: theme
|
|
9159
|
+
}, /*#__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, {
|
|
9160
|
+
semanticLevel: 2,
|
|
9161
|
+
level: 1
|
|
9162
|
+
}, title), subTitle && (/*#__PURE__*/React__default.createElement(Overline, {
|
|
9163
|
+
semanticLevel: 3,
|
|
9164
|
+
level: 1
|
|
9165
|
+
}, subTitle)), promoPrice ? (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9166
|
+
level: 4
|
|
9167
|
+
}, formatPrice(price))), /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9168
|
+
level: 4
|
|
9169
|
+
}, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9170
|
+
level: 4
|
|
9171
|
+
}, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText) {
|
|
9172
|
+
return /*#__PURE__*/React__default.createElement(OfferText, {
|
|
9173
|
+
key: offerText.title,
|
|
9174
|
+
title: offerText.title,
|
|
9175
|
+
description: offerText.description
|
|
9176
|
+
});
|
|
9177
|
+
}), link && (/*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT$2))))));
|
|
9178
|
+
};
|
|
9179
|
+
|
|
9180
|
+
var _templateObject$18, _templateObject2$O;
|
|
9181
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.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) {
|
|
9507
9182
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9508
9183
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9509
9184
|
return aspectRatio;
|
|
@@ -9513,7 +9188,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templat
|
|
|
9513
9188
|
height = _ref2.height;
|
|
9514
9189
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
9515
9190
|
});
|
|
9516
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.
|
|
9191
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.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"])));
|
|
9517
9192
|
|
|
9518
9193
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
9519
9194
|
var caption = _ref.caption,
|
|
@@ -9528,30 +9203,32 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9528
9203
|
var _wrapperRef$current;
|
|
9529
9204
|
return setHeight((wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
|
|
9530
9205
|
};
|
|
9206
|
+
setWrapperHeight(); // Initial height calculation
|
|
9531
9207
|
window.addEventListener('resize', setWrapperHeight);
|
|
9532
|
-
if (wrapperRef) {
|
|
9533
|
-
setWrapperHeight();
|
|
9534
|
-
}
|
|
9535
9208
|
return function () {
|
|
9536
9209
|
return window.removeEventListener('resize', setWrapperHeight);
|
|
9537
9210
|
};
|
|
9538
|
-
}, [
|
|
9539
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9211
|
+
}, []);
|
|
9212
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$5, {
|
|
9540
9213
|
aspectRatio: aspectRatio,
|
|
9541
9214
|
ref: wrapperRef,
|
|
9542
9215
|
height: height
|
|
9543
9216
|
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
9544
9217
|
aspectRatio: aspectRatio
|
|
9545
|
-
},
|
|
9218
|
+
}, React__default.Children.map(children, function (child) {
|
|
9219
|
+
return /*#__PURE__*/React__default.isValidElement(child) ? /*#__PURE__*/React__default.cloneElement(child, {
|
|
9220
|
+
alt: child.props.alt || 'Visual representation'
|
|
9221
|
+
}) : child;
|
|
9222
|
+
})), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
9546
9223
|
};
|
|
9547
9224
|
|
|
9548
|
-
var _templateObject$
|
|
9549
|
-
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9550
|
-
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9225
|
+
var _templateObject$19, _templateObject2$P, _templateObject3$E;
|
|
9226
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
9227
|
+
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9551
9228
|
var displayAttribution = _ref.displayAttribution;
|
|
9552
9229
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
9553
9230
|
});
|
|
9554
|
-
var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9231
|
+
var Line$1 = /*#__PURE__*/styled__default.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);
|
|
9555
9232
|
|
|
9556
9233
|
/* eslint-disable react/no-danger */
|
|
9557
9234
|
var Quote = function Quote(_ref) {
|
|
@@ -9576,13 +9253,13 @@ var Quote = function Quote(_ref) {
|
|
|
9576
9253
|
}, attribution))));
|
|
9577
9254
|
};
|
|
9578
9255
|
|
|
9579
|
-
var _templateObject$
|
|
9580
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9581
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9582
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
9583
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9584
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9585
|
-
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
9256
|
+
var _templateObject$1a, _templateObject2$Q, _templateObject3$F, _templateObject4$w, _templateObject5$q, _templateObject6$j;
|
|
9257
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.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"])));
|
|
9258
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
9259
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
9260
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
9261
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.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);
|
|
9262
|
+
var TitleWrapper$2 = /*#__PURE__*/styled__default.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);
|
|
9586
9263
|
|
|
9587
9264
|
var MiniCard = function MiniCard(_ref) {
|
|
9588
9265
|
var _ref$title = _ref.title,
|
|
@@ -9620,18 +9297,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9620
9297
|
}, title)))));
|
|
9621
9298
|
};
|
|
9622
9299
|
|
|
9623
|
-
var _templateObject$
|
|
9624
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9625
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9626
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9300
|
+
var _templateObject$1b, _templateObject2$R, _templateObject3$G, _templateObject4$x, _templateObject5$r;
|
|
9301
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.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"])));
|
|
9302
|
+
var LinkContainer = /*#__PURE__*/styled__default.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"])));
|
|
9303
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
9627
9304
|
var isVisible = _ref.isVisible;
|
|
9628
9305
|
return isVisible ? 'visible' : 'hidden';
|
|
9629
9306
|
});
|
|
9630
|
-
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9307
|
+
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
9631
9308
|
var isVisible = _ref2.isVisible;
|
|
9632
9309
|
return isVisible ? 'visible' : 'hidden';
|
|
9633
9310
|
});
|
|
9634
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9311
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.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"])));
|
|
9635
9312
|
|
|
9636
9313
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9637
9314
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -9712,15 +9389,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
9712
9389
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
9713
9390
|
};
|
|
9714
9391
|
|
|
9715
|
-
var _templateObject$
|
|
9716
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$
|
|
9717
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
9718
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
9719
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
9392
|
+
var _templateObject$1c, _templateObject2$S, _templateObject3$H, _templateObject4$y, _templateObject5$s;
|
|
9393
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
9394
|
+
var MenuList = /*#__PURE__*/styled__default.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"])), exports.Colors.LightGrey);
|
|
9395
|
+
var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
9396
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref) {
|
|
9720
9397
|
var isActive = _ref.isActive;
|
|
9721
9398
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
9722
9399
|
}, exports.Colors.MidGrey);
|
|
9723
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
9400
|
+
var MobileMenuList = /*#__PURE__*/styled__default.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) {
|
|
9724
9401
|
var isOpen = _ref2.isOpen;
|
|
9725
9402
|
return isOpen ? 'block' : 'none';
|
|
9726
9403
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -9876,19 +9553,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
9876
9553
|
});
|
|
9877
9554
|
};
|
|
9878
9555
|
|
|
9879
|
-
var _templateObject$
|
|
9880
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9881
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9882
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9556
|
+
var _templateObject$1d, _templateObject2$T, _templateObject3$I, _templateObject4$z, _templateObject5$t, _templateObject6$k;
|
|
9557
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
9558
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
9559
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
9883
9560
|
var color = _ref.color;
|
|
9884
9561
|
return "var(--base-color-" + color + ")";
|
|
9885
9562
|
});
|
|
9886
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9887
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9563
|
+
var BottomLine = /*#__PURE__*/styled__default.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"])));
|
|
9564
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
9888
9565
|
var color = _ref2.color;
|
|
9889
9566
|
return "var(--base-color-" + color + ")";
|
|
9890
9567
|
});
|
|
9891
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
9568
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
9892
9569
|
var color = _ref3.color;
|
|
9893
9570
|
return "var(--base-color-" + color + ")";
|
|
9894
9571
|
});
|
|
@@ -9970,28 +9647,28 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
9970
9647
|
}, strengthLabel))));
|
|
9971
9648
|
};
|
|
9972
9649
|
|
|
9973
|
-
var _templateObject$
|
|
9974
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$
|
|
9975
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9976
|
-
var Wrapper$
|
|
9977
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$
|
|
9650
|
+
var _templateObject$1e, _templateObject2$U, _templateObject3$J, _templateObject4$A, _templateObject5$u, _templateObject6$l, _templateObject7$e, _templateObject8$a, _templateObject9$6, _templateObject10$6;
|
|
9651
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
9652
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
9653
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
9654
|
+
var TableHeader = /*#__PURE__*/styled__default.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) {
|
|
9978
9655
|
return "var(--base-color-" + props.lineColor + ")";
|
|
9979
9656
|
}, function (props) {
|
|
9980
9657
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
9981
9658
|
}, devices.tablet, devices.mobile);
|
|
9982
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
9659
|
+
var TableCell = /*#__PURE__*/styled__default.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) {
|
|
9983
9660
|
return "var(--base-color-" + props.lineColor + ")";
|
|
9984
9661
|
}, function (props) {
|
|
9985
9662
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
9986
9663
|
}, devices.mobile);
|
|
9987
|
-
var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
9988
|
-
var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject7$
|
|
9664
|
+
var Pagination$1 = /*#__PURE__*/styled__default.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"])));
|
|
9665
|
+
var PageNumber$1 = /*#__PURE__*/styled__default.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) {
|
|
9989
9666
|
var active = _ref.active;
|
|
9990
9667
|
return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
|
|
9991
9668
|
});
|
|
9992
|
-
var Next = /*#__PURE__*/styled__default.span(_templateObject8$
|
|
9993
|
-
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
9994
|
-
var AriaDescription$1 = /*#__PURE__*/styled__default.span(_templateObject10$
|
|
9669
|
+
var Next = /*#__PURE__*/styled__default.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"])));
|
|
9670
|
+
var ScrollButtons = /*#__PURE__*/styled__default.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"])));
|
|
9671
|
+
var AriaDescription$1 = /*#__PURE__*/styled__default.span(_templateObject10$6 || (_templateObject10$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
9995
9672
|
|
|
9996
9673
|
/* eslint-disable react/no-danger */
|
|
9997
9674
|
var Content = function Content(_ref) {
|
|
@@ -10099,7 +9776,7 @@ var Table = function Table(_ref) {
|
|
|
10099
9776
|
} else {
|
|
10100
9777
|
visibleRows = totalRows;
|
|
10101
9778
|
}
|
|
10102
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9779
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$6, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
10103
9780
|
onClickPrev: function onClickPrev() {
|
|
10104
9781
|
return scrollTable(tableRef, 'left');
|
|
10105
9782
|
},
|
|
@@ -10174,6 +9851,383 @@ var Table = function Table(_ref) {
|
|
|
10174
9851
|
}))))))))));
|
|
10175
9852
|
};
|
|
10176
9853
|
|
|
9854
|
+
var _excluded$n = ["dataRoh"];
|
|
9855
|
+
var Footer = function Footer(_ref) {
|
|
9856
|
+
var data = _ref.data;
|
|
9857
|
+
var policyLinks = data.policyLinks,
|
|
9858
|
+
newsletter = data.newsletter,
|
|
9859
|
+
rawSocialMediaLinks = data.socialMediaLinks,
|
|
9860
|
+
contact = data.contact,
|
|
9861
|
+
_data$artsLogo = data.artsLogo,
|
|
9862
|
+
artsDataRoh = _data$artsLogo.dataRoh,
|
|
9863
|
+
artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$n),
|
|
9864
|
+
additionalInfo = data.additionalInfo;
|
|
9865
|
+
var _useViewport = useViewport(),
|
|
9866
|
+
isMobile = _useViewport.isMobile;
|
|
9867
|
+
return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksSection, {
|
|
9868
|
+
"data-testid": "policy-links"
|
|
9869
|
+
}, /*#__PURE__*/React__default.createElement(PolicyLinks, {
|
|
9870
|
+
items: policyLinks
|
|
9871
|
+
})), /*#__PURE__*/React__default.createElement(SocialAndNewsletterSection, {
|
|
9872
|
+
"data-testid": "contact-newsletter"
|
|
9873
|
+
}, /*#__PURE__*/React__default.createElement(SocialLinks, {
|
|
9874
|
+
items: rawSocialMediaLinks
|
|
9875
|
+
}), /*#__PURE__*/React__default.createElement(TextLink, {
|
|
9876
|
+
href: contact.href,
|
|
9877
|
+
"aria-label": "Contact us: " + contact.title
|
|
9878
|
+
}, contact.title), /*#__PURE__*/React__default.createElement(NewsletterBodyTextWrapper, {
|
|
9879
|
+
level: 1
|
|
9880
|
+
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLink, {
|
|
9881
|
+
href: newsletter.link.href,
|
|
9882
|
+
"data-roh": newsletter.link.dataRoh,
|
|
9883
|
+
"aria-label": "Newsletter link: " + newsletter.link.title
|
|
9884
|
+
}, newsletter.link.title)), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement("div", {
|
|
9885
|
+
"data-testid": "arts-logo"
|
|
9886
|
+
}, /*#__PURE__*/React__default.createElement("a", Object.assign({
|
|
9887
|
+
"data-roh": artsDataRoh,
|
|
9888
|
+
target: "_blank",
|
|
9889
|
+
rel: "noopener noreferrer"
|
|
9890
|
+
}, artsLogo, {
|
|
9891
|
+
"aria-label": "Sponsor Logo link"
|
|
9892
|
+
}), /*#__PURE__*/React__default.createElement(SponsorLogo, null))), /*#__PURE__*/React__default.createElement("div", {
|
|
9893
|
+
"data-testid": "additional-info"
|
|
9894
|
+
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
9895
|
+
level: isMobile ? 2 : 3
|
|
9896
|
+
}, additionalInfo)))));
|
|
9897
|
+
};
|
|
9898
|
+
|
|
9899
|
+
var _templateObject$1f, _templateObject2$V, _templateObject3$K, _templateObject4$B, _templateObject5$v, _templateObject6$m;
|
|
9900
|
+
var LIST_ITEM_GAP = 32;
|
|
9901
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.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) {
|
|
9902
|
+
var bottomBorder = _ref.bottomBorder;
|
|
9903
|
+
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
9904
|
+
}, zIndexes.anchor);
|
|
9905
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
9906
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
9907
|
+
var TabsList = /*#__PURE__*/styled__default.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) {
|
|
9908
|
+
var tabsOverflow = _ref2.tabsOverflow;
|
|
9909
|
+
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
9910
|
+
}, LIST_ITEM_GAP, function (_ref3) {
|
|
9911
|
+
var tabsOverflow = _ref3.tabsOverflow;
|
|
9912
|
+
return tabsOverflow ? 'start' : 'center';
|
|
9913
|
+
}, devices.mobileAndTablet, devices.mobile, function (_ref4) {
|
|
9914
|
+
var tabsOverflow = _ref4.tabsOverflow,
|
|
9915
|
+
hasTwoArrows = _ref4.hasTwoArrows;
|
|
9916
|
+
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
9917
|
+
});
|
|
9918
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.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) {
|
|
9919
|
+
var fullWidth = _ref5.fullWidth;
|
|
9920
|
+
return fullWidth ? '74px' : '46px';
|
|
9921
|
+
});
|
|
9922
|
+
var ArrowWrapper = /*#__PURE__*/styled__default.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"])));
|
|
9923
|
+
|
|
9924
|
+
var _excluded$o = ["id", "text"];
|
|
9925
|
+
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
9926
|
+
var tabs = _ref.tabs,
|
|
9927
|
+
onTabClick = _ref.onTabClick,
|
|
9928
|
+
activeTab = _ref.activeTab,
|
|
9929
|
+
absolutePositionParams = _ref.absolutePositionParams,
|
|
9930
|
+
_ref$bottomBorder = _ref.bottomBorder,
|
|
9931
|
+
bottomBorder = _ref$bottomBorder === void 0 ? false : _ref$bottomBorder;
|
|
9932
|
+
var tabListRef = React.useRef(null);
|
|
9933
|
+
var wrapperRef = React.useRef(null);
|
|
9934
|
+
var _useState = React.useState(activeTab || ''),
|
|
9935
|
+
selectedItem = _useState[0],
|
|
9936
|
+
setSelectedItem = _useState[1];
|
|
9937
|
+
var _useState2 = React.useState(false),
|
|
9938
|
+
tabsOverflow = _useState2[0],
|
|
9939
|
+
setTabsOverflow = _useState2[1];
|
|
9940
|
+
var _useState3 = React.useState(false),
|
|
9941
|
+
canScrollToLeft = _useState3[0],
|
|
9942
|
+
setCanScrollToLeft = _useState3[1];
|
|
9943
|
+
var _useState4 = React.useState(tabsOverflow),
|
|
9944
|
+
canScrollToRight = _useState4[0],
|
|
9945
|
+
setCanScrollToRight = _useState4[1];
|
|
9946
|
+
var timer = null;
|
|
9947
|
+
var hasTwoArrows = canScrollToRight && canScrollToLeft;
|
|
9948
|
+
var isSelectedItem = function isSelectedItem(id) {
|
|
9949
|
+
return id === selectedItem;
|
|
9950
|
+
};
|
|
9951
|
+
var onClicktab = function onClicktab(e, id) {
|
|
9952
|
+
if (onTabClick) {
|
|
9953
|
+
onTabClick(e, id);
|
|
9954
|
+
}
|
|
9955
|
+
setSelectedItem(id);
|
|
9956
|
+
};
|
|
9957
|
+
var getScrollWidth = function getScrollWidth() {
|
|
9958
|
+
var width = 0;
|
|
9959
|
+
var selectedItemIndex = tabs.findIndex(function (el) {
|
|
9960
|
+
return el.id === selectedItem;
|
|
9961
|
+
});
|
|
9962
|
+
var tabLinks = document.getElementsByClassName('anchor-tab-bar-tablink');
|
|
9963
|
+
for (var i = 0; i < selectedItemIndex; ++i) {
|
|
9964
|
+
width += tabLinks[i].scrollWidth + LIST_ITEM_GAP;
|
|
9965
|
+
}
|
|
9966
|
+
return width;
|
|
9967
|
+
};
|
|
9968
|
+
// eslint-disable-next-line default-param-last
|
|
9969
|
+
var changeWrapperVisibility = function changeWrapperVisibility(showWrapper, topOffset) {
|
|
9970
|
+
if (showWrapper === void 0) {
|
|
9971
|
+
showWrapper = false;
|
|
9972
|
+
}
|
|
9973
|
+
var wrapperEl = wrapperRef.current;
|
|
9974
|
+
wrapperEl.style.position = 'absolute';
|
|
9975
|
+
wrapperEl.style.visibility = showWrapper && topOffset !== undefined ? 'visible' : 'hidden';
|
|
9976
|
+
if (showWrapper && topOffset !== undefined) wrapperEl.style.top = topOffset + "px";
|
|
9977
|
+
};
|
|
9978
|
+
var handleScrollForAbsolutePosition = function handleScrollForAbsolutePosition() {
|
|
9979
|
+
var _absolutePositionPara = absolutePositionParams.navigationHeight,
|
|
9980
|
+
navigationHeight = _absolutePositionPara === void 0 ? 0 : _absolutePositionPara,
|
|
9981
|
+
_absolutePositionPara2 = absolutePositionParams.topOffset,
|
|
9982
|
+
topOffset = _absolutePositionPara2 === void 0 ? 0 : _absolutePositionPara2;
|
|
9983
|
+
if (wrapperRef.current && window.pageYOffset > topOffset + navigationHeight) {
|
|
9984
|
+
changeWrapperVisibility();
|
|
9985
|
+
} else if (wrapperRef.current && window.pageYOffset < topOffset + navigationHeight) {
|
|
9986
|
+
changeWrapperVisibility(true, topOffset);
|
|
9987
|
+
}
|
|
9988
|
+
if (timer !== null) clearTimeout(timer);
|
|
9989
|
+
timer = setTimeout(function () {
|
|
9990
|
+
if (window.pageYOffset > topOffset + navigationHeight && wrapperRef.current) {
|
|
9991
|
+
changeWrapperVisibility(true, window.pageYOffset - navigationHeight);
|
|
9992
|
+
}
|
|
9993
|
+
}, 300);
|
|
9994
|
+
};
|
|
9995
|
+
// We use this behavior only on iOS devices because there is a known issue that
|
|
9996
|
+
// sticky elements lose their stickiness when a keyboard appears on the screen
|
|
9997
|
+
React.useEffect(function () {
|
|
9998
|
+
if (absolutePositionParams) {
|
|
9999
|
+
changeWrapperVisibility(true, absolutePositionParams.topOffset);
|
|
10000
|
+
document.addEventListener('scroll', handleScrollForAbsolutePosition);
|
|
10001
|
+
return function () {
|
|
10002
|
+
document.removeEventListener('scroll', handleScrollForAbsolutePosition);
|
|
10003
|
+
};
|
|
10004
|
+
}
|
|
10005
|
+
return undefined;
|
|
10006
|
+
}, []);
|
|
10007
|
+
React.useEffect(function () {
|
|
10008
|
+
setTimeout(function () {
|
|
10009
|
+
if (tabListRef.current) tabListRef.current.scrollLeft += getScrollWidth();
|
|
10010
|
+
}, 500);
|
|
10011
|
+
}, []);
|
|
10012
|
+
React.useEffect(function () {
|
|
10013
|
+
var _tabListRef$current, _tabListRef$current2;
|
|
10014
|
+
var tabsIsOverflowed = (((_tabListRef$current = tabListRef.current) == null ? void 0 : _tabListRef$current.scrollWidth) || 0) > (((_tabListRef$current2 = tabListRef.current) == null ? void 0 : _tabListRef$current2.clientWidth) || 0);
|
|
10015
|
+
setTabsOverflow(tabsIsOverflowed);
|
|
10016
|
+
setCanScrollToRight(tabsIsOverflowed);
|
|
10017
|
+
}, [tabListRef]);
|
|
10018
|
+
React.useEffect(function () {
|
|
10019
|
+
var scrollTriggerCheck = function scrollTriggerCheck() {
|
|
10020
|
+
var elementGap = 100;
|
|
10021
|
+
var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
|
|
10022
|
+
var targetSectionElement = document.getElementById(item.id);
|
|
10023
|
+
if (!targetSectionElement) return false;
|
|
10024
|
+
var topDiff = (targetSectionElement == null ? void 0 : targetSectionElement.getBoundingClientRect().top) - elementGap;
|
|
10025
|
+
return selectedItem !== item.id && topDiff > 0 && topDiff < elementGap;
|
|
10026
|
+
});
|
|
10027
|
+
if (window.scrollY === 0) {
|
|
10028
|
+
setSelectedItem(onTabClick ? selectedItem : '');
|
|
10029
|
+
} else if (reachedItem) {
|
|
10030
|
+
var _ref2 = (tabListRef == null ? void 0 : tabListRef.current) || {},
|
|
10031
|
+
_ref2$scrollLeft = _ref2.scrollLeft,
|
|
10032
|
+
scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
|
|
10033
|
+
_ref2$clientWidth = _ref2.clientWidth,
|
|
10034
|
+
clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
|
|
10035
|
+
var tabLinkElement = document.getElementById("tablink-" + reachedItem.id) || {
|
|
10036
|
+
offsetLeft: 0,
|
|
10037
|
+
offsetWidth: 0
|
|
10038
|
+
};
|
|
10039
|
+
var offsetLeft = tabLinkElement.offsetLeft,
|
|
10040
|
+
offsetWidth = tabLinkElement.offsetWidth;
|
|
10041
|
+
var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
|
|
10042
|
+
if (!isInView && tabListRef != null && tabListRef.current) {
|
|
10043
|
+
tabListRef.current.scrollLeft = offsetLeft;
|
|
10044
|
+
}
|
|
10045
|
+
setSelectedItem(reachedItem.id);
|
|
10046
|
+
}
|
|
10047
|
+
};
|
|
10048
|
+
document.addEventListener('scroll', scrollTriggerCheck);
|
|
10049
|
+
return function () {
|
|
10050
|
+
return document.removeEventListener('scroll', scrollTriggerCheck);
|
|
10051
|
+
};
|
|
10052
|
+
}, [tabs, selectedItem, tabListRef]);
|
|
10053
|
+
var tabsColumnStart;
|
|
10054
|
+
if (tabsOverflow) {
|
|
10055
|
+
tabsColumnStart = canScrollToLeft ? 1 : 2;
|
|
10056
|
+
} else {
|
|
10057
|
+
tabsColumnStart = 3;
|
|
10058
|
+
}
|
|
10059
|
+
var tabsColumnSpan;
|
|
10060
|
+
if (tabsOverflow) {
|
|
10061
|
+
tabsColumnSpan = canScrollToLeft ? 15 : 14;
|
|
10062
|
+
} else {
|
|
10063
|
+
tabsColumnSpan = 12;
|
|
10064
|
+
}
|
|
10065
|
+
var scrollToRight = function scrollToRight() {
|
|
10066
|
+
if (tabListRef.current) {
|
|
10067
|
+
var scroll = tabListRef.current.scrollLeft;
|
|
10068
|
+
var newScroll = Math.min(tabListRef.current.clientWidth, tabListRef.current.scrollWidth - scroll);
|
|
10069
|
+
if (scroll - newScroll < LIST_ITEM_GAP) {
|
|
10070
|
+
tabListRef.current.scrollLeft += newScroll + LIST_ITEM_GAP;
|
|
10071
|
+
return;
|
|
10072
|
+
}
|
|
10073
|
+
tabListRef.current.scrollLeft += newScroll;
|
|
10074
|
+
}
|
|
10075
|
+
};
|
|
10076
|
+
var scrollToLeft = function scrollToLeft() {
|
|
10077
|
+
if (tabListRef.current) {
|
|
10078
|
+
var scroll = tabListRef.current.scrollLeft;
|
|
10079
|
+
var newScroll = Math.max(0, scroll - tabListRef.current.clientWidth);
|
|
10080
|
+
if (newScroll < LIST_ITEM_GAP) {
|
|
10081
|
+
tabListRef.current.scrollLeft = newScroll - LIST_ITEM_GAP;
|
|
10082
|
+
return;
|
|
10083
|
+
}
|
|
10084
|
+
tabListRef.current.scrollLeft = newScroll;
|
|
10085
|
+
}
|
|
10086
|
+
};
|
|
10087
|
+
var onTabsScroll = function onTabsScroll() {
|
|
10088
|
+
var _ref3 = (tabListRef == null ? void 0 : tabListRef.current) || {},
|
|
10089
|
+
_ref3$scrollLeft = _ref3.scrollLeft,
|
|
10090
|
+
scrollLeft = _ref3$scrollLeft === void 0 ? 0 : _ref3$scrollLeft,
|
|
10091
|
+
_ref3$clientWidth = _ref3.clientWidth,
|
|
10092
|
+
clientWidth = _ref3$clientWidth === void 0 ? 0 : _ref3$clientWidth,
|
|
10093
|
+
_ref3$scrollWidth = _ref3.scrollWidth,
|
|
10094
|
+
scrollWidth = _ref3$scrollWidth === void 0 ? 0 : _ref3$scrollWidth;
|
|
10095
|
+
setCanScrollToLeft(scrollLeft > LIST_ITEM_GAP);
|
|
10096
|
+
setCanScrollToRight(scrollLeft + clientWidth + LIST_ITEM_GAP < scrollWidth);
|
|
10097
|
+
};
|
|
10098
|
+
return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, {
|
|
10099
|
+
bottomBorder: bottomBorder,
|
|
10100
|
+
ref: wrapperRef,
|
|
10101
|
+
id: "AnchorTabbarWrapper"
|
|
10102
|
+
}, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
10103
|
+
columnStartDesktop: tabsColumnStart,
|
|
10104
|
+
columnSpanDesktop: tabsColumnSpan,
|
|
10105
|
+
columnStartDevice: 2,
|
|
10106
|
+
columnSpanDevice: 12
|
|
10107
|
+
}, /*#__PURE__*/React__default.createElement(TabsWrapper, {
|
|
10108
|
+
"data-testid": "anchor-tabs"
|
|
10109
|
+
}, /*#__PURE__*/React__default.createElement(TabsList, {
|
|
10110
|
+
hasTwoArrows: hasTwoArrows,
|
|
10111
|
+
ref: tabListRef,
|
|
10112
|
+
tabsOverflow: tabsOverflow,
|
|
10113
|
+
onScroll: onTabsScroll
|
|
10114
|
+
}, tabs.map(function (_ref4) {
|
|
10115
|
+
var id = _ref4.id,
|
|
10116
|
+
text = _ref4.text,
|
|
10117
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$o);
|
|
10118
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
10119
|
+
key: id
|
|
10120
|
+
}, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
|
|
10121
|
+
selected: isSelectedItem(id),
|
|
10122
|
+
className: "anchor-tab-bar-tablink",
|
|
10123
|
+
id: "tablink-" + id,
|
|
10124
|
+
onClick: function onClick(e) {
|
|
10125
|
+
return onClicktab(e, id);
|
|
10126
|
+
},
|
|
10127
|
+
tabIndex: 0
|
|
10128
|
+
}, rest), text));
|
|
10129
|
+
})), tabsOverflow ? (/*#__PURE__*/React__default.createElement(ArrowsContainer, {
|
|
10130
|
+
fullWidth: hasTwoArrows
|
|
10131
|
+
}, canScrollToLeft ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
10132
|
+
onClick: scrollToLeft
|
|
10133
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10134
|
+
iconName: "Arrow",
|
|
10135
|
+
direction: "reverse"
|
|
10136
|
+
}))) : null, canScrollToRight ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
|
|
10137
|
+
onClick: scrollToRight
|
|
10138
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10139
|
+
iconName: "Arrow"
|
|
10140
|
+
}))) : null)) : null))));
|
|
10141
|
+
};
|
|
10142
|
+
|
|
10143
|
+
var _templateObject$1g, _templateObject2$W, _templateObject3$L, _templateObject4$C, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$7, _templateObject10$7;
|
|
10144
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.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) {
|
|
10145
|
+
var sticky = _ref.sticky;
|
|
10146
|
+
return sticky ? 'sticky' : 'initial';
|
|
10147
|
+
}, zIndexes.anchor);
|
|
10148
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
10149
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.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) {
|
|
10150
|
+
var title = _ref2.title;
|
|
10151
|
+
return title ? 'row' : 'row-reverse';
|
|
10152
|
+
}, devices.tablet, devices.mobile);
|
|
10153
|
+
var AnchorTitle = /*#__PURE__*/styled__default.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);
|
|
10154
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.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);
|
|
10155
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
10156
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(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) {
|
|
10157
|
+
var theme = _ref3.theme;
|
|
10158
|
+
return theme.colors.primaryButtonReverseBg;
|
|
10159
|
+
}, function (_ref4) {
|
|
10160
|
+
var theme = _ref4.theme;
|
|
10161
|
+
return theme.colors.primaryButtonReverseBg;
|
|
10162
|
+
}, function (_ref5) {
|
|
10163
|
+
var theme = _ref5.theme;
|
|
10164
|
+
return theme.colors.primaryButtonReverse;
|
|
10165
|
+
}, function (_ref6) {
|
|
10166
|
+
var theme = _ref6.theme;
|
|
10167
|
+
return theme.colors.primaryButtonReverse;
|
|
10168
|
+
});
|
|
10169
|
+
var MessageWrapper = /*#__PURE__*/styled__default.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);
|
|
10170
|
+
var MessageWrapperMobile = /*#__PURE__*/styled__default.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);
|
|
10171
|
+
|
|
10172
|
+
var _excluded$p = ["text"],
|
|
10173
|
+
_excluded2$3 = ["text"];
|
|
10174
|
+
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
10175
|
+
var title = _ref.title,
|
|
10176
|
+
links = _ref.links,
|
|
10177
|
+
_ref$sticky = _ref.sticky,
|
|
10178
|
+
sticky = _ref$sticky === void 0 ? false : _ref$sticky,
|
|
10179
|
+
message = _ref.message;
|
|
10180
|
+
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
10181
|
+
primaryButtonText = _ref2.text,
|
|
10182
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
|
|
10183
|
+
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
10184
|
+
secondaryButtonText = _ref3.text,
|
|
10185
|
+
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
|
|
10186
|
+
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
10187
|
+
sticky: sticky
|
|
10188
|
+
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
10189
|
+
title: title
|
|
10190
|
+
}, title ? (/*#__PURE__*/React__default.createElement(AnchorTitle, {
|
|
10191
|
+
"data-testid": "anchor-title"
|
|
10192
|
+
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
10193
|
+
level: 5
|
|
10194
|
+
}, title))) : null, links != null && links[0] ? (/*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
|
|
10195
|
+
"data-testid": "anchor-ctas"
|
|
10196
|
+
}, /*#__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, {
|
|
10197
|
+
level: 6
|
|
10198
|
+
}, 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, {
|
|
10199
|
+
level: 6
|
|
10200
|
+
}, message))));
|
|
10201
|
+
};
|
|
10202
|
+
|
|
10203
|
+
var _templateObject$1h;
|
|
10204
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.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);
|
|
10205
|
+
|
|
10206
|
+
var UpsellCards = function UpsellCards(_ref) {
|
|
10207
|
+
var upsellCards = _ref.upsellCards;
|
|
10208
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
|
|
10209
|
+
return /*#__PURE__*/React__default.createElement(UpsellCard, {
|
|
10210
|
+
key: "upsell-card-" + index,
|
|
10211
|
+
title: card.title,
|
|
10212
|
+
subTitle: card.subTitle,
|
|
10213
|
+
price: card.price,
|
|
10214
|
+
promoPrice: card.promoPrice,
|
|
10215
|
+
flag: card.flag,
|
|
10216
|
+
offerTexts: card.offerTexts,
|
|
10217
|
+
link: card.link,
|
|
10218
|
+
theme: card.theme
|
|
10219
|
+
});
|
|
10220
|
+
}));
|
|
10221
|
+
};
|
|
10222
|
+
|
|
10223
|
+
var _templateObject$1i, _templateObject2$X, _templateObject3$M;
|
|
10224
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.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) {
|
|
10225
|
+
var theme = _ref.theme;
|
|
10226
|
+
return theme.colors.primary;
|
|
10227
|
+
}, devices.mobile, devices.tablet);
|
|
10228
|
+
var TitleContainer$4 = /*#__PURE__*/styled__default.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);
|
|
10229
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.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);
|
|
10230
|
+
|
|
10177
10231
|
var UpsellSection = function UpsellSection(_ref) {
|
|
10178
10232
|
var title = _ref.title,
|
|
10179
10233
|
richText = _ref.richText,
|
|
@@ -10195,9 +10249,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
10195
10249
|
columnSpanDevice: 12,
|
|
10196
10250
|
columnStartSmallDevice: 1,
|
|
10197
10251
|
columnSpanSmallDevice: 14
|
|
10198
|
-
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$
|
|
10252
|
+
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$4, null, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10199
10253
|
level: 4
|
|
10200
|
-
}, title)), /*#__PURE__*/React__default.createElement(TextContainer, null, /*#__PURE__*/React__default.createElement(TextOnly, {
|
|
10254
|
+
}, title)), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextOnly, {
|
|
10201
10255
|
text: richText != null ? richText : '',
|
|
10202
10256
|
columnStartDesktop: 1,
|
|
10203
10257
|
columnSpanDesktop: 14,
|
|
@@ -10257,9 +10311,9 @@ var LiveChat = function LiveChat() {
|
|
|
10257
10311
|
});
|
|
10258
10312
|
};
|
|
10259
10313
|
|
|
10260
|
-
var _templateObject$1j, _templateObject2$
|
|
10314
|
+
var _templateObject$1j, _templateObject2$Y;
|
|
10261
10315
|
var StickyBarWrapper = /*#__PURE__*/styled__default.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);
|
|
10262
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
10316
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(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) {
|
|
10263
10317
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
10264
10318
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
10265
10319
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -10287,11 +10341,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
10287
10341
|
}, children)));
|
|
10288
10342
|
};
|
|
10289
10343
|
|
|
10290
|
-
var _templateObject$1k, _templateObject2$
|
|
10344
|
+
var _templateObject$1k, _templateObject2$Z, _templateObject3$N, _templateObject4$D;
|
|
10291
10345
|
var InnerModal = /*#__PURE__*/styled__default.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);
|
|
10292
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
10293
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10294
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
10346
|
+
var CloseButton = /*#__PURE__*/styled__default.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);
|
|
10347
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10348
|
+
var Overlay = /*#__PURE__*/styled__default(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"])));
|
|
10295
10349
|
|
|
10296
10350
|
var _excluded$q = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
10297
10351
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -10407,7 +10461,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
10407
10461
|
};
|
|
10408
10462
|
|
|
10409
10463
|
var _templateObject$1l;
|
|
10410
|
-
var GlobalStyles = /*#__PURE__*/styled.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) {
|
|
10464
|
+
var GlobalStyles = /*#__PURE__*/styled.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) {
|
|
10411
10465
|
var theme = _ref.theme;
|
|
10412
10466
|
return theme.colors.primary;
|
|
10413
10467
|
}, function (_ref2) {
|
|
@@ -11346,6 +11400,12 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1l || (
|
|
|
11346
11400
|
}, function (_ref313) {
|
|
11347
11401
|
var theme = _ref313.theme;
|
|
11348
11402
|
return theme.fonts.tablet.sizes.body[1];
|
|
11403
|
+
}, function (_ref314) {
|
|
11404
|
+
var theme = _ref314.theme;
|
|
11405
|
+
return theme.footer.tablet.paddingTop;
|
|
11406
|
+
}, function (_ref315) {
|
|
11407
|
+
var theme = _ref315.theme;
|
|
11408
|
+
return theme.footer.tablet.paddingBottom;
|
|
11349
11409
|
}, devices.desktop, devices.largeDesktop);
|
|
11350
11410
|
|
|
11351
11411
|
exports.Accordion = Accordion;
|