@royaloperahouse/harmonic 0.18.3 → 0.18.4-b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/README.md +267 -43
- 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/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/Icons/SvgIcons/Access/Captioned.svg.d.ts +4 -0
- package/dist/components/atoms/Icons/SvgIcons/Access/FamilyFriendly.svg.d.ts +4 -0
- package/dist/components/atoms/Icons/SvgIcons/Access/TouchTour.svg.d.ts +4 -0
- package/dist/components/atoms/Icons/SvgIcons/index.d.ts +3 -0
- package/dist/components/atoms/Tab/Tab.d.ts +1 -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/molecules/CastFilter/CastFilters.style.d.ts +1 -0
- 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/PeopleListing/CreditListing/CreditListing.style.d.ts +2 -0
- package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +3 -1
- package/dist/components/molecules/PersonCard/PersonCard.style.d.ts +3 -1
- package/dist/components/molecules/Select2/Select2.d.ts +1 -1
- package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
- package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +3 -1
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +3 -1
- package/dist/components/organisms/Carousels/HighlightsCarousel/helper.d.ts +1 -1
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +16 -1
- package/dist/harmonic.cjs.development.css +319 -0
- package/dist/harmonic.cjs.development.js +740 -379
- 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 +752 -388
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +1 -0
- package/dist/types/card.d.ts +2 -0
- package/dist/types/impactHeader.d.ts +14 -32
- package/dist/types/signUpForm.d.ts +1 -0
- package/dist/types/types.d.ts +27 -1
- package/package.json +3 -4
- package/README.GIT +0 -294
|
@@ -8,7 +8,7 @@ var React = require('react');
|
|
|
8
8
|
var React__default = _interopDefault(React);
|
|
9
9
|
var styled = require('styled-components');
|
|
10
10
|
var styled__default = _interopDefault(styled);
|
|
11
|
-
var
|
|
11
|
+
var dateFns = require('date-fns');
|
|
12
12
|
var server = require('react-dom/server');
|
|
13
13
|
var Select$1 = require('react-select');
|
|
14
14
|
var Select$1__default = _interopDefault(Select$1);
|
|
@@ -217,7 +217,8 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
|
217
217
|
em = _ref2.em,
|
|
218
218
|
_ref2$color = _ref2.color,
|
|
219
219
|
color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
|
|
220
|
-
serif = _ref2.serif,
|
|
220
|
+
_ref2$serif = _ref2.serif,
|
|
221
|
+
serif = _ref2$serif === void 0 ? false : _ref2$serif,
|
|
221
222
|
hierarchy = _ref2.hierarchy,
|
|
222
223
|
tag = _ref2.tag,
|
|
223
224
|
className = _ref2.className,
|
|
@@ -2018,7 +2019,7 @@ var AudioDescription = (function (_ref) {
|
|
|
2018
2019
|
return /*#__PURE__*/React.createElement("svg", {
|
|
2019
2020
|
width: "100%",
|
|
2020
2021
|
height: "100%",
|
|
2021
|
-
viewBox: "0 0
|
|
2022
|
+
viewBox: "0 0 25 25",
|
|
2022
2023
|
fill: "none",
|
|
2023
2024
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2024
2025
|
"aria-label": ariaLabel
|
|
@@ -2026,10 +2027,10 @@ var AudioDescription = (function (_ref) {
|
|
|
2026
2027
|
d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
|
|
2027
2028
|
fill: color
|
|
2028
2029
|
}), /*#__PURE__*/React.createElement("path", {
|
|
2029
|
-
d: "
|
|
2030
|
+
d: "M10.8194 15.0008L10.4494 13.7708H8.49937L8.12937 15.0008H7.10938L8.97937 9.05078H9.99937L11.8694 15.0008H10.8094H10.8194ZM9.76938 11.5608C9.65938 11.2108 9.56938 10.9108 9.46938 10.5208C9.35938 10.9208 9.26937 11.2508 9.16937 11.5608L8.74937 12.9208H10.1794L9.75938 11.5608H9.76938Z",
|
|
2030
2031
|
fill: color
|
|
2031
2032
|
}), /*#__PURE__*/React.createElement("path", {
|
|
2032
|
-
d: "M12.
|
|
2033
|
+
d: "M12.6797 15.0008V9.05078H14.3797C15.1197 9.05078 15.5597 9.21078 15.9097 9.49078C16.5697 10.0208 16.8497 10.9508 16.8497 12.0208C16.8497 13.0908 16.5697 14.0308 15.9097 14.5508C15.5597 14.8308 15.1197 14.9908 14.3797 14.9908H12.6797V15.0008ZM14.1197 14.1108C14.6597 14.1108 14.9197 14.0908 15.1597 13.9108C15.6997 13.5108 15.7797 12.5308 15.7797 12.0208C15.7797 11.5108 15.6997 10.5308 15.1597 10.1308C14.9197 9.95078 14.6697 9.93078 14.1197 9.93078H13.7397V14.0908H14.1197V14.1108Z",
|
|
2033
2034
|
fill: color
|
|
2034
2035
|
}));
|
|
2035
2036
|
});
|
|
@@ -2069,16 +2070,16 @@ var BritishSignLanguage = (function (_ref) {
|
|
|
2069
2070
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2070
2071
|
"aria-label": ariaLabel
|
|
2071
2072
|
}, /*#__PURE__*/React.createElement("path", {
|
|
2072
|
-
d: "M21
|
|
2073
|
+
d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
|
|
2073
2074
|
fill: color
|
|
2074
2075
|
}), /*#__PURE__*/React.createElement("path", {
|
|
2075
|
-
d: "M5.
|
|
2076
|
+
d: "M5.32031 14.9988V9.04883H7.52031C8.18031 9.04883 8.62031 9.28883 8.91031 9.66883C9.11031 9.91883 9.23031 10.2588 9.23031 10.6088C9.23031 11.1788 8.93031 11.7488 8.34031 11.9388C8.95031 12.1288 9.40031 12.6688 9.40031 13.3988C9.40031 13.9288 9.17031 14.3488 8.85031 14.6288C8.58031 14.8688 8.23031 14.9988 7.55031 14.9988H5.32031ZM7.31031 11.5688C7.68031 11.5688 7.85031 11.4888 7.97031 11.3488C8.10031 11.1988 8.17031 10.9788 8.17031 10.7588C8.17031 10.5188 8.10031 10.3088 7.97031 10.1588C7.85031 10.0188 7.68031 9.93883 7.31031 9.93883H6.38031V11.5688H7.31031ZM7.45031 14.1088C7.86031 14.1088 8.04031 14.0088 8.17031 13.8188C8.27031 13.6788 8.33031 13.4788 8.33031 13.2788C8.33031 13.0588 8.27031 12.8488 8.17031 12.7188C8.04031 12.5288 7.86031 12.4288 7.45031 12.4288H6.38031V14.1088H7.45031Z",
|
|
2076
2077
|
fill: color
|
|
2077
2078
|
}), /*#__PURE__*/React.createElement("path", {
|
|
2078
|
-
d: "M13.
|
|
2079
|
+
d: "M13.0719 11.0897C13.1019 10.9497 13.1219 10.7697 13.1219 10.5997C13.1219 10.0897 12.7919 9.78969 12.2419 9.78969C11.6919 9.78969 11.3919 10.1297 11.3919 10.5797C11.3919 11.2597 12.2819 11.3997 13.0519 11.7397C13.6919 12.0197 14.2519 12.4197 14.2519 13.3897C14.2519 14.4897 13.3419 15.1197 12.2319 15.1197C11.1219 15.1197 10.1719 14.5097 10.1719 13.3897C10.1719 13.1597 10.2119 12.9097 10.2619 12.7897L11.2319 12.7097C11.1919 12.8497 11.1519 13.1097 11.1519 13.3097C11.1519 13.8997 11.6319 14.2697 12.2519 14.2697C12.7219 14.2697 13.2119 13.9697 13.2119 13.4097C13.2119 12.6397 12.4119 12.5397 11.6719 12.2497C10.9619 11.9697 10.3519 11.5597 10.3519 10.6097C10.3519 9.65969 11.1619 8.92969 12.2119 8.92969C13.2619 8.92969 14.0919 9.59969 14.0919 10.5597C14.0919 10.7097 14.0619 10.8997 14.0319 10.9997L13.0719 11.0897Z",
|
|
2079
2080
|
fill: color
|
|
2080
2081
|
}), /*#__PURE__*/React.createElement("path", {
|
|
2081
|
-
d: "M15.
|
|
2082
|
+
d: "M15.3281 14.9988V9.04883H16.3881V14.1088H18.7681V14.9988H15.3281Z",
|
|
2082
2083
|
fill: color
|
|
2083
2084
|
}));
|
|
2084
2085
|
});
|
|
@@ -2152,6 +2153,78 @@ var OpenCaptions = (function (_ref) {
|
|
|
2152
2153
|
}));
|
|
2153
2154
|
});
|
|
2154
2155
|
|
|
2156
|
+
var Captioned = (function (_ref) {
|
|
2157
|
+
var _ref$color = _ref.color,
|
|
2158
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
|
|
2159
|
+
ariaLabel = _ref.ariaLabel;
|
|
2160
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
2161
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2162
|
+
width: "100%",
|
|
2163
|
+
height: "100%",
|
|
2164
|
+
viewBox: "0 0 25 25",
|
|
2165
|
+
fill: "none",
|
|
2166
|
+
"aria-label": ariaLabel
|
|
2167
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
2168
|
+
d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
|
|
2169
|
+
fill: color
|
|
2170
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
2171
|
+
d: "M9.23998 12.89C9.23998 13.43 9.12999 13.91 8.87999 14.29C8.53999 14.83 7.92999 15.12 7.17999 15.12C6.33999 15.12 5.63998 14.71 5.23998 13.91C4.98998 13.41 4.85999 12.76 4.85999 12.01C4.85999 10.12 5.68999 8.91 7.18999 8.91C8.28999 8.91 9.06998 9.71 9.06998 10.85C9.06998 10.94 9.06999 11.14 9.03999 11.25L8.06998 11.29C8.08998 11.21 8.09999 11.06 8.09999 10.92C8.09999 10.31 7.79999 9.8 7.18999 9.8C6.35999 9.8 5.92999 10.68 5.92999 12.01C5.92999 12.53 5.98999 12.98 6.11999 13.34C6.28999 13.82 6.59999 14.22 7.18999 14.22C7.93999 14.22 8.30999 13.71 8.34999 12.69L9.24999 12.74V12.88L9.23998 12.89Z",
|
|
2172
|
+
fill: color
|
|
2173
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
2174
|
+
d: "M13.31 15L12.94 13.77H10.99L10.62 15H9.59998L11.47 9.05H12.49L14.36 15H13.3H13.31ZM12.27 11.56C12.16 11.21 12.07 10.91 11.97 10.52C11.86 10.92 11.77 11.25 11.67 11.56L11.25 12.92H12.68L12.26 11.56H12.27Z",
|
|
2175
|
+
fill: color
|
|
2176
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
2177
|
+
d: "M15.17 15V9.05H17.27C17.88 9.05 18.27 9.21 18.56 9.47C18.93 9.8 19.12 10.29 19.12 10.83C19.12 11.37 18.92 11.86 18.56 12.19C18.27 12.45 17.88 12.61 17.27 12.61H16.23V14.99H15.17V15ZM17.11 11.73C17.52 11.73 17.71 11.64 17.84 11.48C17.98 11.32 18.06 11.09 18.06 10.83C18.06 10.57 17.98 10.35 17.84 10.18C17.71 10.03 17.52 9.93 17.11 9.93H16.23V11.72H17.11V11.73Z",
|
|
2178
|
+
fill: color
|
|
2179
|
+
}));
|
|
2180
|
+
});
|
|
2181
|
+
|
|
2182
|
+
var FamilyFriendly = (function (_ref) {
|
|
2183
|
+
var _ref$color = _ref.color,
|
|
2184
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
|
|
2185
|
+
ariaLabel = _ref.ariaLabel;
|
|
2186
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
2187
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2188
|
+
width: "100%",
|
|
2189
|
+
height: "100%",
|
|
2190
|
+
viewBox: "0 0 25 25",
|
|
2191
|
+
fill: "none",
|
|
2192
|
+
"aria-label": ariaLabel
|
|
2193
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
2194
|
+
d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
|
|
2195
|
+
fill: color
|
|
2196
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
2197
|
+
d: "M8.21 15V9.04999H11.57V9.93999H9.28V11.64H10.89V12.49H9.28V15H8.22H8.21Z",
|
|
2198
|
+
fill: color
|
|
2199
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
2200
|
+
d: "M12.48 15V9.04999H15.84V9.93999H13.55V11.64H15.16V12.49H13.55V15H12.49H12.48Z",
|
|
2201
|
+
fill: color
|
|
2202
|
+
}));
|
|
2203
|
+
});
|
|
2204
|
+
|
|
2205
|
+
var TouchTour = (function (_ref) {
|
|
2206
|
+
var _ref$color = _ref.color,
|
|
2207
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
|
|
2208
|
+
ariaLabel = _ref.ariaLabel;
|
|
2209
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
2210
|
+
width: "100%",
|
|
2211
|
+
height: "100%",
|
|
2212
|
+
viewBox: "0 0 25 25",
|
|
2213
|
+
fill: "none",
|
|
2214
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2215
|
+
"aria-label": ariaLabel
|
|
2216
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
2217
|
+
d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
|
|
2218
|
+
fill: color
|
|
2219
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
2220
|
+
d: "M8.91 15V9.94H7.38V9.05H11.5V9.94H9.97001V15H8.91Z",
|
|
2221
|
+
fill: color
|
|
2222
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
2223
|
+
d: "M14.03 15V9.94H12.5V9.05H16.62V9.94H15.09V15H14.03Z",
|
|
2224
|
+
fill: color
|
|
2225
|
+
}));
|
|
2226
|
+
});
|
|
2227
|
+
|
|
2155
2228
|
var Forward10 = (function (_ref) {
|
|
2156
2229
|
var _ref$color = _ref.color,
|
|
2157
2230
|
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
|
|
@@ -2299,13 +2372,13 @@ var RelaxedPerformance = (function (_ref) {
|
|
|
2299
2372
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2300
2373
|
"aria-label": ariaLabel
|
|
2301
2374
|
}, /*#__PURE__*/React.createElement("path", {
|
|
2302
|
-
d: "M21
|
|
2375
|
+
d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
|
|
2303
2376
|
fill: color
|
|
2304
2377
|
}), /*#__PURE__*/React.createElement("path", {
|
|
2305
|
-
d: "
|
|
2378
|
+
d: "M10.3678 15.0008C10.2278 14.7508 10.2378 14.3408 10.2278 13.9408L10.2078 13.4208C10.2078 13.0508 10.1278 12.8608 9.99781 12.7308C9.85781 12.5908 9.64781 12.5808 9.36781 12.5808H8.56781V15.0008H7.50781V9.05078H9.64781C10.2578 9.05078 10.6478 9.21078 10.9378 9.47078C11.2878 9.78078 11.4978 10.2408 11.4978 10.7408C11.4978 11.4408 11.0078 12.1308 10.1478 12.1908C10.7578 12.2608 11.1478 12.6408 11.1978 13.4008L11.2278 13.9308C11.2578 14.2908 11.2578 14.5208 11.3078 14.6908C11.3378 14.7908 11.3878 14.9108 11.4978 14.9608V14.9908H10.3678V15.0008ZM9.48781 11.7308C9.89781 11.7308 10.0878 11.6408 10.2178 11.4808C10.3578 11.3208 10.4378 11.0908 10.4378 10.8308C10.4378 10.5708 10.3578 10.3508 10.2178 10.1808C10.0878 10.0308 9.89781 9.93078 9.48781 9.93078H8.56781V11.7208H9.48781V11.7308Z",
|
|
2306
2379
|
fill: color
|
|
2307
2380
|
}), /*#__PURE__*/React.createElement("path", {
|
|
2308
|
-
d: "
|
|
2381
|
+
d: "M12.6016 15.0008V9.05078H14.7016C15.3116 9.05078 15.7016 9.21078 15.9916 9.47078C16.3616 9.80078 16.5516 10.2908 16.5516 10.8308C16.5516 11.3708 16.3516 11.8608 15.9916 12.1908C15.7016 12.4508 15.3116 12.6108 14.7016 12.6108H13.6616V14.9908H12.6016V15.0008ZM14.5416 11.7308C14.9516 11.7308 15.1416 11.6408 15.2716 11.4808C15.4116 11.3208 15.4916 11.0908 15.4916 10.8308C15.4916 10.5708 15.4116 10.3508 15.2716 10.1808C15.1416 10.0308 14.9516 9.93078 14.5416 9.93078H13.6616V11.7208H14.5416V11.7308Z",
|
|
2309
2382
|
fill: color
|
|
2310
2383
|
}));
|
|
2311
2384
|
});
|
|
@@ -2457,6 +2530,7 @@ var IconLibrary = {
|
|
|
2457
2530
|
Clips: Clips,
|
|
2458
2531
|
Clock: Clock,
|
|
2459
2532
|
Close: Close,
|
|
2533
|
+
Captioned: Captioned,
|
|
2460
2534
|
ClosedCaptions: ClosedCaptions,
|
|
2461
2535
|
Confirm: Confirm,
|
|
2462
2536
|
CreditCard: CreditCard,
|
|
@@ -2469,6 +2543,7 @@ var IconLibrary = {
|
|
|
2469
2543
|
Expand12px: Expand12px,
|
|
2470
2544
|
ExternalLink: ExternalLink,
|
|
2471
2545
|
Facebook: Facebook,
|
|
2546
|
+
FamilyFriendly: FamilyFriendly,
|
|
2472
2547
|
Favourite: Favourite,
|
|
2473
2548
|
FavouriteFull: FavouriteFull,
|
|
2474
2549
|
Filter: Filter,
|
|
@@ -2517,6 +2592,7 @@ var IconLibrary = {
|
|
|
2517
2592
|
Tick: Tick,
|
|
2518
2593
|
Tickets: Tickets,
|
|
2519
2594
|
Tiktok: Tiktok,
|
|
2595
|
+
TouchTour: TouchTour,
|
|
2520
2596
|
Trailer: Trailer,
|
|
2521
2597
|
Twitter: Twitter,
|
|
2522
2598
|
User: User,
|
|
@@ -2551,7 +2627,7 @@ var Icon = /*#__PURE__*/React.memo(function (props) {
|
|
|
2551
2627
|
Icon.displayName = 'Icon';
|
|
2552
2628
|
|
|
2553
2629
|
var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
|
|
2554
|
-
var Button = function
|
|
2630
|
+
var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
2555
2631
|
var children = _ref.children,
|
|
2556
2632
|
iconName = _ref.iconName,
|
|
2557
2633
|
iconDirection = _ref.iconDirection,
|
|
@@ -2561,7 +2637,7 @@ var Button = function Button(_ref) {
|
|
|
2561
2637
|
href = _ref.href,
|
|
2562
2638
|
onClick = _ref.onClick,
|
|
2563
2639
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
2564
|
-
var truncatedString = children.substring(0, 30);
|
|
2640
|
+
var truncatedString = children == null ? void 0 : children.substring(0, 30);
|
|
2565
2641
|
var handleClick = React.useCallback(function (e) {
|
|
2566
2642
|
if (!href) e.preventDefault();
|
|
2567
2643
|
onClick == null || onClick(e);
|
|
@@ -2573,7 +2649,8 @@ var Button = function Button(_ref) {
|
|
|
2573
2649
|
href: href != null ? href : '#',
|
|
2574
2650
|
onClick: handleClick,
|
|
2575
2651
|
iconName: iconName,
|
|
2576
|
-
className: className
|
|
2652
|
+
className: className,
|
|
2653
|
+
ref: ref
|
|
2577
2654
|
}), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
|
|
2578
2655
|
"data-testid": "button-icon",
|
|
2579
2656
|
className: iconClassName
|
|
@@ -2584,7 +2661,8 @@ var Button = function Button(_ref) {
|
|
|
2584
2661
|
}))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
|
|
2585
2662
|
color: "inherit"
|
|
2586
2663
|
}, truncatedString));
|
|
2587
|
-
};
|
|
2664
|
+
});
|
|
2665
|
+
Button.displayName = 'Button';
|
|
2588
2666
|
|
|
2589
2667
|
var getPointerEvents = function getPointerEvents(_ref) {
|
|
2590
2668
|
var disabled = _ref.disabled;
|
|
@@ -2649,7 +2727,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
|
2649
2727
|
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
2728
|
|
|
2651
2729
|
var _excluded$3 = ["children", "disabled", "className"];
|
|
2652
|
-
var PrimaryButton = function
|
|
2730
|
+
var PrimaryButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
2653
2731
|
var children = _ref.children,
|
|
2654
2732
|
disabled = _ref.disabled,
|
|
2655
2733
|
className = _ref.className,
|
|
@@ -2664,6 +2742,7 @@ var PrimaryButton = function PrimaryButton(_ref) {
|
|
|
2664
2742
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
|
|
2665
2743
|
id: disabledButtonDescriptionId
|
|
2666
2744
|
}, disabledButtonDescription), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2745
|
+
ref: ref,
|
|
2667
2746
|
disabled: true,
|
|
2668
2747
|
"aria-disabled": "true",
|
|
2669
2748
|
role: "button",
|
|
@@ -2673,10 +2752,13 @@ var PrimaryButton = function PrimaryButton(_ref) {
|
|
|
2673
2752
|
onClick: handleClick
|
|
2674
2753
|
}), children));
|
|
2675
2754
|
}
|
|
2676
|
-
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2755
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2756
|
+
ref: ref
|
|
2757
|
+
}, props, {
|
|
2677
2758
|
className: className
|
|
2678
2759
|
}), children);
|
|
2679
|
-
};
|
|
2760
|
+
});
|
|
2761
|
+
PrimaryButton.displayName = 'PrimaryButton';
|
|
2680
2762
|
|
|
2681
2763
|
var COLORS$1 = {
|
|
2682
2764
|
disabled: 'var(--color-state-disabled)',
|
|
@@ -3824,6 +3906,7 @@ var Tab = function Tab(_ref) {
|
|
|
3824
3906
|
className = _ref.className,
|
|
3825
3907
|
role = _ref.role,
|
|
3826
3908
|
ariaLabel = _ref.ariaLabel,
|
|
3909
|
+
tabLinkId = _ref.tabLinkId,
|
|
3827
3910
|
color = _ref.color,
|
|
3828
3911
|
dataTestId = _ref.dataTestId,
|
|
3829
3912
|
isOpen = _ref.isOpen;
|
|
@@ -3858,8 +3941,9 @@ var Tab = function Tab(_ref) {
|
|
|
3858
3941
|
className: className,
|
|
3859
3942
|
"data-testid": dataTestId
|
|
3860
3943
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
3861
|
-
|
|
3944
|
+
id: tabLinkId,
|
|
3862
3945
|
trimText: trimText,
|
|
3946
|
+
color: color,
|
|
3863
3947
|
withTextInMobile: withTextInMobile,
|
|
3864
3948
|
"aria-hidden": "true"
|
|
3865
3949
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -4269,14 +4353,16 @@ var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_temp
|
|
|
4269
4353
|
}, devices.mobile);
|
|
4270
4354
|
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
4271
4355
|
|
|
4272
|
-
var _excluded$d = ["children", "iconName", "iconDirection", "textColor"];
|
|
4356
|
+
var _excluded$d = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
4273
4357
|
var TextLink = function TextLink(_ref) {
|
|
4274
4358
|
var children = _ref.children,
|
|
4275
4359
|
iconName = _ref.iconName,
|
|
4276
4360
|
iconDirection = _ref.iconDirection,
|
|
4277
4361
|
textColor = _ref.textColor,
|
|
4362
|
+
_ref$disableTruncatio = _ref.disableTruncation,
|
|
4363
|
+
disableTruncation = _ref$disableTruncatio === void 0 ? false : _ref$disableTruncatio,
|
|
4278
4364
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
|
|
4279
|
-
var truncatedString = children.substring(0, 30);
|
|
4365
|
+
var truncatedString = disableTruncation ? children : children.substring(0, 30);
|
|
4280
4366
|
return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
|
|
4281
4367
|
color: textColor,
|
|
4282
4368
|
iconName: iconName
|
|
@@ -4544,6 +4630,31 @@ var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 ||
|
|
|
4544
4630
|
var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4545
4631
|
var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4546
4632
|
|
|
4633
|
+
var pad = function pad(num) {
|
|
4634
|
+
return String(num || 0).padStart(2, '0');
|
|
4635
|
+
};
|
|
4636
|
+
var renderTimerValue = function renderTimerValue(value, label, separator) {
|
|
4637
|
+
if (separator === void 0) {
|
|
4638
|
+
separator = true;
|
|
4639
|
+
}
|
|
4640
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
|
|
4641
|
+
className: "harmonic-timer-value"
|
|
4642
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4643
|
+
color: "inherit",
|
|
4644
|
+
hierarchy: "h3",
|
|
4645
|
+
size: "medium",
|
|
4646
|
+
"data-testid": label
|
|
4647
|
+
}, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
|
|
4648
|
+
className: "harmonic-timer-label"
|
|
4649
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4650
|
+
color: "inherit",
|
|
4651
|
+
size: "large"
|
|
4652
|
+
}, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4653
|
+
color: "inherit",
|
|
4654
|
+
hierarchy: "h3",
|
|
4655
|
+
size: "medium"
|
|
4656
|
+
}, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
|
|
4657
|
+
};
|
|
4547
4658
|
var Timer = function Timer(_ref) {
|
|
4548
4659
|
var endDate = _ref.endDate,
|
|
4549
4660
|
title = _ref.title,
|
|
@@ -4552,43 +4663,22 @@ var Timer = function Timer(_ref) {
|
|
|
4552
4663
|
bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
|
|
4553
4664
|
_ref$color = _ref.color,
|
|
4554
4665
|
color = _ref$color === void 0 ? ThemeColor['base-black'] : _ref$color;
|
|
4555
|
-
var
|
|
4556
|
-
seconds =
|
|
4557
|
-
setSeconds =
|
|
4558
|
-
var
|
|
4559
|
-
minutes =
|
|
4560
|
-
setMinutes =
|
|
4561
|
-
var
|
|
4562
|
-
hours =
|
|
4563
|
-
setHours =
|
|
4564
|
-
var
|
|
4565
|
-
days =
|
|
4566
|
-
setDays =
|
|
4567
|
-
var
|
|
4568
|
-
isEndDateReached =
|
|
4569
|
-
setIsEndDateReached =
|
|
4570
|
-
|
|
4571
|
-
if (separator === void 0) {
|
|
4572
|
-
separator = true;
|
|
4573
|
-
}
|
|
4574
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
|
|
4575
|
-
className: "harmonic-timer-value"
|
|
4576
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4577
|
-
color: "inherit",
|
|
4578
|
-
hierarchy: "h3",
|
|
4579
|
-
size: "medium"
|
|
4580
|
-
}, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
|
|
4581
|
-
className: "harmonic-timer-label"
|
|
4582
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4583
|
-
color: "inherit",
|
|
4584
|
-
size: "large"
|
|
4585
|
-
}, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4586
|
-
color: "inherit",
|
|
4587
|
-
hierarchy: "h3",
|
|
4588
|
-
size: "medium"
|
|
4589
|
-
}, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
|
|
4590
|
-
};
|
|
4591
|
-
React__default.useEffect(function () {
|
|
4666
|
+
var _useState = React.useState('00'),
|
|
4667
|
+
seconds = _useState[0],
|
|
4668
|
+
setSeconds = _useState[1];
|
|
4669
|
+
var _useState2 = React.useState('00'),
|
|
4670
|
+
minutes = _useState2[0],
|
|
4671
|
+
setMinutes = _useState2[1];
|
|
4672
|
+
var _useState3 = React.useState('00'),
|
|
4673
|
+
hours = _useState3[0],
|
|
4674
|
+
setHours = _useState3[1];
|
|
4675
|
+
var _useState4 = React.useState('00'),
|
|
4676
|
+
days = _useState4[0],
|
|
4677
|
+
setDays = _useState4[1];
|
|
4678
|
+
var _useState5 = React.useState(false),
|
|
4679
|
+
isEndDateReached = _useState5[0],
|
|
4680
|
+
setIsEndDateReached = _useState5[1];
|
|
4681
|
+
React.useEffect(function () {
|
|
4592
4682
|
if (isEndDateReached) return undefined;
|
|
4593
4683
|
// We use this to set values for the timer immediately
|
|
4594
4684
|
var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
|
|
@@ -4596,19 +4686,21 @@ var Timer = function Timer(_ref) {
|
|
|
4596
4686
|
return setInterval(fn, delay);
|
|
4597
4687
|
};
|
|
4598
4688
|
var updateValues = function updateValues() {
|
|
4599
|
-
var futureDate =
|
|
4600
|
-
var nowDate =
|
|
4601
|
-
var
|
|
4602
|
-
|
|
4603
|
-
if (differenceInMilliseconds < 0) {
|
|
4689
|
+
var futureDate = new Date(endDate);
|
|
4690
|
+
var nowDate = new Date();
|
|
4691
|
+
var diffInMs = futureDate.getTime() - nowDate.getTime();
|
|
4692
|
+
if (diffInMs < 0) {
|
|
4604
4693
|
setIsEndDateReached(true);
|
|
4605
4694
|
if (endDateHandler) endDateHandler();
|
|
4606
4695
|
} else {
|
|
4607
|
-
var
|
|
4608
|
-
|
|
4609
|
-
|
|
4610
|
-
|
|
4611
|
-
var
|
|
4696
|
+
var duration = dateFns.intervalToDuration({
|
|
4697
|
+
start: nowDate,
|
|
4698
|
+
end: futureDate
|
|
4699
|
+
});
|
|
4700
|
+
var daysDiff = pad(dateFns.differenceInDays(futureDate, nowDate));
|
|
4701
|
+
var hoursDiff = pad(duration.hours);
|
|
4702
|
+
var minutesDiff = pad(duration.minutes);
|
|
4703
|
+
var secondsDiff = pad(duration.seconds);
|
|
4612
4704
|
setDays(daysDiff);
|
|
4613
4705
|
setHours(hoursDiff);
|
|
4614
4706
|
setMinutes(minutesDiff);
|
|
@@ -4620,7 +4712,7 @@ var Timer = function Timer(_ref) {
|
|
|
4620
4712
|
clearInterval(interval);
|
|
4621
4713
|
};
|
|
4622
4714
|
});
|
|
4623
|
-
var hideTimer =
|
|
4715
|
+
var hideTimer = dateFns.isPast(new Date(endDate));
|
|
4624
4716
|
if (hideTimer) return null;
|
|
4625
4717
|
return /*#__PURE__*/React__default.createElement(TimerWrapper, {
|
|
4626
4718
|
color: color
|
|
@@ -5338,6 +5430,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5338
5430
|
className = _ref.className,
|
|
5339
5431
|
role = _ref.role,
|
|
5340
5432
|
ariaLabel = _ref.ariaLabel,
|
|
5433
|
+
tabLinkId = _ref.tabLinkId,
|
|
5341
5434
|
trimTabText = _ref.trimTabText;
|
|
5342
5435
|
var node = React.useRef();
|
|
5343
5436
|
var _useState = React.useState(false),
|
|
@@ -5434,6 +5527,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5434
5527
|
};
|
|
5435
5528
|
var renderTab = function renderTab() {
|
|
5436
5529
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
5530
|
+
tabLinkId: tabLinkId,
|
|
5437
5531
|
trimText: trimTabText,
|
|
5438
5532
|
title: title,
|
|
5439
5533
|
titleLink: titleLink,
|
|
@@ -5513,7 +5607,8 @@ var Account = function Account(_ref) {
|
|
|
5513
5607
|
iconName: iconName,
|
|
5514
5608
|
withOptionsInMobile: false,
|
|
5515
5609
|
withIcon: "left",
|
|
5516
|
-
className: className
|
|
5610
|
+
className: className,
|
|
5611
|
+
tabLinkId: "account-link"
|
|
5517
5612
|
});
|
|
5518
5613
|
};
|
|
5519
5614
|
|
|
@@ -5902,21 +5997,69 @@ var Accordion = function Accordion(_ref) {
|
|
|
5902
5997
|
var content = React.useRef(null);
|
|
5903
5998
|
var timeoutRef = React.useRef(null);
|
|
5904
5999
|
var rafRef = React.useRef(null);
|
|
6000
|
+
var resizeObserverRef = React.useRef(null);
|
|
6001
|
+
var intervalRef = React.useRef(null);
|
|
5905
6002
|
React.useEffect(function () {
|
|
5906
|
-
if (content
|
|
6003
|
+
if (content.current && initOpen) {
|
|
5907
6004
|
setTextHeight(content.current.scrollHeight + "px");
|
|
5908
6005
|
}
|
|
5909
|
-
}, [
|
|
6006
|
+
}, [initOpen]);
|
|
5910
6007
|
React.useEffect(function () {
|
|
5911
|
-
|
|
5912
|
-
|
|
5913
|
-
|
|
5914
|
-
|
|
5915
|
-
|
|
5916
|
-
|
|
6008
|
+
var cleanup = function cleanup() {
|
|
6009
|
+
return undefined;
|
|
6010
|
+
};
|
|
6011
|
+
var el = content.current;
|
|
6012
|
+
if (!el) return cleanup;
|
|
6013
|
+
if (!openAccordion) {
|
|
5917
6014
|
setTextHeight('0px');
|
|
6015
|
+
if (resizeObserverRef.current) {
|
|
6016
|
+
resizeObserverRef.current.disconnect();
|
|
6017
|
+
resizeObserverRef.current = null;
|
|
6018
|
+
}
|
|
6019
|
+
if (intervalRef.current) {
|
|
6020
|
+
window.clearInterval(intervalRef.current);
|
|
6021
|
+
intervalRef.current = null;
|
|
6022
|
+
}
|
|
6023
|
+
if (rafRef.current) {
|
|
6024
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6025
|
+
rafRef.current = null;
|
|
6026
|
+
}
|
|
6027
|
+
return cleanup;
|
|
5918
6028
|
}
|
|
5919
|
-
|
|
6029
|
+
var updateHeight = function updateHeight() {
|
|
6030
|
+
setTextHeight(el.scrollHeight + "px");
|
|
6031
|
+
};
|
|
6032
|
+
rafRef.current = window.requestAnimationFrame(updateHeight);
|
|
6033
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
6034
|
+
var ro = new ResizeObserver(updateHeight);
|
|
6035
|
+
ro.observe(el);
|
|
6036
|
+
resizeObserverRef.current = ro;
|
|
6037
|
+
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6038
|
+
return function () {
|
|
6039
|
+
ro.disconnect();
|
|
6040
|
+
resizeObserverRef.current = null;
|
|
6041
|
+
if (intervalRef.current) {
|
|
6042
|
+
window.clearInterval(intervalRef.current);
|
|
6043
|
+
intervalRef.current = null;
|
|
6044
|
+
}
|
|
6045
|
+
if (rafRef.current) {
|
|
6046
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6047
|
+
rafRef.current = null;
|
|
6048
|
+
}
|
|
6049
|
+
};
|
|
6050
|
+
}
|
|
6051
|
+
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6052
|
+
return function () {
|
|
6053
|
+
if (intervalRef.current) {
|
|
6054
|
+
window.clearInterval(intervalRef.current);
|
|
6055
|
+
intervalRef.current = null;
|
|
6056
|
+
}
|
|
6057
|
+
if (rafRef.current) {
|
|
6058
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6059
|
+
rafRef.current = null;
|
|
6060
|
+
}
|
|
6061
|
+
};
|
|
6062
|
+
}, [openAccordion, childrenVisibility, children]);
|
|
5920
6063
|
React.useEffect(function () {
|
|
5921
6064
|
return function () {
|
|
5922
6065
|
if (timeoutRef.current) {
|
|
@@ -5927,11 +6070,20 @@ var Accordion = function Accordion(_ref) {
|
|
|
5927
6070
|
window.cancelAnimationFrame(rafRef.current);
|
|
5928
6071
|
rafRef.current = null;
|
|
5929
6072
|
}
|
|
6073
|
+
if (resizeObserverRef.current) {
|
|
6074
|
+
resizeObserverRef.current.disconnect();
|
|
6075
|
+
resizeObserverRef.current = null;
|
|
6076
|
+
}
|
|
6077
|
+
if (intervalRef.current) {
|
|
6078
|
+
window.clearInterval(intervalRef.current);
|
|
6079
|
+
intervalRef.current = null;
|
|
6080
|
+
}
|
|
5930
6081
|
};
|
|
5931
6082
|
}, []);
|
|
5932
6083
|
var toggleAccordion = function toggleAccordion() {
|
|
5933
6084
|
if (React__default.Children.count(children) === 0) return;
|
|
5934
6085
|
if (openAccordion) {
|
|
6086
|
+
setIcon(collapsedStateIconData);
|
|
5935
6087
|
setOpenAccordion(false);
|
|
5936
6088
|
setTextHeight('0px');
|
|
5937
6089
|
setIcon(collapsedStateIconData);
|
|
@@ -6472,17 +6624,20 @@ var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_temp
|
|
|
6472
6624
|
var isSelected = _ref.isSelected;
|
|
6473
6625
|
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
6474
6626
|
});
|
|
6475
|
-
var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__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) {
|
|
6476
|
-
var
|
|
6627
|
+
var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n filter: ", ";\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) {
|
|
6628
|
+
var greyscale = _ref2.greyscale;
|
|
6629
|
+
return greyscale ? 'grayscale(100%)' : 'none';
|
|
6630
|
+
}, function (_ref3) {
|
|
6631
|
+
var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
|
|
6477
6632
|
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6478
6633
|
});
|
|
6479
6634
|
var PersonName = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__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);
|
|
6480
|
-
var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__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 (
|
|
6481
|
-
var isSelected = _ref3.isSelected;
|
|
6482
|
-
return isSelected ? 'flex' : 'none';
|
|
6483
|
-
}, function (_ref4) {
|
|
6635
|
+
var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__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 (_ref4) {
|
|
6484
6636
|
var isSelected = _ref4.isSelected;
|
|
6485
6637
|
return isSelected ? 'flex' : 'none';
|
|
6638
|
+
}, function (_ref5) {
|
|
6639
|
+
var isSelected = _ref5.isSelected;
|
|
6640
|
+
return isSelected ? 'flex' : 'none';
|
|
6486
6641
|
});
|
|
6487
6642
|
var EmptySelectionTextSpacer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
|
|
6488
6643
|
|
|
@@ -6890,6 +7045,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6890
7045
|
onSelect = _ref.onSelect,
|
|
6891
7046
|
onApply = _ref.onApply,
|
|
6892
7047
|
onClear = _ref.onClear,
|
|
7048
|
+
_ref$greyscale = _ref.greyscale,
|
|
7049
|
+
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
6893
7050
|
_ref$selectedIndices = _ref.selectedIndices,
|
|
6894
7051
|
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
6895
7052
|
var _useViewport = useViewport(),
|
|
@@ -7030,7 +7187,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7030
7187
|
src: personImage,
|
|
7031
7188
|
alt: image ? name : "Placeholder image for " + name,
|
|
7032
7189
|
draggable: false,
|
|
7033
|
-
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7190
|
+
isDefaultPlaceholder: !(!!image || !!placeholderImage),
|
|
7191
|
+
greyscale: greyscale
|
|
7034
7192
|
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7035
7193
|
isSelected: isSelected
|
|
7036
7194
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -7682,91 +7840,274 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7682
7840
|
};
|
|
7683
7841
|
|
|
7684
7842
|
var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
|
|
7685
|
-
var
|
|
7686
|
-
var
|
|
7687
|
-
var
|
|
7688
|
-
|
|
7689
|
-
|
|
7690
|
-
|
|
7691
|
-
|
|
7692
|
-
var
|
|
7843
|
+
var ImpactHeaderWrapper = /*#__PURE__*/styled__default.header(_templateObject$R || (_templateObject$R = /*#__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);
|
|
7844
|
+
var ImpactTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__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) {
|
|
7845
|
+
var hasButton = _ref.hasButton,
|
|
7846
|
+
sponsorPresent = _ref.sponsorPresent;
|
|
7847
|
+
if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
|
|
7848
|
+
return '1fr';
|
|
7849
|
+
}, devices.tablet, devices.mobile, function (_ref2) {
|
|
7850
|
+
var sponsorPresent = _ref2.sponsorPresent;
|
|
7851
|
+
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7852
|
+
});
|
|
7853
|
+
var TitleButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7854
|
+
var sponsorWidth = _ref3.sponsorWidth;
|
|
7855
|
+
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7856
|
+
});
|
|
7857
|
+
var TitleButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n position: static;\n margin-right: 0;\n }\n"])), devices.mobile);
|
|
7858
|
+
var MobileButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 0 20px 16px 20px;\n"])));
|
|
7859
|
+
var ImpactTitle = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$e || (_templateObject6$e = /*#__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) {
|
|
7860
|
+
var hasColumns = _ref4.hasColumns;
|
|
7861
|
+
return hasColumns ? '3' : '1';
|
|
7862
|
+
}, devices.mobile);
|
|
7863
|
+
var ImpactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__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);
|
|
7864
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__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) {
|
|
7865
|
+
var buttonWidth = _ref5.buttonWidth;
|
|
7866
|
+
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7867
|
+
}, devices.mobile);
|
|
7868
|
+
|
|
7869
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q;
|
|
7870
|
+
var VideoPlayButton$1 = /*#__PURE__*/styled__default.button(_templateObject$S || (_templateObject$S = /*#__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);
|
|
7871
|
+
var VideoControlsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
7872
|
+
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__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);
|
|
7873
|
+
var LeftWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7874
|
+
|
|
7875
|
+
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
7876
|
+
var videoElementId = _ref.videoElementId,
|
|
7877
|
+
_ref$loop = _ref.loop,
|
|
7878
|
+
loop = _ref$loop === void 0 ? false : _ref$loop;
|
|
7879
|
+
var _React$useState = React__default.useState(false),
|
|
7880
|
+
playing = _React$useState[0],
|
|
7881
|
+
setPlaying = _React$useState[1];
|
|
7882
|
+
var getVideoElement = function getVideoElement() {
|
|
7883
|
+
return document.querySelector("#" + videoElementId);
|
|
7884
|
+
};
|
|
7885
|
+
React__default.useEffect(function () {
|
|
7886
|
+
var video = getVideoElement();
|
|
7887
|
+
if (video) {
|
|
7888
|
+
video.loop = loop;
|
|
7889
|
+
}
|
|
7890
|
+
}, [loop]);
|
|
7891
|
+
var handlePlay = React__default.useCallback(function () {
|
|
7892
|
+
var video = getVideoElement();
|
|
7893
|
+
if (!video) return;
|
|
7894
|
+
if (playing) {
|
|
7895
|
+
video.pause();
|
|
7896
|
+
setPlaying(false);
|
|
7897
|
+
} else {
|
|
7898
|
+
video == null || video.play();
|
|
7899
|
+
setPlaying(true);
|
|
7900
|
+
}
|
|
7901
|
+
}, [playing]);
|
|
7902
|
+
return /*#__PURE__*/React__default.createElement(VideoControlsWrapper$1, {
|
|
7903
|
+
className: "video-controls-container"
|
|
7904
|
+
}, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper$1, null, /*#__PURE__*/React__default.createElement(LeftWrapper$1, null, /*#__PURE__*/React__default.createElement(VideoPlayButton$1, {
|
|
7905
|
+
id: "play",
|
|
7906
|
+
onClick: handlePlay,
|
|
7907
|
+
className: "video-play-button",
|
|
7908
|
+
"data-testid": "video-play-button",
|
|
7909
|
+
"aria-label": !playing ? 'Play' : 'Pause'
|
|
7910
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7911
|
+
iconName: !playing ? 'Play' : 'Pause',
|
|
7912
|
+
color: "white"
|
|
7913
|
+
})))));
|
|
7914
|
+
};
|
|
7693
7915
|
|
|
7694
7916
|
var _excluded$k = ["text"];
|
|
7695
|
-
var
|
|
7696
|
-
|
|
7697
|
-
|
|
7698
|
-
|
|
7699
|
-
|
|
7700
|
-
|
|
7701
|
-
|
|
7702
|
-
|
|
7703
|
-
|
|
7704
|
-
|
|
7705
|
-
|
|
7706
|
-
|
|
7707
|
-
|
|
7708
|
-
|
|
7709
|
-
|
|
7710
|
-
|
|
7711
|
-
|
|
7712
|
-
|
|
7713
|
-
|
|
7714
|
-
|
|
7715
|
-
|
|
7716
|
-
|
|
7717
|
-
|
|
7718
|
-
|
|
7719
|
-
|
|
7720
|
-
|
|
7721
|
-
|
|
7917
|
+
var CHAR_LIMIT = 100;
|
|
7918
|
+
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7919
|
+
var mobileVideo = video.mobile || video.desktop;
|
|
7920
|
+
var desktopVideo = video.desktop || video.mobile;
|
|
7921
|
+
var mobilePoster = poster.mobile || poster.desktop;
|
|
7922
|
+
var desktopPoster = poster.desktop || poster.mobile;
|
|
7923
|
+
var _useState = React.useState(desktopPoster),
|
|
7924
|
+
posterUrl = _useState[0],
|
|
7925
|
+
setPoster = _useState[1];
|
|
7926
|
+
var _useState2 = React.useState(desktopVideo),
|
|
7927
|
+
videoUrl = _useState2[0],
|
|
7928
|
+
setVideoUrl = _useState2[1];
|
|
7929
|
+
var isMobile = useMobile();
|
|
7930
|
+
React.useEffect(function () {
|
|
7931
|
+
setPoster(isMobile ? mobilePoster : desktopPoster);
|
|
7932
|
+
setVideoUrl(isMobile ? mobileVideo : desktopVideo);
|
|
7933
|
+
}, [isMobile]);
|
|
7934
|
+
return {
|
|
7935
|
+
posterUrl: posterUrl,
|
|
7936
|
+
videoUrl: videoUrl
|
|
7937
|
+
};
|
|
7938
|
+
};
|
|
7939
|
+
var VideoWithControls = function VideoWithControls(_ref) {
|
|
7940
|
+
var video = _ref.video,
|
|
7941
|
+
poster = _ref.poster;
|
|
7942
|
+
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
7943
|
+
posterUrl = _useResponsiveVideo.posterUrl,
|
|
7944
|
+
videoUrl = _useResponsiveVideo.videoUrl;
|
|
7945
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
|
|
7946
|
+
id: video.elementId,
|
|
7947
|
+
width: "100%",
|
|
7948
|
+
height: "100%",
|
|
7949
|
+
poster: posterUrl,
|
|
7950
|
+
src: videoUrl,
|
|
7951
|
+
"data-testid": "impact-video",
|
|
7952
|
+
playsInline: true
|
|
7953
|
+
}, /*#__PURE__*/React__default.createElement("source", {
|
|
7954
|
+
src: videoUrl
|
|
7955
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7956
|
+
src: posterUrl,
|
|
7957
|
+
alt: poster.alt,
|
|
7958
|
+
"data-testid": "impact-image"
|
|
7959
|
+
})), /*#__PURE__*/React__default.createElement(VideoControlsImpact, {
|
|
7960
|
+
loop: true,
|
|
7961
|
+
videoElementId: video.elementId
|
|
7962
|
+
}));
|
|
7963
|
+
};
|
|
7964
|
+
var ImpactHeaderImage = function ImpactHeaderImage(_ref2) {
|
|
7965
|
+
var mobile = _ref2.mobile,
|
|
7966
|
+
desktop = _ref2.desktop,
|
|
7967
|
+
alt = _ref2.alt;
|
|
7968
|
+
return /*#__PURE__*/React__default.createElement("picture", {
|
|
7722
7969
|
"data-testid": "impact-picture"
|
|
7723
|
-
},
|
|
7724
|
-
srcSet:
|
|
7970
|
+
}, mobile && /*#__PURE__*/React__default.createElement("source", {
|
|
7971
|
+
srcSet: mobile,
|
|
7725
7972
|
media: "" + devices.mobile,
|
|
7726
7973
|
"data-testid": "impact-mobile-image-source"
|
|
7727
|
-
})
|
|
7728
|
-
srcSet:
|
|
7974
|
+
}), /*#__PURE__*/React__default.createElement("source", {
|
|
7975
|
+
srcSet: desktop,
|
|
7729
7976
|
media: "" + devices.desktop,
|
|
7730
7977
|
"data-testid": "impact-desktop-image-source"
|
|
7731
7978
|
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7732
|
-
src:
|
|
7733
|
-
alt:
|
|
7979
|
+
src: desktop,
|
|
7980
|
+
alt: alt,
|
|
7734
7981
|
"data-testid": "impact-image"
|
|
7735
|
-
}))
|
|
7736
|
-
|
|
7737
|
-
|
|
7738
|
-
|
|
7739
|
-
|
|
7740
|
-
|
|
7741
|
-
|
|
7742
|
-
}
|
|
7982
|
+
}));
|
|
7983
|
+
};
|
|
7984
|
+
var ImpactHeaderVideo = function ImpactHeaderVideo(_ref3) {
|
|
7985
|
+
var video = _ref3.video,
|
|
7986
|
+
poster = _ref3.poster;
|
|
7987
|
+
if (!video.desktop && !video.mobile) {
|
|
7988
|
+
return /*#__PURE__*/React__default.createElement(ImpactHeaderImage, Object.assign({}, poster));
|
|
7989
|
+
}
|
|
7990
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
7991
|
+
video: video,
|
|
7992
|
+
poster: poster
|
|
7993
|
+
});
|
|
7994
|
+
};
|
|
7995
|
+
var useElementWidth = function useElementWidth() {
|
|
7996
|
+
var _React$useState = React__default.useState(undefined),
|
|
7997
|
+
width = _React$useState[0],
|
|
7998
|
+
setWidth = _React$useState[1];
|
|
7999
|
+
var observerRef = React__default.useRef(null);
|
|
8000
|
+
var ref = React__default.useCallback(function (node) {
|
|
8001
|
+
if (observerRef.current) {
|
|
8002
|
+
observerRef.current.disconnect();
|
|
8003
|
+
observerRef.current = null;
|
|
8004
|
+
}
|
|
8005
|
+
if (!node) return;
|
|
8006
|
+
observerRef.current = new ResizeObserver(function () {
|
|
8007
|
+
setWidth(node.offsetWidth);
|
|
8008
|
+
});
|
|
8009
|
+
observerRef.current.observe(node);
|
|
8010
|
+
}, []);
|
|
8011
|
+
return [ref, width];
|
|
8012
|
+
};
|
|
8013
|
+
var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
8014
|
+
var text = _ref4.text,
|
|
8015
|
+
link = _ref4.link,
|
|
8016
|
+
_ref4$sponsor = _ref4.sponsor,
|
|
8017
|
+
sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
|
|
8018
|
+
customSponsorImage = _ref4.customSponsorImage,
|
|
8019
|
+
bgUrlDesktop = _ref4.bgUrlDesktop,
|
|
8020
|
+
bgUrlDevice = _ref4.bgUrlDevice,
|
|
8021
|
+
_ref4$bgImageAltText = _ref4.bgImageAltText,
|
|
8022
|
+
bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
|
|
8023
|
+
videoUrlDesktop = _ref4.videoUrlDesktop,
|
|
8024
|
+
videoUrlMobile = _ref4.videoUrlMobile,
|
|
8025
|
+
className = _ref4.className;
|
|
8026
|
+
var _useViewport = useViewport(),
|
|
8027
|
+
isMobile = _useViewport.isMobile,
|
|
8028
|
+
hydrated = _useViewport.hydrated;
|
|
8029
|
+
var _useElementWidth = useElementWidth(),
|
|
8030
|
+
buttonRef = _useElementWidth[0],
|
|
8031
|
+
buttonWidth = _useElementWidth[1];
|
|
8032
|
+
var _useElementWidth2 = useElementWidth(),
|
|
8033
|
+
sponsorRef = _useElementWidth2[0],
|
|
8034
|
+
sponsorWidth = _useElementWidth2[1];
|
|
8035
|
+
var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
|
|
8036
|
+
var _ref5 = link || {},
|
|
8037
|
+
linkText = _ref5.text,
|
|
8038
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
|
|
8039
|
+
var video = {
|
|
8040
|
+
elementId: 'impact-header-video',
|
|
8041
|
+
desktop: videoUrlDesktop,
|
|
8042
|
+
mobile: videoUrlMobile
|
|
8043
|
+
};
|
|
8044
|
+
var poster = {
|
|
8045
|
+
desktop: bgUrlDesktop,
|
|
8046
|
+
mobile: bgUrlDevice,
|
|
8047
|
+
alt: bgImageAltText
|
|
8048
|
+
};
|
|
8049
|
+
var sponsorContent = sponsor ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
8050
|
+
"data-testid": customSponsorImage ? 'impact-custom-sponsor' : undefined
|
|
8051
|
+
}, customSponsorImage != null ? customSponsorImage : {}))) : null;
|
|
8052
|
+
var hasButton = !isMobile && !!(link && linkText);
|
|
8053
|
+
var showSideColumns = hasButton || !!sponsor;
|
|
8054
|
+
var showTitleBar = !!(text || hasButton || sponsor);
|
|
8055
|
+
var renderSponsor = function renderSponsor() {
|
|
8056
|
+
if (isMobile) {
|
|
8057
|
+
if (!sponsorContent) return null;
|
|
8058
|
+
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8059
|
+
"data-testid": "impact-sponsor"
|
|
8060
|
+
}, sponsorContent);
|
|
8061
|
+
}
|
|
8062
|
+
if (!showSideColumns) return null;
|
|
8063
|
+
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8064
|
+
ref: sponsorRef,
|
|
8065
|
+
buttonWidth: buttonWidth,
|
|
8066
|
+
"data-testid": "impact-sponsor"
|
|
8067
|
+
}, sponsorContent);
|
|
8068
|
+
};
|
|
8069
|
+
if (!hydrated) return null;
|
|
8070
|
+
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
8071
|
+
theme: exports.ThemeType.Cinema
|
|
8072
|
+
}, showTitleBar ? (/*#__PURE__*/React__default.createElement(ImpactHeaderWrapper, {
|
|
8073
|
+
className: className
|
|
8074
|
+
}, /*#__PURE__*/React__default.createElement(ImpactTitleWrapper, {
|
|
8075
|
+
"data-testid": "impact-title-wrapper",
|
|
8076
|
+
sponsorPresent: !!sponsor,
|
|
8077
|
+
hasButton: hasButton
|
|
8078
|
+
}, !isMobile && showSideColumns ? (/*#__PURE__*/React__default.createElement(TitleButtonWrapper, {
|
|
8079
|
+
sponsorWidth: sponsorWidth
|
|
8080
|
+
}, hasButton ? (/*#__PURE__*/React__default.createElement(TitleButton, Object.assign({
|
|
8081
|
+
ref: buttonRef
|
|
8082
|
+
}, restLink, {
|
|
7743
8083
|
"data-testid": "impact-link"
|
|
7744
|
-
}
|
|
7745
|
-
|
|
7746
|
-
|
|
7747
|
-
|
|
7748
|
-
|
|
7749
|
-
|
|
7750
|
-
|
|
7751
|
-
|
|
7752
|
-
|
|
8084
|
+
}), linkText)) : null)) : null, text ? (/*#__PURE__*/React__default.createElement(ImpactTitle, {
|
|
8085
|
+
size: "large",
|
|
8086
|
+
color: "white",
|
|
8087
|
+
hasColumns: !isMobile && showSideColumns
|
|
8088
|
+
}, truncatedText)) : null, renderSponsor()))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderAssetWrapper, {
|
|
8089
|
+
className: className
|
|
8090
|
+
}, /*#__PURE__*/React__default.createElement(ImpactHeaderVideo, {
|
|
8091
|
+
video: video,
|
|
8092
|
+
poster: poster
|
|
8093
|
+
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
7753
8094
|
};
|
|
7754
8095
|
|
|
7755
|
-
var _templateObject$
|
|
7756
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8096
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$l;
|
|
8097
|
+
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$T || (_templateObject$T = /*#__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) {
|
|
7757
8098
|
var color = _ref.color;
|
|
7758
8099
|
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 ";
|
|
7759
8100
|
}, devices.mobileAndTablet);
|
|
7760
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8101
|
+
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__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) {
|
|
7761
8102
|
var hasImage = _ref2.hasImage;
|
|
7762
8103
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7763
8104
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7764
8105
|
var hasImage = _ref3.hasImage;
|
|
7765
8106
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7766
8107
|
});
|
|
7767
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7768
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7769
|
-
var ScrollDownWrapper
|
|
8108
|
+
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__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);
|
|
8109
|
+
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__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);
|
|
8110
|
+
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__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);
|
|
7770
8111
|
|
|
7771
8112
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7772
8113
|
var _image$src, _image$alt;
|
|
@@ -7780,7 +8121,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7780
8121
|
"data-testid": "wrapper"
|
|
7781
8122
|
}, /*#__PURE__*/React__default.createElement(LeftPanel, {
|
|
7782
8123
|
hasImage: hasImage
|
|
7783
|
-
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper
|
|
8124
|
+
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
7784
8125
|
"data-testid": "scroll-link"
|
|
7785
8126
|
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
7786
8127
|
iconName: "Arrow",
|
|
@@ -7796,11 +8137,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7796
8137
|
})))));
|
|
7797
8138
|
};
|
|
7798
8139
|
|
|
7799
|
-
var _templateObject$
|
|
7800
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$
|
|
7801
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7802
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7803
|
-
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8140
|
+
var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
8141
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
8142
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
8143
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__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);
|
|
8144
|
+
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__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);
|
|
7804
8145
|
var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__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) {
|
|
7805
8146
|
var theme = _ref.theme;
|
|
7806
8147
|
return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
@@ -8010,7 +8351,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8010
8351
|
})))))))))));
|
|
8011
8352
|
};
|
|
8012
8353
|
|
|
8013
|
-
var _templateObject$
|
|
8354
|
+
var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$t;
|
|
8014
8355
|
var GRID = {
|
|
8015
8356
|
desktop: {
|
|
8016
8357
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8023,19 +8364,19 @@ var GRID = {
|
|
|
8023
8364
|
right: '2 / 1 / 3 / 15'
|
|
8024
8365
|
}
|
|
8025
8366
|
};
|
|
8026
|
-
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8367
|
+
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8027
8368
|
var $background = _ref.$background;
|
|
8028
8369
|
return "var(--color-" + $background + ")";
|
|
8029
8370
|
});
|
|
8030
|
-
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8371
|
+
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__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) {
|
|
8031
8372
|
var hasImage = _ref2.hasImage;
|
|
8032
8373
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8033
8374
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8034
8375
|
var hasImage = _ref3.hasImage;
|
|
8035
8376
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8036
8377
|
});
|
|
8037
|
-
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8038
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8378
|
+
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__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);
|
|
8379
|
+
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__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);
|
|
8039
8380
|
|
|
8040
8381
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
8041
8382
|
var _image$src, _image$alt;
|
|
@@ -8058,10 +8399,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8058
8399
|
})))));
|
|
8059
8400
|
};
|
|
8060
8401
|
|
|
8061
|
-
var _templateObject$
|
|
8062
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8063
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8064
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8402
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
|
|
8403
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__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);
|
|
8404
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__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"])));
|
|
8405
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8065
8406
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__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);
|
|
8066
8407
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$g || (_templateObject6$g = /*#__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) {
|
|
8067
8408
|
var invert = _ref.invert,
|
|
@@ -8172,7 +8513,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8172
8513
|
};
|
|
8173
8514
|
|
|
8174
8515
|
var _excluded$l = ["text"];
|
|
8175
|
-
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
8516
|
+
var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
|
|
8176
8517
|
var mobileVideo = video.mobile || video.desktop;
|
|
8177
8518
|
var desktopVideo = video.desktop || video.mobile;
|
|
8178
8519
|
var mobilePoster = poster.mobile || poster.desktop;
|
|
@@ -8193,10 +8534,10 @@ var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
|
8193
8534
|
videoUrl: videoUrl
|
|
8194
8535
|
};
|
|
8195
8536
|
};
|
|
8196
|
-
var VideoWithControls = function VideoWithControls(_ref) {
|
|
8537
|
+
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
8197
8538
|
var video = _ref.video,
|
|
8198
8539
|
poster = _ref.poster;
|
|
8199
|
-
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
8540
|
+
var _useResponsiveVideo = useResponsiveVideo$1(video, poster),
|
|
8200
8541
|
posterUrl = _useResponsiveVideo.posterUrl,
|
|
8201
8542
|
videoUrl = _useResponsiveVideo.videoUrl;
|
|
8202
8543
|
var isIOS = useIOS();
|
|
@@ -8249,7 +8590,7 @@ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
|
|
|
8249
8590
|
if (!video.desktop && !video.mobile) {
|
|
8250
8591
|
return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
|
|
8251
8592
|
}
|
|
8252
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8593
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
|
|
8253
8594
|
video: video,
|
|
8254
8595
|
poster: poster
|
|
8255
8596
|
});
|
|
@@ -8312,11 +8653,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8312
8653
|
}), linkText))))));
|
|
8313
8654
|
};
|
|
8314
8655
|
|
|
8315
|
-
var _templateObject$
|
|
8316
|
-
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8317
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8318
|
-
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8319
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8656
|
+
var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject4$u, _templateObject5$o, _templateObject6$h, _templateObject7$d;
|
|
8657
|
+
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__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);
|
|
8658
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8659
|
+
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8660
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__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) {
|
|
8320
8661
|
var hasImages = _ref.hasImages;
|
|
8321
8662
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8322
8663
|
}, devices.mobile, function (_ref2) {
|
|
@@ -8391,10 +8732,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8391
8732
|
}))))));
|
|
8392
8733
|
};
|
|
8393
8734
|
|
|
8394
|
-
var _templateObject$
|
|
8395
|
-
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8396
|
-
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
8397
|
-
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8735
|
+
var _templateObject$Y, _templateObject2$M, _templateObject3$A, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
|
|
8736
|
+
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$Y || (_templateObject$Y = /*#__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"])));
|
|
8737
|
+
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8738
|
+
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8398
8739
|
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$p || (_templateObject5$p = /*#__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"])));
|
|
8399
8740
|
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8400
8741
|
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8550,16 +8891,19 @@ var Pagination = function Pagination(_ref) {
|
|
|
8550
8891
|
}))))));
|
|
8551
8892
|
};
|
|
8552
8893
|
|
|
8553
|
-
var _templateObject$
|
|
8554
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8555
|
-
|
|
8556
|
-
|
|
8557
|
-
|
|
8558
|
-
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"])));
|
|
8894
|
+
var _templateObject$Z;
|
|
8895
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__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: ", ";\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
|
|
8896
|
+
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8897
|
+
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8898
|
+
});
|
|
8559
8899
|
|
|
8560
8900
|
var _templateObject$_, _templateObject2$N;
|
|
8561
|
-
var
|
|
8562
|
-
var
|
|
8901
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8902
|
+
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8903
|
+
|
|
8904
|
+
var _templateObject$$, _templateObject2$O;
|
|
8905
|
+
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"])));
|
|
8906
|
+
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8563
8907
|
|
|
8564
8908
|
var Person = function Person(_ref) {
|
|
8565
8909
|
var person = _ref.person,
|
|
@@ -8582,7 +8926,7 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8582
8926
|
var _role$people;
|
|
8583
8927
|
var role = _ref.role,
|
|
8584
8928
|
className = _ref.className;
|
|
8585
|
-
return /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
8929
|
+
return /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
8586
8930
|
className: className
|
|
8587
8931
|
}, /*#__PURE__*/React__default.createElement(RoleContent, {
|
|
8588
8932
|
title: "role",
|
|
@@ -8598,13 +8942,17 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8598
8942
|
})));
|
|
8599
8943
|
};
|
|
8600
8944
|
|
|
8601
|
-
var _templateObject
|
|
8602
|
-
var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject
|
|
8603
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8945
|
+
var _templateObject$10, _templateObject2$P;
|
|
8946
|
+
var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8947
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n filter: ", ";\n }\n"])), function (_ref) {
|
|
8948
|
+
var greyscale = _ref.greyscale;
|
|
8949
|
+
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8950
|
+
});
|
|
8604
8951
|
|
|
8605
8952
|
var PersonCard = function PersonCard(_ref) {
|
|
8606
8953
|
var role = _ref.role,
|
|
8607
|
-
className = _ref.className
|
|
8954
|
+
className = _ref.className,
|
|
8955
|
+
greyscale = _ref.greyscale;
|
|
8608
8956
|
var hasHeadshot = React__default.useMemo(function () {
|
|
8609
8957
|
var _role$people;
|
|
8610
8958
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
@@ -8612,7 +8960,9 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8612
8960
|
}, [role]);
|
|
8613
8961
|
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
8614
8962
|
className: className
|
|
8615
|
-
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper,
|
|
8963
|
+
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
|
|
8964
|
+
greyscale: greyscale
|
|
8965
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
8616
8966
|
src: role.people[0].headshot,
|
|
8617
8967
|
alt: role.people[0].name
|
|
8618
8968
|
})), /*#__PURE__*/React__default.createElement(PersonDetails, {
|
|
@@ -8626,26 +8976,31 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8626
8976
|
|
|
8627
8977
|
var PeopleListing = function PeopleListing(_ref) {
|
|
8628
8978
|
var roles = _ref.roles,
|
|
8629
|
-
className = _ref.className
|
|
8979
|
+
className = _ref.className,
|
|
8980
|
+
greyscale = _ref.greyscale,
|
|
8981
|
+
largeDesktopColumns = _ref.largeDesktopColumns;
|
|
8630
8982
|
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
|
|
8631
|
-
className: className
|
|
8983
|
+
className: className,
|
|
8984
|
+
"$largeDesktopColumns": largeDesktopColumns
|
|
8632
8985
|
}, roles.map(function (role, index) {
|
|
8633
8986
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8634
8987
|
key: role.name + "-" + index
|
|
8635
8988
|
}, /*#__PURE__*/React__default.createElement(PersonCard, {
|
|
8636
|
-
role: role
|
|
8989
|
+
role: role,
|
|
8990
|
+
className: className,
|
|
8991
|
+
greyscale: greyscale
|
|
8637
8992
|
}));
|
|
8638
8993
|
}));
|
|
8639
8994
|
};
|
|
8640
8995
|
|
|
8641
|
-
var _templateObject$
|
|
8642
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8643
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
8996
|
+
var _templateObject$11, _templateObject2$Q, _templateObject3$B, _templateObject4$v;
|
|
8997
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8998
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$Q || (_templateObject2$Q = /*#__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) {
|
|
8644
8999
|
var columnCount = _ref.columnCount;
|
|
8645
9000
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8646
9001
|
}, devices.mobile, devices.tablet);
|
|
8647
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8648
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9002
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
9003
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8649
9004
|
|
|
8650
9005
|
// Get the total character length of a property in an array of objects
|
|
8651
9006
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8734,7 +9089,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8734
9089
|
columnSpanSmallDevice: 1,
|
|
8735
9090
|
key: "credit-entry-" + name + "-" + index,
|
|
8736
9091
|
"data-testid": "credit-entry"
|
|
8737
|
-
}, /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
9092
|
+
}, /*#__PURE__*/React__default.createElement(TextWrapper$1, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
8738
9093
|
title: "role",
|
|
8739
9094
|
"data-roh": dataROH
|
|
8740
9095
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
@@ -8772,8 +9127,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8772
9127
|
}, creditEntries);
|
|
8773
9128
|
};
|
|
8774
9129
|
|
|
8775
|
-
var _templateObject$
|
|
8776
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$
|
|
9130
|
+
var _templateObject$12;
|
|
9131
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$12 || (_templateObject$12 = /*#__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"])));
|
|
8777
9132
|
|
|
8778
9133
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
8779
9134
|
var items = _ref.items;
|
|
@@ -8791,14 +9146,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
8791
9146
|
}));
|
|
8792
9147
|
};
|
|
8793
9148
|
|
|
8794
|
-
var _templateObject$
|
|
9149
|
+
var _templateObject$13, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
8795
9150
|
var LENGTH_TEXT = 28;
|
|
8796
9151
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8797
9152
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8798
9153
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8799
9154
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8800
9155
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8801
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9156
|
+
var PromoWithTagsGrid = /*#__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\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8802
9157
|
var imageToLeft = _ref.imageToLeft;
|
|
8803
9158
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8804
9159
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8808,7 +9163,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 ||
|
|
|
8808
9163
|
var asCard = _ref3.asCard;
|
|
8809
9164
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8810
9165
|
});
|
|
8811
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9166
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__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) {
|
|
8812
9167
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
8813
9168
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8814
9169
|
}, function (_ref5) {
|
|
@@ -8832,7 +9187,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$B ||
|
|
|
8832
9187
|
}
|
|
8833
9188
|
return '';
|
|
8834
9189
|
});
|
|
8835
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9190
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
8836
9191
|
var marginBottom = _ref7.marginBottom;
|
|
8837
9192
|
return marginBottom + "px";
|
|
8838
9193
|
}, function (_ref8) {
|
|
@@ -8872,7 +9227,7 @@ var _excluded$m = ["text"],
|
|
|
8872
9227
|
_excluded3$1 = ["text"];
|
|
8873
9228
|
var _buttonTypeToButton$1;
|
|
8874
9229
|
var LENGTH_TEXT$1 = 28;
|
|
8875
|
-
var LENGTH_TEXT_PARAGRAPH =
|
|
9230
|
+
var LENGTH_TEXT_PARAGRAPH = 185;
|
|
8876
9231
|
var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
|
|
8877
9232
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
8878
9233
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -9063,25 +9418,25 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9063
9418
|
}))));
|
|
9064
9419
|
};
|
|
9065
9420
|
|
|
9066
|
-
var _templateObject$
|
|
9421
|
+
var _templateObject$14, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g;
|
|
9067
9422
|
var LENGTH_TEXT$2 = 28;
|
|
9068
9423
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9069
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9424
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$14 || (_templateObject$14 = /*#__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) {
|
|
9070
9425
|
var imageToLeft = _ref.imageToLeft;
|
|
9071
9426
|
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'";
|
|
9072
9427
|
}, devices.tablet, function (_ref2) {
|
|
9073
9428
|
var imageToLeft = _ref2.imageToLeft;
|
|
9074
9429
|
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'";
|
|
9075
9430
|
}, devices.mobile);
|
|
9076
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9431
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9077
9432
|
var imageToLeft = _ref3.imageToLeft;
|
|
9078
9433
|
return imageToLeft ? 'left' : 'right';
|
|
9079
9434
|
}, devices.mobile);
|
|
9080
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9435
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__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) {
|
|
9081
9436
|
var imageToLeft = _ref4.imageToLeft;
|
|
9082
9437
|
return imageToLeft ? 'right' : 'left';
|
|
9083
9438
|
}, devices.mobile);
|
|
9084
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$
|
|
9439
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9085
9440
|
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9086
9441
|
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$k || (_templateObject6$k = /*#__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);
|
|
9087
9442
|
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__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) {
|
|
@@ -9106,8 +9461,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
|
|
|
9106
9461
|
return '';
|
|
9107
9462
|
});
|
|
9108
9463
|
|
|
9109
|
-
var _templateObject$
|
|
9110
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9464
|
+
var _templateObject$15;
|
|
9465
|
+
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__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) {
|
|
9111
9466
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9112
9467
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9113
9468
|
return aspectRatio;
|
|
@@ -9138,7 +9493,7 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
9138
9493
|
return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
|
|
9139
9494
|
};
|
|
9140
9495
|
|
|
9141
|
-
var VideoWithControls$
|
|
9496
|
+
var VideoWithControls$2 = function VideoWithControls(_ref) {
|
|
9142
9497
|
var video = _ref.video,
|
|
9143
9498
|
settings = _ref.settings;
|
|
9144
9499
|
var videoRef = React.useRef(null);
|
|
@@ -9213,7 +9568,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9213
9568
|
}, isImage && (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
9214
9569
|
aspectRatio: exports.AspectRatio['4:3'],
|
|
9215
9570
|
"data-testid": "AspectRatioWrapper"
|
|
9216
|
-
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
9571
|
+
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
|
|
9217
9572
|
video: children,
|
|
9218
9573
|
settings: videoSettings
|
|
9219
9574
|
}));
|
|
@@ -9276,7 +9631,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9276
9631
|
size: titleSize,
|
|
9277
9632
|
hierarchy: titleHierarchy
|
|
9278
9633
|
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
|
|
9279
|
-
size: "
|
|
9634
|
+
size: "small"
|
|
9280
9635
|
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
|
|
9281
9636
|
size: "large",
|
|
9282
9637
|
dangerouslySetInnerHTML: {
|
|
@@ -9289,8 +9644,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9289
9644
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9290
9645
|
};
|
|
9291
9646
|
|
|
9292
|
-
var _templateObject$
|
|
9293
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9647
|
+
var _templateObject$16;
|
|
9648
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9294
9649
|
|
|
9295
9650
|
/**
|
|
9296
9651
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9345,9 +9700,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9345
9700
|
})));
|
|
9346
9701
|
};
|
|
9347
9702
|
|
|
9348
|
-
var _templateObject$
|
|
9349
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9350
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9703
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
9704
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9705
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9351
9706
|
var horizontalMode = _ref.horizontalMode;
|
|
9352
9707
|
if (horizontalMode) return 'row';
|
|
9353
9708
|
return 'column';
|
|
@@ -9355,7 +9710,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_temp
|
|
|
9355
9710
|
var gap = _ref2.gap;
|
|
9356
9711
|
return gap + "px";
|
|
9357
9712
|
});
|
|
9358
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9713
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9359
9714
|
var darkMode = _ref3.darkMode;
|
|
9360
9715
|
if (darkMode) return 'var(--base-color-white)';
|
|
9361
9716
|
return 'var(--base-color-errorstate)';
|
|
@@ -9432,10 +9787,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9432
9787
|
}, error))));
|
|
9433
9788
|
};
|
|
9434
9789
|
|
|
9435
|
-
var _templateObject$
|
|
9436
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9437
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9438
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9790
|
+
var _templateObject$18, _templateObject2$T, _templateObject3$F;
|
|
9791
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__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);
|
|
9792
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__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"])));
|
|
9793
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__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);
|
|
9439
9794
|
|
|
9440
9795
|
/* eslint-disable react/no-danger */
|
|
9441
9796
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9491,8 +9846,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9491
9846
|
return null;
|
|
9492
9847
|
};
|
|
9493
9848
|
|
|
9494
|
-
var _templateObject$
|
|
9495
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9849
|
+
var _templateObject$19;
|
|
9850
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__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);
|
|
9496
9851
|
|
|
9497
9852
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9498
9853
|
var HarmonicSize = {
|
|
@@ -9534,8 +9889,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9534
9889
|
}, description)))));
|
|
9535
9890
|
};
|
|
9536
9891
|
|
|
9537
|
-
var _templateObject$
|
|
9538
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
9892
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7, _templateObject0$7, _templateObject1$5;
|
|
9893
|
+
var stateStyles = /*#__PURE__*/styled.css(_templateObject$1a || (_templateObject$1a = /*#__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) {
|
|
9539
9894
|
var theme = _ref.theme;
|
|
9540
9895
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9541
9896
|
}, function (_ref2) {
|
|
@@ -9545,12 +9900,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject
|
|
|
9545
9900
|
var theme = _ref3.theme;
|
|
9546
9901
|
return theme.colors.lightgrey;
|
|
9547
9902
|
});
|
|
9548
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
9903
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9549
9904
|
var theme = _ref4.theme;
|
|
9550
9905
|
return theme.colors.darkgrey;
|
|
9551
9906
|
});
|
|
9552
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
9553
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$
|
|
9907
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9908
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9554
9909
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
9555
9910
|
var theme = _ref5.theme;
|
|
9556
9911
|
return {
|
|
@@ -9915,37 +10270,37 @@ function Select(_ref3) {
|
|
|
9915
10270
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9916
10271
|
}
|
|
9917
10272
|
|
|
9918
|
-
var _templateObject$
|
|
9919
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9920
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10273
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$H, _templateObject4$z;
|
|
10274
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10275
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__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\n .harmonic-select__control--is-focused {\n border-color: var(--color-base-dark-grey);\n box-shadow: ", ";\n }\n\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--color-primary-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\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-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n\n @media ", " {\n font-size: 17px;\n }\n }\n\n .harmonic-select__placeholder {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__single-value {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--color-base-light-grey);\n background: var(--color-base-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--color-base-dark-grey);\n }\n }\n\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--color-base-mid-grey);\n }\n\n .harmonic-select__menu-list {\n padding: 10px 0;\n }\n\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-primary-black);\n\n @media ", " {\n font-size: 17px;\n }\n\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--color-base-light-grey);\n }\n }\n\n .harmonic-select__option--is-selected {\n color: var(--color-primary-black);\n background: none;\n }\n\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n color: var(--color-primary-black);\n }\n\n .harmonic-select__menu-notice {\n color: var(--color-primary-black);\n padding: 20px 20px;\n text-align: left;\n }\n\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9921
10276
|
var width = _ref.width;
|
|
9922
10277
|
if (!width) return 'none';
|
|
9923
10278
|
return width + "px";
|
|
9924
10279
|
}, function (_ref2) {
|
|
9925
10280
|
var error = _ref2.error;
|
|
9926
|
-
if (error !== undefined) return "1px solid var(--
|
|
9927
|
-
return "1px solid var(--base-
|
|
10281
|
+
if (error !== undefined) return "1px solid var(--color-state-error)";
|
|
10282
|
+
return "1px solid var(--color-base-mid-grey)";
|
|
9928
10283
|
}, function (_ref3) {
|
|
9929
10284
|
var error = _ref3.error;
|
|
9930
|
-
if (error !== undefined) return "var(--
|
|
9931
|
-
return "var(--base-
|
|
10285
|
+
if (error !== undefined) return "var(--color-state-error)";
|
|
10286
|
+
return "var(--color-base-dark-grey)";
|
|
9932
10287
|
}, function (_ref4) {
|
|
9933
10288
|
var darkMode = _ref4.darkMode;
|
|
9934
|
-
if (darkMode) return "0 0 0
|
|
10289
|
+
if (darkMode) return "0 0 0 1px var(--color-state-medium)";
|
|
9935
10290
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9936
|
-
});
|
|
9937
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10291
|
+
}, devices.mobile, devices.mobile);
|
|
10292
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n\n @media ", " {\n margin: 0 0 12px;\n }\n"])), function (_ref5) {
|
|
9938
10293
|
var darkMode = _ref5.darkMode;
|
|
9939
|
-
if (darkMode) return "var(--base-
|
|
9940
|
-
return "var(--
|
|
9941
|
-
});
|
|
9942
|
-
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10294
|
+
if (darkMode) return "var(--color-base-white)";
|
|
10295
|
+
return "var(--color-primary-black)";
|
|
10296
|
+
}, devices.mobile);
|
|
10297
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9943
10298
|
var darkMode = _ref6.darkMode;
|
|
9944
|
-
if (darkMode) return "var(--base-
|
|
9945
|
-
return "var(--
|
|
10299
|
+
if (darkMode) return "var(--color-base-white)";
|
|
10300
|
+
return "var(--color-state-error)";
|
|
9946
10301
|
});
|
|
9947
10302
|
|
|
9948
|
-
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10303
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
|
|
9949
10304
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
9950
10305
|
return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
9951
10306
|
iconName: "DropdownArrow"
|
|
@@ -9956,12 +10311,15 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9956
10311
|
error = _ref.error,
|
|
9957
10312
|
width = _ref.width,
|
|
9958
10313
|
darkMode = _ref.darkMode,
|
|
9959
|
-
children = _ref.children
|
|
9960
|
-
|
|
10314
|
+
children = _ref.children,
|
|
10315
|
+
className = _ref.className;
|
|
10316
|
+
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
10317
|
+
className: className
|
|
10318
|
+
}, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9961
10319
|
darkMode: darkMode,
|
|
9962
10320
|
"data-testid": "select2-text-label"
|
|
9963
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
9964
|
-
|
|
10321
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10322
|
+
size: "large"
|
|
9965
10323
|
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
9966
10324
|
width: width,
|
|
9967
10325
|
error: error,
|
|
@@ -9969,8 +10327,8 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9969
10327
|
}, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
9970
10328
|
darkMode: darkMode,
|
|
9971
10329
|
"data-testid": "select2-error-label"
|
|
9972
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
9973
|
-
|
|
10330
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10331
|
+
size: "medium"
|
|
9974
10332
|
}, error))));
|
|
9975
10333
|
};
|
|
9976
10334
|
/**
|
|
@@ -9996,12 +10354,14 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
9996
10354
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
9997
10355
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
9998
10356
|
components = _ref2.components,
|
|
10357
|
+
className = _ref2.className,
|
|
9999
10358
|
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
10000
10359
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10001
10360
|
label: label,
|
|
10002
10361
|
error: error,
|
|
10003
10362
|
width: width,
|
|
10004
|
-
darkMode: darkMode
|
|
10363
|
+
darkMode: darkMode,
|
|
10364
|
+
className: className
|
|
10005
10365
|
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
|
|
10006
10366
|
components: _extends({
|
|
10007
10367
|
DropdownIndicator: DropdownIndicator,
|
|
@@ -10053,10 +10413,10 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10053
10413
|
})));
|
|
10054
10414
|
};
|
|
10055
10415
|
|
|
10056
|
-
var _templateObject$
|
|
10057
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10058
|
-
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$
|
|
10059
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10416
|
+
var _templateObject$1c, _templateObject3$I, _templateObject4$A, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
|
|
10417
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__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"])));
|
|
10418
|
+
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$I || (_templateObject3$I = /*#__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"])));
|
|
10419
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__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) {
|
|
10060
10420
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10061
10421
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10062
10422
|
}, function (_ref2) {
|
|
@@ -10159,8 +10519,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10159
10519
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10160
10520
|
};
|
|
10161
10521
|
|
|
10162
|
-
var _templateObject$
|
|
10163
|
-
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
10522
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$J;
|
|
10523
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1d || (_templateObject$1d = /*#__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) {
|
|
10164
10524
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10165
10525
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10166
10526
|
return aspectRatio;
|
|
@@ -10170,8 +10530,8 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_temp
|
|
|
10170
10530
|
height = _ref2.height;
|
|
10171
10531
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10172
10532
|
});
|
|
10173
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
10174
|
-
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$
|
|
10533
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
10534
|
+
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$J || (_templateObject3$J = /*#__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"])));
|
|
10175
10535
|
|
|
10176
10536
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10177
10537
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -10204,11 +10564,11 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10204
10564
|
}, caption))));
|
|
10205
10565
|
};
|
|
10206
10566
|
|
|
10207
|
-
var _templateObject$
|
|
10208
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10209
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10210
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
10211
|
-
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10567
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$u, _templateObject6$n;
|
|
10568
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__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"])));
|
|
10569
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10570
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10571
|
+
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10212
10572
|
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__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);
|
|
10213
10573
|
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__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);
|
|
10214
10574
|
|
|
@@ -10248,14 +10608,14 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10248
10608
|
}, title)))));
|
|
10249
10609
|
};
|
|
10250
10610
|
|
|
10251
|
-
var _templateObject$
|
|
10252
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10253
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10254
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10611
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v;
|
|
10612
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__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"])));
|
|
10613
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__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"])));
|
|
10614
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10255
10615
|
var isVisible = _ref.isVisible;
|
|
10256
10616
|
return isVisible ? 'visible' : 'hidden';
|
|
10257
10617
|
});
|
|
10258
|
-
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10618
|
+
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10259
10619
|
var isVisible = _ref2.isVisible;
|
|
10260
10620
|
return isVisible ? 'visible' : 'hidden';
|
|
10261
10621
|
});
|
|
@@ -10340,11 +10700,11 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10340
10700
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10341
10701
|
};
|
|
10342
10702
|
|
|
10343
|
-
var _templateObject$
|
|
10344
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$
|
|
10345
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
10346
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
10347
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
10703
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$w;
|
|
10704
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10705
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$Z || (_templateObject2$Z = /*#__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);
|
|
10706
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$M || (_templateObject3$M = /*#__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);
|
|
10707
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$D || (_templateObject4$D = /*#__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) {
|
|
10348
10708
|
var isActive = _ref.isActive;
|
|
10349
10709
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10350
10710
|
}, exports.Colors.MidGrey);
|
|
@@ -10504,14 +10864,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10504
10864
|
});
|
|
10505
10865
|
};
|
|
10506
10866
|
|
|
10507
|
-
var _templateObject$
|
|
10508
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10509
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10510
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10867
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o;
|
|
10868
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10869
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10870
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10511
10871
|
var color = _ref.color;
|
|
10512
10872
|
return "var(--base-color-" + color + ")";
|
|
10513
10873
|
});
|
|
10514
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10874
|
+
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10515
10875
|
var Text = /*#__PURE__*/styled__default.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10516
10876
|
var color = _ref2.color;
|
|
10517
10877
|
return "var(--base-color-" + color + ")";
|
|
@@ -10598,11 +10958,11 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10598
10958
|
}, strengthLabel))));
|
|
10599
10959
|
};
|
|
10600
10960
|
|
|
10601
|
-
var _templateObject$
|
|
10602
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$
|
|
10603
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2
|
|
10604
|
-
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10605
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$
|
|
10961
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
|
|
10962
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10963
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10964
|
+
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10965
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$F || (_templateObject4$F = /*#__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) {
|
|
10606
10966
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10607
10967
|
}, devices.tablet, devices.mobile);
|
|
10608
10968
|
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$y || (_templateObject5$y = /*#__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) {
|
|
@@ -10813,22 +11173,22 @@ var Table = function Table(_ref) {
|
|
|
10813
11173
|
}))));
|
|
10814
11174
|
};
|
|
10815
11175
|
|
|
10816
|
-
var _templateObject$
|
|
10817
|
-
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
11176
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$P, _templateObject4$G, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
11177
|
+
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10818
11178
|
var theme = _ref.theme;
|
|
10819
11179
|
return "var(--color-" + theme + ")";
|
|
10820
11180
|
}, function (_ref2) {
|
|
10821
11181
|
var theme = _ref2.theme;
|
|
10822
11182
|
return "var(--color-" + theme + ")";
|
|
10823
11183
|
});
|
|
10824
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2
|
|
10825
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
10826
|
-
var Error = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11184
|
+
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11185
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$P || (_templateObject3$P = /*#__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);
|
|
11186
|
+
var Error = /*#__PURE__*/styled__default.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10827
11187
|
var Form = /*#__PURE__*/styled__default.form(_templateObject5$z || (_templateObject5$z = /*#__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);
|
|
10828
11188
|
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__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);
|
|
10829
11189
|
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
10830
11190
|
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
10831
|
-
var ButtonWrapper$
|
|
11191
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__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);
|
|
10832
11192
|
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__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);
|
|
10833
11193
|
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
10834
11194
|
var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__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"])));
|
|
@@ -10856,7 +11216,9 @@ var themeToColor = function themeToColor(theme) {
|
|
|
10856
11216
|
var SignUpTitle = function SignUpTitle(_ref) {
|
|
10857
11217
|
var title = _ref.title,
|
|
10858
11218
|
_ref$isMobile = _ref.isMobile,
|
|
10859
|
-
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile
|
|
11219
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
|
|
11220
|
+
_ref$titleFontFamily = _ref.titleFontFamily,
|
|
11221
|
+
titleFontFamily = _ref$titleFontFamily === void 0 ? false : _ref$titleFontFamily;
|
|
10860
11222
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
10861
11223
|
columnStartDesktop: 3,
|
|
10862
11224
|
columnSpanDesktop: 10,
|
|
@@ -10865,7 +11227,7 @@ var SignUpTitle = function SignUpTitle(_ref) {
|
|
|
10865
11227
|
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
10866
11228
|
color: "black",
|
|
10867
11229
|
hierarchy: "h3",
|
|
10868
|
-
serif:
|
|
11230
|
+
serif: titleFontFamily === 'Victor',
|
|
10869
11231
|
size: isMobile ? 'small' : 'medium'
|
|
10870
11232
|
}, title)));
|
|
10871
11233
|
};
|
|
@@ -11118,10 +11480,10 @@ var SignUpForm = function SignUpForm(_ref) {
|
|
|
11118
11480
|
tabIndex: 0
|
|
11119
11481
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11120
11482
|
size: "small"
|
|
11121
|
-
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
11483
|
+
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
11122
11484
|
onClick: handleFormSubmit,
|
|
11123
11485
|
theme: theme
|
|
11124
|
-
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
11486
|
+
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
11125
11487
|
onClick: handleFormSubmit,
|
|
11126
11488
|
theme: theme
|
|
11127
11489
|
})), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
|
|
@@ -11238,12 +11600,12 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11238
11600
|
}))))));
|
|
11239
11601
|
};
|
|
11240
11602
|
|
|
11241
|
-
var _templateObject$
|
|
11242
|
-
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11603
|
+
var _templateObject$1k, _templateObject2$11, _templateObject4$H, _templateObject5$A;
|
|
11604
|
+
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1k || (_templateObject$1k = /*#__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) {
|
|
11243
11605
|
var withShadow = _ref.withShadow;
|
|
11244
|
-
return withShadow && styled.css(_templateObject2$
|
|
11606
|
+
return withShadow && styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11245
11607
|
}, devices.mobile);
|
|
11246
|
-
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
11608
|
+
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$H || (_templateObject4$H = /*#__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);
|
|
11247
11609
|
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11248
11610
|
|
|
11249
11611
|
var defaultGrid = {
|
|
@@ -11302,12 +11664,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11302
11664
|
return null;
|
|
11303
11665
|
};
|
|
11304
11666
|
|
|
11305
|
-
var _templateObject$
|
|
11306
|
-
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$
|
|
11667
|
+
var _templateObject$1l, _templateObject2$12;
|
|
11668
|
+
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1l || (_templateObject$1l = /*#__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) {
|
|
11307
11669
|
var hide = _ref.hide;
|
|
11308
11670
|
return hide && "display: none;";
|
|
11309
11671
|
}, devices.mobileAndTablet);
|
|
11310
|
-
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11672
|
+
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__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);
|
|
11311
11673
|
|
|
11312
11674
|
/**
|
|
11313
11675
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11399,8 +11761,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11399
11761
|
}));
|
|
11400
11762
|
};
|
|
11401
11763
|
|
|
11402
|
-
var _templateObject$
|
|
11403
|
-
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
11764
|
+
var _templateObject$1m;
|
|
11765
|
+
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1m || (_templateObject$1m = /*#__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);
|
|
11404
11766
|
|
|
11405
11767
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11406
11768
|
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'] + "\">");
|
|
@@ -11435,14 +11797,9 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11435
11797
|
_ref2$renderGridItem = _ref2.renderGridItem,
|
|
11436
11798
|
renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
|
|
11437
11799
|
var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
|
|
11438
|
-
var content = /*#__PURE__*/React__default.createElement(
|
|
11439
|
-
tag: "div",
|
|
11440
|
-
size: "large",
|
|
11441
|
-
"data-testid": "text-container",
|
|
11800
|
+
var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
|
|
11442
11801
|
className: textContainerClassName,
|
|
11443
|
-
|
|
11444
|
-
__html: addTypographyClasses(text)
|
|
11445
|
-
}
|
|
11802
|
+
html: text
|
|
11446
11803
|
});
|
|
11447
11804
|
var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
11448
11805
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -11460,20 +11817,20 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11460
11817
|
}, gridItemOrContent);
|
|
11461
11818
|
};
|
|
11462
11819
|
|
|
11463
|
-
var _templateObject$
|
|
11820
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11464
11821
|
var color = 'primary-black';
|
|
11465
11822
|
var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
11466
11823
|
borderColor: color,
|
|
11467
11824
|
hoveredColor: color,
|
|
11468
11825
|
pressedColor: color,
|
|
11469
11826
|
textColor: color
|
|
11470
|
-
})(_templateObject$
|
|
11471
|
-
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11472
|
-
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$
|
|
11827
|
+
})(_templateObject$1n || (_templateObject$1n = /*#__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);
|
|
11828
|
+
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__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);
|
|
11829
|
+
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11473
11830
|
var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
|
|
11474
11831
|
serif: true,
|
|
11475
11832
|
size: 'medium'
|
|
11476
|
-
})(_templateObject4$
|
|
11833
|
+
})(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11477
11834
|
var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
|
|
11478
11835
|
size: 'large'
|
|
11479
11836
|
})(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
@@ -11673,11 +12030,11 @@ var Navigation = function Navigation(_ref) {
|
|
|
11673
12030
|
})))))));
|
|
11674
12031
|
};
|
|
11675
12032
|
|
|
11676
|
-
var _templateObject$
|
|
11677
|
-
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11678
|
-
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
11679
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$
|
|
11680
|
-
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12033
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$C, _templateObject6$s, _templateObject7$m;
|
|
12034
|
+
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1o || (_templateObject$1o = /*#__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);
|
|
12035
|
+
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$14 || (_templateObject2$14 = /*#__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);
|
|
12036
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$R || (_templateObject3$R = /*#__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);
|
|
12037
|
+
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11681
12038
|
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$C || (_templateObject5$C = /*#__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);
|
|
11682
12039
|
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11683
12040
|
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$m || (_templateObject7$m = /*#__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"])));
|
|
@@ -11738,17 +12095,17 @@ var Footer = function Footer(_ref) {
|
|
|
11738
12095
|
}, additionalInfo))));
|
|
11739
12096
|
};
|
|
11740
12097
|
|
|
11741
|
-
var _templateObject$
|
|
12098
|
+
var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11742
12099
|
var LIST_ITEM_GAP = 32;
|
|
11743
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12100
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__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) {
|
|
11744
12101
|
var bottomBorder = _ref.bottomBorder;
|
|
11745
12102
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11746
12103
|
}, zIndexes.anchor, function (_ref2) {
|
|
11747
12104
|
var withShadow = _ref2.withShadow;
|
|
11748
|
-
return withShadow && styled.css(_templateObject2$
|
|
12105
|
+
return withShadow && styled.css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11749
12106
|
});
|
|
11750
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
11751
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12107
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
12108
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11752
12109
|
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateObject5$D = /*#__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) {
|
|
11753
12110
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11754
12111
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
@@ -12019,17 +12376,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12019
12376
|
})))) : null))));
|
|
12020
12377
|
};
|
|
12021
12378
|
|
|
12022
|
-
var _templateObject$
|
|
12023
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12379
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
|
|
12380
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12024
12381
|
var sticky = _ref.sticky;
|
|
12025
12382
|
return sticky ? 'sticky' : 'initial';
|
|
12026
12383
|
}, zIndexes.anchor);
|
|
12027
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
12028
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12384
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
12385
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
12029
12386
|
var title = _ref2.title;
|
|
12030
12387
|
return title ? 'row' : 'row-reverse';
|
|
12031
12388
|
}, devices.tablet, devices.mobile);
|
|
12032
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12389
|
+
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$L || (_templateObject4$L = /*#__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);
|
|
12033
12390
|
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__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);
|
|
12034
12391
|
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
12035
12392
|
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
@@ -12079,14 +12436,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12079
12436
|
}, message))));
|
|
12080
12437
|
};
|
|
12081
12438
|
|
|
12082
|
-
var _templateObject$
|
|
12083
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12084
|
-
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$
|
|
12085
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12086
|
-
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$
|
|
12439
|
+
var _templateObject$1r, _templateObject2$17, _templateObject3$U, _templateObject4$M;
|
|
12440
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
|
|
12441
|
+
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
|
|
12442
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
12443
|
+
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
12087
12444
|
|
|
12088
|
-
var _templateObject$
|
|
12089
|
-
var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12445
|
+
var _templateObject$1s;
|
|
12446
|
+
var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
|
|
12090
12447
|
|
|
12091
12448
|
var UpsellCards = function UpsellCards(_ref) {
|
|
12092
12449
|
var upsellCards = _ref.upsellCards;
|
|
@@ -12148,9 +12505,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12148
12505
|
})))));
|
|
12149
12506
|
};
|
|
12150
12507
|
|
|
12151
|
-
var _templateObject$
|
|
12152
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12153
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
12508
|
+
var _templateObject$1t, _templateObject2$18;
|
|
12509
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
12510
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
12154
12511
|
var bottomBorder = _ref.bottomBorder;
|
|
12155
12512
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12156
12513
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12181,11 +12538,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12181
12538
|
}, children)));
|
|
12182
12539
|
};
|
|
12183
12540
|
|
|
12184
|
-
var _templateObject$
|
|
12185
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12186
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
12187
|
-
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12188
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
12541
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N;
|
|
12542
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
12543
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
12544
|
+
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
12545
|
+
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$N || (_templateObject4$N = /*#__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"])));
|
|
12189
12546
|
|
|
12190
12547
|
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12191
12548
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -12389,21 +12746,21 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12389
12746
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12390
12747
|
};
|
|
12391
12748
|
|
|
12392
|
-
var _templateObject$
|
|
12393
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12749
|
+
var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
|
|
12750
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1v || (_templateObject$1v = /*#__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) {
|
|
12394
12751
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12395
12752
|
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 }";
|
|
12396
12753
|
}, devices.mobile, function (_ref2) {
|
|
12397
12754
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12398
12755
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12399
12756
|
});
|
|
12400
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12757
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12401
12758
|
var type = _ref3.type,
|
|
12402
12759
|
isActive = _ref3.isActive;
|
|
12403
12760
|
return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n " + getCardSlideTabletStyles(type) + "\n }\n }\n }\n\n @media " + devices.mobile + " {\n && {\n .swipe-slide {\n " + getCardSlideMobileStyles(type) + "\n }\n }\n }\n ";
|
|
12404
12761
|
});
|
|
12405
|
-
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
12406
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12762
|
+
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$W || (_templateObject3$W = /*#__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);
|
|
12763
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12407
12764
|
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12408
12765
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12409
12766
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
@@ -12441,7 +12798,8 @@ var Carousel = function Carousel(_ref) {
|
|
|
12441
12798
|
_ref$infinite = _ref.infinite,
|
|
12442
12799
|
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
12443
12800
|
_ref$useOffset = _ref.useOffset,
|
|
12444
|
-
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset
|
|
12801
|
+
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset,
|
|
12802
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
12445
12803
|
var _useState = React.useState(false),
|
|
12446
12804
|
isFullscreen = _useState[0],
|
|
12447
12805
|
setIsFullscreen = _useState[1];
|
|
@@ -12591,6 +12949,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12591
12949
|
var carouselTitleId = "carousel-title-" + title;
|
|
12592
12950
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
12593
12951
|
var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
12952
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12594
12953
|
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
12595
12954
|
className: className,
|
|
12596
12955
|
type: type,
|
|
@@ -12614,7 +12973,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12614
12973
|
isDescriptionPresent: !!description
|
|
12615
12974
|
}, /*#__PURE__*/React__default.createElement(TitleText$1, {
|
|
12616
12975
|
size: "medium",
|
|
12617
|
-
serif:
|
|
12976
|
+
serif: isVictorTitleFont,
|
|
12618
12977
|
hierarchy: titleSemanticLevelValue
|
|
12619
12978
|
}, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12620
12979
|
size: "large"
|
|
@@ -12654,11 +13013,11 @@ var Carousel = function Carousel(_ref) {
|
|
|
12654
13013
|
}, children))));
|
|
12655
13014
|
};
|
|
12656
13015
|
|
|
12657
|
-
var _templateObject$
|
|
12658
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
12659
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12660
|
-
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12661
|
-
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
13016
|
+
var _templateObject$1w, _templateObject2$1b, _templateObject3$X, _templateObject4$P, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$d, _templateObject0$b, _templateObject1$7, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
13017
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1w || (_templateObject$1w = /*#__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);
|
|
13018
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$1b || (_templateObject2$1b = /*#__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);
|
|
13019
|
+
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
13020
|
+
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$P || (_templateObject4$P = /*#__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);
|
|
12662
13021
|
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$F || (_templateObject5$F = /*#__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);
|
|
12663
13022
|
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12664
13023
|
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$p || (_templateObject7$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
@@ -12804,7 +13163,7 @@ var VideoSlide = function VideoSlide(_ref) {
|
|
|
12804
13163
|
});
|
|
12805
13164
|
return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
|
|
12806
13165
|
isCurrentSlide: isCurrentSlide
|
|
12807
|
-
}, /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
13166
|
+
}, /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
|
|
12808
13167
|
video: video,
|
|
12809
13168
|
settings: settings
|
|
12810
13169
|
}));
|
|
@@ -12844,7 +13203,8 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12844
13203
|
carouselTitle = _ref.carouselTitle,
|
|
12845
13204
|
slides = _ref.slides,
|
|
12846
13205
|
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
12847
|
-
className = _ref.className
|
|
13206
|
+
className = _ref.className,
|
|
13207
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
12848
13208
|
var slidesMedia = React.useMemo(function () {
|
|
12849
13209
|
return slides.map(function (_ref2) {
|
|
12850
13210
|
var mediaContent = _ref2.mediaContent;
|
|
@@ -12875,6 +13235,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12875
13235
|
var handleClickInside = function handleClickInside(e) {
|
|
12876
13236
|
e.stopPropagation();
|
|
12877
13237
|
};
|
|
13238
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12878
13239
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid$1, {
|
|
12879
13240
|
role: "region",
|
|
12880
13241
|
"aria-labelledby": carouselTitleId,
|
|
@@ -12887,7 +13248,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12887
13248
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
12888
13249
|
className: TYPOGRAPHY_CLASS_NAME,
|
|
12889
13250
|
size: "medium",
|
|
12890
|
-
serif:
|
|
13251
|
+
serif: isVictorTitleFont,
|
|
12891
13252
|
hierarchy: titleSemanticLevelValue
|
|
12892
13253
|
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12893
13254
|
onClickNext: onNext,
|
|
@@ -12979,9 +13340,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
12979
13340
|
})));
|
|
12980
13341
|
};
|
|
12981
13342
|
|
|
12982
|
-
var _templateObject$
|
|
12983
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12984
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
13343
|
+
var _templateObject$1x, _templateObject3$Y;
|
|
13344
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
13345
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
12985
13346
|
|
|
12986
13347
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
12987
13348
|
var children = _ref.children;
|
|
@@ -13576,8 +13937,8 @@ var Theme = function Theme(_ref) {
|
|
|
13576
13937
|
}, children);
|
|
13577
13938
|
};
|
|
13578
13939
|
|
|
13579
|
-
var _templateObject$
|
|
13580
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13940
|
+
var _templateObject$1y;
|
|
13941
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13581
13942
|
var theme = _ref.theme;
|
|
13582
13943
|
return theme.colors.primary;
|
|
13583
13944
|
}, function (_ref2) {
|
|
@@ -14524,10 +14885,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1x || (
|
|
|
14524
14885
|
return theme.footer.tablet.paddingBottom;
|
|
14525
14886
|
}, devices.desktop, devices.largeDesktop);
|
|
14526
14887
|
|
|
14527
|
-
var _templateObject$
|
|
14528
|
-
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
14529
|
-
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$
|
|
14530
|
-
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$
|
|
14888
|
+
var _templateObject$1z, _templateObject2$1c, _templateObject3$Z;
|
|
14889
|
+
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1z || (_templateObject$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14890
|
+
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1c || (_templateObject2$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14891
|
+
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
14531
14892
|
|
|
14532
14893
|
/* eslint-disable react/no-danger */
|
|
14533
14894
|
var Quote = function Quote(_ref) {
|
|
@@ -14662,7 +15023,7 @@ exports.TypeTags = TypeTags;
|
|
|
14662
15023
|
exports.UpsellCard = UpsellCard;
|
|
14663
15024
|
exports.UpsellSection = UpsellSection;
|
|
14664
15025
|
exports.VideoControls = VideoControls;
|
|
14665
|
-
exports.VideoWithControls = VideoWithControls$
|
|
15026
|
+
exports.VideoWithControls = VideoWithControls$2;
|
|
14666
15027
|
exports.breakpoints = breakpoints;
|
|
14667
15028
|
exports.devices = devices;
|
|
14668
15029
|
exports.useHarmonicTheme = useHarmonicTheme;
|