@royaloperahouse/harmonic 0.18.2-b → 0.18.2-d
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/dist/components/atoms/Buttons/Auxiliary/AuxiliaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Buttons/Button.d.ts +10 -3
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.d.ts +17 -3
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Buttons/Secondary/SecondaryButton.style.d.ts +9 -1
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.d.ts +4 -0
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.style.d.ts +5 -0
- package/dist/components/atoms/VideoControlsImpact/index.d.ts +2 -0
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/HotFilters/HotFilters.style.d.ts +16 -1
- package/dist/components/molecules/PageHeading/Compact/Compact.style.d.ts +16 -1
- package/dist/components/molecules/PageHeading/Impact/Impact.style.d.ts +302 -9
- package/dist/components/molecules/index.d.ts +1 -2
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +16 -1
- package/dist/harmonic.cjs.development.js +446 -410
- 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 +447 -410
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/impactHeader.d.ts +14 -32
- package/dist/types/types.d.ts +6 -0
- package/package.json +1 -2
|
@@ -2551,7 +2551,7 @@ var Icon = /*#__PURE__*/React.memo(function (props) {
|
|
|
2551
2551
|
Icon.displayName = 'Icon';
|
|
2552
2552
|
|
|
2553
2553
|
var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
|
|
2554
|
-
var Button = function
|
|
2554
|
+
var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
2555
2555
|
var children = _ref.children,
|
|
2556
2556
|
iconName = _ref.iconName,
|
|
2557
2557
|
iconDirection = _ref.iconDirection,
|
|
@@ -2561,7 +2561,7 @@ var Button = function Button(_ref) {
|
|
|
2561
2561
|
href = _ref.href,
|
|
2562
2562
|
onClick = _ref.onClick,
|
|
2563
2563
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
2564
|
-
var truncatedString = children.substring(0, 30);
|
|
2564
|
+
var truncatedString = children == null ? void 0 : children.substring(0, 30);
|
|
2565
2565
|
var handleClick = React.useCallback(function (e) {
|
|
2566
2566
|
if (!href) e.preventDefault();
|
|
2567
2567
|
onClick == null || onClick(e);
|
|
@@ -2573,7 +2573,8 @@ var Button = function Button(_ref) {
|
|
|
2573
2573
|
href: href != null ? href : '#',
|
|
2574
2574
|
onClick: handleClick,
|
|
2575
2575
|
iconName: iconName,
|
|
2576
|
-
className: className
|
|
2576
|
+
className: className,
|
|
2577
|
+
ref: ref
|
|
2577
2578
|
}), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
|
|
2578
2579
|
"data-testid": "button-icon",
|
|
2579
2580
|
className: iconClassName
|
|
@@ -2584,7 +2585,8 @@ var Button = function Button(_ref) {
|
|
|
2584
2585
|
}))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
|
|
2585
2586
|
color: "inherit"
|
|
2586
2587
|
}, truncatedString));
|
|
2587
|
-
};
|
|
2588
|
+
});
|
|
2589
|
+
Button.displayName = 'Button';
|
|
2588
2590
|
|
|
2589
2591
|
var getPointerEvents = function getPointerEvents(_ref) {
|
|
2590
2592
|
var disabled = _ref.disabled;
|
|
@@ -2649,7 +2651,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
|
2649
2651
|
var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
2650
2652
|
|
|
2651
2653
|
var _excluded$3 = ["children", "disabled", "className"];
|
|
2652
|
-
var PrimaryButton = function
|
|
2654
|
+
var PrimaryButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
2653
2655
|
var children = _ref.children,
|
|
2654
2656
|
disabled = _ref.disabled,
|
|
2655
2657
|
className = _ref.className,
|
|
@@ -2664,6 +2666,7 @@ var PrimaryButton = function PrimaryButton(_ref) {
|
|
|
2664
2666
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
|
|
2665
2667
|
id: disabledButtonDescriptionId
|
|
2666
2668
|
}, disabledButtonDescription), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2669
|
+
ref: ref,
|
|
2667
2670
|
disabled: true,
|
|
2668
2671
|
"aria-disabled": "true",
|
|
2669
2672
|
role: "button",
|
|
@@ -2673,10 +2676,13 @@ var PrimaryButton = function PrimaryButton(_ref) {
|
|
|
2673
2676
|
onClick: handleClick
|
|
2674
2677
|
}), children));
|
|
2675
2678
|
}
|
|
2676
|
-
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2679
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2680
|
+
ref: ref
|
|
2681
|
+
}, props, {
|
|
2677
2682
|
className: className
|
|
2678
2683
|
}), children);
|
|
2679
|
-
};
|
|
2684
|
+
});
|
|
2685
|
+
PrimaryButton.displayName = 'PrimaryButton';
|
|
2680
2686
|
|
|
2681
2687
|
var COLORS$1 = {
|
|
2682
2688
|
disabled: 'var(--color-state-disabled)',
|
|
@@ -7053,91 +7059,274 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7053
7059
|
};
|
|
7054
7060
|
|
|
7055
7061
|
var _templateObject$P, _templateObject2$D, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
|
|
7056
|
-
var
|
|
7057
|
-
var
|
|
7058
|
-
var
|
|
7059
|
-
|
|
7060
|
-
|
|
7061
|
-
|
|
7062
|
-
|
|
7063
|
-
var
|
|
7062
|
+
var ImpactHeaderWrapper = /*#__PURE__*/styled__default.header(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-black);\n padding: 36px 0;\n\n @media ", " {\n padding: 21px 0;\n }\n"])), devices.mobile);
|
|
7063
|
+
var ImpactTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: grid;\n grid-template-columns: ", ";\n padding: 0 50px;\n\n @media ", " {\n padding: 0 50px;\n }\n\n @media ", " {\n padding: 0 20px;\n grid-template-columns: ", ";\n }\n"])), function (_ref) {
|
|
7064
|
+
var hasButton = _ref.hasButton,
|
|
7065
|
+
sponsorPresent = _ref.sponsorPresent;
|
|
7066
|
+
if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
|
|
7067
|
+
return '1fr';
|
|
7068
|
+
}, devices.tablet, devices.mobile, function (_ref2) {
|
|
7069
|
+
var sponsorPresent = _ref2.sponsorPresent;
|
|
7070
|
+
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7071
|
+
});
|
|
7072
|
+
var TitleButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7073
|
+
var sponsorWidth = _ref3.sponsorWidth;
|
|
7074
|
+
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7075
|
+
});
|
|
7076
|
+
var TitleButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n position: static;\n margin-right: 0;\n }\n"])), devices.mobile);
|
|
7077
|
+
var MobileButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 0 20px 16px 20px;\n"])));
|
|
7078
|
+
var ImpactTitle = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n align-self: center;\n grid-column: ", ";\n min-width: 0;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 2;\n max-height: calc(48px * 2);\n text-align: center;\n padding-bottom: 2px;\n\n @media ", " {\n grid-column: 1;\n -webkit-line-clamp: 4;\n max-height: calc(34px * 4);\n text-align: left;\n }\n"])), function (_ref4) {
|
|
7079
|
+
var hasColumns = _ref4.hasColumns;
|
|
7080
|
+
return hasColumns ? '3' : '1';
|
|
7081
|
+
}, devices.mobile);
|
|
7082
|
+
var ImpactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n aspect-ratio: 21 / 9;\n height: auto;\n &::before {\n content: '';\n display: block;\n padding-top: calc(9 / 21 * 100%);\n }\n\n > picture,\n img,\n video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n img {\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: cover;\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: cover;\n }\n }\n @media ", " {\n aspect-ratio: 1 / 1;\n &::before {\n padding-top: 100%;\n }\n max-height: 100vh;\n img {\n object-fit: cover;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
7083
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 5;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n z-index: ", ";\n min-width: ", ";\n\n @media ", " {\n grid-column: 3;\n justify-content: flex-start;\n min-width: unset;\n }\n"])), zIndexes.sponsorship, function (_ref5) {
|
|
7084
|
+
var buttonWidth = _ref5.buttonWidth;
|
|
7085
|
+
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7086
|
+
}, devices.mobile);
|
|
7087
|
+
|
|
7088
|
+
var _templateObject$Q, _templateObject2$E, _templateObject3$t, _templateObject4$p;
|
|
7089
|
+
var VideoPlayButton$1 = /*#__PURE__*/styled__default.button(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n background-color: var(--color-base-transparent);\n border: none;\n cursor: pointer;\n\n @media ", " {\n width: 60px;\n height: 60px;\n }\n"])), devices.mobile);
|
|
7090
|
+
var VideoControlsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
7091
|
+
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 20px;\n\n @media ", " {\n margin: 20px 4px;\n }\n"])), devices.mobile);
|
|
7092
|
+
var LeftWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7093
|
+
|
|
7094
|
+
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
7095
|
+
var videoElementId = _ref.videoElementId,
|
|
7096
|
+
_ref$loop = _ref.loop,
|
|
7097
|
+
loop = _ref$loop === void 0 ? false : _ref$loop;
|
|
7098
|
+
var _React$useState = React__default.useState(false),
|
|
7099
|
+
playing = _React$useState[0],
|
|
7100
|
+
setPlaying = _React$useState[1];
|
|
7101
|
+
var getVideoElement = function getVideoElement() {
|
|
7102
|
+
return document.querySelector("#" + videoElementId);
|
|
7103
|
+
};
|
|
7104
|
+
React__default.useEffect(function () {
|
|
7105
|
+
var video = getVideoElement();
|
|
7106
|
+
if (video) {
|
|
7107
|
+
video.loop = loop;
|
|
7108
|
+
}
|
|
7109
|
+
}, [loop]);
|
|
7110
|
+
var handlePlay = React__default.useCallback(function () {
|
|
7111
|
+
var video = getVideoElement();
|
|
7112
|
+
if (!video) return;
|
|
7113
|
+
if (playing) {
|
|
7114
|
+
video.pause();
|
|
7115
|
+
setPlaying(false);
|
|
7116
|
+
} else {
|
|
7117
|
+
video == null || video.play();
|
|
7118
|
+
setPlaying(true);
|
|
7119
|
+
}
|
|
7120
|
+
}, [playing]);
|
|
7121
|
+
return /*#__PURE__*/React__default.createElement(VideoControlsWrapper$1, {
|
|
7122
|
+
className: "video-controls-container"
|
|
7123
|
+
}, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper$1, null, /*#__PURE__*/React__default.createElement(LeftWrapper$1, null, /*#__PURE__*/React__default.createElement(VideoPlayButton$1, {
|
|
7124
|
+
id: "play",
|
|
7125
|
+
onClick: handlePlay,
|
|
7126
|
+
className: "video-play-button",
|
|
7127
|
+
"data-testid": "video-play-button",
|
|
7128
|
+
"aria-label": !playing ? 'Play' : 'Pause'
|
|
7129
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7130
|
+
iconName: !playing ? 'Play' : 'Pause',
|
|
7131
|
+
color: "white"
|
|
7132
|
+
})))));
|
|
7133
|
+
};
|
|
7064
7134
|
|
|
7065
7135
|
var _excluded$i = ["text"];
|
|
7066
|
-
var
|
|
7067
|
-
|
|
7068
|
-
|
|
7069
|
-
|
|
7070
|
-
|
|
7071
|
-
|
|
7072
|
-
|
|
7073
|
-
|
|
7074
|
-
|
|
7075
|
-
|
|
7076
|
-
|
|
7077
|
-
|
|
7078
|
-
|
|
7079
|
-
|
|
7080
|
-
|
|
7081
|
-
|
|
7082
|
-
|
|
7083
|
-
|
|
7084
|
-
|
|
7085
|
-
|
|
7086
|
-
|
|
7087
|
-
|
|
7088
|
-
|
|
7089
|
-
|
|
7090
|
-
|
|
7091
|
-
|
|
7092
|
-
|
|
7136
|
+
var CHAR_LIMIT = 100;
|
|
7137
|
+
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7138
|
+
var mobileVideo = video.mobile || video.desktop;
|
|
7139
|
+
var desktopVideo = video.desktop || video.mobile;
|
|
7140
|
+
var mobilePoster = poster.mobile || poster.desktop;
|
|
7141
|
+
var desktopPoster = poster.desktop || poster.mobile;
|
|
7142
|
+
var _useState = React.useState(desktopPoster),
|
|
7143
|
+
posterUrl = _useState[0],
|
|
7144
|
+
setPoster = _useState[1];
|
|
7145
|
+
var _useState2 = React.useState(desktopVideo),
|
|
7146
|
+
videoUrl = _useState2[0],
|
|
7147
|
+
setVideoUrl = _useState2[1];
|
|
7148
|
+
var isMobile = useMobile();
|
|
7149
|
+
React.useEffect(function () {
|
|
7150
|
+
setPoster(isMobile ? mobilePoster : desktopPoster);
|
|
7151
|
+
setVideoUrl(isMobile ? mobileVideo : desktopVideo);
|
|
7152
|
+
}, [isMobile]);
|
|
7153
|
+
return {
|
|
7154
|
+
posterUrl: posterUrl,
|
|
7155
|
+
videoUrl: videoUrl
|
|
7156
|
+
};
|
|
7157
|
+
};
|
|
7158
|
+
var VideoWithControls = function VideoWithControls(_ref) {
|
|
7159
|
+
var video = _ref.video,
|
|
7160
|
+
poster = _ref.poster;
|
|
7161
|
+
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
7162
|
+
posterUrl = _useResponsiveVideo.posterUrl,
|
|
7163
|
+
videoUrl = _useResponsiveVideo.videoUrl;
|
|
7164
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
|
|
7165
|
+
id: video.elementId,
|
|
7166
|
+
width: "100%",
|
|
7167
|
+
height: "100%",
|
|
7168
|
+
poster: posterUrl,
|
|
7169
|
+
src: videoUrl,
|
|
7170
|
+
"data-testid": "impact-video",
|
|
7171
|
+
playsInline: true
|
|
7172
|
+
}, /*#__PURE__*/React__default.createElement("source", {
|
|
7173
|
+
src: videoUrl
|
|
7174
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7175
|
+
src: posterUrl,
|
|
7176
|
+
alt: poster.alt,
|
|
7177
|
+
"data-testid": "impact-image"
|
|
7178
|
+
})), /*#__PURE__*/React__default.createElement(VideoControlsImpact, {
|
|
7179
|
+
loop: true,
|
|
7180
|
+
videoElementId: video.elementId
|
|
7181
|
+
}));
|
|
7182
|
+
};
|
|
7183
|
+
var ImpactHeaderImage = function ImpactHeaderImage(_ref2) {
|
|
7184
|
+
var mobile = _ref2.mobile,
|
|
7185
|
+
desktop = _ref2.desktop,
|
|
7186
|
+
alt = _ref2.alt;
|
|
7187
|
+
return /*#__PURE__*/React__default.createElement("picture", {
|
|
7093
7188
|
"data-testid": "impact-picture"
|
|
7094
|
-
},
|
|
7095
|
-
srcSet:
|
|
7189
|
+
}, mobile && /*#__PURE__*/React__default.createElement("source", {
|
|
7190
|
+
srcSet: mobile,
|
|
7096
7191
|
media: "" + devices.mobile,
|
|
7097
7192
|
"data-testid": "impact-mobile-image-source"
|
|
7098
|
-
})
|
|
7099
|
-
srcSet:
|
|
7193
|
+
}), /*#__PURE__*/React__default.createElement("source", {
|
|
7194
|
+
srcSet: desktop,
|
|
7100
7195
|
media: "" + devices.desktop,
|
|
7101
7196
|
"data-testid": "impact-desktop-image-source"
|
|
7102
7197
|
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7103
|
-
src:
|
|
7104
|
-
alt:
|
|
7198
|
+
src: desktop,
|
|
7199
|
+
alt: alt,
|
|
7105
7200
|
"data-testid": "impact-image"
|
|
7106
|
-
}))
|
|
7107
|
-
|
|
7108
|
-
|
|
7109
|
-
|
|
7110
|
-
|
|
7111
|
-
|
|
7112
|
-
|
|
7113
|
-
}
|
|
7201
|
+
}));
|
|
7202
|
+
};
|
|
7203
|
+
var ImpactHeaderVideo = function ImpactHeaderVideo(_ref3) {
|
|
7204
|
+
var video = _ref3.video,
|
|
7205
|
+
poster = _ref3.poster;
|
|
7206
|
+
if (!video.desktop && !video.mobile) {
|
|
7207
|
+
return /*#__PURE__*/React__default.createElement(ImpactHeaderImage, Object.assign({}, poster));
|
|
7208
|
+
}
|
|
7209
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
7210
|
+
video: video,
|
|
7211
|
+
poster: poster
|
|
7212
|
+
});
|
|
7213
|
+
};
|
|
7214
|
+
var useElementWidth = function useElementWidth() {
|
|
7215
|
+
var _React$useState = React__default.useState(undefined),
|
|
7216
|
+
width = _React$useState[0],
|
|
7217
|
+
setWidth = _React$useState[1];
|
|
7218
|
+
var observerRef = React__default.useRef(null);
|
|
7219
|
+
var ref = React__default.useCallback(function (node) {
|
|
7220
|
+
if (observerRef.current) {
|
|
7221
|
+
observerRef.current.disconnect();
|
|
7222
|
+
observerRef.current = null;
|
|
7223
|
+
}
|
|
7224
|
+
if (!node) return;
|
|
7225
|
+
observerRef.current = new ResizeObserver(function () {
|
|
7226
|
+
setWidth(node.offsetWidth);
|
|
7227
|
+
});
|
|
7228
|
+
observerRef.current.observe(node);
|
|
7229
|
+
}, []);
|
|
7230
|
+
return [ref, width];
|
|
7231
|
+
};
|
|
7232
|
+
var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
7233
|
+
var text = _ref4.text,
|
|
7234
|
+
link = _ref4.link,
|
|
7235
|
+
_ref4$sponsor = _ref4.sponsor,
|
|
7236
|
+
sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
|
|
7237
|
+
customSponsorImage = _ref4.customSponsorImage,
|
|
7238
|
+
bgUrlDesktop = _ref4.bgUrlDesktop,
|
|
7239
|
+
bgUrlDevice = _ref4.bgUrlDevice,
|
|
7240
|
+
_ref4$bgImageAltText = _ref4.bgImageAltText,
|
|
7241
|
+
bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
|
|
7242
|
+
videoUrlDesktop = _ref4.videoUrlDesktop,
|
|
7243
|
+
videoUrlMobile = _ref4.videoUrlMobile,
|
|
7244
|
+
className = _ref4.className;
|
|
7245
|
+
var _useViewport = useViewport(),
|
|
7246
|
+
isMobile = _useViewport.isMobile,
|
|
7247
|
+
hydrated = _useViewport.hydrated;
|
|
7248
|
+
var _useElementWidth = useElementWidth(),
|
|
7249
|
+
buttonRef = _useElementWidth[0],
|
|
7250
|
+
buttonWidth = _useElementWidth[1];
|
|
7251
|
+
var _useElementWidth2 = useElementWidth(),
|
|
7252
|
+
sponsorRef = _useElementWidth2[0],
|
|
7253
|
+
sponsorWidth = _useElementWidth2[1];
|
|
7254
|
+
var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
|
|
7255
|
+
var _ref5 = link || {},
|
|
7256
|
+
linkText = _ref5.text,
|
|
7257
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$i);
|
|
7258
|
+
var video = {
|
|
7259
|
+
elementId: 'impact-header-video',
|
|
7260
|
+
desktop: videoUrlDesktop,
|
|
7261
|
+
mobile: videoUrlMobile
|
|
7262
|
+
};
|
|
7263
|
+
var poster = {
|
|
7264
|
+
desktop: bgUrlDesktop,
|
|
7265
|
+
mobile: bgUrlDevice,
|
|
7266
|
+
alt: bgImageAltText
|
|
7267
|
+
};
|
|
7268
|
+
var sponsorContent = sponsor ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
7269
|
+
"data-testid": customSponsorImage ? 'impact-custom-sponsor' : undefined
|
|
7270
|
+
}, customSponsorImage != null ? customSponsorImage : {}))) : null;
|
|
7271
|
+
var hasButton = !isMobile && !!(link && linkText);
|
|
7272
|
+
var showSideColumns = hasButton || !!sponsor;
|
|
7273
|
+
var showTitleBar = !!(text || hasButton || sponsor);
|
|
7274
|
+
var renderSponsor = function renderSponsor() {
|
|
7275
|
+
if (isMobile) {
|
|
7276
|
+
if (!sponsorContent) return null;
|
|
7277
|
+
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
7278
|
+
"data-testid": "impact-sponsor"
|
|
7279
|
+
}, sponsorContent);
|
|
7280
|
+
}
|
|
7281
|
+
if (!showSideColumns) return null;
|
|
7282
|
+
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
7283
|
+
ref: sponsorRef,
|
|
7284
|
+
buttonWidth: buttonWidth,
|
|
7285
|
+
"data-testid": "impact-sponsor"
|
|
7286
|
+
}, sponsorContent);
|
|
7287
|
+
};
|
|
7288
|
+
if (!hydrated) return null;
|
|
7289
|
+
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
7290
|
+
theme: exports.ThemeType.Cinema
|
|
7291
|
+
}, showTitleBar ? (/*#__PURE__*/React__default.createElement(ImpactHeaderWrapper, {
|
|
7292
|
+
className: className
|
|
7293
|
+
}, /*#__PURE__*/React__default.createElement(ImpactTitleWrapper, {
|
|
7294
|
+
"data-testid": "impact-title-wrapper",
|
|
7295
|
+
sponsorPresent: !!sponsor,
|
|
7296
|
+
hasButton: hasButton
|
|
7297
|
+
}, !isMobile && showSideColumns ? (/*#__PURE__*/React__default.createElement(TitleButtonWrapper, {
|
|
7298
|
+
sponsorWidth: sponsorWidth
|
|
7299
|
+
}, hasButton ? (/*#__PURE__*/React__default.createElement(TitleButton, Object.assign({
|
|
7300
|
+
ref: buttonRef
|
|
7301
|
+
}, restLink, {
|
|
7114
7302
|
"data-testid": "impact-link"
|
|
7115
|
-
}
|
|
7116
|
-
|
|
7117
|
-
|
|
7118
|
-
|
|
7119
|
-
|
|
7120
|
-
|
|
7121
|
-
|
|
7122
|
-
|
|
7123
|
-
|
|
7303
|
+
}), linkText)) : null)) : null, text ? (/*#__PURE__*/React__default.createElement(ImpactTitle, {
|
|
7304
|
+
size: "large",
|
|
7305
|
+
color: "white",
|
|
7306
|
+
hasColumns: !isMobile && showSideColumns
|
|
7307
|
+
}, truncatedText)) : null, renderSponsor()))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderAssetWrapper, {
|
|
7308
|
+
className: className
|
|
7309
|
+
}, /*#__PURE__*/React__default.createElement(ImpactHeaderVideo, {
|
|
7310
|
+
video: video,
|
|
7311
|
+
poster: poster
|
|
7312
|
+
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
7124
7313
|
};
|
|
7125
7314
|
|
|
7126
|
-
var _templateObject$
|
|
7127
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7315
|
+
var _templateObject$R, _templateObject2$F, _templateObject3$u, _templateObject4$q, _templateObject5$k;
|
|
7316
|
+
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$R || (_templateObject$R = /*#__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) {
|
|
7128
7317
|
var color = _ref.color;
|
|
7129
7318
|
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 ";
|
|
7130
7319
|
}, devices.mobileAndTablet);
|
|
7131
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7320
|
+
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__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) {
|
|
7132
7321
|
var hasImage = _ref2.hasImage;
|
|
7133
7322
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7134
7323
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7135
7324
|
var hasImage = _ref3.hasImage;
|
|
7136
7325
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7137
7326
|
});
|
|
7138
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7139
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7140
|
-
var ScrollDownWrapper
|
|
7327
|
+
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__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);
|
|
7328
|
+
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__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);
|
|
7329
|
+
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__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);
|
|
7141
7330
|
|
|
7142
7331
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7143
7332
|
var _image$src, _image$alt;
|
|
@@ -7151,7 +7340,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7151
7340
|
"data-testid": "wrapper"
|
|
7152
7341
|
}, /*#__PURE__*/React__default.createElement(LeftPanel, {
|
|
7153
7342
|
hasImage: hasImage
|
|
7154
|
-
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper
|
|
7343
|
+
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
7155
7344
|
"data-testid": "scroll-link"
|
|
7156
7345
|
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
7157
7346
|
iconName: "Arrow",
|
|
@@ -7167,11 +7356,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7167
7356
|
})))));
|
|
7168
7357
|
};
|
|
7169
7358
|
|
|
7170
|
-
var _templateObject$
|
|
7171
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$
|
|
7172
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7173
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7174
|
-
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7359
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$v, _templateObject4$r, _templateObject5$l, _templateObject6$e, _templateObject7$a, _templateObject8$6, _templateObject9$3, _templateObject0$3, _templateObject1$2;
|
|
7360
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
7361
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
7362
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__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);
|
|
7363
|
+
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
7175
7364
|
var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
|
|
7176
7365
|
var theme = _ref.theme;
|
|
7177
7366
|
return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
@@ -7381,7 +7570,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
7381
7570
|
})))))))))));
|
|
7382
7571
|
};
|
|
7383
7572
|
|
|
7384
|
-
var _templateObject$
|
|
7573
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$w, _templateObject4$s;
|
|
7385
7574
|
var GRID = {
|
|
7386
7575
|
desktop: {
|
|
7387
7576
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -7394,19 +7583,19 @@ var GRID = {
|
|
|
7394
7583
|
right: '2 / 1 / 3 / 15'
|
|
7395
7584
|
}
|
|
7396
7585
|
};
|
|
7397
|
-
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7586
|
+
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
7398
7587
|
var $background = _ref.$background;
|
|
7399
7588
|
return "var(--color-" + $background + ")";
|
|
7400
7589
|
});
|
|
7401
|
-
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7590
|
+
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
7402
7591
|
var hasImage = _ref2.hasImage;
|
|
7403
7592
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
7404
7593
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7405
7594
|
var hasImage = _ref3.hasImage;
|
|
7406
7595
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
7407
7596
|
});
|
|
7408
|
-
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7409
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7597
|
+
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
7598
|
+
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
7410
7599
|
|
|
7411
7600
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
7412
7601
|
var _image$src, _image$alt;
|
|
@@ -7429,10 +7618,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
7429
7618
|
})))));
|
|
7430
7619
|
};
|
|
7431
7620
|
|
|
7432
|
-
var _templateObject$
|
|
7433
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7434
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7435
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7621
|
+
var _templateObject$U, _templateObject2$I, _templateObject3$x, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4;
|
|
7622
|
+
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);
|
|
7623
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__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"])));
|
|
7624
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
7436
7625
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__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);
|
|
7437
7626
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$f || (_templateObject6$f = /*#__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) {
|
|
7438
7627
|
var invert = _ref.invert,
|
|
@@ -7543,7 +7732,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
7543
7732
|
};
|
|
7544
7733
|
|
|
7545
7734
|
var _excluded$j = ["text"];
|
|
7546
|
-
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7735
|
+
var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
|
|
7547
7736
|
var mobileVideo = video.mobile || video.desktop;
|
|
7548
7737
|
var desktopVideo = video.desktop || video.mobile;
|
|
7549
7738
|
var mobilePoster = poster.mobile || poster.desktop;
|
|
@@ -7564,10 +7753,10 @@ var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
|
7564
7753
|
videoUrl: videoUrl
|
|
7565
7754
|
};
|
|
7566
7755
|
};
|
|
7567
|
-
var VideoWithControls = function VideoWithControls(_ref) {
|
|
7756
|
+
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
7568
7757
|
var video = _ref.video,
|
|
7569
7758
|
poster = _ref.poster;
|
|
7570
|
-
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
7759
|
+
var _useResponsiveVideo = useResponsiveVideo$1(video, poster),
|
|
7571
7760
|
posterUrl = _useResponsiveVideo.posterUrl,
|
|
7572
7761
|
videoUrl = _useResponsiveVideo.videoUrl;
|
|
7573
7762
|
var isIOS = useIOS();
|
|
@@ -7620,7 +7809,7 @@ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
|
|
|
7620
7809
|
if (!video.desktop && !video.mobile) {
|
|
7621
7810
|
return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
|
|
7622
7811
|
}
|
|
7623
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
7812
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
|
|
7624
7813
|
video: video,
|
|
7625
7814
|
poster: poster
|
|
7626
7815
|
});
|
|
@@ -7683,10 +7872,10 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7683
7872
|
}), linkText))))));
|
|
7684
7873
|
};
|
|
7685
7874
|
|
|
7686
|
-
var _templateObject$
|
|
7875
|
+
var _templateObject$V, _templateObject2$J;
|
|
7687
7876
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
7688
|
-
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7689
|
-
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7877
|
+
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
7878
|
+
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
7690
7879
|
var transitioning = _ref.transitioning;
|
|
7691
7880
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
7692
7881
|
}, function (_ref2) {
|
|
@@ -8072,11 +8261,11 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
8072
8261
|
});
|
|
8073
8262
|
Swipe.displayName = 'Swipe';
|
|
8074
8263
|
|
|
8075
|
-
var _templateObject$
|
|
8076
|
-
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8077
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8078
|
-
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8079
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8264
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject4$t, _templateObject5$n, _templateObject6$g, _templateObject7$c;
|
|
8265
|
+
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8266
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8267
|
+
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8268
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8080
8269
|
var hasImages = _ref.hasImages;
|
|
8081
8270
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8082
8271
|
}, devices.mobile, function (_ref2) {
|
|
@@ -8151,10 +8340,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8151
8340
|
}))))));
|
|
8152
8341
|
};
|
|
8153
8342
|
|
|
8154
|
-
var _templateObject$
|
|
8155
|
-
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8156
|
-
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
8157
|
-
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8343
|
+
var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject5$o, _templateObject6$h, _templateObject7$d, _templateObject8$8;
|
|
8344
|
+
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
8345
|
+
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8346
|
+
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8158
8347
|
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
8159
8348
|
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8160
8349
|
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8310,16 +8499,16 @@ var Pagination = function Pagination(_ref) {
|
|
|
8310
8499
|
}))))));
|
|
8311
8500
|
};
|
|
8312
8501
|
|
|
8313
|
-
var _templateObject$
|
|
8314
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8315
|
-
|
|
8316
|
-
var _templateObject$Y, _templateObject2$L;
|
|
8317
|
-
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8318
|
-
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8502
|
+
var _templateObject$Y;
|
|
8503
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\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);
|
|
8319
8504
|
|
|
8320
8505
|
var _templateObject$Z, _templateObject2$M;
|
|
8321
|
-
var
|
|
8322
|
-
var
|
|
8506
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8507
|
+
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8508
|
+
|
|
8509
|
+
var _templateObject$_, _templateObject2$N;
|
|
8510
|
+
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
|
|
8511
|
+
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8323
8512
|
|
|
8324
8513
|
var Person = function Person(_ref) {
|
|
8325
8514
|
var person = _ref.person,
|
|
@@ -8342,7 +8531,7 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8342
8531
|
var _role$people;
|
|
8343
8532
|
var role = _ref.role,
|
|
8344
8533
|
className = _ref.className;
|
|
8345
|
-
return /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
8534
|
+
return /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
8346
8535
|
className: className
|
|
8347
8536
|
}, /*#__PURE__*/React__default.createElement(RoleContent, {
|
|
8348
8537
|
title: "role",
|
|
@@ -8358,9 +8547,9 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8358
8547
|
})));
|
|
8359
8548
|
};
|
|
8360
8549
|
|
|
8361
|
-
var _templateObject
|
|
8362
|
-
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8363
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8550
|
+
var _templateObject$$, _templateObject2$O;
|
|
8551
|
+
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8552
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
|
|
8364
8553
|
|
|
8365
8554
|
var PersonCard = function PersonCard(_ref) {
|
|
8366
8555
|
var role = _ref.role,
|
|
@@ -8398,14 +8587,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8398
8587
|
}));
|
|
8399
8588
|
};
|
|
8400
8589
|
|
|
8401
|
-
var _templateObject
|
|
8402
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8403
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
8590
|
+
var _templateObject$10, _templateObject2$P, _templateObject3$A, _templateObject4$u;
|
|
8591
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8592
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$P || (_templateObject2$P = /*#__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) {
|
|
8404
8593
|
var columnCount = _ref.columnCount;
|
|
8405
8594
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8406
8595
|
}, devices.mobile, devices.tablet);
|
|
8407
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8408
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8596
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
8597
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8409
8598
|
|
|
8410
8599
|
// Get the total character length of a property in an array of objects
|
|
8411
8600
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8494,7 +8683,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8494
8683
|
columnSpanSmallDevice: 1,
|
|
8495
8684
|
key: "credit-entry-" + name + "-" + index,
|
|
8496
8685
|
"data-testid": "credit-entry"
|
|
8497
|
-
}, /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
8686
|
+
}, /*#__PURE__*/React__default.createElement(TextWrapper$1, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
8498
8687
|
title: "role",
|
|
8499
8688
|
"data-roh": dataROH
|
|
8500
8689
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
@@ -8532,8 +8721,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8532
8721
|
}, creditEntries);
|
|
8533
8722
|
};
|
|
8534
8723
|
|
|
8535
|
-
var _templateObject$
|
|
8536
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$
|
|
8724
|
+
var _templateObject$11;
|
|
8725
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
8537
8726
|
|
|
8538
8727
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
8539
8728
|
var items = _ref.items;
|
|
@@ -8551,14 +8740,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
8551
8740
|
}));
|
|
8552
8741
|
};
|
|
8553
8742
|
|
|
8554
|
-
var _templateObject$
|
|
8743
|
+
var _templateObject$12, _templateObject3$B, _templateObject4$v, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9, _templateObject9$5, _templateObject0$5, _templateObject1$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
8555
8744
|
var LENGTH_TEXT = 28;
|
|
8556
8745
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8557
8746
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8558
8747
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8559
8748
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8560
8749
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8561
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8750
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__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) {
|
|
8562
8751
|
var imageToLeft = _ref.imageToLeft;
|
|
8563
8752
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8564
8753
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8568,7 +8757,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 ||
|
|
|
8568
8757
|
var asCard = _ref3.asCard;
|
|
8569
8758
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8570
8759
|
});
|
|
8571
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8760
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__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 (_ref4) {
|
|
8572
8761
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
8573
8762
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8574
8763
|
}, function (_ref5) {
|
|
@@ -8592,7 +8781,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$A ||
|
|
|
8592
8781
|
}
|
|
8593
8782
|
return '';
|
|
8594
8783
|
});
|
|
8595
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8784
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
8596
8785
|
var marginBottom = _ref7.marginBottom;
|
|
8597
8786
|
return marginBottom + "px";
|
|
8598
8787
|
}, function (_ref8) {
|
|
@@ -8823,25 +9012,25 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8823
9012
|
}))));
|
|
8824
9013
|
};
|
|
8825
9014
|
|
|
8826
|
-
var _templateObject$
|
|
9015
|
+
var _templateObject$13, _templateObject2$Q, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$f;
|
|
8827
9016
|
var LENGTH_TEXT$2 = 28;
|
|
8828
9017
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
8829
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9018
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 || (_templateObject$13 = /*#__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) {
|
|
8830
9019
|
var imageToLeft = _ref.imageToLeft;
|
|
8831
9020
|
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'";
|
|
8832
9021
|
}, devices.tablet, function (_ref2) {
|
|
8833
9022
|
var imageToLeft = _ref2.imageToLeft;
|
|
8834
9023
|
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'";
|
|
8835
9024
|
}, devices.mobile);
|
|
8836
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9025
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
8837
9026
|
var imageToLeft = _ref3.imageToLeft;
|
|
8838
9027
|
return imageToLeft ? 'left' : 'right';
|
|
8839
9028
|
}, devices.mobile);
|
|
8840
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9029
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
8841
9030
|
var imageToLeft = _ref4.imageToLeft;
|
|
8842
9031
|
return imageToLeft ? 'right' : 'left';
|
|
8843
9032
|
}, devices.mobile);
|
|
8844
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$
|
|
9033
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
8845
9034
|
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
8846
9035
|
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
8847
9036
|
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__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 (_ref5) {
|
|
@@ -8866,8 +9055,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$f ||
|
|
|
8866
9055
|
return '';
|
|
8867
9056
|
});
|
|
8868
9057
|
|
|
8869
|
-
var _templateObject$
|
|
8870
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9058
|
+
var _templateObject$14;
|
|
9059
|
+
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__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) {
|
|
8871
9060
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8872
9061
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8873
9062
|
return aspectRatio;
|
|
@@ -8898,7 +9087,7 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
8898
9087
|
return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
|
|
8899
9088
|
};
|
|
8900
9089
|
|
|
8901
|
-
var VideoWithControls$
|
|
9090
|
+
var VideoWithControls$2 = function VideoWithControls(_ref) {
|
|
8902
9091
|
var video = _ref.video,
|
|
8903
9092
|
settings = _ref.settings;
|
|
8904
9093
|
var videoRef = React.useRef(null);
|
|
@@ -8973,7 +9162,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
8973
9162
|
}, isImage && (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
8974
9163
|
aspectRatio: exports.AspectRatio['4:3'],
|
|
8975
9164
|
"data-testid": "AspectRatioWrapper"
|
|
8976
|
-
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
9165
|
+
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
|
|
8977
9166
|
video: children,
|
|
8978
9167
|
settings: videoSettings
|
|
8979
9168
|
}));
|
|
@@ -9036,7 +9225,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9036
9225
|
size: titleSize,
|
|
9037
9226
|
hierarchy: titleHierarchy
|
|
9038
9227
|
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
|
|
9039
|
-
size: "
|
|
9228
|
+
size: "small"
|
|
9040
9229
|
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
|
|
9041
9230
|
size: "large",
|
|
9042
9231
|
dangerouslySetInnerHTML: {
|
|
@@ -9049,8 +9238,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9049
9238
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9050
9239
|
};
|
|
9051
9240
|
|
|
9052
|
-
var _templateObject$
|
|
9053
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9241
|
+
var _templateObject$15;
|
|
9242
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9054
9243
|
|
|
9055
9244
|
/**
|
|
9056
9245
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9105,9 +9294,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9105
9294
|
})));
|
|
9106
9295
|
};
|
|
9107
9296
|
|
|
9108
|
-
var _templateObject$
|
|
9109
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9110
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9297
|
+
var _templateObject$16, _templateObject2$R, _templateObject3$D;
|
|
9298
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9299
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9111
9300
|
var horizontalMode = _ref.horizontalMode;
|
|
9112
9301
|
if (horizontalMode) return 'row';
|
|
9113
9302
|
return 'column';
|
|
@@ -9115,7 +9304,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_temp
|
|
|
9115
9304
|
var gap = _ref2.gap;
|
|
9116
9305
|
return gap + "px";
|
|
9117
9306
|
});
|
|
9118
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9307
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9119
9308
|
var darkMode = _ref3.darkMode;
|
|
9120
9309
|
if (darkMode) return 'var(--base-color-white)';
|
|
9121
9310
|
return 'var(--base-color-errorstate)';
|
|
@@ -9192,10 +9381,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9192
9381
|
}, error))));
|
|
9193
9382
|
};
|
|
9194
9383
|
|
|
9195
|
-
var _templateObject$
|
|
9196
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9197
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9198
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9384
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
9385
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\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);
|
|
9386
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__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"])));
|
|
9387
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__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);
|
|
9199
9388
|
|
|
9200
9389
|
/* eslint-disable react/no-danger */
|
|
9201
9390
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9251,8 +9440,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9251
9440
|
return null;
|
|
9252
9441
|
};
|
|
9253
9442
|
|
|
9254
|
-
var _templateObject$
|
|
9255
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9443
|
+
var _templateObject$18;
|
|
9444
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__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 margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9256
9445
|
|
|
9257
9446
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9258
9447
|
var HarmonicSize = {
|
|
@@ -9294,8 +9483,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9294
9483
|
}, description)))));
|
|
9295
9484
|
};
|
|
9296
9485
|
|
|
9297
|
-
var _templateObject$
|
|
9298
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
9486
|
+
var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4;
|
|
9487
|
+
var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject$19 = /*#__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) {
|
|
9299
9488
|
var theme = _ref.theme;
|
|
9300
9489
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9301
9490
|
}, function (_ref2) {
|
|
@@ -9305,12 +9494,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$18 || (_templateObject
|
|
|
9305
9494
|
var theme = _ref3.theme;
|
|
9306
9495
|
return theme.colors.lightgrey;
|
|
9307
9496
|
});
|
|
9308
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
9497
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9309
9498
|
var theme = _ref4.theme;
|
|
9310
9499
|
return theme.colors.darkgrey;
|
|
9311
9500
|
});
|
|
9312
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
9313
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$
|
|
9501
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9502
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9314
9503
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
9315
9504
|
var theme = _ref5.theme;
|
|
9316
9505
|
return {
|
|
@@ -9675,9 +9864,9 @@ function Select(_ref3) {
|
|
|
9675
9864
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9676
9865
|
}
|
|
9677
9866
|
|
|
9678
|
-
var _templateObject$
|
|
9679
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9680
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9867
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
|
|
9868
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9869
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__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-dark-grey);\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-dark-grey);\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-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\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-dark-grey);\n background: var(--base-color-light-grey);\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-mid-grey);\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) {
|
|
9681
9870
|
var width = _ref.width;
|
|
9682
9871
|
if (!width) return 'none';
|
|
9683
9872
|
return width + "px";
|
|
@@ -9694,12 +9883,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_t
|
|
|
9694
9883
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9695
9884
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9696
9885
|
});
|
|
9697
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9886
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9698
9887
|
var darkMode = _ref5.darkMode;
|
|
9699
9888
|
if (darkMode) return "var(--base-color-white)";
|
|
9700
9889
|
return "var(--base-color-black)";
|
|
9701
9890
|
});
|
|
9702
|
-
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9891
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9703
9892
|
var darkMode = _ref6.darkMode;
|
|
9704
9893
|
if (darkMode) return "var(--base-color-white)";
|
|
9705
9894
|
return "var(--base-color-errorstate)";
|
|
@@ -9813,10 +10002,10 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9813
10002
|
})));
|
|
9814
10003
|
};
|
|
9815
10004
|
|
|
9816
|
-
var _templateObject$
|
|
9817
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9818
|
-
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$
|
|
9819
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10005
|
+
var _templateObject$1b, _templateObject3$H, _templateObject4$z, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
|
|
10006
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
10007
|
+
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-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\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
10008
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
9820
10009
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
9821
10010
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
9822
10011
|
}, function (_ref2) {
|
|
@@ -9919,8 +10108,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
9919
10108
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
9920
10109
|
};
|
|
9921
10110
|
|
|
9922
|
-
var _templateObject$
|
|
9923
|
-
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
10111
|
+
var _templateObject$1c, _templateObject2$V, _templateObject3$I;
|
|
10112
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
9924
10113
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9925
10114
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9926
10115
|
return aspectRatio;
|
|
@@ -9930,8 +10119,8 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1b || (_temp
|
|
|
9930
10119
|
height = _ref2.height;
|
|
9931
10120
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
9932
10121
|
});
|
|
9933
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
9934
|
-
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$
|
|
10122
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
10123
|
+
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
9935
10124
|
|
|
9936
10125
|
var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
9937
10126
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -9964,11 +10153,11 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9964
10153
|
}, caption))));
|
|
9965
10154
|
};
|
|
9966
10155
|
|
|
9967
|
-
var _templateObject$
|
|
9968
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9969
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9970
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
9971
|
-
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10156
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$t, _templateObject6$m;
|
|
10157
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__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"])));
|
|
10158
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10159
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10160
|
+
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
9972
10161
|
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__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);
|
|
9973
10162
|
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__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);
|
|
9974
10163
|
|
|
@@ -10008,14 +10197,14 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10008
10197
|
}, title)))));
|
|
10009
10198
|
};
|
|
10010
10199
|
|
|
10011
|
-
var _templateObject$
|
|
10012
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10013
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10014
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10200
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$u;
|
|
10201
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__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"])));
|
|
10202
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__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"])));
|
|
10203
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10015
10204
|
var isVisible = _ref.isVisible;
|
|
10016
10205
|
return isVisible ? 'visible' : 'hidden';
|
|
10017
10206
|
});
|
|
10018
|
-
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10207
|
+
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10019
10208
|
var isVisible = _ref2.isVisible;
|
|
10020
10209
|
return isVisible ? 'visible' : 'hidden';
|
|
10021
10210
|
});
|
|
@@ -10100,11 +10289,11 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10100
10289
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10101
10290
|
};
|
|
10102
10291
|
|
|
10103
|
-
var _templateObject$
|
|
10104
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$
|
|
10105
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
10106
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
10107
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
10292
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v;
|
|
10293
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10294
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$Y || (_templateObject2$Y = /*#__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);
|
|
10295
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$L || (_templateObject3$L = /*#__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);
|
|
10296
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$C || (_templateObject4$C = /*#__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) {
|
|
10108
10297
|
var isActive = _ref.isActive;
|
|
10109
10298
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10110
10299
|
}, exports.Colors.MidGrey);
|
|
@@ -10264,14 +10453,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10264
10453
|
});
|
|
10265
10454
|
};
|
|
10266
10455
|
|
|
10267
|
-
var _templateObject$
|
|
10268
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10269
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10270
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10456
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$w, _templateObject6$n;
|
|
10457
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10458
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10459
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10271
10460
|
var color = _ref.color;
|
|
10272
10461
|
return "var(--base-color-" + color + ")";
|
|
10273
10462
|
});
|
|
10274
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10463
|
+
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10275
10464
|
var Text = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10276
10465
|
var color = _ref2.color;
|
|
10277
10466
|
return "var(--base-color-" + color + ")";
|
|
@@ -10358,11 +10547,11 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10358
10547
|
}, strengthLabel))));
|
|
10359
10548
|
};
|
|
10360
10549
|
|
|
10361
|
-
var _templateObject$
|
|
10362
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$
|
|
10363
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10364
|
-
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10365
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$
|
|
10550
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
|
|
10551
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10552
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10553
|
+
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10554
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\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 min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10366
10555
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10367
10556
|
}, devices.tablet, devices.mobile);
|
|
10368
10557
|
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\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 min-width: 150px;\n }\n"])), function (props) {
|
|
@@ -10573,22 +10762,22 @@ var Table = function Table(_ref) {
|
|
|
10573
10762
|
}))));
|
|
10574
10763
|
};
|
|
10575
10764
|
|
|
10576
|
-
var _templateObject$
|
|
10577
|
-
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
10765
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
10766
|
+
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10578
10767
|
var theme = _ref.theme;
|
|
10579
10768
|
return "var(--color-" + theme + ")";
|
|
10580
10769
|
}, function (_ref2) {
|
|
10581
10770
|
var theme = _ref2.theme;
|
|
10582
10771
|
return "var(--color-" + theme + ")";
|
|
10583
10772
|
});
|
|
10584
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2
|
|
10585
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
10586
|
-
var Error = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10773
|
+
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
10774
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
10775
|
+
var Error = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10587
10776
|
var Form = /*#__PURE__*/styled__default.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
10588
10777
|
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
10589
10778
|
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
10590
10779
|
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
10591
|
-
var ButtonWrapper$
|
|
10780
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
10592
10781
|
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
10593
10782
|
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
10594
10783
|
var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
@@ -10878,10 +11067,10 @@ var SignUpForm = function SignUpForm(_ref) {
|
|
|
10878
11067
|
tabIndex: 0
|
|
10879
11068
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10880
11069
|
size: "small"
|
|
10881
|
-
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
11070
|
+
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
10882
11071
|
onClick: handleFormSubmit,
|
|
10883
11072
|
theme: theme
|
|
10884
|
-
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
11073
|
+
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
10885
11074
|
onClick: handleFormSubmit,
|
|
10886
11075
|
theme: theme
|
|
10887
11076
|
})), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
|
|
@@ -10998,12 +11187,12 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
10998
11187
|
}))))));
|
|
10999
11188
|
};
|
|
11000
11189
|
|
|
11001
|
-
var _templateObject$
|
|
11002
|
-
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11190
|
+
var _templateObject$1j, _templateObject2$10, _templateObject4$G, _templateObject5$z;
|
|
11191
|
+
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
11003
11192
|
var withShadow = _ref.withShadow;
|
|
11004
|
-
return withShadow && styled.css(_templateObject2
|
|
11193
|
+
return withShadow && styled.css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11005
11194
|
}, devices.mobile);
|
|
11006
|
-
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
11195
|
+
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
11007
11196
|
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11008
11197
|
|
|
11009
11198
|
var defaultGrid = {
|
|
@@ -11062,12 +11251,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11062
11251
|
return null;
|
|
11063
11252
|
};
|
|
11064
11253
|
|
|
11065
|
-
var _templateObject$
|
|
11066
|
-
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$
|
|
11254
|
+
var _templateObject$1k, _templateObject2$11;
|
|
11255
|
+
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
11067
11256
|
var hide = _ref.hide;
|
|
11068
11257
|
return hide && "display: none;";
|
|
11069
11258
|
}, devices.mobileAndTablet);
|
|
11070
|
-
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11259
|
+
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
11071
11260
|
|
|
11072
11261
|
/**
|
|
11073
11262
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11159,8 +11348,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11159
11348
|
}));
|
|
11160
11349
|
};
|
|
11161
11350
|
|
|
11162
|
-
var _templateObject$
|
|
11163
|
-
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
11351
|
+
var _templateObject$1l;
|
|
11352
|
+
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
|
|
11164
11353
|
|
|
11165
11354
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11166
11355
|
return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
|
|
@@ -11220,20 +11409,20 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11220
11409
|
}, gridItemOrContent);
|
|
11221
11410
|
};
|
|
11222
11411
|
|
|
11223
|
-
var _templateObject$
|
|
11412
|
+
var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$A, _templateObject6$q, _templateObject7$k;
|
|
11224
11413
|
var color = 'primary-black';
|
|
11225
11414
|
var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
11226
11415
|
borderColor: color,
|
|
11227
11416
|
hoveredColor: color,
|
|
11228
11417
|
pressedColor: color,
|
|
11229
11418
|
textColor: color
|
|
11230
|
-
})(_templateObject$
|
|
11231
|
-
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11232
|
-
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$
|
|
11419
|
+
})(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11420
|
+
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11421
|
+
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11233
11422
|
var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
|
|
11234
11423
|
serif: true,
|
|
11235
11424
|
size: 'medium'
|
|
11236
|
-
})(_templateObject4$
|
|
11425
|
+
})(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11237
11426
|
var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
|
|
11238
11427
|
size: 'large'
|
|
11239
11428
|
})(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
@@ -11267,158 +11456,6 @@ var Paywall = function Paywall(_ref) {
|
|
|
11267
11456
|
}, "Sign in"))));
|
|
11268
11457
|
};
|
|
11269
11458
|
|
|
11270
|
-
var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l, _templateObject8$e, _templateObject9$9, _templateObject0$8;
|
|
11271
|
-
var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n flex-direction: column-reverse;\n gap: 15px;\n }\n"])), devices.mobile);
|
|
11272
|
-
var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
11273
|
-
var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n @media ", " {\n flex-direction: column;\n gap: 10px;\n }\n"])), devices.mobile);
|
|
11274
|
-
var ActionButtons = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n gap: 32px;\n\n .mobile-only {\n visibility: hidden;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n }\n\n @media ", " {\n .mobile-only {\n visibility: visible;\n padding-block: 24px;\n font-size: 17px;\n line-height: 24px;\n }\n\n flex-direction: row-reverse;\n gap: unset;\n justify-content: space-between;\n border-block-end: 2px solid var(--base-color-light-grey);\n\n :has(.mobile-only) {\n justify-content: left;\n }\n\n :not(:has(.mobile-only)) {\n padding-block: 12px;\n }\n\n a {\n width: fit-content;\n }\n }\n"])), devices.mobile);
|
|
11275
|
-
var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n margin-block-start: 2px;\n margin-inline: 2px;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n\n :focus-visible {\n outline: none;\n\n & > div:first-child {\n outline: 2px solid var(--color-base-black);\n }\n }\n\n @media ", " {\n flex-direction: row;\n gap: 20px;\n margin-block-end: 2px;\n margin-inline-end: unset;\n\n p {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
11276
|
-
var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n width: 86px;\n height: 86px;\n min-width: 86px;\n border: 4px solid;\n border-color: ", ";\n border-radius: 50%;\n background: var(--color-base-white);\n position: relative;\n box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
|
|
11277
|
-
var isSelected = _ref.isSelected;
|
|
11278
|
-
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
11279
|
-
});
|
|
11280
|
-
var PersonImage = /*#__PURE__*/styled__default.img(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n\n // This is really specific to the SVG that we have been provided\n // as a fallback person image. I don't think there's a simpler and\n // more general way to handle this, so if we're given a new placeholder\n // image later, we may have to change the scale here\n ", "\n"])), function (_ref2) {
|
|
11281
|
-
var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
|
|
11282
|
-
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
11283
|
-
});
|
|
11284
|
-
var PersonName = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n\n @media ", " {\n max-width: unset;\n text-align: left;\n font-size: 17px;\n line-height: 24px;\n }\n"])), devices.mobile);
|
|
11285
|
-
var Decal = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (_ref3) {
|
|
11286
|
-
var isSelected = _ref3.isSelected;
|
|
11287
|
-
return isSelected ? 'flex' : 'none';
|
|
11288
|
-
}, function (_ref4) {
|
|
11289
|
-
var isSelected = _ref4.isSelected;
|
|
11290
|
-
return isSelected ? 'flex' : 'none';
|
|
11291
|
-
});
|
|
11292
|
-
var EmptySelectionTextSpacer = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
|
|
11293
|
-
|
|
11294
|
-
var defaultPlaceholderImage = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c9c9c9%3Bstroke%3A%23c9c9c9%3B%7D.cls-1%2C.cls-2%2C.cls-3%7Bstroke-miterlimit%3A10%3B%7D.cls-2%7Bfill-rule%3Aevenodd%3B%7D.cls-2%2C.cls-3%7Bfill%3A%2372767c%3Bstroke%3A%2372767c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M50.42%2C89.58c21.86%2C0%2C39.58-17.72%2C39.58-39.58S72.28%2C10.42%2C50.42%2C10.42%2C10.83%2C28.14%2C10.83%2C50s17.72%2C39.58%2C39.58%2C39.58Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M50.4%2C89.58c10.88%2C0%2C20.75-4.42%2C27.92-11.54-4.96-10.46-15.58-17.71-27.92-17.71s-22.96%2C7.25-27.92%2C17.71c7.17%2C7.12%2C17%2C11.54%2C27.92%2C11.54Z%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M50.4%2C55.67c8.05%2C0%2C14.58-6.53%2C14.58-14.58s-6.53-14.58-14.58-14.58-14.58%2C6.53-14.58%2C14.58%2C6.53%2C14.58%2C14.58%2C14.58Z%22%2F%3E%3C%2Fsvg%3E";
|
|
11295
|
-
|
|
11296
|
-
var _excluded$q = ["name", "image", "onClick"];
|
|
11297
|
-
var CastFilters = function CastFilters(_ref) {
|
|
11298
|
-
var cast = _ref.cast,
|
|
11299
|
-
headingText = _ref.headingText,
|
|
11300
|
-
ctaText = _ref.ctaText,
|
|
11301
|
-
textLinkText = _ref.textLinkText,
|
|
11302
|
-
emptySelectionText = _ref.emptySelectionText,
|
|
11303
|
-
placeholderImage = _ref.placeholderImage,
|
|
11304
|
-
listRoleDescription = _ref.listRoleDescription,
|
|
11305
|
-
className = _ref.className,
|
|
11306
|
-
onSelect = _ref.onSelect,
|
|
11307
|
-
onApply = _ref.onApply,
|
|
11308
|
-
onClear = _ref.onClear,
|
|
11309
|
-
_ref$selectedIndices = _ref.selectedIndices,
|
|
11310
|
-
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
11311
|
-
var castWrapperRef = React.useRef(null);
|
|
11312
|
-
var isDraggingRef = React.useRef(false);
|
|
11313
|
-
var startXRef = React.useRef(0);
|
|
11314
|
-
var scrollStartRef = React.useRef(0);
|
|
11315
|
-
var hasDraggedRef = React.useRef(false);
|
|
11316
|
-
var handleMouseDown = React.useCallback(function (e) {
|
|
11317
|
-
if (!castWrapperRef.current) return;
|
|
11318
|
-
isDraggingRef.current = true;
|
|
11319
|
-
hasDraggedRef.current = false;
|
|
11320
|
-
startXRef.current = e.clientX;
|
|
11321
|
-
scrollStartRef.current = castWrapperRef.current.scrollLeft;
|
|
11322
|
-
if (e.target === castWrapperRef.current) e.preventDefault();
|
|
11323
|
-
}, []);
|
|
11324
|
-
var handleMouseMove = React.useCallback(function (e) {
|
|
11325
|
-
if (!isDraggingRef.current || !castWrapperRef.current) return;
|
|
11326
|
-
var deltaX = e.clientX - startXRef.current;
|
|
11327
|
-
var threshold = 5;
|
|
11328
|
-
if (Math.abs(deltaX) > threshold) {
|
|
11329
|
-
hasDraggedRef.current = true;
|
|
11330
|
-
e.preventDefault();
|
|
11331
|
-
castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
|
|
11332
|
-
}
|
|
11333
|
-
}, []);
|
|
11334
|
-
var handleMouseUp = React.useCallback(function () {
|
|
11335
|
-
isDraggingRef.current = false;
|
|
11336
|
-
setTimeout(function () {
|
|
11337
|
-
hasDraggedRef.current = false;
|
|
11338
|
-
}, 0);
|
|
11339
|
-
}, []);
|
|
11340
|
-
var handleMouseLeave = React.useCallback(function () {
|
|
11341
|
-
isDraggingRef.current = false;
|
|
11342
|
-
hasDraggedRef.current = false;
|
|
11343
|
-
}, []);
|
|
11344
|
-
var handleClick = React__default.useCallback(function (index, onClick) {
|
|
11345
|
-
if (hasDraggedRef.current) return;
|
|
11346
|
-
if (onSelect) onSelect(index);
|
|
11347
|
-
if (onClick) onClick();
|
|
11348
|
-
}, [onSelect]);
|
|
11349
|
-
var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
|
|
11350
|
-
if (e.key === 'Enter') {
|
|
11351
|
-
handleClick(index, onClick);
|
|
11352
|
-
}
|
|
11353
|
-
}, [handleClick]);
|
|
11354
|
-
var handleClearKeydown = React__default.useCallback(function (e) {
|
|
11355
|
-
if (e.key === 'Enter' && onClear) {
|
|
11356
|
-
onClear();
|
|
11357
|
-
}
|
|
11358
|
-
}, [onClear]);
|
|
11359
|
-
var showActionButtonsSection = onApply || onClear || emptySelectionText;
|
|
11360
|
-
return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper, {
|
|
11361
|
-
className: className
|
|
11362
|
-
}, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, headingText && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11363
|
-
size: "large"
|
|
11364
|
-
}, headingText), /*#__PURE__*/React__default.createElement(CastWrapper, {
|
|
11365
|
-
ref: castWrapperRef,
|
|
11366
|
-
role: "listbox",
|
|
11367
|
-
"aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
|
|
11368
|
-
"aria-label": "filter list",
|
|
11369
|
-
"aria-multiselectable": true,
|
|
11370
|
-
onMouseDown: handleMouseDown,
|
|
11371
|
-
onMouseMove: handleMouseMove,
|
|
11372
|
-
onMouseUp: handleMouseUp,
|
|
11373
|
-
onMouseLeave: handleMouseLeave
|
|
11374
|
-
}, cast.map(function (person, index) {
|
|
11375
|
-
var name = person.name,
|
|
11376
|
-
image = person.image,
|
|
11377
|
-
_onClick = person.onClick,
|
|
11378
|
-
rest = _objectWithoutPropertiesLoose(person, _excluded$q);
|
|
11379
|
-
var isSelected = selectedIndices.includes(index);
|
|
11380
|
-
var personImage = image || placeholderImage || defaultPlaceholderImage;
|
|
11381
|
-
return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
11382
|
-
key: index,
|
|
11383
|
-
"aria-selected": isSelected,
|
|
11384
|
-
role: "option",
|
|
11385
|
-
tabIndex: 0,
|
|
11386
|
-
onKeyDown: function onKeyDown(e) {
|
|
11387
|
-
return handlePersonKeydown(e, index, _onClick);
|
|
11388
|
-
}
|
|
11389
|
-
}, /*#__PURE__*/React__default.createElement(PersonToggle, Object.assign({
|
|
11390
|
-
isSelected: isSelected,
|
|
11391
|
-
onClick: function onClick() {
|
|
11392
|
-
return handleClick(index, _onClick);
|
|
11393
|
-
}
|
|
11394
|
-
}, rest), /*#__PURE__*/React__default.createElement(PersonImage, {
|
|
11395
|
-
src: personImage,
|
|
11396
|
-
alt: image ? name : "Placeholder image for " + name,
|
|
11397
|
-
draggable: false,
|
|
11398
|
-
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
11399
|
-
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
11400
|
-
isSelected: isSelected
|
|
11401
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
11402
|
-
iconName: "Confirm",
|
|
11403
|
-
color: "white"
|
|
11404
|
-
}))), /*#__PURE__*/React__default.createElement(PersonName, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11405
|
-
size: "medium"
|
|
11406
|
-
}, name)));
|
|
11407
|
-
}))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11408
|
-
size: "medium",
|
|
11409
|
-
className: "mobile-only"
|
|
11410
|
-
}, emptySelectionText)), selectedIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, onApply && /*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
11411
|
-
onClick: function onClick() {
|
|
11412
|
-
return onApply(selectedIndices);
|
|
11413
|
-
}
|
|
11414
|
-
}, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
|
|
11415
|
-
tabIndex: 0,
|
|
11416
|
-
role: "button",
|
|
11417
|
-
onClick: onClear,
|
|
11418
|
-
onKeyDown: handleClearKeydown
|
|
11419
|
-
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
11420
|
-
};
|
|
11421
|
-
|
|
11422
11459
|
var dataRoh = 'imgLogo';
|
|
11423
11460
|
var title = 'Royal Ballet and Opera';
|
|
11424
11461
|
var Navigation = function Navigation(_ref) {
|
|
@@ -11585,14 +11622,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11585
11622
|
})))))));
|
|
11586
11623
|
};
|
|
11587
11624
|
|
|
11588
|
-
var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$
|
|
11625
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11589
11626
|
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
11590
11627
|
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
11591
11628
|
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
11592
11629
|
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11593
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
11594
|
-
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11595
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$
|
|
11630
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11631
|
+
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11632
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
11596
11633
|
|
|
11597
11634
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11598
11635
|
var Footer = function Footer(_ref) {
|
|
@@ -11650,7 +11687,7 @@ var Footer = function Footer(_ref) {
|
|
|
11650
11687
|
}, additionalInfo))));
|
|
11651
11688
|
};
|
|
11652
11689
|
|
|
11653
|
-
var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$
|
|
11690
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
|
|
11654
11691
|
var LIST_ITEM_GAP = 32;
|
|
11655
11692
|
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
|
|
11656
11693
|
var bottomBorder = _ref.bottomBorder;
|
|
@@ -11661,7 +11698,7 @@ var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o ||
|
|
|
11661
11698
|
});
|
|
11662
11699
|
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
11663
11700
|
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11664
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
11701
|
+
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_templateObject5$C = /*#__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 & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11665
11702
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11666
11703
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
11667
11704
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -11672,11 +11709,11 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateO
|
|
|
11672
11709
|
hasTwoArrows = _ref5.hasTwoArrows;
|
|
11673
11710
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
11674
11711
|
});
|
|
11675
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
11712
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
|
|
11676
11713
|
var withShadow = _ref7.withShadow;
|
|
11677
|
-
return withShadow && styled.css(_templateObject9$
|
|
11714
|
+
return withShadow && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11678
11715
|
});
|
|
11679
|
-
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11716
|
+
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
11680
11717
|
var disabled = _ref8.disabled;
|
|
11681
11718
|
return disabled ? 'not-allowed' : 'pointer';
|
|
11682
11719
|
}, function (_ref9) {
|
|
@@ -11687,7 +11724,7 @@ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_temp
|
|
|
11687
11724
|
return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
|
|
11688
11725
|
});
|
|
11689
11726
|
|
|
11690
|
-
var _excluded$
|
|
11727
|
+
var _excluded$q = ["id", "text"];
|
|
11691
11728
|
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
11692
11729
|
var tabs = _ref.tabs,
|
|
11693
11730
|
onTabClick = _ref.onTabClick,
|
|
@@ -11898,7 +11935,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
11898
11935
|
}, tabs.map(function (_ref4) {
|
|
11899
11936
|
var id = _ref4.id,
|
|
11900
11937
|
text = _ref4.text,
|
|
11901
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
11938
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$q);
|
|
11902
11939
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
11903
11940
|
key: id
|
|
11904
11941
|
}, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
|
|
@@ -11931,7 +11968,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
11931
11968
|
})))) : null))));
|
|
11932
11969
|
};
|
|
11933
11970
|
|
|
11934
|
-
var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject6$
|
|
11971
|
+
var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11935
11972
|
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
11936
11973
|
var sticky = _ref.sticky;
|
|
11937
11974
|
return sticky ? 'sticky' : 'initial';
|
|
@@ -11942,9 +11979,9 @@ var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$S || (_
|
|
|
11942
11979
|
return title ? 'row' : 'row-reverse';
|
|
11943
11980
|
}, devices.tablet, devices.mobile);
|
|
11944
11981
|
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__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);
|
|
11945
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11946
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
11947
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$
|
|
11982
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__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);
|
|
11983
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
11984
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11948
11985
|
var theme = _ref3.theme;
|
|
11949
11986
|
return theme.colors.primaryButtonReverseBg;
|
|
11950
11987
|
}, function (_ref4) {
|
|
@@ -11957,10 +11994,10 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
11957
11994
|
var theme = _ref6.theme;
|
|
11958
11995
|
return theme.colors.primaryButtonReverse;
|
|
11959
11996
|
});
|
|
11960
|
-
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
11961
|
-
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11997
|
+
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__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);
|
|
11998
|
+
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__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);
|
|
11962
11999
|
|
|
11963
|
-
var _excluded$
|
|
12000
|
+
var _excluded$r = ["text"],
|
|
11964
12001
|
_excluded2$4 = ["text"];
|
|
11965
12002
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
11966
12003
|
var title = _ref.title,
|
|
@@ -11970,7 +12007,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
11970
12007
|
message = _ref.message;
|
|
11971
12008
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
11972
12009
|
primaryButtonText = _ref2.text,
|
|
11973
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
12010
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
|
|
11974
12011
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
11975
12012
|
secondaryButtonText = _ref3.text,
|
|
11976
12013
|
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
|
|
@@ -12099,7 +12136,7 @@ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$18 || (_t
|
|
|
12099
12136
|
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
12100
12137
|
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$M || (_templateObject4$M = /*#__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"])));
|
|
12101
12138
|
|
|
12102
|
-
var _excluded$
|
|
12139
|
+
var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12103
12140
|
var MAX_Z_INDEX = 9999999999;
|
|
12104
12141
|
if (Modal.defaultStyles.content) {
|
|
12105
12142
|
Modal.defaultStyles.content.position = 'static';
|
|
@@ -12173,7 +12210,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
12173
12210
|
setIsOpen = _ref.setIsOpen,
|
|
12174
12211
|
children = _ref.children,
|
|
12175
12212
|
appElementId = _ref.appElementId,
|
|
12176
|
-
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12213
|
+
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
|
|
12177
12214
|
var isMobile = useMobile();
|
|
12178
12215
|
var customStyles = {
|
|
12179
12216
|
overlay: {
|
|
@@ -12301,7 +12338,7 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12301
12338
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12302
12339
|
};
|
|
12303
12340
|
|
|
12304
|
-
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$
|
|
12341
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
|
|
12305
12342
|
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
12306
12343
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12307
12344
|
return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n\n > div {\n height: " + imagesHeightDesktop + "px;\n }\n }\n }\n }";
|
|
@@ -12316,14 +12353,14 @@ var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$19
|
|
|
12316
12353
|
});
|
|
12317
12354
|
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
12318
12355
|
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12319
|
-
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12356
|
+
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12320
12357
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12321
12358
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12322
12359
|
});
|
|
12323
|
-
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$
|
|
12324
|
-
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12325
|
-
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$
|
|
12326
|
-
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$
|
|
12360
|
+
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
|
|
12361
|
+
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
12362
|
+
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12363
|
+
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12327
12364
|
var active = _ref5.active;
|
|
12328
12365
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
12329
12366
|
}, devices.tablet, function (_ref6) {
|
|
@@ -12566,17 +12603,17 @@ var Carousel = function Carousel(_ref) {
|
|
|
12566
12603
|
}, children))));
|
|
12567
12604
|
};
|
|
12568
12605
|
|
|
12569
|
-
var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$
|
|
12606
|
+
var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
12570
12607
|
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
12571
12608
|
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12572
12609
|
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12573
12610
|
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12574
|
-
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12575
|
-
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12576
|
-
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12577
|
-
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
12578
|
-
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
12579
|
-
var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
12611
|
+
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12612
|
+
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12613
|
+
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12614
|
+
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
12615
|
+
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12616
|
+
var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12580
12617
|
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12581
12618
|
var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
12582
12619
|
var FirstButtonComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
@@ -12589,7 +12626,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject1
|
|
|
12589
12626
|
}, devices.mobile);
|
|
12590
12627
|
var ProgressContainer$1 = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n p {\n margin-bottom: 16px;\n }\n\n @media ", " {\n margin-top: 20px;\n\n p {\n margin-bottom: 12px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12591
12628
|
|
|
12592
|
-
var _excluded$
|
|
12629
|
+
var _excluded$t = ["text"],
|
|
12593
12630
|
_excluded2$5 = ["text"];
|
|
12594
12631
|
var _buttonTypeToButton$2;
|
|
12595
12632
|
var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
|
|
@@ -12600,7 +12637,7 @@ var Buttons = function Buttons(_ref) {
|
|
|
12600
12637
|
var _ref2 = firstButton || {},
|
|
12601
12638
|
_ref2$text = _ref2.text,
|
|
12602
12639
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
12603
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
12640
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
|
|
12604
12641
|
var secondButton = links == null ? void 0 : links[1];
|
|
12605
12642
|
var _ref3 = secondButton || {},
|
|
12606
12643
|
_ref3$text = _ref3.text,
|
|
@@ -12716,7 +12753,7 @@ var VideoSlide = function VideoSlide(_ref) {
|
|
|
12716
12753
|
});
|
|
12717
12754
|
return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
|
|
12718
12755
|
isCurrentSlide: isCurrentSlide
|
|
12719
|
-
}, /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
12756
|
+
}, /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
|
|
12720
12757
|
video: video,
|
|
12721
12758
|
settings: settings
|
|
12722
12759
|
}));
|
|
@@ -12832,11 +12869,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12832
12869
|
})));
|
|
12833
12870
|
};
|
|
12834
12871
|
|
|
12835
|
-
var _excluded$
|
|
12872
|
+
var _excluded$u = ["logo", "slides"];
|
|
12836
12873
|
var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
12837
12874
|
var logo = _ref.logo,
|
|
12838
12875
|
slides = _ref.slides,
|
|
12839
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12876
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
|
|
12840
12877
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12841
12878
|
var links = processSlideLinks(slide.links);
|
|
12842
12879
|
return _extends({}, slide, {
|
|
@@ -12853,10 +12890,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
|
12853
12890
|
})));
|
|
12854
12891
|
};
|
|
12855
12892
|
|
|
12856
|
-
var _excluded$
|
|
12893
|
+
var _excluded$v = ["slides"];
|
|
12857
12894
|
var HighlightsCore = function HighlightsCore(_ref) {
|
|
12858
12895
|
var slides = _ref.slides,
|
|
12859
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12896
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
|
|
12860
12897
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12861
12898
|
var links = processSlideLinks(slide.links);
|
|
12862
12899
|
return _extends({}, slide, {
|
|
@@ -12870,11 +12907,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
|
|
|
12870
12907
|
})));
|
|
12871
12908
|
};
|
|
12872
12909
|
|
|
12873
|
-
var _excluded$
|
|
12910
|
+
var _excluded$w = ["logo", "slides"];
|
|
12874
12911
|
var HighlightsStream = function HighlightsStream(_ref) {
|
|
12875
12912
|
var logo = _ref.logo,
|
|
12876
12913
|
slides = _ref.slides,
|
|
12877
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12914
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
|
|
12878
12915
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12879
12916
|
var links = processSlideLinks(slide.links);
|
|
12880
12917
|
return _extends({}, slide, {
|
|
@@ -14485,7 +14522,6 @@ exports.Caption = Caption;
|
|
|
14485
14522
|
exports.Card = Card;
|
|
14486
14523
|
exports.Cards = Cards;
|
|
14487
14524
|
exports.Carousel = Carousel;
|
|
14488
|
-
exports.CastFilter = CastFilters;
|
|
14489
14525
|
exports.CinemaBadge = CinemaBadge;
|
|
14490
14526
|
exports.ContactCard = ContactCard;
|
|
14491
14527
|
exports.ContentSummary = ContentSummary;
|
|
@@ -14574,7 +14610,7 @@ exports.TypeTags = TypeTags;
|
|
|
14574
14610
|
exports.UpsellCard = UpsellCard;
|
|
14575
14611
|
exports.UpsellSection = UpsellSection;
|
|
14576
14612
|
exports.VideoControls = VideoControls;
|
|
14577
|
-
exports.VideoWithControls = VideoWithControls$
|
|
14613
|
+
exports.VideoWithControls = VideoWithControls$2;
|
|
14578
14614
|
exports.breakpoints = breakpoints;
|
|
14579
14615
|
exports.devices = devices;
|
|
14580
14616
|
exports.useHarmonicTheme = useHarmonicTheme;
|