@royaloperahouse/harmonic 0.19.0 → 0.19.1-a
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 +907 -0
- package/README.md +267 -43
- package/dist/components/atoms/Buttons/Auxiliary/AuxiliaryButton.style.d.ts +1 -9
- package/dist/components/atoms/Buttons/Button.d.ts +3 -10
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.d.ts +3 -17
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.style.d.ts +1 -9
- package/dist/components/atoms/Buttons/Secondary/SecondaryButton.style.d.ts +1 -9
- package/dist/components/atoms/index.d.ts +1 -2
- package/dist/components/index.d.ts +3 -3
- package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +0 -1
- package/dist/components/molecules/HotFilters/HotFilters.style.d.ts +1 -16
- package/dist/components/molecules/PageHeading/Compact/Compact.style.d.ts +1 -16
- package/dist/components/molecules/PageHeading/Impact/Impact.style.d.ts +9 -302
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +0 -2
- package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +1 -3
- package/dist/components/molecules/PersonCard/PersonCard.style.d.ts +1 -3
- package/dist/components/molecules/Select2/Select2.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +1 -3
- package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +1 -3
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +1 -3
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +1 -16
- package/dist/harmonic.cjs.development.js +552 -1335
- 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 +551 -1331
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/card.d.ts +0 -2
- package/dist/types/impactHeader.d.ts +32 -14
- package/dist/types/signUpForm.d.ts +0 -1
- package/dist/types/types.d.ts +0 -14
- package/dist/types/upsell.d.ts +0 -2
- package/package.json +6 -24
- package/README.GIT +0 -293
- package/dist/components/atoms/Radio/Radio.d.ts +0 -7
- package/dist/components/atoms/Radio/Radio.style.d.ts +0 -4
- package/dist/components/atoms/Radio/index.d.ts +0 -2
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.d.ts +0 -4
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.style.d.ts +0 -5
- package/dist/components/atoms/VideoControlsImpact/index.d.ts +0 -2
- package/dist/components/molecules/RadioGroup/RadioGroup.d.ts +0 -7
- package/dist/components/molecules/RadioGroup/RadioGroup.style.d.ts +0 -1
- package/dist/components/molecules/RadioGroup/index.d.ts +0 -2
- package/dist/components/molecules/Select/Select.d.ts +0 -101
- package/dist/components/molecules/Select/Select.style.d.ts +0 -13
- package/dist/components/molecules/Select/index.d.ts +0 -2
package/dist/harmonic.esm.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React__default, { createElement, memo,
|
|
1
|
+
import React__default, { createElement, memo, useCallback, useRef, useImperativeHandle, useMemo, useEffect, forwardRef, useState, cloneElement, useLayoutEffect } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import { renderToString } from 'react-dom/server';
|
|
5
|
-
import Select
|
|
6
|
-
import Select$
|
|
5
|
+
import Select, { components } from 'react-select';
|
|
6
|
+
import Select$1 from 'react-select/async';
|
|
7
7
|
import Modal from 'react-modal';
|
|
8
8
|
import ScrollLock from 'react-scrolllock';
|
|
9
9
|
|
|
@@ -237,8 +237,7 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
|
237
237
|
em = _ref2.em,
|
|
238
238
|
_ref2$color = _ref2.color,
|
|
239
239
|
color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
|
|
240
|
-
|
|
241
|
-
serif = _ref2$serif === void 0 ? false : _ref2$serif,
|
|
240
|
+
serif = _ref2.serif,
|
|
242
241
|
hierarchy = _ref2.hierarchy,
|
|
243
242
|
tag = _ref2.tag,
|
|
244
243
|
className = _ref2.className,
|
|
@@ -2650,7 +2649,7 @@ var Icon = /*#__PURE__*/memo(function (props) {
|
|
|
2650
2649
|
Icon.displayName = 'Icon';
|
|
2651
2650
|
|
|
2652
2651
|
var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
|
|
2653
|
-
var Button =
|
|
2652
|
+
var Button = function Button(_ref) {
|
|
2654
2653
|
var children = _ref.children,
|
|
2655
2654
|
iconName = _ref.iconName,
|
|
2656
2655
|
iconDirection = _ref.iconDirection,
|
|
@@ -2660,7 +2659,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
2660
2659
|
href = _ref.href,
|
|
2661
2660
|
onClick = _ref.onClick,
|
|
2662
2661
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
2663
|
-
var truncatedString = children
|
|
2662
|
+
var truncatedString = children.substring(0, 30);
|
|
2664
2663
|
var handleClick = useCallback(function (e) {
|
|
2665
2664
|
if (!href) e.preventDefault();
|
|
2666
2665
|
onClick == null || onClick(e);
|
|
@@ -2672,8 +2671,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
2672
2671
|
href: href != null ? href : '#',
|
|
2673
2672
|
onClick: handleClick,
|
|
2674
2673
|
iconName: iconName,
|
|
2675
|
-
className: className
|
|
2676
|
-
ref: ref
|
|
2674
|
+
className: className
|
|
2677
2675
|
}), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
|
|
2678
2676
|
"data-testid": "button-icon",
|
|
2679
2677
|
className: iconClassName
|
|
@@ -2684,8 +2682,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
2684
2682
|
}))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
|
|
2685
2683
|
color: "inherit"
|
|
2686
2684
|
}, truncatedString));
|
|
2687
|
-
}
|
|
2688
|
-
Button.displayName = 'Button';
|
|
2685
|
+
};
|
|
2689
2686
|
|
|
2690
2687
|
var getPointerEvents = function getPointerEvents(_ref) {
|
|
2691
2688
|
var disabled = _ref.disabled;
|
|
@@ -2750,7 +2747,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$3 || (_te
|
|
|
2750
2747
|
var AriaDescription = /*#__PURE__*/styled.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
2751
2748
|
|
|
2752
2749
|
var _excluded$3 = ["children", "disabled", "className"];
|
|
2753
|
-
var PrimaryButton =
|
|
2750
|
+
var PrimaryButton = function PrimaryButton(_ref) {
|
|
2754
2751
|
var children = _ref.children,
|
|
2755
2752
|
disabled = _ref.disabled,
|
|
2756
2753
|
className = _ref.className,
|
|
@@ -2765,7 +2762,6 @@ var PrimaryButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
2765
2762
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
|
|
2766
2763
|
id: disabledButtonDescriptionId
|
|
2767
2764
|
}, disabledButtonDescription), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2768
|
-
ref: ref,
|
|
2769
2765
|
disabled: true,
|
|
2770
2766
|
"aria-disabled": "true",
|
|
2771
2767
|
role: "button",
|
|
@@ -2775,13 +2771,10 @@ var PrimaryButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
2775
2771
|
onClick: handleClick
|
|
2776
2772
|
}), children));
|
|
2777
2773
|
}
|
|
2778
|
-
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2779
|
-
ref: ref
|
|
2780
|
-
}, props, {
|
|
2774
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({}, props, {
|
|
2781
2775
|
className: className
|
|
2782
2776
|
}), children);
|
|
2783
|
-
}
|
|
2784
|
-
PrimaryButton.displayName = 'PrimaryButton';
|
|
2777
|
+
};
|
|
2785
2778
|
|
|
2786
2779
|
var COLORS$1 = {
|
|
2787
2780
|
disabled: 'var(--color-state-disabled)',
|
|
@@ -3291,10 +3284,56 @@ var Progress = function Progress(_ref) {
|
|
|
3291
3284
|
}, renderSteps()));
|
|
3292
3285
|
};
|
|
3293
3286
|
|
|
3294
|
-
var _templateObject$c, _templateObject2$7, _templateObject3$3;
|
|
3295
|
-
var
|
|
3296
|
-
var
|
|
3297
|
-
var
|
|
3287
|
+
var _templateObject$c, _templateObject2$7, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3288
|
+
var Container = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3289
|
+
var Radio = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3290
|
+
var error = _ref.error,
|
|
3291
|
+
darkMode = _ref.darkMode,
|
|
3292
|
+
disabled = _ref.disabled;
|
|
3293
|
+
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3294
|
+
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3295
|
+
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3296
|
+
return '1px solid var(--base-color-black)';
|
|
3297
|
+
}, function (_ref2) {
|
|
3298
|
+
var disabled = _ref2.disabled,
|
|
3299
|
+
darkMode = _ref2.darkMode;
|
|
3300
|
+
if (disabled) return 'var(--base-color-light-grey)';
|
|
3301
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3302
|
+
return ' var(--base-color-white)';
|
|
3303
|
+
}, function (_ref3) {
|
|
3304
|
+
var disabled = _ref3.disabled,
|
|
3305
|
+
blackBox = _ref3.blackBox,
|
|
3306
|
+
darkMode = _ref3.darkMode;
|
|
3307
|
+
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3308
|
+
if (darkMode) return 'var(--base-color-black)';
|
|
3309
|
+
if (blackBox) return 'var(--base-color-white)';
|
|
3310
|
+
return ' var(--base-color-black)';
|
|
3311
|
+
});
|
|
3312
|
+
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='radio'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Radio, function (_ref4) {
|
|
3313
|
+
var blackBox = _ref4.blackBox,
|
|
3314
|
+
darkMode = _ref4.darkMode;
|
|
3315
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3316
|
+
if (blackBox) return 'var(--base-color-black)';
|
|
3317
|
+
return ' var(--base-color-white)';
|
|
3318
|
+
}, Radio, function (_ref5) {
|
|
3319
|
+
var darkMode = _ref5.darkMode;
|
|
3320
|
+
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3321
|
+
return '3px solid var(--base-color-lapislazuli)';
|
|
3322
|
+
});
|
|
3323
|
+
var RadioIcon = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: currentColor;\n input[type='radio']:checked + ", " & {\n display: block;\n }\n"])), Radio);
|
|
3324
|
+
var TextLabel = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3325
|
+
var darkMode = _ref6.darkMode,
|
|
3326
|
+
disabled = _ref6.disabled;
|
|
3327
|
+
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3328
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3329
|
+
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3330
|
+
return 'var(--base-color-black)';
|
|
3331
|
+
});
|
|
3332
|
+
var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3333
|
+
var darkMode = _ref7.darkMode;
|
|
3334
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3335
|
+
return 'var(--base-color-errorstate)';
|
|
3336
|
+
});
|
|
3298
3337
|
|
|
3299
3338
|
var _templateObject$d;
|
|
3300
3339
|
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n margin: var(--margin-", "-", ");\n"])), function (_ref) {
|
|
@@ -3411,95 +3450,6 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
3411
3450
|
}, children);
|
|
3412
3451
|
};
|
|
3413
3452
|
|
|
3414
|
-
/**
|
|
3415
|
-
* DEPRECATED. Use Radio2 instead
|
|
3416
|
-
*/
|
|
3417
|
-
var Radio = function Radio(_ref) {
|
|
3418
|
-
var _ref$checked = _ref.checked,
|
|
3419
|
-
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
3420
|
-
error = _ref.error,
|
|
3421
|
-
label = _ref.label,
|
|
3422
|
-
onChange = _ref.onChange;
|
|
3423
|
-
var _useState = useState(checked),
|
|
3424
|
-
isChecked = _useState[0],
|
|
3425
|
-
setChecked = _useState[1];
|
|
3426
|
-
var handleRadioChange = function handleRadioChange() {
|
|
3427
|
-
setChecked(!isChecked);
|
|
3428
|
-
onChange == null || onChange(label != null ? label : '');
|
|
3429
|
-
};
|
|
3430
|
-
var handleKeyPress = function handleKeyPress(event) {
|
|
3431
|
-
if (event.key === 'Space' || event.key === ' ') handleRadioChange();
|
|
3432
|
-
};
|
|
3433
|
-
useEffect(function () {
|
|
3434
|
-
setChecked(checked);
|
|
3435
|
-
}, [onChange]);
|
|
3436
|
-
return /*#__PURE__*/React__default.createElement(RadioContainer, null, /*#__PURE__*/React__default.createElement(RadioLine, {
|
|
3437
|
-
role: "radio",
|
|
3438
|
-
tabIndex: 0,
|
|
3439
|
-
onClick: handleRadioChange,
|
|
3440
|
-
onKeyPress: handleKeyPress
|
|
3441
|
-
}, /*#__PURE__*/React__default.createElement("input", {
|
|
3442
|
-
type: "radio",
|
|
3443
|
-
checked: isChecked,
|
|
3444
|
-
readOnly: true
|
|
3445
|
-
}), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3446
|
-
level: 1
|
|
3447
|
-
}, label)), error && (/*#__PURE__*/React__default.createElement(RadioError, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3448
|
-
level: 1
|
|
3449
|
-
}, error))));
|
|
3450
|
-
};
|
|
3451
|
-
|
|
3452
|
-
var _templateObject$e, _templateObject2$8, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3453
|
-
var Container = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3454
|
-
var Radio$1 = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3455
|
-
var error = _ref.error,
|
|
3456
|
-
darkMode = _ref.darkMode,
|
|
3457
|
-
disabled = _ref.disabled;
|
|
3458
|
-
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3459
|
-
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3460
|
-
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3461
|
-
return '1px solid var(--base-color-black)';
|
|
3462
|
-
}, function (_ref2) {
|
|
3463
|
-
var disabled = _ref2.disabled,
|
|
3464
|
-
darkMode = _ref2.darkMode;
|
|
3465
|
-
if (disabled) return 'var(--base-color-light-grey)';
|
|
3466
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3467
|
-
return ' var(--base-color-white)';
|
|
3468
|
-
}, function (_ref3) {
|
|
3469
|
-
var disabled = _ref3.disabled,
|
|
3470
|
-
blackBox = _ref3.blackBox,
|
|
3471
|
-
darkMode = _ref3.darkMode;
|
|
3472
|
-
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3473
|
-
if (darkMode) return 'var(--base-color-black)';
|
|
3474
|
-
if (blackBox) return 'var(--base-color-white)';
|
|
3475
|
-
return ' var(--base-color-black)';
|
|
3476
|
-
});
|
|
3477
|
-
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='radio'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Radio$1, function (_ref4) {
|
|
3478
|
-
var blackBox = _ref4.blackBox,
|
|
3479
|
-
darkMode = _ref4.darkMode;
|
|
3480
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3481
|
-
if (blackBox) return 'var(--base-color-black)';
|
|
3482
|
-
return ' var(--base-color-white)';
|
|
3483
|
-
}, Radio$1, function (_ref5) {
|
|
3484
|
-
var darkMode = _ref5.darkMode;
|
|
3485
|
-
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3486
|
-
return '3px solid var(--base-color-lapislazuli)';
|
|
3487
|
-
});
|
|
3488
|
-
var RadioIcon = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: currentColor;\n input[type='radio']:checked + ", " & {\n display: block;\n }\n"])), Radio$1);
|
|
3489
|
-
var TextLabel = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3490
|
-
var darkMode = _ref6.darkMode,
|
|
3491
|
-
disabled = _ref6.disabled;
|
|
3492
|
-
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3493
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3494
|
-
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3495
|
-
return 'var(--base-color-black)';
|
|
3496
|
-
});
|
|
3497
|
-
var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3498
|
-
var darkMode = _ref7.darkMode;
|
|
3499
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3500
|
-
return 'var(--base-color-errorstate)';
|
|
3501
|
-
});
|
|
3502
|
-
|
|
3503
3453
|
var _excluded$7 = ["children", "disabled", "error", "darkMode", "blackBox"];
|
|
3504
3454
|
/**
|
|
3505
3455
|
* A Radio component, that wraps around the native `<input type="radio"/>` element
|
|
@@ -3538,7 +3488,7 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3538
3488
|
type: "radio",
|
|
3539
3489
|
ref: ref,
|
|
3540
3490
|
"data-testid": "radio-input"
|
|
3541
|
-
})), /*#__PURE__*/React__default.createElement(Radio
|
|
3491
|
+
})), /*#__PURE__*/React__default.createElement(Radio, {
|
|
3542
3492
|
error: error,
|
|
3543
3493
|
darkMode: darkMode,
|
|
3544
3494
|
disabled: disabled,
|
|
@@ -3558,9 +3508,9 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3558
3508
|
};
|
|
3559
3509
|
var Radio2 = /*#__PURE__*/forwardRef(Radio2Component);
|
|
3560
3510
|
|
|
3561
|
-
var _templateObject$
|
|
3562
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3563
|
-
var BaseIconWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
3511
|
+
var _templateObject$e, _templateObject2$8, _templateObject3$4, _templateObject4$3, _templateObject5$2;
|
|
3512
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3513
|
+
var BaseIconWrapper = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n\n width: ", ";\n height: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (_ref) {
|
|
3564
3514
|
var size = _ref.size;
|
|
3565
3515
|
return size === 'small' ? 'var(--rotator-button-small-width)' : 'var(--rotator-button-width)';
|
|
3566
3516
|
}, function (_ref2) {
|
|
@@ -3573,7 +3523,7 @@ var BaseIconWrapper = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateOb
|
|
|
3573
3523
|
var size = _ref4.size;
|
|
3574
3524
|
return size === 'small' ? 'var(--rotator-button-small-icon-width)' : 'var(--rotator-button-icon-width)';
|
|
3575
3525
|
});
|
|
3576
|
-
var IconWrapper$1 = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject3$
|
|
3526
|
+
var IconWrapper$1 = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--rotator-button-bg-color);\n color: var(--rotator-button-color);\n\n svg path {\n fill: var(--rotator-button-color);\n }\n\n :hover {\n cursor: pointer;\n background-color: var(--rotator-button-hover-bg-color);\n\n && svg path {\n fill: var(--rotator-button-hover-color);\n }\n }\n"])));
|
|
3577
3527
|
var IconUnavailableWrapper = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-state-disabled);\n color: var(--color-primary-black);\n opacity: 0.2;\n\n svg path {\n fill: var(--color-primary-black);\n }\n\n @media ", " {\n pointer-events: none;\n }\n"])), devices.mobile);
|
|
3578
3528
|
var FullscreenIconWrapper = /*#__PURE__*/styled(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
|
|
3579
3529
|
|
|
@@ -3763,8 +3713,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3763
3713
|
}, renderFullscreenIcon())));
|
|
3764
3714
|
};
|
|
3765
3715
|
|
|
3766
|
-
var _templateObject$
|
|
3767
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$
|
|
3716
|
+
var _templateObject$f;
|
|
3717
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3768
3718
|
var fillColor = _ref.fillColor;
|
|
3769
3719
|
return fillColor;
|
|
3770
3720
|
});
|
|
@@ -3789,9 +3739,9 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3789
3739
|
})));
|
|
3790
3740
|
};
|
|
3791
3741
|
|
|
3792
|
-
var _templateObject$
|
|
3793
|
-
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
3794
|
-
var Splitter = /*#__PURE__*/styled.div(_templateObject2$
|
|
3742
|
+
var _templateObject$g, _templateObject2$9;
|
|
3743
|
+
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3744
|
+
var Splitter = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--color-base-light-grey);\n"])));
|
|
3795
3745
|
|
|
3796
3746
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
3797
3747
|
var _ref$fullWidth = _ref.fullWidth,
|
|
@@ -3812,8 +3762,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3812
3762
|
}, /*#__PURE__*/React__default.createElement(Splitter, null))));
|
|
3813
3763
|
};
|
|
3814
3764
|
|
|
3815
|
-
var _templateObject$
|
|
3816
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3765
|
+
var _templateObject$h;
|
|
3766
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-block;\n height: auto;\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n\n img {\n display: block;\n width: 100%;\n }\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n"])), devices.tablet, devices.mobile);
|
|
3817
3767
|
|
|
3818
3768
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3819
3769
|
var imageSource = _ref.imageSource,
|
|
@@ -3840,10 +3790,10 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3840
3790
|
}) : children));
|
|
3841
3791
|
};
|
|
3842
3792
|
|
|
3843
|
-
var _templateObject$
|
|
3844
|
-
var SponsorshipWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3845
|
-
var SponsorshipLinkText = /*#__PURE__*/styled.span(_templateObject2$
|
|
3846
|
-
var SponsorshipLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
3793
|
+
var _templateObject$i, _templateObject2$a, _templateObject3$5, _templateObject4$4;
|
|
3794
|
+
var SponsorshipWrapper = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n position: relative;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3795
|
+
var SponsorshipLinkText = /*#__PURE__*/styled.span(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n whitespace: nowrap;\n borderwidth: 0;\n"])));
|
|
3796
|
+
var SponsorshipLink = /*#__PURE__*/styled.a(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n inset: 0;\n width: 80px;\n height: 80px;\n z-index: 2;\n text-decoration: none;\n background: transparent;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3847
3797
|
var SponsorshipStyledIframe = /*#__PURE__*/styled.iframe(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: none;\n display: block;\n width: 80px;\n height: 80px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n\n @media ", " {\n transform: scale(0.5);\n transform-origin: top left;\n }\n"])), devices.mobileAndTablet);
|
|
3848
3798
|
|
|
3849
3799
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3878,8 +3828,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3878
3828
|
}));
|
|
3879
3829
|
};
|
|
3880
3830
|
|
|
3881
|
-
var _templateObject$
|
|
3882
|
-
var TabText = /*#__PURE__*/styled.a(_templateObject$
|
|
3831
|
+
var _templateObject$j, _templateObject2$b;
|
|
3832
|
+
var TabText = /*#__PURE__*/styled.a(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--harmonic-letter-spacing-navigation);\n text-decoration: none;\n margin-left: 5px;\n color: var(--color-primary-black);\n color: ", ";\n\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n ", "\n\n @media ", " {\n width: max-content;\n }\n"])), function (_ref) {
|
|
3883
3833
|
var color = _ref.color;
|
|
3884
3834
|
return color ? "var(--color-" + color + ")" : "var(--color-primary-black)";
|
|
3885
3835
|
}, function (props) {
|
|
@@ -3890,7 +3840,7 @@ var TabText = /*#__PURE__*/styled.a(_templateObject$k || (_templateObject$k = /*
|
|
|
3890
3840
|
}
|
|
3891
3841
|
return "";
|
|
3892
3842
|
}, devices.mobileAndTablet);
|
|
3893
|
-
var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3843
|
+
var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: fit-content;\n height: 100%;\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n & path {\n fill: var(--color-primary-black);\n }\n }\n\n ", "\n\n ", "\n\n @media ", " {\n svg {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n"])), function (props) {
|
|
3894
3844
|
if (props.withIcon === 'left') {
|
|
3895
3845
|
return "\n flex-direction: row-reverse;\n svg {\n margin-right: 6px;\n }";
|
|
3896
3846
|
}
|
|
@@ -3975,8 +3925,8 @@ var Tab = function Tab(_ref) {
|
|
|
3975
3925
|
}));
|
|
3976
3926
|
};
|
|
3977
3927
|
|
|
3978
|
-
var _templateObject$
|
|
3979
|
-
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
3928
|
+
var _templateObject$k, _templateObject2$c;
|
|
3929
|
+
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n\n && svg path {\n fill: ", ";\n }\n\n @media ", ", ", " {\n &:hover {\n color: var(--color-", ");\n border-bottom: 1px solid var(--color-", ");\n\n && svg path {\n fill: var(--color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3980
3930
|
var iconName = _ref.iconName;
|
|
3981
3931
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px) 0' : 'var(--harmonic-text-link-underline-offset) 0';
|
|
3982
3932
|
}, function (_ref2) {
|
|
@@ -4003,7 +3953,7 @@ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject
|
|
|
4003
3953
|
var hoverColor = _ref7.hoverColor;
|
|
4004
3954
|
return hoverColor;
|
|
4005
3955
|
});
|
|
4006
|
-
var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
3956
|
+
var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
|
|
4007
3957
|
|
|
4008
3958
|
var _excluded$9 = ["children", "iconName", "iconDirection", "color", "hoverColor", "className"];
|
|
4009
3959
|
var TabLink = function TabLink(_ref) {
|
|
@@ -4031,19 +3981,19 @@ var TabLink = function TabLink(_ref) {
|
|
|
4031
3981
|
}))) : null, children);
|
|
4032
3982
|
};
|
|
4033
3983
|
|
|
4034
|
-
var _templateObject$
|
|
4035
|
-
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3984
|
+
var _templateObject$l, _templateObject2$d, _templateObject3$6, _templateObject4$5;
|
|
3985
|
+
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
4036
3986
|
var width = _ref.width;
|
|
4037
3987
|
return width ? width + "px;" : '100%;';
|
|
4038
3988
|
}, function (_ref2) {
|
|
4039
3989
|
var height = _ref2.height;
|
|
4040
3990
|
return height + "px;";
|
|
4041
3991
|
});
|
|
4042
|
-
var TextAreaLabel = /*#__PURE__*/styled.div(_templateObject2$
|
|
3992
|
+
var TextAreaLabel = /*#__PURE__*/styled.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 0 15px;\n ", ";\n"])), function (_ref3) {
|
|
4043
3993
|
var darkMode = _ref3.darkMode;
|
|
4044
3994
|
return darkMode ? 'color: var(--base-color-white)' : '';
|
|
4045
3995
|
});
|
|
4046
|
-
var TextAreaBox = /*#__PURE__*/styled.textarea(_templateObject3$
|
|
3996
|
+
var TextAreaBox = /*#__PURE__*/styled.textarea(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n box-sizing: border-box;\n resize: none;\n padding: 20px;\n width: 100%;\n height: 100%;\n border: 1px solid ", ";\n\n ", ";\n\n :disabled {\n background-color: var(--base-color-light-grey);\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline-style: solid;\n outline-width: ", ";\n outline-color: ", ";\n }\n"])), function (_ref4) {
|
|
4047
3997
|
var error = _ref4.error;
|
|
4048
3998
|
return error ? 'var(--base-color-errorstate)' : 'var(--base-color-light-grey)';
|
|
4049
3999
|
}, function (_ref5) {
|
|
@@ -4154,14 +4104,14 @@ var TextArea = function TextArea(_ref) {
|
|
|
4154
4104
|
}, error)))));
|
|
4155
4105
|
};
|
|
4156
4106
|
|
|
4157
|
-
var _templateObject$
|
|
4158
|
-
var Container$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
4159
|
-
var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4107
|
+
var _templateObject$m, _templateObject2$e, _templateObject3$7, _templateObject4$6, _templateObject5$3, _templateObject6$1, _templateObject7;
|
|
4108
|
+
var Container$1 = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4109
|
+
var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
4160
4110
|
var width = _ref.width;
|
|
4161
4111
|
if (!width) return 'none';
|
|
4162
4112
|
return width + "px";
|
|
4163
4113
|
});
|
|
4164
|
-
var Input = /*#__PURE__*/styled.input(_templateObject3$
|
|
4114
|
+
var Input = /*#__PURE__*/styled.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--color-base-light-grey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n"])), function (_ref2) {
|
|
4165
4115
|
var isPasswordField = _ref2.isPasswordField;
|
|
4166
4116
|
if (isPasswordField) return "80px";
|
|
4167
4117
|
return "20px";
|
|
@@ -4288,9 +4238,9 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
|
|
|
4288
4238
|
};
|
|
4289
4239
|
var TextField = /*#__PURE__*/forwardRef(TextFieldComponent);
|
|
4290
4240
|
|
|
4291
|
-
var _templateObject$
|
|
4292
|
-
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4293
|
-
var textStyles = /*#__PURE__*/css(_templateObject2$
|
|
4241
|
+
var _templateObject$n, _templateObject2$f, _templateObject3$8, _templateObject4$7, _templateObject5$4;
|
|
4242
|
+
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4243
|
+
var textStyles = /*#__PURE__*/css(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
|
|
4294
4244
|
var theme = _ref.theme;
|
|
4295
4245
|
return theme.fonts.desktop.weights.body[1];
|
|
4296
4246
|
}, function (_ref2) {
|
|
@@ -4300,7 +4250,7 @@ var textStyles = /*#__PURE__*/css(_templateObject2$g || (_templateObject2$g = /*
|
|
|
4300
4250
|
var theme = _ref3.theme;
|
|
4301
4251
|
return theme.spacing[7];
|
|
4302
4252
|
});
|
|
4303
|
-
var Input$1 = /*#__PURE__*/styled.input(_templateObject3$
|
|
4253
|
+
var Input$1 = /*#__PURE__*/styled.input(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n width: ", ";\n height: 48px;\n padding: 0px 20px;\n\n border: 1px solid ", ";\n outline: none;\n\n ", "\n\n :disabled {\n background-color: ", ";\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline: ", "};\n }\n"])), textStyles, function (_ref4) {
|
|
4304
4254
|
var width = _ref4.width;
|
|
4305
4255
|
return width ? width + "px" : '196px';
|
|
4306
4256
|
}, function (_ref5) {
|
|
@@ -4365,15 +4315,15 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4365
4315
|
}, error)) : null);
|
|
4366
4316
|
};
|
|
4367
4317
|
|
|
4368
|
-
var _templateObject$
|
|
4369
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
4318
|
+
var _templateObject$o, _templateObject2$g;
|
|
4319
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n text-underline-offset: ", ";\n font-family: var(--font-family-sans);\n font-size: 19px;\n font-weight: 500;\n line-height: 17px;\n letter-spacing: 0.4px;\n color: var(--color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media ", " {\n font-size: 17px;\n }\n"])), function (_ref) {
|
|
4370
4320
|
var iconName = _ref.iconName;
|
|
4371
4321
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
|
|
4372
4322
|
}, function (_ref2) {
|
|
4373
4323
|
var color = _ref2.color;
|
|
4374
4324
|
return color;
|
|
4375
4325
|
}, devices.mobile);
|
|
4376
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
4326
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
4377
4327
|
|
|
4378
4328
|
var _excluded$d = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
4379
4329
|
var TextLink = function TextLink(_ref) {
|
|
@@ -4404,12 +4354,12 @@ var TextLogoProduct;
|
|
|
4404
4354
|
TextLogoProduct["Cinema"] = "CINEMA";
|
|
4405
4355
|
})(TextLogoProduct || (TextLogoProduct = {}));
|
|
4406
4356
|
|
|
4407
|
-
var _templateObject$
|
|
4408
|
-
var TickboxError = /*#__PURE__*/styled.div(_templateObject$
|
|
4357
|
+
var _templateObject$p, _templateObject2$h, _templateObject3$9, _templateObject4$8;
|
|
4358
|
+
var TickboxError = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4409
4359
|
var dark = _ref.dark;
|
|
4410
4360
|
return dark ? 'white' : 'errorstate';
|
|
4411
4361
|
});
|
|
4412
|
-
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$
|
|
4362
|
+
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(\n --base-color-", "\n );\n cursor: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n div {\n margin-left: -32px;\n }\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref2) {
|
|
4413
4363
|
var dark = _ref2.dark,
|
|
4414
4364
|
disabled = _ref2.disabled;
|
|
4415
4365
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -4418,7 +4368,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$i || (_templateO
|
|
|
4418
4368
|
var disabled = _ref3.disabled;
|
|
4419
4369
|
return disabled ? 'not-allowed' : 'pointer';
|
|
4420
4370
|
}, devices.mobileAndTablet);
|
|
4421
|
-
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$
|
|
4371
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n outline: ", ";\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref4) {
|
|
4422
4372
|
var dark = _ref4.dark,
|
|
4423
4373
|
disabled = _ref4.disabled,
|
|
4424
4374
|
error = _ref4.error;
|
|
@@ -4526,9 +4476,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
4526
4476
|
}, error))));
|
|
4527
4477
|
};
|
|
4528
4478
|
|
|
4529
|
-
var _templateObject$
|
|
4530
|
-
var Container$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
4531
|
-
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
4479
|
+
var _templateObject$q, _templateObject2$i, _templateObject3$a, _templateObject4$9, _templateObject5$5, _templateObject6$2;
|
|
4480
|
+
var Container$2 = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4481
|
+
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
4532
4482
|
var error = _ref.error,
|
|
4533
4483
|
darkMode = _ref.darkMode,
|
|
4534
4484
|
disabled = _ref.disabled;
|
|
@@ -4551,7 +4501,7 @@ var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$
|
|
|
4551
4501
|
if (blackBox) return 'var(--base-color-white)';
|
|
4552
4502
|
return ' var(--base-color-black)';
|
|
4553
4503
|
});
|
|
4554
|
-
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$
|
|
4504
|
+
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='checkbox'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Tickbox$1, function (_ref4) {
|
|
4555
4505
|
var blackBox = _ref4.blackBox,
|
|
4556
4506
|
darkMode = _ref4.darkMode;
|
|
4557
4507
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -4637,16 +4587,16 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
|
|
|
4637
4587
|
};
|
|
4638
4588
|
var Tickbox2 = /*#__PURE__*/forwardRef(Tickbox2Component);
|
|
4639
4589
|
|
|
4640
|
-
var _templateObject$
|
|
4641
|
-
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4590
|
+
var _templateObject$r, _templateObject2$j, _templateObject3$b, _templateObject4$a, _templateObject5$6, _templateObject6$3, _templateObject7$1, _templateObject8;
|
|
4591
|
+
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-", ");\n"])), function (_ref) {
|
|
4642
4592
|
var color = _ref.color;
|
|
4643
4593
|
return color;
|
|
4644
4594
|
});
|
|
4645
|
-
var Line = /*#__PURE__*/styled.div(_templateObject2$
|
|
4595
|
+
var Line = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
|
|
4646
4596
|
var color = _ref2.color;
|
|
4647
4597
|
return color;
|
|
4648
4598
|
}, devices.mobileAndTablet);
|
|
4649
|
-
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4599
|
+
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4650
4600
|
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
4651
4601
|
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
4652
4602
|
var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -4747,8 +4697,8 @@ var Timer = function Timer(_ref) {
|
|
|
4747
4697
|
}));
|
|
4748
4698
|
};
|
|
4749
4699
|
|
|
4750
|
-
var _templateObject$
|
|
4751
|
-
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$
|
|
4700
|
+
var _templateObject$s;
|
|
4701
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\u2013';\n margin: 0 0.5em;\n }\n\n li:first-child:before {\n display: none;\n }\n"])));
|
|
4752
4702
|
|
|
4753
4703
|
var TypeTags = function TypeTags(_ref) {
|
|
4754
4704
|
var list = _ref.list;
|
|
@@ -4761,10 +4711,10 @@ var TypeTags = function TypeTags(_ref) {
|
|
|
4761
4711
|
}));
|
|
4762
4712
|
};
|
|
4763
4713
|
|
|
4764
|
-
var _templateObject$
|
|
4765
|
-
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$
|
|
4766
|
-
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
4767
|
-
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4714
|
+
var _templateObject$t, _templateObject2$k, _templateObject3$c, _templateObject4$b, _templateObject5$7, _templateObject6$4, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject0;
|
|
4715
|
+
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n cursor: pointer;\n"])));
|
|
4716
|
+
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
|
|
4717
|
+
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
4768
4718
|
var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 40px 17px 30px;\n"])));
|
|
4769
4719
|
var LeftWrapper = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4770
4720
|
var VideoVolume = /*#__PURE__*/styled.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
@@ -4951,13 +4901,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4951
4901
|
}))));
|
|
4952
4902
|
};
|
|
4953
4903
|
|
|
4954
|
-
var _templateObject$
|
|
4955
|
-
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4956
|
-
var StepperError = /*#__PURE__*/styled.div(_templateObject2$
|
|
4904
|
+
var _templateObject$u, _templateObject2$l, _templateObject3$d, _templateObject4$c, _templateObject5$8;
|
|
4905
|
+
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
4906
|
+
var StepperError = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
4957
4907
|
var darkMode = _ref.darkMode;
|
|
4958
4908
|
return darkMode ? 'white' : 'errorstate';
|
|
4959
4909
|
});
|
|
4960
|
-
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$
|
|
4910
|
+
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 154px;\n height: 48px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n ", ";\n\n * {\n color: var(--base-color-", ");\n word-break: unset;\n user-select: none;\n }\n\n path {\n fill: var(--base-color-", ") !important;\n }\n\n & > * {\n width: 51px;\n }\n"])), function (_ref2) {
|
|
4961
4911
|
var darkMode = _ref2.darkMode,
|
|
4962
4912
|
disabled = _ref2.disabled,
|
|
4963
4913
|
error = _ref2.error;
|
|
@@ -5161,9 +5111,9 @@ var Component = function Component(_ref) {
|
|
|
5161
5111
|
}, error))));
|
|
5162
5112
|
};
|
|
5163
5113
|
|
|
5164
|
-
var _templateObject$
|
|
5165
|
-
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5166
|
-
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$
|
|
5114
|
+
var _templateObject$v, _templateObject2$m;
|
|
5115
|
+
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
|
|
5116
|
+
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n\n &:focus {\n outline: 2px solid var(--color-base-white);\n }\n"])));
|
|
5167
5117
|
|
|
5168
5118
|
var SocialLinks = function SocialLinks(_ref) {
|
|
5169
5119
|
var items = _ref.items;
|
|
@@ -5187,16 +5137,16 @@ var SocialLinks = function SocialLinks(_ref) {
|
|
|
5187
5137
|
}));
|
|
5188
5138
|
};
|
|
5189
5139
|
|
|
5190
|
-
var _templateObject$
|
|
5191
|
-
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5140
|
+
var _templateObject$w, _templateObject2$n, _templateObject3$e, _templateObject4$d, _templateObject5$9, _templateObject6$5, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
5141
|
+
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 4px;\n\n @media ", " {\n padding-top: 0px;\n }\n\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
5192
5142
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5193
5143
|
return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--color-base-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
5194
5144
|
});
|
|
5195
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5145
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: ", ";\n opacity: 0;\n animation: fadeIn 0.3s ease forwards;\n\n @media ", " {\n top: 230px;\n background-color: var(--color-base-black);\n }\n\n @keyframes fadeIn {\n to {\n opacity: 0.5;\n }\n }\n"])), function (_ref2) {
|
|
5196
5146
|
var isMobile = _ref2.isMobile;
|
|
5197
5147
|
return isMobile ? zIndexes.overlay : zIndexes.searchOverlay;
|
|
5198
5148
|
}, devices.mobileAndTablet);
|
|
5199
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
5149
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-white);\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n z-index: ", ";\n\n @media ", " {\n height: 60px;\n }\n"])), zIndexes.navigation, devices.mobileAndTablet);
|
|
5200
5150
|
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n opacity: ", ";\n transform: ", ";\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease;\n background-color: var(--color-base-white);\n height: 100px;\n border-top: 1px solid var(--color-base-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 86px;\n top: 144px;\n }\n"])), function (_ref3) {
|
|
5201
5151
|
var visible = _ref3.visible;
|
|
5202
5152
|
return visible ? 'visible' : 'hidden';
|
|
@@ -5231,11 +5181,11 @@ var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject11 || (_
|
|
|
5231
5181
|
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
5232
5182
|
var NavTopContainerMobile = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n width: fit-content;\n align-items: center;\n height: 10%;\n margin-left: 20px;\n padding-bottom: 36px;\n }\n"])), devices.mobileAndTablet);
|
|
5233
5183
|
|
|
5234
|
-
var _templateObject$
|
|
5235
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5184
|
+
var _templateObject$x;
|
|
5185
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 100%;\n\n @media ", " {\n column-gap: 20px;\n }\n"])), devices.mobile);
|
|
5236
5186
|
|
|
5237
|
-
var _templateObject$
|
|
5238
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5187
|
+
var _templateObject$y, _templateObject2$o, _templateObject3$f, _templateObject4$e, _templateObject5$a, _templateObject6$6;
|
|
5188
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding-top: 3px;\n padding-bottom: 3px;\n\n & svg path {\n fill: var(--color-primary-black);\n }\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--color-primary-red);\n padding-bottom: 2px;\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
5239
5189
|
var selected = _ref.selected;
|
|
5240
5190
|
if (selected) {
|
|
5241
5191
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
@@ -5248,8 +5198,8 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$z || (_templateObj
|
|
|
5248
5198
|
}
|
|
5249
5199
|
return '';
|
|
5250
5200
|
});
|
|
5251
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5252
|
-
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
5201
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5202
|
+
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n"])));
|
|
5253
5203
|
var BasketInfo = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n @media ", " {\n width: max-content;\n }\n"])), devices.mobileAndTablet);
|
|
5254
5204
|
var BasketNum = /*#__PURE__*/styled.span(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n font-size: 10px;\n font-family: var(--font-family-sans);\n"])));
|
|
5255
5205
|
var BasketText = /*#__PURE__*/styled.a(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n color: var(--color-primary-black);\n margin-left: 6px;\n text-decoration: none;\n"])));
|
|
@@ -5396,15 +5346,15 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5396
5346
|
}, expiryTime ? basketText : text)) : ''));
|
|
5397
5347
|
};
|
|
5398
5348
|
|
|
5399
|
-
var _templateObject$
|
|
5400
|
-
var SearchContainer = /*#__PURE__*/styled.button(_templateObject$
|
|
5349
|
+
var _templateObject$z, _templateObject2$p;
|
|
5350
|
+
var SearchContainer = /*#__PURE__*/styled.button(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid transparent;\n padding-top: 3px;\n padding-bottom: 3px;\n\n svg path {\n fill: var(--color-primary-black);\n }\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])), function (_ref) {
|
|
5401
5351
|
var selected = _ref.selected;
|
|
5402
5352
|
if (selected) {
|
|
5403
5353
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
5404
5354
|
}
|
|
5405
5355
|
return '';
|
|
5406
5356
|
});
|
|
5407
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
5357
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5408
5358
|
|
|
5409
5359
|
var Search$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
5410
5360
|
var _ref$selected = _ref.selected,
|
|
@@ -5664,15 +5614,15 @@ var NavTop = function NavTop(_ref) {
|
|
|
5664
5614
|
}));
|
|
5665
5615
|
};
|
|
5666
5616
|
|
|
5667
|
-
var _templateObject$
|
|
5668
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5669
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5617
|
+
var _templateObject$A, _templateObject2$q, _templateObject3$g, _templateObject4$f;
|
|
5618
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
5619
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
5670
5620
|
if (props.showMenu) {
|
|
5671
5621
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
5672
5622
|
}
|
|
5673
5623
|
return "display: none;";
|
|
5674
5624
|
});
|
|
5675
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
5625
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--color-primary-red);\n }\n }\n\n && svg path {\n fill: var(--color-primary-black);\n }\n\n :hover {\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5676
5626
|
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 0;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5677
5627
|
|
|
5678
5628
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
@@ -5799,10 +5749,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
5799
5749
|
}, "Menu"))))));
|
|
5800
5750
|
};
|
|
5801
5751
|
|
|
5802
|
-
var _templateObject$
|
|
5803
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5804
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
5805
|
-
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$
|
|
5752
|
+
var _templateObject$B, _templateObject2$r, _templateObject3$h, _templateObject5$b, _templateObject6$7, _templateObject7$4;
|
|
5753
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: transparent;\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
5754
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
5755
|
+
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])));
|
|
5806
5756
|
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-serif);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--color-base-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
5807
5757
|
var TextLinkWrapper$1 = /*#__PURE__*/styled(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
5808
5758
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-right: 8px;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
@@ -5943,19 +5893,19 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5943
5893
|
})));
|
|
5944
5894
|
};
|
|
5945
5895
|
|
|
5946
|
-
var _templateObject$
|
|
5947
|
-
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5896
|
+
var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject4$g, _templateObject5$c, _templateObject6$8, _templateObject7$5;
|
|
5897
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n border-top: 2px solid var(--color-base-light-grey);\n border-bottom: ", ";\n"])), function (_ref) {
|
|
5948
5898
|
var showLine = _ref.showLine;
|
|
5949
5899
|
return showLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5950
5900
|
});
|
|
5951
|
-
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5901
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n opacity: ", ";\n transition: opacity 0.2s ease;\n pointer-events: ", ";\n\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref2) {
|
|
5952
5902
|
var isVisible = _ref2.isVisible;
|
|
5953
5903
|
return isVisible ? 1 : 0;
|
|
5954
5904
|
}, function (_ref3) {
|
|
5955
5905
|
var isVisible = _ref3.isVisible;
|
|
5956
5906
|
return isVisible ? 'auto' : 'none';
|
|
5957
5907
|
}, devices.mobile);
|
|
5958
|
-
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
5908
|
+
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-top: 28px;\n padding-bottom: 28px;\n color: var(--color-primary-black);\n\n && svg {\n width: 24px;\n height: 24px;\n }\n\n :hover {\n cursor: ", ";\n pointer-events: ", ";\n }\n\n @media ", " {\n padding-top: 16px;\n padding-bottom: 16px;\n }\n"])), function (_ref4) {
|
|
5959
5909
|
var hasChildren = _ref4.hasChildren;
|
|
5960
5910
|
return hasChildren ? 'pointer' : 'default';
|
|
5961
5911
|
}, function (_ref5) {
|
|
@@ -5968,31 +5918,13 @@ var ContentContainer = /*#__PURE__*/styled(ExtendedBodyCopyHarmonic).withConfig(
|
|
|
5968
5918
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5969
5919
|
return prop !== 'textHeight';
|
|
5970
5920
|
}
|
|
5971
|
-
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n
|
|
5921
|
+
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref6) {
|
|
5972
5922
|
var textHeight = _ref6.textHeight;
|
|
5973
5923
|
return textHeight;
|
|
5974
|
-
}, function (_ref7) {
|
|
5975
|
-
var textHeight = _ref7.textHeight;
|
|
5976
|
-
return textHeight === '0px' ? 'hidden' : 'visible';
|
|
5977
|
-
}, function (_ref8) {
|
|
5978
|
-
var textHeight = _ref8.textHeight;
|
|
5979
|
-
return textHeight === '0px' ? '0px' : '12px';
|
|
5980
5924
|
}, devices.mobile);
|
|
5981
5925
|
var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
5982
5926
|
|
|
5983
5927
|
/* eslint-disable react/no-unstable-nested-components */
|
|
5984
|
-
/** In-flow height only so absolutely positioned UI (e.g. react-select menu) does not inflate scrollHeight. */
|
|
5985
|
-
function getPanelContentHeight(panel) {
|
|
5986
|
-
var inner = panel.firstElementChild;
|
|
5987
|
-
if (!inner || !(inner instanceof HTMLElement)) {
|
|
5988
|
-
return panel.scrollHeight;
|
|
5989
|
-
}
|
|
5990
|
-
var innerStyle = window.getComputedStyle(inner);
|
|
5991
|
-
var marginY = (parseFloat(innerStyle.marginTop) || 0) + (parseFloat(innerStyle.marginBottom) || 0);
|
|
5992
|
-
var panelStyle = window.getComputedStyle(panel);
|
|
5993
|
-
var paddingY = (parseFloat(panelStyle.paddingTop) || 0) + (parseFloat(panelStyle.paddingBottom) || 0);
|
|
5994
|
-
return inner.offsetHeight + marginY + paddingY;
|
|
5995
|
-
}
|
|
5996
5928
|
var Accordion = function Accordion(_ref) {
|
|
5997
5929
|
var _expandedStateIcon$ic, _collapsedStateIcon$i;
|
|
5998
5930
|
var _ref$title = _ref.title,
|
|
@@ -6029,69 +5961,21 @@ var Accordion = function Accordion(_ref) {
|
|
|
6029
5961
|
var content = useRef(null);
|
|
6030
5962
|
var timeoutRef = useRef(null);
|
|
6031
5963
|
var rafRef = useRef(null);
|
|
6032
|
-
var resizeObserverRef = useRef(null);
|
|
6033
|
-
var intervalRef = useRef(null);
|
|
6034
5964
|
useEffect(function () {
|
|
6035
|
-
if (content.current && initOpen) {
|
|
6036
|
-
setTextHeight(
|
|
5965
|
+
if (content != null && content.current && initOpen) {
|
|
5966
|
+
setTextHeight(content.current.scrollHeight + "px");
|
|
6037
5967
|
}
|
|
6038
|
-
}, [initOpen]);
|
|
5968
|
+
}, [content, initOpen]);
|
|
6039
5969
|
useEffect(function () {
|
|
6040
|
-
|
|
6041
|
-
|
|
6042
|
-
|
|
6043
|
-
|
|
6044
|
-
|
|
6045
|
-
if (!openAccordion) {
|
|
5970
|
+
if (openAccordion && content != null && content.current) {
|
|
5971
|
+
rafRef.current = window.requestAnimationFrame(function () {
|
|
5972
|
+
var _content$current$scro, _content$current;
|
|
5973
|
+
setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
|
|
5974
|
+
});
|
|
5975
|
+
} else if (!openAccordion) {
|
|
6046
5976
|
setTextHeight('0px');
|
|
6047
|
-
if (resizeObserverRef.current) {
|
|
6048
|
-
resizeObserverRef.current.disconnect();
|
|
6049
|
-
resizeObserverRef.current = null;
|
|
6050
|
-
}
|
|
6051
|
-
if (intervalRef.current) {
|
|
6052
|
-
window.clearInterval(intervalRef.current);
|
|
6053
|
-
intervalRef.current = null;
|
|
6054
|
-
}
|
|
6055
|
-
if (rafRef.current) {
|
|
6056
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6057
|
-
rafRef.current = null;
|
|
6058
|
-
}
|
|
6059
|
-
return cleanup;
|
|
6060
|
-
}
|
|
6061
|
-
var updateHeight = function updateHeight() {
|
|
6062
|
-
setTextHeight(getPanelContentHeight(el) + "px");
|
|
6063
|
-
};
|
|
6064
|
-
rafRef.current = window.requestAnimationFrame(updateHeight);
|
|
6065
|
-
if (typeof ResizeObserver !== 'undefined') {
|
|
6066
|
-
var ro = new ResizeObserver(updateHeight);
|
|
6067
|
-
ro.observe(el);
|
|
6068
|
-
resizeObserverRef.current = ro;
|
|
6069
|
-
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6070
|
-
return function () {
|
|
6071
|
-
ro.disconnect();
|
|
6072
|
-
resizeObserverRef.current = null;
|
|
6073
|
-
if (intervalRef.current) {
|
|
6074
|
-
window.clearInterval(intervalRef.current);
|
|
6075
|
-
intervalRef.current = null;
|
|
6076
|
-
}
|
|
6077
|
-
if (rafRef.current) {
|
|
6078
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6079
|
-
rafRef.current = null;
|
|
6080
|
-
}
|
|
6081
|
-
};
|
|
6082
5977
|
}
|
|
6083
|
-
|
|
6084
|
-
return function () {
|
|
6085
|
-
if (intervalRef.current) {
|
|
6086
|
-
window.clearInterval(intervalRef.current);
|
|
6087
|
-
intervalRef.current = null;
|
|
6088
|
-
}
|
|
6089
|
-
if (rafRef.current) {
|
|
6090
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6091
|
-
rafRef.current = null;
|
|
6092
|
-
}
|
|
6093
|
-
};
|
|
6094
|
-
}, [openAccordion, childrenVisibility, children]);
|
|
5978
|
+
}, [openAccordion, childrenVisibility, content]);
|
|
6095
5979
|
useEffect(function () {
|
|
6096
5980
|
return function () {
|
|
6097
5981
|
if (timeoutRef.current) {
|
|
@@ -6102,14 +5986,6 @@ var Accordion = function Accordion(_ref) {
|
|
|
6102
5986
|
window.cancelAnimationFrame(rafRef.current);
|
|
6103
5987
|
rafRef.current = null;
|
|
6104
5988
|
}
|
|
6105
|
-
if (resizeObserverRef.current) {
|
|
6106
|
-
resizeObserverRef.current.disconnect();
|
|
6107
|
-
resizeObserverRef.current = null;
|
|
6108
|
-
}
|
|
6109
|
-
if (intervalRef.current) {
|
|
6110
|
-
window.clearInterval(intervalRef.current);
|
|
6111
|
-
intervalRef.current = null;
|
|
6112
|
-
}
|
|
6113
5989
|
};
|
|
6114
5990
|
}, []);
|
|
6115
5991
|
var toggleAccordion = function toggleAccordion() {
|
|
@@ -6163,8 +6039,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6163
6039
|
}, children)));
|
|
6164
6040
|
};
|
|
6165
6041
|
|
|
6166
|
-
var _templateObject$
|
|
6167
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6042
|
+
var _templateObject$D;
|
|
6043
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6168
6044
|
|
|
6169
6045
|
var Accordions = function Accordions(_ref) {
|
|
6170
6046
|
var _ref$items = _ref.items,
|
|
@@ -6186,16 +6062,16 @@ var Accordions = function Accordions(_ref) {
|
|
|
6186
6062
|
}));
|
|
6187
6063
|
};
|
|
6188
6064
|
|
|
6189
|
-
var _templateObject$
|
|
6190
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6191
|
-
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
6065
|
+
var _templateObject$E, _templateObject2$t, _templateObject3$j, _templateObject4$h, _templateObject5$d;
|
|
6066
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: var(--announcement-banner-bg-color);\n color: var(--announcement-banner-color);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), devices.mobile);
|
|
6067
|
+
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n cursor: ", ";\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n\n path {\n fill: var(--announcement-banner-color);\n }\n }\n"])), function (_ref) {
|
|
6192
6068
|
var isClickable = _ref.isClickable;
|
|
6193
6069
|
return isClickable ? 'pointer' : 'default';
|
|
6194
6070
|
}, function (_ref2) {
|
|
6195
6071
|
var isClickable = _ref2.isClickable;
|
|
6196
6072
|
return isClickable && "\n :hover:not(:active) {\n && svg path {\n fill: var(--announcement-banner-hover-color);\n }\n }\n :active {\n && svg path {\n fill: var(--announcement-banner-pressed-color);\n }\n }\n ";
|
|
6197
6073
|
});
|
|
6198
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
6074
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-sans);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--announcement-banner-color);\n a {\n color: var(--announcement-banner-color);\n text-decoration: underline;\n }\n\n * {\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n margin-inline-end: 0;\n }\n"])));
|
|
6199
6075
|
var OverlineWrapper = /*#__PURE__*/styled(HarmonicOverline)(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
|
|
6200
6076
|
var BannerContentWrapper = /*#__PURE__*/styled(GridItem)(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n grid-column: 3 / span 10;\n }\n\n @media ", ", ", " {\n && {\n grid-column: 3 / span 12;\n }\n }\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.desktop, devices.largeDesktop, devices.mobile, function (_ref3) {
|
|
6201
6077
|
var variant = _ref3.variant;
|
|
@@ -6290,8 +6166,8 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
|
|
|
6290
6166
|
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
6291
6167
|
};
|
|
6292
6168
|
|
|
6293
|
-
var _templateObject$
|
|
6294
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$
|
|
6169
|
+
var _templateObject$F;
|
|
6170
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
|
|
6295
6171
|
|
|
6296
6172
|
var _excluded$f = ["children", "className"];
|
|
6297
6173
|
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
@@ -6304,22 +6180,22 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
6304
6180
|
}), children);
|
|
6305
6181
|
};
|
|
6306
6182
|
|
|
6307
|
-
var _templateObject$
|
|
6183
|
+
var _templateObject$G, _templateObject2$u, _templateObject3$k, _templateObject4$i, _templateObject5$e, _templateObject6$9, _templateObject7$6, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1;
|
|
6308
6184
|
var LENGTH_LARGE_TEXT = 28;
|
|
6309
6185
|
var LENGTH_SMALL_TEXT = 19;
|
|
6310
6186
|
var LENGTH_TEXT_TABLET = 10;
|
|
6311
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6187
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
6312
6188
|
var isCardClickable = _ref.isCardClickable;
|
|
6313
6189
|
return isCardClickable ? 'pointer' : 'default';
|
|
6314
6190
|
}, function (_ref2) {
|
|
6315
6191
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
6316
6192
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
6317
6193
|
});
|
|
6318
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6194
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n background-color: var(--button-bg-color);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
6319
6195
|
var lineColor = _ref3.lineColor;
|
|
6320
6196
|
return lineColor ? "var(--color-" + lineColor + ")" : 'var(--color-primary-background)';
|
|
6321
6197
|
}, zIndexes.contentOverlay);
|
|
6322
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
6198
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
|
|
6323
6199
|
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: 24px;\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref4) {
|
|
6324
6200
|
var fullWidth = _ref4.fullWidth;
|
|
6325
6201
|
return fullWidth ? '0' : '20px';
|
|
@@ -6600,9 +6476,9 @@ var Card = function Card(_ref) {
|
|
|
6600
6476
|
}, restSecondButton), tertiaryButtonTextTruncate)))));
|
|
6601
6477
|
};
|
|
6602
6478
|
|
|
6603
|
-
var _templateObject$
|
|
6604
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
6605
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
6479
|
+
var _templateObject$H, _templateObject2$v;
|
|
6480
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
6481
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
6606
6482
|
|
|
6607
6483
|
var Cards = function Cards(_ref) {
|
|
6608
6484
|
var cards = _ref.cards,
|
|
@@ -6644,10 +6520,10 @@ var Cards = function Cards(_ref) {
|
|
|
6644
6520
|
}));
|
|
6645
6521
|
};
|
|
6646
6522
|
|
|
6647
|
-
var _templateObject$
|
|
6648
|
-
var CastFiltersComponentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6649
|
-
var CastFiltersWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
6650
|
-
var HeadingTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
6523
|
+
var _templateObject$I, _templateObject2$w, _templateObject3$l, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
|
|
6524
|
+
var CastFiltersComponentWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n flex-direction: column-reverse;\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6525
|
+
var CastFiltersWrapper = /*#__PURE__*/styled.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6526
|
+
var HeadingTextWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
|
|
6651
6527
|
var RotatorButtonsWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6652
6528
|
var CastWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n @media ", " {\n flex-direction: column;\n gap: 10px;\n }\n"])), devices.mobile);
|
|
6653
6529
|
var ActionButtons = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n gap: 32px;\n\n .mobile-only {\n visibility: hidden;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n }\n\n @media ", " {\n .mobile-only {\n visibility: visible;\n padding-block: 24px;\n font-size: 17px;\n line-height: 24px;\n }\n\n flex-direction: row-reverse;\n gap: unset;\n justify-content: space-between;\n border-block-end: 2px solid var(--base-color-light-grey);\n\n :has(.mobile-only) {\n justify-content: left;\n }\n\n :not(:has(.mobile-only)) {\n padding-block: 12px;\n }\n\n a {\n width: fit-content;\n }\n }\n"])), devices.mobile);
|
|
@@ -6656,29 +6532,26 @@ var PersonToggle = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObjec
|
|
|
6656
6532
|
var isSelected = _ref.isSelected;
|
|
6657
6533
|
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
6658
6534
|
});
|
|
6659
|
-
var PersonImage = /*#__PURE__*/styled.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
|
|
6660
|
-
var
|
|
6661
|
-
return greyscale ? 'grayscale(100%)' : 'none';
|
|
6662
|
-
}, function (_ref3) {
|
|
6663
|
-
var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
|
|
6535
|
+
var PersonImage = /*#__PURE__*/styled.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) {
|
|
6536
|
+
var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
|
|
6664
6537
|
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6665
6538
|
});
|
|
6666
6539
|
var PersonName = /*#__PURE__*/styled.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);
|
|
6667
|
-
var Decal = /*#__PURE__*/styled.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 (
|
|
6668
|
-
var isSelected =
|
|
6540
|
+
var Decal = /*#__PURE__*/styled.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 (_ref3) {
|
|
6541
|
+
var isSelected = _ref3.isSelected;
|
|
6669
6542
|
return isSelected ? 'flex' : 'none';
|
|
6670
|
-
}, function (
|
|
6671
|
-
var isSelected =
|
|
6543
|
+
}, function (_ref4) {
|
|
6544
|
+
var isSelected = _ref4.isSelected;
|
|
6672
6545
|
return isSelected ? 'flex' : 'none';
|
|
6673
6546
|
});
|
|
6674
6547
|
var EmptySelectionTextSpacer = /*#__PURE__*/styled.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);
|
|
6675
6548
|
|
|
6676
6549
|
var defaultPlaceholderImage = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c9c9c9%3Bstroke%3A%23c9c9c9%3B%7D.cls-1%2C.cls-2%2C.cls-3%7Bstroke-miterlimit%3A10%3B%7D.cls-2%7Bfill-rule%3Aevenodd%3B%7D.cls-2%2C.cls-3%7Bfill%3A%2372767c%3Bstroke%3A%2372767c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M50.42%2C89.58c21.86%2C0%2C39.58-17.72%2C39.58-39.58S72.28%2C10.42%2C50.42%2C10.42%2C10.83%2C28.14%2C10.83%2C50s17.72%2C39.58%2C39.58%2C39.58Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M50.4%2C89.58c10.88%2C0%2C20.75-4.42%2C27.92-11.54-4.96-10.46-15.58-17.71-27.92-17.71s-22.96%2C7.25-27.92%2C17.71c7.17%2C7.12%2C17%2C11.54%2C27.92%2C11.54Z%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M50.4%2C55.67c8.05%2C0%2C14.58-6.53%2C14.58-14.58s-6.53-14.58-14.58-14.58-14.58%2C6.53-14.58%2C14.58%2C6.53%2C14.58%2C14.58%2C14.58Z%22%2F%3E%3C%2Fsvg%3E";
|
|
6677
6550
|
|
|
6678
|
-
var _templateObject$
|
|
6551
|
+
var _templateObject$J, _templateObject2$x;
|
|
6679
6552
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
6680
|
-
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6681
|
-
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$
|
|
6553
|
+
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
6554
|
+
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
6682
6555
|
var transitioning = _ref.transitioning;
|
|
6683
6556
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
6684
6557
|
}, function (_ref2) {
|
|
@@ -7077,8 +6950,6 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7077
6950
|
onSelect = _ref.onSelect,
|
|
7078
6951
|
onApply = _ref.onApply,
|
|
7079
6952
|
onClear = _ref.onClear,
|
|
7080
|
-
_ref$greyscale = _ref.greyscale,
|
|
7081
|
-
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
7082
6953
|
_ref$selectedIndices = _ref.selectedIndices,
|
|
7083
6954
|
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
7084
6955
|
var _useViewport = useViewport(),
|
|
@@ -7219,8 +7090,7 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7219
7090
|
src: personImage,
|
|
7220
7091
|
alt: image ? name : "Placeholder image for " + name,
|
|
7221
7092
|
draggable: false,
|
|
7222
|
-
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7223
|
-
greyscale: greyscale
|
|
7093
|
+
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7224
7094
|
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7225
7095
|
isSelected: isSelected
|
|
7226
7096
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -7279,10 +7149,10 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7279
7149
|
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7280
7150
|
};
|
|
7281
7151
|
|
|
7282
|
-
var _templateObject$
|
|
7283
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7284
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7285
|
-
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7152
|
+
var _templateObject$K, _templateObject2$y, _templateObject3$m, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
|
|
7153
|
+
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7154
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
|
|
7155
|
+
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7286
7156
|
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7287
7157
|
var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7288
7158
|
var DesktopSuffixWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
@@ -7337,12 +7207,12 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7337
7207
|
}, addressString)))))))));
|
|
7338
7208
|
};
|
|
7339
7209
|
|
|
7340
|
-
var _templateObject$
|
|
7341
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
7342
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
7210
|
+
var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$l, _templateObject5$h, _templateObject6$c;
|
|
7211
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7212
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7343
7213
|
return props.clickable ? 'pointer' : 'default';
|
|
7344
7214
|
}, devices.mobile);
|
|
7345
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7215
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7346
7216
|
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7347
7217
|
return props.showImage ? 2 : '1 / span 4';
|
|
7348
7218
|
}, devices.mobile);
|
|
@@ -7430,16 +7300,16 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7430
7300
|
}), link.text))));
|
|
7431
7301
|
};
|
|
7432
7302
|
|
|
7433
|
-
var _templateObject$
|
|
7434
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
7303
|
+
var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$m, _templateObject5$i;
|
|
7304
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7435
7305
|
var imageToLeft = _ref.imageToLeft;
|
|
7436
7306
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7437
7307
|
}, devices.mobile);
|
|
7438
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7308
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7439
7309
|
var imageToLeft = _ref2.imageToLeft;
|
|
7440
7310
|
return imageToLeft ? 'left' : 'right';
|
|
7441
7311
|
}, devices.mobile);
|
|
7442
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7312
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7443
7313
|
var imageToLeft = _ref3.imageToLeft;
|
|
7444
7314
|
return imageToLeft ? 'right' : 'left';
|
|
7445
7315
|
}, devices.mobile);
|
|
@@ -7483,10 +7353,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7483
7353
|
})))));
|
|
7484
7354
|
};
|
|
7485
7355
|
|
|
7486
|
-
var _templateObject$
|
|
7487
|
-
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7488
|
-
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7489
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$
|
|
7356
|
+
var _templateObject$N, _templateObject2$B, _templateObject3$p;
|
|
7357
|
+
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
7358
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
7359
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
|
|
7490
7360
|
|
|
7491
7361
|
var _excluded$j = ["text", "onClick"];
|
|
7492
7362
|
var HotFilters = function HotFilters(_ref) {
|
|
@@ -7550,10 +7420,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7550
7420
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7551
7421
|
};
|
|
7552
7422
|
|
|
7553
|
-
var _templateObject$
|
|
7554
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7555
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7556
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
7423
|
+
var _templateObject$O, _templateObject2$C, _templateObject3$q, _templateObject4$n;
|
|
7424
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
|
|
7425
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7426
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
|
|
7557
7427
|
var variant = _ref.variant,
|
|
7558
7428
|
theme = _ref.theme;
|
|
7559
7429
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7787,13 +7657,13 @@ var Information = function Information(_ref) {
|
|
|
7787
7657
|
})))));
|
|
7788
7658
|
};
|
|
7789
7659
|
|
|
7790
|
-
var _templateObject$
|
|
7791
|
-
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$
|
|
7660
|
+
var _templateObject$P, _templateObject2$D, _templateObject3$r, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
|
|
7661
|
+
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7792
7662
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7793
7663
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7794
7664
|
}, devices.mobile);
|
|
7795
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
7796
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7665
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
7666
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
7797
7667
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7798
7668
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7799
7669
|
});
|
|
@@ -7883,275 +7753,92 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7883
7753
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7884
7754
|
};
|
|
7885
7755
|
|
|
7886
|
-
var _templateObject$
|
|
7887
|
-
var
|
|
7888
|
-
var
|
|
7889
|
-
|
|
7890
|
-
|
|
7891
|
-
|
|
7892
|
-
|
|
7893
|
-
|
|
7894
|
-
|
|
7895
|
-
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7896
|
-
});
|
|
7897
|
-
var TitleButtonWrapper = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7898
|
-
var sponsorWidth = _ref3.sponsorWidth;
|
|
7899
|
-
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7900
|
-
});
|
|
7901
|
-
var TitleButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n position: static;\n margin-right: 0;\n }\n"])), devices.mobile);
|
|
7902
|
-
var MobileButtonWrapper = /*#__PURE__*/styled.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"])));
|
|
7903
|
-
var ImpactTitle = /*#__PURE__*/styled(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) {
|
|
7904
|
-
var hasColumns = _ref4.hasColumns;
|
|
7905
|
-
return hasColumns ? '3' : '1';
|
|
7906
|
-
}, devices.mobile);
|
|
7907
|
-
var ImpactHeaderAssetWrapper = /*#__PURE__*/styled.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);
|
|
7908
|
-
var SponsorWrapper = /*#__PURE__*/styled.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) {
|
|
7909
|
-
var buttonWidth = _ref5.buttonWidth;
|
|
7910
|
-
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7911
|
-
}, devices.mobile);
|
|
7912
|
-
|
|
7913
|
-
var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q;
|
|
7914
|
-
var VideoPlayButton$1 = /*#__PURE__*/styled.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);
|
|
7915
|
-
var VideoControlsWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
7916
|
-
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled.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);
|
|
7917
|
-
var LeftWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7918
|
-
|
|
7919
|
-
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
7920
|
-
var videoElementId = _ref.videoElementId,
|
|
7921
|
-
_ref$loop = _ref.loop,
|
|
7922
|
-
loop = _ref$loop === void 0 ? false : _ref$loop;
|
|
7923
|
-
var _React$useState = React__default.useState(false),
|
|
7924
|
-
playing = _React$useState[0],
|
|
7925
|
-
setPlaying = _React$useState[1];
|
|
7926
|
-
var getVideoElement = function getVideoElement() {
|
|
7927
|
-
return document.querySelector("#" + videoElementId);
|
|
7928
|
-
};
|
|
7929
|
-
React__default.useEffect(function () {
|
|
7930
|
-
var video = getVideoElement();
|
|
7931
|
-
if (video) {
|
|
7932
|
-
video.loop = loop;
|
|
7933
|
-
}
|
|
7934
|
-
}, [loop]);
|
|
7935
|
-
var handlePlay = React__default.useCallback(function () {
|
|
7936
|
-
var video = getVideoElement();
|
|
7937
|
-
if (!video) return;
|
|
7938
|
-
if (playing) {
|
|
7939
|
-
video.pause();
|
|
7940
|
-
setPlaying(false);
|
|
7941
|
-
} else {
|
|
7942
|
-
video == null || video.play();
|
|
7943
|
-
setPlaying(true);
|
|
7944
|
-
}
|
|
7945
|
-
}, [playing]);
|
|
7946
|
-
return /*#__PURE__*/React__default.createElement(VideoControlsWrapper$1, {
|
|
7947
|
-
className: "video-controls-container"
|
|
7948
|
-
}, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper$1, null, /*#__PURE__*/React__default.createElement(LeftWrapper$1, null, /*#__PURE__*/React__default.createElement(VideoPlayButton$1, {
|
|
7949
|
-
id: "play",
|
|
7950
|
-
onClick: handlePlay,
|
|
7951
|
-
className: "video-play-button",
|
|
7952
|
-
"data-testid": "video-play-button",
|
|
7953
|
-
"aria-label": !playing ? 'Play' : 'Pause'
|
|
7954
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7955
|
-
iconName: !playing ? 'Play' : 'Pause',
|
|
7956
|
-
color: "white"
|
|
7957
|
-
})))));
|
|
7958
|
-
};
|
|
7756
|
+
var _templateObject$Q, _templateObject2$E, _templateObject3$s, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
|
|
7757
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
7758
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
7759
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7760
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__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);
|
|
7761
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7762
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7763
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
7764
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7959
7765
|
|
|
7960
7766
|
var _excluded$k = ["text"];
|
|
7961
|
-
var
|
|
7962
|
-
var
|
|
7963
|
-
|
|
7964
|
-
|
|
7965
|
-
|
|
7966
|
-
|
|
7967
|
-
|
|
7968
|
-
|
|
7969
|
-
|
|
7970
|
-
|
|
7971
|
-
|
|
7972
|
-
|
|
7973
|
-
|
|
7974
|
-
|
|
7975
|
-
|
|
7976
|
-
|
|
7977
|
-
|
|
7978
|
-
|
|
7979
|
-
|
|
7980
|
-
|
|
7981
|
-
|
|
7982
|
-
|
|
7983
|
-
|
|
7984
|
-
|
|
7985
|
-
|
|
7986
|
-
|
|
7987
|
-
|
|
7988
|
-
videoUrl = _useResponsiveVideo.videoUrl;
|
|
7989
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
|
|
7990
|
-
id: video.elementId,
|
|
7991
|
-
width: "100%",
|
|
7992
|
-
height: "100%",
|
|
7993
|
-
poster: posterUrl,
|
|
7994
|
-
src: videoUrl,
|
|
7995
|
-
"data-testid": "impact-video",
|
|
7996
|
-
playsInline: true
|
|
7997
|
-
}, /*#__PURE__*/React__default.createElement("source", {
|
|
7998
|
-
src: videoUrl
|
|
7999
|
-
}), /*#__PURE__*/React__default.createElement("img", {
|
|
8000
|
-
src: posterUrl,
|
|
8001
|
-
alt: poster.alt,
|
|
8002
|
-
"data-testid": "impact-image"
|
|
8003
|
-
})), /*#__PURE__*/React__default.createElement(VideoControlsImpact, {
|
|
8004
|
-
loop: true,
|
|
8005
|
-
videoElementId: video.elementId
|
|
8006
|
-
}));
|
|
8007
|
-
};
|
|
8008
|
-
var ImpactHeaderImage = function ImpactHeaderImage(_ref2) {
|
|
8009
|
-
var mobile = _ref2.mobile,
|
|
8010
|
-
desktop = _ref2.desktop,
|
|
8011
|
-
alt = _ref2.alt;
|
|
8012
|
-
return /*#__PURE__*/React__default.createElement("picture", {
|
|
7767
|
+
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
7768
|
+
var children = _ref.children,
|
|
7769
|
+
text = _ref.text,
|
|
7770
|
+
link = _ref.link,
|
|
7771
|
+
_ref$sponsor = _ref.sponsor,
|
|
7772
|
+
sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
|
|
7773
|
+
customSponsorImage = _ref.customSponsorImage,
|
|
7774
|
+
scrollHref = _ref.scrollHref,
|
|
7775
|
+
bgUrlDesktop = _ref.bgUrlDesktop,
|
|
7776
|
+
bgUrlDevice = _ref.bgUrlDevice,
|
|
7777
|
+
_ref$bgImageAltText = _ref.bgImageAltText,
|
|
7778
|
+
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
|
|
7779
|
+
_ref$semanticLevel = _ref.semanticLevel,
|
|
7780
|
+
semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
|
|
7781
|
+
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
7782
|
+
var _ref2 = link || {},
|
|
7783
|
+
linkText = _ref2.text,
|
|
7784
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
|
|
7785
|
+
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
7786
|
+
bgUrlDesktop: bgUrlDesktop,
|
|
7787
|
+
bgUrlDevice: bgUrlDevice,
|
|
7788
|
+
"data-testid": "impact-wrapper"
|
|
7789
|
+
}, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
7790
|
+
"data-testid": "impact-sponsor"
|
|
7791
|
+
}, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
7792
|
+
"data-testid": "impact-custom-sponsor"
|
|
7793
|
+
}, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderImageWrapper, null, /*#__PURE__*/React__default.createElement("picture", {
|
|
8013
7794
|
"data-testid": "impact-picture"
|
|
8014
|
-
},
|
|
8015
|
-
srcSet:
|
|
7795
|
+
}, bgUrlDevice && (/*#__PURE__*/React__default.createElement("source", {
|
|
7796
|
+
srcSet: bgUrlDevice,
|
|
8016
7797
|
media: "" + devices.mobile,
|
|
8017
7798
|
"data-testid": "impact-mobile-image-source"
|
|
8018
|
-
}), /*#__PURE__*/React__default.createElement("source", {
|
|
8019
|
-
srcSet:
|
|
7799
|
+
})), /*#__PURE__*/React__default.createElement("source", {
|
|
7800
|
+
srcSet: bgUrlDesktop,
|
|
8020
7801
|
media: "" + devices.desktop,
|
|
8021
7802
|
"data-testid": "impact-desktop-image-source"
|
|
8022
7803
|
}), /*#__PURE__*/React__default.createElement("img", {
|
|
8023
|
-
src:
|
|
8024
|
-
alt:
|
|
7804
|
+
src: bgUrlDesktop,
|
|
7805
|
+
alt: bgImageAltText,
|
|
8025
7806
|
"data-testid": "impact-image"
|
|
8026
|
-
}))
|
|
8027
|
-
|
|
8028
|
-
|
|
8029
|
-
|
|
8030
|
-
|
|
8031
|
-
|
|
8032
|
-
|
|
8033
|
-
}
|
|
8034
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8035
|
-
video: video,
|
|
8036
|
-
poster: poster
|
|
8037
|
-
});
|
|
8038
|
-
};
|
|
8039
|
-
var useElementWidth = function useElementWidth() {
|
|
8040
|
-
var _React$useState = React__default.useState(undefined),
|
|
8041
|
-
width = _React$useState[0],
|
|
8042
|
-
setWidth = _React$useState[1];
|
|
8043
|
-
var observerRef = React__default.useRef(null);
|
|
8044
|
-
var ref = React__default.useCallback(function (node) {
|
|
8045
|
-
if (observerRef.current) {
|
|
8046
|
-
observerRef.current.disconnect();
|
|
8047
|
-
observerRef.current = null;
|
|
8048
|
-
}
|
|
8049
|
-
if (!node) return;
|
|
8050
|
-
observerRef.current = new ResizeObserver(function () {
|
|
8051
|
-
setWidth(node.offsetWidth);
|
|
8052
|
-
});
|
|
8053
|
-
observerRef.current.observe(node);
|
|
8054
|
-
}, []);
|
|
8055
|
-
return [ref, width];
|
|
8056
|
-
};
|
|
8057
|
-
var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
8058
|
-
var text = _ref4.text,
|
|
8059
|
-
link = _ref4.link,
|
|
8060
|
-
_ref4$sponsor = _ref4.sponsor,
|
|
8061
|
-
sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
|
|
8062
|
-
customSponsorImage = _ref4.customSponsorImage,
|
|
8063
|
-
bgUrlDesktop = _ref4.bgUrlDesktop,
|
|
8064
|
-
bgUrlDevice = _ref4.bgUrlDevice,
|
|
8065
|
-
_ref4$bgImageAltText = _ref4.bgImageAltText,
|
|
8066
|
-
bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
|
|
8067
|
-
videoUrlDesktop = _ref4.videoUrlDesktop,
|
|
8068
|
-
videoUrlMobile = _ref4.videoUrlMobile,
|
|
8069
|
-
className = _ref4.className;
|
|
8070
|
-
var _useViewport = useViewport(),
|
|
8071
|
-
isMobile = _useViewport.isMobile,
|
|
8072
|
-
hydrated = _useViewport.hydrated;
|
|
8073
|
-
var _useElementWidth = useElementWidth(),
|
|
8074
|
-
buttonRef = _useElementWidth[0],
|
|
8075
|
-
buttonWidth = _useElementWidth[1];
|
|
8076
|
-
var _useElementWidth2 = useElementWidth(),
|
|
8077
|
-
sponsorRef = _useElementWidth2[0],
|
|
8078
|
-
sponsorWidth = _useElementWidth2[1];
|
|
8079
|
-
var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
|
|
8080
|
-
var _ref5 = link || {},
|
|
8081
|
-
linkText = _ref5.text,
|
|
8082
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
|
|
8083
|
-
var video = {
|
|
8084
|
-
elementId: 'impact-header-video',
|
|
8085
|
-
desktop: videoUrlDesktop,
|
|
8086
|
-
mobile: videoUrlMobile
|
|
8087
|
-
};
|
|
8088
|
-
var poster = {
|
|
8089
|
-
desktop: bgUrlDesktop,
|
|
8090
|
-
mobile: bgUrlDevice,
|
|
8091
|
-
alt: bgImageAltText
|
|
8092
|
-
};
|
|
8093
|
-
var sponsorContent = sponsor ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
8094
|
-
"data-testid": customSponsorImage ? 'impact-custom-sponsor' : undefined
|
|
8095
|
-
}, customSponsorImage != null ? customSponsorImage : {}))) : null;
|
|
8096
|
-
var hasButton = !isMobile && !!(link && linkText);
|
|
8097
|
-
var showSideColumns = hasButton || !!sponsor;
|
|
8098
|
-
var showTitleBar = !!(text || hasButton || sponsor);
|
|
8099
|
-
var renderSponsor = function renderSponsor() {
|
|
8100
|
-
if (isMobile) {
|
|
8101
|
-
if (!sponsorContent) return null;
|
|
8102
|
-
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8103
|
-
"data-testid": "impact-sponsor"
|
|
8104
|
-
}, sponsorContent);
|
|
8105
|
-
}
|
|
8106
|
-
if (!showSideColumns) return null;
|
|
8107
|
-
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8108
|
-
ref: sponsorRef,
|
|
8109
|
-
buttonWidth: buttonWidth,
|
|
8110
|
-
"data-testid": "impact-sponsor"
|
|
8111
|
-
}, sponsorContent);
|
|
8112
|
-
};
|
|
8113
|
-
if (!hydrated) return null;
|
|
8114
|
-
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
8115
|
-
theme: ThemeType.Cinema
|
|
8116
|
-
}, showTitleBar ? (/*#__PURE__*/React__default.createElement(ImpactHeaderWrapper, {
|
|
8117
|
-
className: className
|
|
8118
|
-
}, /*#__PURE__*/React__default.createElement(ImpactTitleWrapper, {
|
|
8119
|
-
"data-testid": "impact-title-wrapper",
|
|
8120
|
-
sponsorPresent: !!sponsor,
|
|
8121
|
-
hasButton: hasButton
|
|
8122
|
-
}, !isMobile && showSideColumns ? (/*#__PURE__*/React__default.createElement(TitleButtonWrapper, {
|
|
8123
|
-
sponsorWidth: sponsorWidth
|
|
8124
|
-
}, hasButton ? (/*#__PURE__*/React__default.createElement(TitleButton, Object.assign({
|
|
8125
|
-
ref: buttonRef
|
|
8126
|
-
}, restLink, {
|
|
7807
|
+
}))), /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
|
|
7808
|
+
"data-testid": "impact-logo"
|
|
7809
|
+
}, children) : null, text ? (/*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
7810
|
+
"data-testid": "impact-text"
|
|
7811
|
+
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
7812
|
+
level: 3,
|
|
7813
|
+
semanticLevel: semanticLevel
|
|
7814
|
+
}, truncatedText))) : null, link ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
|
|
8127
7815
|
"data-testid": "impact-link"
|
|
8128
|
-
}), linkText)) : null)
|
|
8129
|
-
|
|
8130
|
-
|
|
8131
|
-
|
|
8132
|
-
|
|
8133
|
-
|
|
8134
|
-
|
|
8135
|
-
|
|
8136
|
-
|
|
8137
|
-
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
7816
|
+
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null), scrollHref ? (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
7817
|
+
"data-testid": "impact-scroll-link"
|
|
7818
|
+
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
7819
|
+
iconName: "Arrow",
|
|
7820
|
+
iconDirection: "down",
|
|
7821
|
+
href: scrollHref,
|
|
7822
|
+
color: ThemeColor['base-white'],
|
|
7823
|
+
hoverColor: ThemeColor['base-white']
|
|
7824
|
+
}, "Scroll Down"))) : null);
|
|
8138
7825
|
};
|
|
8139
7826
|
|
|
8140
|
-
var _templateObject$
|
|
8141
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7827
|
+
var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$q, _templateObject5$l;
|
|
7828
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
8142
7829
|
var color = _ref.color;
|
|
8143
7830
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
8144
7831
|
}, devices.mobileAndTablet);
|
|
8145
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
7832
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8146
7833
|
var hasImage = _ref2.hasImage;
|
|
8147
7834
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8148
7835
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8149
7836
|
var hasImage = _ref3.hasImage;
|
|
8150
7837
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8151
7838
|
});
|
|
8152
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
8153
|
-
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8154
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.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);
|
|
7839
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__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);
|
|
7840
|
+
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
7841
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled.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);
|
|
8155
7842
|
|
|
8156
7843
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
8157
7844
|
var _image$src, _image$alt;
|
|
@@ -8165,7 +7852,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8165
7852
|
"data-testid": "wrapper"
|
|
8166
7853
|
}, /*#__PURE__*/React__default.createElement(LeftPanel, {
|
|
8167
7854
|
hasImage: hasImage
|
|
8168
|
-
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
7855
|
+
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
|
|
8169
7856
|
"data-testid": "scroll-link"
|
|
8170
7857
|
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
8171
7858
|
iconName: "Arrow",
|
|
@@ -8181,11 +7868,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8181
7868
|
})))));
|
|
8182
7869
|
};
|
|
8183
7870
|
|
|
8184
|
-
var _templateObject$
|
|
8185
|
-
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$
|
|
8186
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8187
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8188
|
-
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7871
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
7872
|
+
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
7873
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
7874
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__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);
|
|
7875
|
+
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
8189
7876
|
var ContentSection = /*#__PURE__*/styled.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) {
|
|
8190
7877
|
var theme = _ref.theme;
|
|
8191
7878
|
return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
@@ -8395,7 +8082,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8395
8082
|
})))))))))));
|
|
8396
8083
|
};
|
|
8397
8084
|
|
|
8398
|
-
var _templateObject$
|
|
8085
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$s;
|
|
8399
8086
|
var GRID = {
|
|
8400
8087
|
desktop: {
|
|
8401
8088
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8408,19 +8095,19 @@ var GRID = {
|
|
|
8408
8095
|
right: '2 / 1 / 3 / 15'
|
|
8409
8096
|
}
|
|
8410
8097
|
};
|
|
8411
|
-
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8098
|
+
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8412
8099
|
var $background = _ref.$background;
|
|
8413
8100
|
return "var(--color-" + $background + ")";
|
|
8414
8101
|
});
|
|
8415
|
-
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8102
|
+
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8416
8103
|
var hasImage = _ref2.hasImage;
|
|
8417
8104
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8418
8105
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8419
8106
|
var hasImage = _ref3.hasImage;
|
|
8420
8107
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8421
8108
|
});
|
|
8422
|
-
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8423
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8109
|
+
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__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);
|
|
8110
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8424
8111
|
|
|
8425
8112
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
8426
8113
|
var _image$src, _image$alt;
|
|
@@ -8443,10 +8130,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8443
8130
|
})))));
|
|
8444
8131
|
};
|
|
8445
8132
|
|
|
8446
|
-
var _templateObject$
|
|
8447
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
8448
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
8449
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8133
|
+
var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
|
|
8134
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8135
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
8136
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8450
8137
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.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);
|
|
8451
8138
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(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) {
|
|
8452
8139
|
var invert = _ref.invert,
|
|
@@ -8557,7 +8244,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8557
8244
|
};
|
|
8558
8245
|
|
|
8559
8246
|
var _excluded$l = ["text"];
|
|
8560
|
-
var useResponsiveVideo
|
|
8247
|
+
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
8561
8248
|
var mobileVideo = video.mobile || video.desktop;
|
|
8562
8249
|
var desktopVideo = video.desktop || video.mobile;
|
|
8563
8250
|
var mobilePoster = poster.mobile || poster.desktop;
|
|
@@ -8578,10 +8265,10 @@ var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
|
|
|
8578
8265
|
videoUrl: videoUrl
|
|
8579
8266
|
};
|
|
8580
8267
|
};
|
|
8581
|
-
var VideoWithControls
|
|
8268
|
+
var VideoWithControls = function VideoWithControls(_ref) {
|
|
8582
8269
|
var video = _ref.video,
|
|
8583
8270
|
poster = _ref.poster;
|
|
8584
|
-
var _useResponsiveVideo = useResponsiveVideo
|
|
8271
|
+
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
8585
8272
|
posterUrl = _useResponsiveVideo.posterUrl,
|
|
8586
8273
|
videoUrl = _useResponsiveVideo.videoUrl;
|
|
8587
8274
|
var isIOS = useIOS();
|
|
@@ -8634,7 +8321,7 @@ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
|
|
|
8634
8321
|
if (!video.desktop && !video.mobile) {
|
|
8635
8322
|
return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
|
|
8636
8323
|
}
|
|
8637
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls
|
|
8324
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8638
8325
|
video: video,
|
|
8639
8326
|
poster: poster
|
|
8640
8327
|
});
|
|
@@ -8697,11 +8384,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8697
8384
|
}), linkText))))));
|
|
8698
8385
|
};
|
|
8699
8386
|
|
|
8700
|
-
var _templateObject$
|
|
8701
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8702
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8703
|
-
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8704
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8387
|
+
var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$d;
|
|
8388
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$V || (_templateObject$V = /*#__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);
|
|
8389
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8390
|
+
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8391
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8705
8392
|
var hasImages = _ref.hasImages;
|
|
8706
8393
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8707
8394
|
}, devices.mobile, function (_ref2) {
|
|
@@ -8776,10 +8463,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8776
8463
|
}))))));
|
|
8777
8464
|
};
|
|
8778
8465
|
|
|
8779
|
-
var _templateObject$
|
|
8780
|
-
var linkButtonStyles = /*#__PURE__*/css(_templateObject$
|
|
8781
|
-
var PageNav = /*#__PURE__*/styled.a(_templateObject2$
|
|
8782
|
-
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
8466
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
|
|
8467
|
+
var linkButtonStyles = /*#__PURE__*/css(_templateObject$W || (_templateObject$W = /*#__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"])));
|
|
8468
|
+
var PageNav = /*#__PURE__*/styled.a(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8469
|
+
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8783
8470
|
var PageNumberWrapper = /*#__PURE__*/styled.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"])));
|
|
8784
8471
|
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8785
8472
|
var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8935,19 +8622,16 @@ var Pagination = function Pagination(_ref) {
|
|
|
8935
8622
|
}))))));
|
|
8936
8623
|
};
|
|
8937
8624
|
|
|
8938
|
-
var _templateObject$
|
|
8939
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8940
|
-
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8941
|
-
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8942
|
-
});
|
|
8625
|
+
var _templateObject$X;
|
|
8626
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8943
8627
|
|
|
8944
|
-
var _templateObject$
|
|
8945
|
-
var TextWrapper$
|
|
8946
|
-
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$
|
|
8628
|
+
var _templateObject$Y, _templateObject2$L;
|
|
8629
|
+
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8630
|
+
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8947
8631
|
|
|
8948
|
-
var _templateObject
|
|
8949
|
-
var PersonLink = /*#__PURE__*/styled.a(_templateObject
|
|
8950
|
-
var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$
|
|
8632
|
+
var _templateObject$Z, _templateObject2$M;
|
|
8633
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject$Z || (_templateObject$Z = /*#__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"])));
|
|
8634
|
+
var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8951
8635
|
|
|
8952
8636
|
var Person = function Person(_ref) {
|
|
8953
8637
|
var person = _ref.person,
|
|
@@ -8970,7 +8654,7 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8970
8654
|
var _role$people;
|
|
8971
8655
|
var role = _ref.role,
|
|
8972
8656
|
className = _ref.className;
|
|
8973
|
-
return /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
8657
|
+
return /*#__PURE__*/React__default.createElement(TextWrapper$2, {
|
|
8974
8658
|
className: className
|
|
8975
8659
|
}, /*#__PURE__*/React__default.createElement(RoleContent, {
|
|
8976
8660
|
title: "role",
|
|
@@ -8986,17 +8670,13 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8986
8670
|
})));
|
|
8987
8671
|
};
|
|
8988
8672
|
|
|
8989
|
-
var _templateObject$
|
|
8990
|
-
var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
8991
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8992
|
-
var greyscale = _ref.greyscale;
|
|
8993
|
-
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8994
|
-
});
|
|
8673
|
+
var _templateObject$_, _templateObject2$N;
|
|
8674
|
+
var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8675
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
|
|
8995
8676
|
|
|
8996
8677
|
var PersonCard = function PersonCard(_ref) {
|
|
8997
8678
|
var role = _ref.role,
|
|
8998
|
-
className = _ref.className
|
|
8999
|
-
greyscale = _ref.greyscale;
|
|
8679
|
+
className = _ref.className;
|
|
9000
8680
|
var hasHeadshot = React__default.useMemo(function () {
|
|
9001
8681
|
var _role$people;
|
|
9002
8682
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
@@ -9004,9 +8684,7 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
9004
8684
|
}, [role]);
|
|
9005
8685
|
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
9006
8686
|
className: className
|
|
9007
|
-
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
|
|
9008
|
-
greyscale: greyscale
|
|
9009
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
8687
|
+
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
|
|
9010
8688
|
src: role.people[0].headshot,
|
|
9011
8689
|
alt: role.people[0].name
|
|
9012
8690
|
})), /*#__PURE__*/React__default.createElement(PersonDetails, {
|
|
@@ -9020,31 +8698,26 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
9020
8698
|
|
|
9021
8699
|
var PeopleListing = function PeopleListing(_ref) {
|
|
9022
8700
|
var roles = _ref.roles,
|
|
9023
|
-
className = _ref.className
|
|
9024
|
-
greyscale = _ref.greyscale,
|
|
9025
|
-
largeDesktopColumns = _ref.largeDesktopColumns;
|
|
8701
|
+
className = _ref.className;
|
|
9026
8702
|
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
|
|
9027
|
-
className: className
|
|
9028
|
-
"$largeDesktopColumns": largeDesktopColumns
|
|
8703
|
+
className: className
|
|
9029
8704
|
}, roles.map(function (role, index) {
|
|
9030
8705
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9031
8706
|
key: role.name + "-" + index
|
|
9032
8707
|
}, /*#__PURE__*/React__default.createElement(PersonCard, {
|
|
9033
|
-
role: role
|
|
9034
|
-
className: className,
|
|
9035
|
-
greyscale: greyscale
|
|
8708
|
+
role: role
|
|
9036
8709
|
}));
|
|
9037
8710
|
}));
|
|
9038
8711
|
};
|
|
9039
8712
|
|
|
9040
|
-
var _templateObject
|
|
9041
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
9042
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
8713
|
+
var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$u;
|
|
8714
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8715
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__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) {
|
|
9043
8716
|
var columnCount = _ref.columnCount;
|
|
9044
8717
|
return "repeat(" + columnCount + ", 1fr)";
|
|
9045
8718
|
}, devices.mobile, devices.tablet);
|
|
9046
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9047
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8719
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
8720
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
9048
8721
|
|
|
9049
8722
|
// Get the total character length of a property in an array of objects
|
|
9050
8723
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -9133,7 +8806,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9133
8806
|
columnSpanSmallDevice: 1,
|
|
9134
8807
|
key: "credit-entry-" + name + "-" + index,
|
|
9135
8808
|
"data-testid": "credit-entry"
|
|
9136
|
-
}, /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
8809
|
+
}, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
9137
8810
|
title: "role",
|
|
9138
8811
|
"data-roh": dataROH
|
|
9139
8812
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
@@ -9171,8 +8844,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9171
8844
|
}, creditEntries);
|
|
9172
8845
|
};
|
|
9173
8846
|
|
|
9174
|
-
var _templateObject$
|
|
9175
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$
|
|
8847
|
+
var _templateObject$10;
|
|
8848
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$10 || (_templateObject$10 = /*#__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"])));
|
|
9176
8849
|
|
|
9177
8850
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
9178
8851
|
var items = _ref.items;
|
|
@@ -9190,14 +8863,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
9190
8863
|
}));
|
|
9191
8864
|
};
|
|
9192
8865
|
|
|
9193
|
-
var _templateObject$
|
|
8866
|
+
var _templateObject$11, _templateObject3$A, _templateObject4$v, _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;
|
|
9194
8867
|
var LENGTH_TEXT = 28;
|
|
9195
8868
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9196
8869
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9197
8870
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9198
8871
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9199
8872
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9200
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8873
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$11 || (_templateObject$11 = /*#__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) {
|
|
9201
8874
|
var imageToLeft = _ref.imageToLeft;
|
|
9202
8875
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9203
8876
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9207,7 +8880,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templa
|
|
|
9207
8880
|
var asCard = _ref3.asCard;
|
|
9208
8881
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9209
8882
|
});
|
|
9210
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8883
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__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) {
|
|
9211
8884
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9212
8885
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9213
8886
|
}, function (_ref5) {
|
|
@@ -9231,7 +8904,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$C || (_templat
|
|
|
9231
8904
|
}
|
|
9232
8905
|
return '';
|
|
9233
8906
|
});
|
|
9234
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8907
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
9235
8908
|
var marginBottom = _ref7.marginBottom;
|
|
9236
8909
|
return marginBottom + "px";
|
|
9237
8910
|
}, function (_ref8) {
|
|
@@ -9462,25 +9135,25 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9462
9135
|
}))));
|
|
9463
9136
|
};
|
|
9464
9137
|
|
|
9465
|
-
var _templateObject$
|
|
9138
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
|
|
9466
9139
|
var LENGTH_TEXT$2 = 28;
|
|
9467
9140
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9468
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9141
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9469
9142
|
var imageToLeft = _ref.imageToLeft;
|
|
9470
9143
|
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'";
|
|
9471
9144
|
}, devices.tablet, function (_ref2) {
|
|
9472
9145
|
var imageToLeft = _ref2.imageToLeft;
|
|
9473
9146
|
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'";
|
|
9474
9147
|
}, devices.mobile);
|
|
9475
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9148
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9476
9149
|
var imageToLeft = _ref3.imageToLeft;
|
|
9477
9150
|
return imageToLeft ? 'left' : 'right';
|
|
9478
9151
|
}, devices.mobile);
|
|
9479
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9152
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__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) {
|
|
9480
9153
|
var imageToLeft = _ref4.imageToLeft;
|
|
9481
9154
|
return imageToLeft ? 'right' : 'left';
|
|
9482
9155
|
}, devices.mobile);
|
|
9483
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$
|
|
9156
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9484
9157
|
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9485
9158
|
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(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);
|
|
9486
9159
|
var ButtonsContainer$3 = /*#__PURE__*/styled.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) {
|
|
@@ -9505,8 +9178,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templat
|
|
|
9505
9178
|
return '';
|
|
9506
9179
|
});
|
|
9507
9180
|
|
|
9508
|
-
var _templateObject$
|
|
9509
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9181
|
+
var _templateObject$13;
|
|
9182
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__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) {
|
|
9510
9183
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9511
9184
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9512
9185
|
return aspectRatio;
|
|
@@ -9537,7 +9210,7 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
9537
9210
|
return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
|
|
9538
9211
|
};
|
|
9539
9212
|
|
|
9540
|
-
var VideoWithControls$
|
|
9213
|
+
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
9541
9214
|
var video = _ref.video,
|
|
9542
9215
|
settings = _ref.settings;
|
|
9543
9216
|
var videoRef = useRef(null);
|
|
@@ -9612,7 +9285,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9612
9285
|
}, isImage && (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
9613
9286
|
aspectRatio: AspectRatio['4:3'],
|
|
9614
9287
|
"data-testid": "AspectRatioWrapper"
|
|
9615
|
-
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
9288
|
+
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
|
|
9616
9289
|
video: children,
|
|
9617
9290
|
settings: videoSettings
|
|
9618
9291
|
}));
|
|
@@ -9675,7 +9348,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9675
9348
|
size: titleSize,
|
|
9676
9349
|
hierarchy: titleHierarchy
|
|
9677
9350
|
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
|
|
9678
|
-
size: "
|
|
9351
|
+
size: "medium"
|
|
9679
9352
|
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
|
|
9680
9353
|
size: "large",
|
|
9681
9354
|
dangerouslySetInnerHTML: {
|
|
@@ -9688,65 +9361,9 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9688
9361
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9689
9362
|
};
|
|
9690
9363
|
|
|
9691
|
-
var _templateObject$
|
|
9692
|
-
var
|
|
9693
|
-
|
|
9694
|
-
/**
|
|
9695
|
-
* DEPRECATED. Use RadioGroup2 instead
|
|
9696
|
-
*/
|
|
9697
|
-
var RadioGroup = function RadioGroup(_ref) {
|
|
9698
|
-
var radios = _ref.radios,
|
|
9699
|
-
_ref$columnStartDeskt = _ref.columnStartDesktop,
|
|
9700
|
-
columnStartDesktop = _ref$columnStartDeskt === void 0 ? 1 : _ref$columnStartDeskt,
|
|
9701
|
-
_ref$columnStartDevic = _ref.columnStartDevice,
|
|
9702
|
-
columnStartDevice = _ref$columnStartDevic === void 0 ? 1 : _ref$columnStartDevic,
|
|
9703
|
-
_ref$columnSpanDeskto = _ref.columnSpanDesktop,
|
|
9704
|
-
columnSpanDesktop = _ref$columnSpanDeskto === void 0 ? 16 : _ref$columnSpanDeskto,
|
|
9705
|
-
_ref$columnSpanDevice = _ref.columnSpanDevice,
|
|
9706
|
-
columnSpanDevice = _ref$columnSpanDevice === void 0 ? 14 : _ref$columnSpanDevice,
|
|
9707
|
-
columnStartSmallDevice = _ref.columnStartSmallDevice,
|
|
9708
|
-
columnSpanSmallDevice = _ref.columnSpanSmallDevice,
|
|
9709
|
-
onChange = _ref.onChange;
|
|
9710
|
-
var _useState = useState(radios != null ? radios : []),
|
|
9711
|
-
radioProps = _useState[0],
|
|
9712
|
-
setRadioProps = _useState[1];
|
|
9713
|
-
var _useState2 = useState(null),
|
|
9714
|
-
checkedIndex = _useState2[0],
|
|
9715
|
-
setCheckedIndex = _useState2[1];
|
|
9716
|
-
var handleChange = function handleChange(_value, index) {
|
|
9717
|
-
setCheckedIndex(index);
|
|
9718
|
-
var newRadioProps = radios == null ? void 0 : radios.map(function (radio, i) {
|
|
9719
|
-
return _extends({}, radio, {
|
|
9720
|
-
checked: i === index
|
|
9721
|
-
});
|
|
9722
|
-
});
|
|
9723
|
-
setRadioProps(newRadioProps != null ? newRadioProps : []);
|
|
9724
|
-
onChange == null || onChange(radios ? radios[index] : undefined);
|
|
9725
|
-
};
|
|
9726
|
-
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9727
|
-
columnStartDesktop: columnStartDesktop,
|
|
9728
|
-
columnSpanDesktop: columnSpanDesktop,
|
|
9729
|
-
columnStartDevice: columnStartDevice,
|
|
9730
|
-
columnSpanDevice: columnSpanDevice,
|
|
9731
|
-
columnStartSmallDevice: columnStartSmallDevice,
|
|
9732
|
-
columnSpanSmallDevice: columnSpanSmallDevice
|
|
9733
|
-
}, /*#__PURE__*/React__default.createElement(RadioGroupContainer, null, radioProps == null ? void 0 : radioProps.map(function (radio, i) {
|
|
9734
|
-
var _radio$label;
|
|
9735
|
-
return /*#__PURE__*/React__default.createElement(Radio, {
|
|
9736
|
-
key: ((_radio$label = radio.label) != null ? _radio$label : 'defaultRadioKey') + i,
|
|
9737
|
-
checked: i === checkedIndex,
|
|
9738
|
-
// error={radio.error} // TO DO: Add error state - design not yet available
|
|
9739
|
-
label: radio.label,
|
|
9740
|
-
onChange: function onChange(e) {
|
|
9741
|
-
return handleChange(e, i);
|
|
9742
|
-
}
|
|
9743
|
-
});
|
|
9744
|
-
})));
|
|
9745
|
-
};
|
|
9746
|
-
|
|
9747
|
-
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
9748
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9749
|
-
var RadioGroup$1 = /*#__PURE__*/styled.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) {
|
|
9364
|
+
var _templateObject$14, _templateObject2$Q, _templateObject3$C;
|
|
9365
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9366
|
+
var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9750
9367
|
var horizontalMode = _ref.horizontalMode;
|
|
9751
9368
|
if (horizontalMode) return 'row';
|
|
9752
9369
|
return 'column';
|
|
@@ -9754,7 +9371,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObjec
|
|
|
9754
9371
|
var gap = _ref2.gap;
|
|
9755
9372
|
return gap + "px";
|
|
9756
9373
|
});
|
|
9757
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9374
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9758
9375
|
var darkMode = _ref3.darkMode;
|
|
9759
9376
|
if (darkMode) return 'var(--base-color-white)';
|
|
9760
9377
|
return 'var(--base-color-errorstate)';
|
|
@@ -9809,7 +9426,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9809
9426
|
var changeHandler = function changeHandler(e) {
|
|
9810
9427
|
onChange == null || onChange(e.target.value);
|
|
9811
9428
|
};
|
|
9812
|
-
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup
|
|
9429
|
+
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup, {
|
|
9813
9430
|
gap: gap,
|
|
9814
9431
|
horizontalMode: horizontalMode
|
|
9815
9432
|
}, radios.map(function (radio, idx) {
|
|
@@ -9831,10 +9448,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9831
9448
|
}, error))));
|
|
9832
9449
|
};
|
|
9833
9450
|
|
|
9834
|
-
var _templateObject$
|
|
9835
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9836
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9837
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9451
|
+
var _templateObject$15, _templateObject2$R, _templateObject3$D;
|
|
9452
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__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);
|
|
9453
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__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"])));
|
|
9454
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__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);
|
|
9838
9455
|
|
|
9839
9456
|
/* eslint-disable react/no-danger */
|
|
9840
9457
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9890,8 +9507,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9890
9507
|
return null;
|
|
9891
9508
|
};
|
|
9892
9509
|
|
|
9893
|
-
var _templateObject$
|
|
9894
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9510
|
+
var _templateObject$16;
|
|
9511
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__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);
|
|
9895
9512
|
|
|
9896
9513
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9897
9514
|
var HarmonicSize = {
|
|
@@ -9933,418 +9550,37 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9933
9550
|
}, description)))));
|
|
9934
9551
|
};
|
|
9935
9552
|
|
|
9936
|
-
var _templateObject$
|
|
9937
|
-
var
|
|
9938
|
-
|
|
9939
|
-
return "3px solid " + theme.colors.lapisLazuli;
|
|
9940
|
-
}, function (_ref2) {
|
|
9941
|
-
var theme = _ref2.theme;
|
|
9942
|
-
return theme.colors.lightgrey;
|
|
9943
|
-
}, function (_ref3) {
|
|
9944
|
-
var theme = _ref3.theme;
|
|
9945
|
-
return theme.colors.lightgrey;
|
|
9946
|
-
});
|
|
9947
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9948
|
-
var theme = _ref4.theme;
|
|
9949
|
-
return theme.colors.darkgrey;
|
|
9950
|
-
});
|
|
9951
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9952
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9953
|
-
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9954
|
-
var theme = _ref5.theme;
|
|
9955
|
-
return {
|
|
9956
|
-
iconName: 'DropdownArrow',
|
|
9957
|
-
color: theme.colors.black,
|
|
9958
|
-
title: 'Select Arrow'
|
|
9959
|
-
};
|
|
9960
|
-
})(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
9961
|
-
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9962
|
-
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9963
|
-
var Options = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
9964
|
-
var Option = /*#__PURE__*/styled.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9965
|
-
var theme = _ref6.theme,
|
|
9966
|
-
hover = _ref6.hover;
|
|
9967
|
-
var _theme$colors = theme.colors,
|
|
9968
|
-
lightgrey = _theme$colors.lightgrey,
|
|
9969
|
-
midgrey = _theme$colors.midgrey;
|
|
9970
|
-
if (hover) return "background-color: " + midgrey;
|
|
9971
|
-
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
9972
|
-
});
|
|
9973
|
-
var selectStyles = function selectStyles(width, height) {
|
|
9974
|
-
return css(_templateObject0$7 || (_templateObject0$7 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
|
|
9975
|
-
};
|
|
9976
|
-
var SelectList = /*#__PURE__*/styled.ul(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
9977
|
-
var width = _ref7.width,
|
|
9978
|
-
height = _ref7.height;
|
|
9979
|
-
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
9980
|
-
}, stateStyles, noMarginAndPaddingStyles, listItemStyles, borderStyles, ArrowIcon);
|
|
9981
|
-
|
|
9982
|
-
var useKeyboardAccessibility = function useKeyboardAccessibility(_ref) {
|
|
9983
|
-
var selectRef = _ref.selectRef,
|
|
9984
|
-
optionsRef = _ref.optionsRef,
|
|
9985
|
-
shouldHighlightOption = _ref.shouldHighlightOption;
|
|
9986
|
-
var _useState = useState(-1),
|
|
9987
|
-
itemToHighlight = _useState[0],
|
|
9988
|
-
setItemToHighlight = _useState[1];
|
|
9989
|
-
var clampIndex = function clampIndex(index) {
|
|
9990
|
-
if (index < -1) return -1;
|
|
9991
|
-
if (index > optionsRef.current.length - 1) return optionsRef.current.length - 1;
|
|
9992
|
-
return index;
|
|
9993
|
-
};
|
|
9994
|
-
var highlightNextOption = function highlightNextOption() {
|
|
9995
|
-
return setItemToHighlight(function (prev) {
|
|
9996
|
-
return clampIndex(prev + 1);
|
|
9997
|
-
});
|
|
9998
|
-
};
|
|
9999
|
-
var highlightPrevOption = function highlightPrevOption() {
|
|
10000
|
-
return setItemToHighlight(function (prev) {
|
|
10001
|
-
return clampIndex(prev - 1);
|
|
10002
|
-
});
|
|
10003
|
-
};
|
|
10004
|
-
var reset = function reset() {
|
|
10005
|
-
var _selectRef$current;
|
|
10006
|
-
(_selectRef$current = selectRef.current) == null || _selectRef$current.blur();
|
|
10007
|
-
setItemToHighlight(-1);
|
|
10008
|
-
};
|
|
10009
|
-
var handleKeyUp = function handleKeyUp(event) {
|
|
10010
|
-
if (!shouldHighlightOption) return undefined;
|
|
10011
|
-
var shouldHighlightOptionNext = event.key === 'ArrowDown';
|
|
10012
|
-
var shouldHighlightOptionPrev = event.key === 'ArrowUp';
|
|
10013
|
-
if (shouldHighlightOptionNext) return highlightNextOption();
|
|
10014
|
-
if (shouldHighlightOptionPrev) return highlightPrevOption();
|
|
10015
|
-
return undefined;
|
|
10016
|
-
};
|
|
10017
|
-
var preventScrollingWhileNavigating = function preventScrollingWhileNavigating(event) {
|
|
10018
|
-
if (!shouldHighlightOption) return;
|
|
10019
|
-
if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return;
|
|
10020
|
-
event.preventDefault();
|
|
10021
|
-
};
|
|
10022
|
-
var handleHighlighted = function handleHighlighted(cb) {
|
|
10023
|
-
return function (event) {
|
|
10024
|
-
if (itemToHighlight === -1) return;
|
|
10025
|
-
if (event.key !== 'Enter') return;
|
|
10026
|
-
cb(itemToHighlight);
|
|
10027
|
-
reset();
|
|
10028
|
-
};
|
|
10029
|
-
};
|
|
10030
|
-
useEffect(function () {
|
|
10031
|
-
if (shouldHighlightOption) return;
|
|
10032
|
-
reset();
|
|
10033
|
-
}, [shouldHighlightOption]);
|
|
10034
|
-
return {
|
|
10035
|
-
handleKeyUp: handleKeyUp,
|
|
10036
|
-
preventScrollingWhileNavigating: preventScrollingWhileNavigating,
|
|
10037
|
-
handleHighlighted: handleHighlighted,
|
|
10038
|
-
itemToHighlight: itemToHighlight
|
|
10039
|
-
};
|
|
10040
|
-
};
|
|
10041
|
-
var useVisualAccessibility = function useVisualAccessibility(_ref2) {
|
|
10042
|
-
var selectRef = _ref2.selectRef,
|
|
10043
|
-
isSelectDisabled = _ref2.isSelectDisabled;
|
|
10044
|
-
var addFocusClass = function addFocusClass() {
|
|
10045
|
-
var _selectRef$current2;
|
|
10046
|
-
(_selectRef$current2 = selectRef.current) == null || _selectRef$current2.classList.add('focus');
|
|
10047
|
-
};
|
|
10048
|
-
var removeFocusClass = function removeFocusClass() {
|
|
10049
|
-
var _selectRef$current3;
|
|
10050
|
-
(_selectRef$current3 = selectRef.current) == null || _selectRef$current3.classList.remove('focus');
|
|
10051
|
-
};
|
|
10052
|
-
var toggleFocus = function toggleFocus() {
|
|
10053
|
-
var _selectRef$current4;
|
|
10054
|
-
if ((_selectRef$current4 = selectRef.current) != null && _selectRef$current4.classList.contains('focus')) removeFocusClass();else addFocusClass();
|
|
10055
|
-
};
|
|
10056
|
-
var withClickAwayHandler = function withClickAwayHandler(cb) {
|
|
10057
|
-
return function (event) {
|
|
10058
|
-
if (!selectRef.current) return;
|
|
10059
|
-
if (selectRef.current.contains(event.target)) return;
|
|
10060
|
-
removeFocusClass();
|
|
10061
|
-
cb();
|
|
10062
|
-
};
|
|
10063
|
-
};
|
|
10064
|
-
useEffect(function () {
|
|
10065
|
-
if (!selectRef.current) return;
|
|
10066
|
-
if (isSelectDisabled) {
|
|
10067
|
-
selectRef.current.classList.add('disabled');
|
|
10068
|
-
} else selectRef.current.classList.remove('disabled');
|
|
10069
|
-
}, [isSelectDisabled]);
|
|
10070
|
-
return {
|
|
10071
|
-
withClickAwayHandler: withClickAwayHandler,
|
|
10072
|
-
toggleFocus: toggleFocus,
|
|
10073
|
-
addFocusClass: addFocusClass,
|
|
10074
|
-
removeFocusClass: removeFocusClass
|
|
10075
|
-
};
|
|
10076
|
-
};
|
|
10077
|
-
var useAccessibility = function useAccessibility(props) {
|
|
10078
|
-
var selectRef = props.selectRef;
|
|
10079
|
-
var _useKeyboardAccessibi = useKeyboardAccessibility(props),
|
|
10080
|
-
handleKeyUp = _useKeyboardAccessibi.handleKeyUp,
|
|
10081
|
-
preventScrollingWhileNavigating = _useKeyboardAccessibi.preventScrollingWhileNavigating,
|
|
10082
|
-
handleHighlighted = _useKeyboardAccessibi.handleHighlighted,
|
|
10083
|
-
itemToHighlight = _useKeyboardAccessibi.itemToHighlight;
|
|
10084
|
-
var _useVisualAccessibili = useVisualAccessibility(props),
|
|
10085
|
-
addFocusClass = _useVisualAccessibili.addFocusClass,
|
|
10086
|
-
removeFocusClass = _useVisualAccessibili.removeFocusClass,
|
|
10087
|
-
toggleFocus = _useVisualAccessibili.toggleFocus,
|
|
10088
|
-
withClickAwayHandler = _useVisualAccessibili.withClickAwayHandler;
|
|
10089
|
-
useEffect(function () {
|
|
10090
|
-
if (!selectRef.current) return undefined;
|
|
10091
|
-
selectRef.current.addEventListener('keydown', preventScrollingWhileNavigating);
|
|
10092
|
-
selectRef.current.addEventListener('keyup', handleKeyUp);
|
|
10093
|
-
selectRef.current.addEventListener('click', toggleFocus);
|
|
10094
|
-
selectRef.current.addEventListener('focus', addFocusClass);
|
|
10095
|
-
selectRef.current.addEventListener('blur', removeFocusClass);
|
|
10096
|
-
return function () {
|
|
10097
|
-
var _selectRef$current5, _selectRef$current6, _selectRef$current7, _selectRef$current8, _selectRef$current9;
|
|
10098
|
-
(_selectRef$current5 = selectRef.current) == null || _selectRef$current5.removeEventListener('keydown', preventScrollingWhileNavigating);
|
|
10099
|
-
(_selectRef$current6 = selectRef.current) == null || _selectRef$current6.removeEventListener('keyup', handleKeyUp);
|
|
10100
|
-
(_selectRef$current7 = selectRef.current) == null || _selectRef$current7.removeEventListener('click', toggleFocus);
|
|
10101
|
-
(_selectRef$current8 = selectRef.current) == null || _selectRef$current8.removeEventListener('focus', addFocusClass);
|
|
10102
|
-
(_selectRef$current9 = selectRef.current) == null || _selectRef$current9.removeEventListener('blur', removeFocusClass);
|
|
10103
|
-
};
|
|
10104
|
-
});
|
|
10105
|
-
return {
|
|
10106
|
-
withClickAwayHandler: withClickAwayHandler,
|
|
10107
|
-
handleHighlighted: handleHighlighted,
|
|
10108
|
-
itemToHighlight: itemToHighlight
|
|
10109
|
-
};
|
|
10110
|
-
};
|
|
10111
|
-
/**
|
|
10112
|
-
* DEPRECATED. Use Select2 instead.
|
|
10113
|
-
* A select component, created using <ul> and <li> elements, with bespoke accessibility
|
|
10114
|
-
* logic.
|
|
10115
|
-
*
|
|
10116
|
-
* # Usage
|
|
10117
|
-
* ## Defining a component that uses a typical Select element
|
|
10118
|
-
* ```tsx
|
|
10119
|
-
* const MyComponent = () => {
|
|
10120
|
-
* const handleSelect = (value: number, text: string) => {
|
|
10121
|
-
* console.log("Selected", value);
|
|
10122
|
-
* };
|
|
10123
|
-
*
|
|
10124
|
-
* return <>
|
|
10125
|
-
* <Select
|
|
10126
|
-
* label="This is a label"
|
|
10127
|
-
* options={[
|
|
10128
|
-
* { text: "Option 1", value: 1 },
|
|
10129
|
-
* { text: "Option 2", value: 2 },
|
|
10130
|
-
* ]}
|
|
10131
|
-
* onSelect={handleSelect}
|
|
10132
|
-
* />
|
|
10133
|
-
* </>
|
|
10134
|
-
* }
|
|
10135
|
-
* ```
|
|
10136
|
-
*
|
|
10137
|
-
* ## Defining a component that uses a disabled Select element
|
|
10138
|
-
* ```tsx
|
|
10139
|
-
* const MyComponent = () => {
|
|
10140
|
-
* const handleSelect = (value: number, text: string) => {
|
|
10141
|
-
* console.log("Selected", value);
|
|
10142
|
-
* };
|
|
10143
|
-
*
|
|
10144
|
-
* return <>
|
|
10145
|
-
* <Select
|
|
10146
|
-
* disabled // Select component disabled explicitely
|
|
10147
|
-
* label="This is a label"
|
|
10148
|
-
* options={[
|
|
10149
|
-
* { text: "Option 1", value: 1 },
|
|
10150
|
-
* { text: "Option 2", value: 2 },
|
|
10151
|
-
* ]}
|
|
10152
|
-
* onSelect={handleSelect}
|
|
10153
|
-
* />
|
|
10154
|
-
* <Select
|
|
10155
|
-
* label="This is a label"
|
|
10156
|
-
* options={[]} // Select component disabled implicitely by passing an empty array of options
|
|
10157
|
-
* onSelect={handleSelect}
|
|
10158
|
-
* />
|
|
10159
|
-
* </>
|
|
10160
|
-
* }
|
|
10161
|
-
* ```
|
|
10162
|
-
*
|
|
10163
|
-
* ## Defining a component with a non-labelled Select element
|
|
10164
|
-
* ```tsx
|
|
10165
|
-
* const MyComponent = () => {
|
|
10166
|
-
* const handleSelect = (value: number, text: string) => {
|
|
10167
|
-
* console.log("Selected", value);
|
|
10168
|
-
* };
|
|
10169
|
-
*
|
|
10170
|
-
* return <>
|
|
10171
|
-
* <Select
|
|
10172
|
-
* label=""
|
|
10173
|
-
* options={[
|
|
10174
|
-
* { text: "Option 1", value: 1 },
|
|
10175
|
-
* { text: "Option 2", value: 2 },
|
|
10176
|
-
* ]}
|
|
10177
|
-
* onSelect={handleSelect}
|
|
10178
|
-
* />
|
|
10179
|
-
* </>
|
|
10180
|
-
* }
|
|
10181
|
-
* ```
|
|
10182
|
-
*
|
|
10183
|
-
* ## Changing the dimensions of a Select element (px)
|
|
10184
|
-
* ```tsx
|
|
10185
|
-
* const MyComponent = () => {
|
|
10186
|
-
* const handleSelect = (value: number, text: string) => {
|
|
10187
|
-
* console.log("Selected", value);
|
|
10188
|
-
* };
|
|
10189
|
-
*
|
|
10190
|
-
* const selectWidthPx = 100;
|
|
10191
|
-
* const selectHeightPx = 27;
|
|
10192
|
-
*
|
|
10193
|
-
* return <>
|
|
10194
|
-
* <Select
|
|
10195
|
-
* label="This is a label"
|
|
10196
|
-
* options={[
|
|
10197
|
-
* { text: "Option 1", value: 1 },
|
|
10198
|
-
* { text: "Option 2", value: 2 },
|
|
10199
|
-
* ]}
|
|
10200
|
-
* onSelect={handleSelect}
|
|
10201
|
-
* width={selectWidthPx}
|
|
10202
|
-
* height={selectHeightPx}
|
|
10203
|
-
* />
|
|
10204
|
-
* </>
|
|
10205
|
-
* }
|
|
10206
|
-
* ```
|
|
10207
|
-
*/
|
|
10208
|
-
function Select(_ref3) {
|
|
10209
|
-
var _ref4, _selectedValue$text, _options$;
|
|
10210
|
-
var label = _ref3.label,
|
|
10211
|
-
options = _ref3.options,
|
|
10212
|
-
onSelect = _ref3.onSelect,
|
|
10213
|
-
_ref3$disabled = _ref3.disabled,
|
|
10214
|
-
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
|
|
10215
|
-
_ref3$resetWhenOption = _ref3.resetWhenOptionsUpdate,
|
|
10216
|
-
resetWhenOptionsUpdate = _ref3$resetWhenOption === void 0 ? false : _ref3$resetWhenOption,
|
|
10217
|
-
_ref3$width = _ref3.width,
|
|
10218
|
-
width = _ref3$width === void 0 ? 'default' : _ref3$width,
|
|
10219
|
-
_ref3$height = _ref3.height,
|
|
10220
|
-
height = _ref3$height === void 0 ? 'default' : _ref3$height;
|
|
10221
|
-
var selectRef = useRef(null);
|
|
10222
|
-
var optionsRef = useRef([]);
|
|
10223
|
-
var _useState2 = useState(null),
|
|
10224
|
-
selectedValue = _useState2[0],
|
|
10225
|
-
setSelectedValue = _useState2[1];
|
|
10226
|
-
var _useState3 = useState(false),
|
|
10227
|
-
isOpen = _useState3[0],
|
|
10228
|
-
setIsOpen = _useState3[1];
|
|
10229
|
-
var isDisabled = disabled || options.length === 0;
|
|
10230
|
-
var _useAccessibility = useAccessibility({
|
|
10231
|
-
selectRef: selectRef,
|
|
10232
|
-
optionsRef: optionsRef,
|
|
10233
|
-
shouldHighlightOption: isOpen,
|
|
10234
|
-
isSelectDisabled: isDisabled
|
|
10235
|
-
}),
|
|
10236
|
-
withClickAwayHandler = _useAccessibility.withClickAwayHandler,
|
|
10237
|
-
handleHighlighted = _useAccessibility.handleHighlighted,
|
|
10238
|
-
itemToHighlight = _useAccessibility.itemToHighlight;
|
|
10239
|
-
var openSelect = function openSelect() {
|
|
10240
|
-
return setIsOpen(true);
|
|
10241
|
-
};
|
|
10242
|
-
var closeSelect = function closeSelect() {
|
|
10243
|
-
return setIsOpen(false);
|
|
10244
|
-
};
|
|
10245
|
-
var toggleSelect = function toggleSelect() {
|
|
10246
|
-
return setIsOpen(function (prev) {
|
|
10247
|
-
return !prev;
|
|
10248
|
-
});
|
|
10249
|
-
};
|
|
10250
|
-
var closeSelectOnBlur = withClickAwayHandler(closeSelect);
|
|
10251
|
-
var handleOptionSelection = function handleOptionSelection(index) {
|
|
10252
|
-
var option = options[index];
|
|
10253
|
-
setSelectedValue(option);
|
|
10254
|
-
onSelect(option.value, option.text);
|
|
10255
|
-
};
|
|
10256
|
-
useEffect(function () {
|
|
10257
|
-
document.addEventListener('click', closeSelectOnBlur, false);
|
|
10258
|
-
return function () {
|
|
10259
|
-
document.removeEventListener('click', closeSelectOnBlur, false);
|
|
10260
|
-
};
|
|
10261
|
-
}, []);
|
|
10262
|
-
useEffect(function () {
|
|
10263
|
-
if (!resetWhenOptionsUpdate) return;
|
|
10264
|
-
if (options.length === 0) {
|
|
10265
|
-
setSelectedValue(null);
|
|
10266
|
-
return;
|
|
10267
|
-
}
|
|
10268
|
-
setSelectedValue(options[0]);
|
|
10269
|
-
}, [options, resetWhenOptionsUpdate]);
|
|
10270
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
10271
|
-
level: 1,
|
|
10272
|
-
tag: "p",
|
|
10273
|
-
"data-testid": "select-label"
|
|
10274
|
-
}, label)), /*#__PURE__*/React__default.createElement(SelectList, {
|
|
10275
|
-
id: "select",
|
|
10276
|
-
ref: selectRef,
|
|
10277
|
-
onClick: toggleSelect,
|
|
10278
|
-
onFocus: openSelect,
|
|
10279
|
-
onBlur: closeSelect,
|
|
10280
|
-
onMouseDown: function onMouseDown(e) {
|
|
10281
|
-
return e.preventDefault();
|
|
10282
|
-
},
|
|
10283
|
-
onKeyUp: handleHighlighted(handleOptionSelection),
|
|
10284
|
-
width: width,
|
|
10285
|
-
height: height,
|
|
10286
|
-
role: "listbox",
|
|
10287
|
-
tabIndex: 0,
|
|
10288
|
-
"aria-labelledby": label,
|
|
10289
|
-
"aria-disabled": isDisabled,
|
|
10290
|
-
"data-testid": "select"
|
|
10291
|
-
}, /*#__PURE__*/React__default.createElement(SelectWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10292
|
-
level: 1,
|
|
10293
|
-
tag: "p",
|
|
10294
|
-
"data-testid": "selected-value"
|
|
10295
|
-
}, (_ref4 = (_selectedValue$text = selectedValue == null ? void 0 : selectedValue.text) != null ? _selectedValue$text : (_options$ = options[0]) == null ? void 0 : _options$.text) != null ? _ref4 : ''), isOpen && (/*#__PURE__*/React__default.createElement(Options, {
|
|
10296
|
-
"data-testid": "options"
|
|
10297
|
-
}, options.map(function (option, index) {
|
|
10298
|
-
return /*#__PURE__*/React__default.createElement(Option, {
|
|
10299
|
-
ref: function ref(element) {
|
|
10300
|
-
if (!element || optionsRef.current.length === options.length) return;
|
|
10301
|
-
optionsRef.current.push(element);
|
|
10302
|
-
},
|
|
10303
|
-
role: "option",
|
|
10304
|
-
tabIndex: index + 1,
|
|
10305
|
-
hover: index === itemToHighlight,
|
|
10306
|
-
key: option.text,
|
|
10307
|
-
onClick: function onClick() {
|
|
10308
|
-
return handleOptionSelection(index);
|
|
10309
|
-
}
|
|
10310
|
-
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10311
|
-
level: 1,
|
|
10312
|
-
tag: "p"
|
|
10313
|
-
}, option.text));
|
|
10314
|
-
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10315
|
-
}
|
|
10316
|
-
|
|
10317
|
-
var _templateObject$1b, _templateObject2$V, _templateObject3$H, _templateObject4$z;
|
|
10318
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10319
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.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) {
|
|
9553
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E, _templateObject4$x;
|
|
9554
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9555
|
+
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
10320
9556
|
var width = _ref.width;
|
|
10321
9557
|
if (!width) return 'none';
|
|
10322
9558
|
return width + "px";
|
|
10323
9559
|
}, function (_ref2) {
|
|
10324
9560
|
var error = _ref2.error;
|
|
10325
|
-
if (error !== undefined) return "1px solid var(--color-
|
|
10326
|
-
return "1px solid var(--color-
|
|
9561
|
+
if (error !== undefined) return "1px solid var(--base-color-errorstate)";
|
|
9562
|
+
return "1px solid var(--base-color-dark-grey)";
|
|
10327
9563
|
}, function (_ref3) {
|
|
10328
9564
|
var error = _ref3.error;
|
|
10329
|
-
if (error !== undefined) return "var(--color-
|
|
10330
|
-
return "var(--color-
|
|
9565
|
+
if (error !== undefined) return "var(--base-color-errorstate)";
|
|
9566
|
+
return "var(--base-color-dark-grey)";
|
|
10331
9567
|
}, function (_ref4) {
|
|
10332
9568
|
var darkMode = _ref4.darkMode;
|
|
10333
|
-
if (darkMode) return "0 0 0
|
|
9569
|
+
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
10334
9570
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10335
|
-
}
|
|
10336
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9571
|
+
});
|
|
9572
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
10337
9573
|
var darkMode = _ref5.darkMode;
|
|
10338
|
-
if (darkMode) return "var(--color-
|
|
10339
|
-
return "var(--color-
|
|
10340
|
-
}
|
|
10341
|
-
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
9574
|
+
if (darkMode) return "var(--base-color-white)";
|
|
9575
|
+
return "var(--base-color-black)";
|
|
9576
|
+
});
|
|
9577
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
10342
9578
|
var darkMode = _ref6.darkMode;
|
|
10343
|
-
if (darkMode) return "var(--color-
|
|
10344
|
-
return "var(--color-
|
|
9579
|
+
if (darkMode) return "var(--base-color-white)";
|
|
9580
|
+
return "var(--base-color-errorstate)";
|
|
10345
9581
|
});
|
|
10346
9582
|
|
|
10347
|
-
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"
|
|
9583
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10348
9584
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10349
9585
|
return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10350
9586
|
iconName: "DropdownArrow"
|
|
@@ -10355,24 +9591,21 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
10355
9591
|
error = _ref.error,
|
|
10356
9592
|
width = _ref.width,
|
|
10357
9593
|
darkMode = _ref.darkMode,
|
|
10358
|
-
children = _ref.children
|
|
10359
|
-
|
|
10360
|
-
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
10361
|
-
className: className
|
|
10362
|
-
}, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9594
|
+
children = _ref.children;
|
|
9595
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
10363
9596
|
darkMode: darkMode,
|
|
10364
9597
|
"data-testid": "select2-text-label"
|
|
10365
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10366
|
-
|
|
10367
|
-
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper
|
|
9598
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9599
|
+
level: 6
|
|
9600
|
+
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper, {
|
|
10368
9601
|
width: width,
|
|
10369
9602
|
error: error,
|
|
10370
9603
|
darkMode: darkMode
|
|
10371
9604
|
}, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
10372
9605
|
darkMode: darkMode,
|
|
10373
9606
|
"data-testid": "select2-error-label"
|
|
10374
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10375
|
-
|
|
9607
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9608
|
+
level: 6
|
|
10376
9609
|
}, error))));
|
|
10377
9610
|
};
|
|
10378
9611
|
/**
|
|
@@ -10398,15 +9631,13 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10398
9631
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10399
9632
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10400
9633
|
components = _ref2.components,
|
|
10401
|
-
className = _ref2.className,
|
|
10402
9634
|
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
10403
9635
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10404
9636
|
label: label,
|
|
10405
9637
|
error: error,
|
|
10406
9638
|
width: width,
|
|
10407
|
-
darkMode: darkMode
|
|
10408
|
-
|
|
10409
|
-
}, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, selectProps, {
|
|
9639
|
+
darkMode: darkMode
|
|
9640
|
+
}, /*#__PURE__*/React__default.createElement(Select, Object.assign({}, selectProps, {
|
|
10410
9641
|
components: _extends({
|
|
10411
9642
|
DropdownIndicator: DropdownIndicator,
|
|
10412
9643
|
LoadingIndicator: undefined,
|
|
@@ -10446,7 +9677,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10446
9677
|
error: error,
|
|
10447
9678
|
width: width,
|
|
10448
9679
|
darkMode: darkMode
|
|
10449
|
-
}, /*#__PURE__*/React__default.createElement(Select$
|
|
9680
|
+
}, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, selectProps, {
|
|
10450
9681
|
components: _extends({
|
|
10451
9682
|
DropdownIndicator: DropdownIndicator,
|
|
10452
9683
|
LoadingIndicator: undefined,
|
|
@@ -10457,24 +9688,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10457
9688
|
})));
|
|
10458
9689
|
};
|
|
10459
9690
|
|
|
10460
|
-
var _templateObject$
|
|
10461
|
-
var Wrapper$
|
|
10462
|
-
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$
|
|
10463
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
9691
|
+
var _templateObject$18, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
|
|
9692
|
+
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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"])));
|
|
9693
|
+
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$F || (_templateObject3$F = /*#__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"])));
|
|
9694
|
+
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__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) {
|
|
10464
9695
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10465
9696
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10466
9697
|
}, function (_ref2) {
|
|
10467
9698
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
10468
9699
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
10469
9700
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
10470
|
-
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
9701
|
+
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
|
|
10471
9702
|
var singleChild = _ref3.singleChild;
|
|
10472
9703
|
return singleChild ? '0' : '10px';
|
|
10473
9704
|
});
|
|
10474
|
-
var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$
|
|
10475
|
-
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$
|
|
10476
|
-
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$
|
|
10477
|
-
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$
|
|
9705
|
+
var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
9706
|
+
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
9707
|
+
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
|
|
9708
|
+
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
|
|
10478
9709
|
|
|
10479
9710
|
// Set max. character length
|
|
10480
9711
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -10527,7 +9758,7 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10527
9758
|
var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
|
|
10528
9759
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
10529
9760
|
theme: theme
|
|
10530
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9761
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$5, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabel, {
|
|
10531
9762
|
tag: "div",
|
|
10532
9763
|
size: "small"
|
|
10533
9764
|
}, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
|
|
@@ -10563,8 +9794,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10563
9794
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10564
9795
|
};
|
|
10565
9796
|
|
|
10566
|
-
var _templateObject$
|
|
10567
|
-
var Wrapper$
|
|
9797
|
+
var _templateObject$19, _templateObject2$T, _templateObject3$G;
|
|
9798
|
+
var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$19 || (_templateObject$19 = /*#__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) {
|
|
10568
9799
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10569
9800
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10570
9801
|
return aspectRatio;
|
|
@@ -10574,8 +9805,8 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1d || (_templateObjec
|
|
|
10574
9805
|
height = _ref2.height;
|
|
10575
9806
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10576
9807
|
});
|
|
10577
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
10578
|
-
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$
|
|
9808
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
9809
|
+
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$G || (_templateObject3$G = /*#__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"])));
|
|
10579
9810
|
|
|
10580
9811
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10581
9812
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -10588,7 +9819,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10588
9819
|
aspectRatio = _ref.aspectRatio,
|
|
10589
9820
|
className = _ref.className,
|
|
10590
9821
|
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
|
10591
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9822
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$6, Object.assign({
|
|
10592
9823
|
aspectRatio: aspectRatio,
|
|
10593
9824
|
className: className
|
|
10594
9825
|
}, restProps), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
@@ -10608,13 +9839,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10608
9839
|
}, caption))));
|
|
10609
9840
|
};
|
|
10610
9841
|
|
|
10611
|
-
var _templateObject$
|
|
10612
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10613
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10614
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
10615
|
-
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10616
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10617
|
-
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$
|
|
9842
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m;
|
|
9843
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
9844
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
9845
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
9846
|
+
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
9847
|
+
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
9848
|
+
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
10618
9849
|
|
|
10619
9850
|
var MiniCard = function MiniCard(_ref) {
|
|
10620
9851
|
var _ref$title = _ref.title,
|
|
@@ -10652,18 +9883,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10652
9883
|
}, title)))));
|
|
10653
9884
|
};
|
|
10654
9885
|
|
|
10655
|
-
var _templateObject$
|
|
10656
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10657
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10658
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
9886
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$I, _templateObject4$A, _templateObject5$u;
|
|
9887
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
9888
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__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"])));
|
|
9889
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10659
9890
|
var isVisible = _ref.isVisible;
|
|
10660
9891
|
return isVisible ? 'visible' : 'hidden';
|
|
10661
9892
|
});
|
|
10662
|
-
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
9893
|
+
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10663
9894
|
var isVisible = _ref2.isVisible;
|
|
10664
9895
|
return isVisible ? 'visible' : 'hidden';
|
|
10665
9896
|
});
|
|
10666
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
9897
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
10667
9898
|
|
|
10668
9899
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10669
9900
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10744,15 +9975,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10744
9975
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10745
9976
|
};
|
|
10746
9977
|
|
|
10747
|
-
var _templateObject$
|
|
10748
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
10749
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
10750
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
10751
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
9978
|
+
var _templateObject$1c, _templateObject2$W, _templateObject3$J, _templateObject4$B, _templateObject5$v;
|
|
9979
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
9980
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
|
|
9981
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
9982
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
10752
9983
|
var isActive = _ref.isActive;
|
|
10753
9984
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10754
9985
|
}, Colors.MidGrey);
|
|
10755
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
9986
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10756
9987
|
var isOpen = _ref2.isOpen;
|
|
10757
9988
|
return isOpen ? 'block' : 'none';
|
|
10758
9989
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -10908,19 +10139,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10908
10139
|
});
|
|
10909
10140
|
};
|
|
10910
10141
|
|
|
10911
|
-
var _templateObject$
|
|
10912
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10913
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
10914
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
10142
|
+
var _templateObject$1d, _templateObject2$X, _templateObject3$K, _templateObject4$C, _templateObject5$w, _templateObject6$n;
|
|
10143
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10144
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10145
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10915
10146
|
var color = _ref.color;
|
|
10916
10147
|
return "var(--base-color-" + color + ")";
|
|
10917
10148
|
});
|
|
10918
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
10919
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$
|
|
10149
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10150
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10920
10151
|
var color = _ref2.color;
|
|
10921
10152
|
return "var(--base-color-" + color + ")";
|
|
10922
10153
|
});
|
|
10923
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$
|
|
10154
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10924
10155
|
var color = _ref3.color;
|
|
10925
10156
|
return "var(--base-color-" + color + ")";
|
|
10926
10157
|
});
|
|
@@ -11002,19 +10233,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
11002
10233
|
}, strengthLabel))));
|
|
11003
10234
|
};
|
|
11004
10235
|
|
|
11005
|
-
var _templateObject$
|
|
11006
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
11007
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2
|
|
11008
|
-
var Wrapper$
|
|
11009
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
10236
|
+
var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
|
|
10237
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10238
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10239
|
+
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10240
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$D || (_templateObject4$D = /*#__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) {
|
|
11010
10241
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
11011
10242
|
}, devices.tablet, devices.mobile);
|
|
11012
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
10243
|
+
var TableCell = /*#__PURE__*/styled.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
11013
10244
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
11014
10245
|
}, devices.mobile);
|
|
11015
|
-
var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$
|
|
11016
|
-
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$
|
|
11017
|
-
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$
|
|
10246
|
+
var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
|
|
10247
|
+
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
|
|
10248
|
+
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
11018
10249
|
|
|
11019
10250
|
/* eslint-disable react/no-danger */
|
|
11020
10251
|
var Content = function Content(_ref) {
|
|
@@ -11187,7 +10418,7 @@ var Table = function Table(_ref) {
|
|
|
11187
10418
|
} else {
|
|
11188
10419
|
visibleRows = totalRows;
|
|
11189
10420
|
}
|
|
11190
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10421
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, {
|
|
11191
10422
|
className: className
|
|
11192
10423
|
}, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
11193
10424
|
onClickPrev: handlePrev,
|
|
@@ -11217,24 +10448,24 @@ var Table = function Table(_ref) {
|
|
|
11217
10448
|
}))));
|
|
11218
10449
|
};
|
|
11219
10450
|
|
|
11220
|
-
var _templateObject$
|
|
11221
|
-
var Wrapper$
|
|
10451
|
+
var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
10452
|
+
var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11222
10453
|
var theme = _ref.theme;
|
|
11223
10454
|
return "var(--color-" + theme + ")";
|
|
11224
10455
|
}, function (_ref2) {
|
|
11225
10456
|
var theme = _ref2.theme;
|
|
11226
10457
|
return "var(--color-" + theme + ")";
|
|
11227
10458
|
});
|
|
11228
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
11229
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
11230
|
-
var Error = /*#__PURE__*/styled.div(_templateObject4$
|
|
11231
|
-
var Form = /*#__PURE__*/styled.form(_templateObject5$
|
|
11232
|
-
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
11233
|
-
var ServerError = /*#__PURE__*/styled.div(_templateObject7$
|
|
11234
|
-
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$
|
|
11235
|
-
var ButtonWrapper$
|
|
11236
|
-
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
11237
|
-
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$
|
|
10459
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
10460
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$M || (_templateObject3$M = /*#__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);
|
|
10461
|
+
var Error = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10462
|
+
var Form = /*#__PURE__*/styled.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
10463
|
+
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
10464
|
+
var ServerError = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
10465
|
+
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
10466
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
10467
|
+
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
10468
|
+
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
11238
10469
|
var DropdownAreaWrapper = /*#__PURE__*/styled.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"])));
|
|
11239
10470
|
var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
|
|
11240
10471
|
var _ref3$isOpen = _ref3.isOpen,
|
|
@@ -11260,9 +10491,7 @@ var themeToColor = function themeToColor(theme) {
|
|
|
11260
10491
|
var SignUpTitle = function SignUpTitle(_ref) {
|
|
11261
10492
|
var title = _ref.title,
|
|
11262
10493
|
_ref$isMobile = _ref.isMobile,
|
|
11263
|
-
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile
|
|
11264
|
-
_ref$titleFontFamily = _ref.titleFontFamily,
|
|
11265
|
-
titleFontFamily = _ref$titleFontFamily === void 0 ? false : _ref$titleFontFamily;
|
|
10494
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
|
|
11266
10495
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
11267
10496
|
columnStartDesktop: 3,
|
|
11268
10497
|
columnSpanDesktop: 10,
|
|
@@ -11271,7 +10500,7 @@ var SignUpTitle = function SignUpTitle(_ref) {
|
|
|
11271
10500
|
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
11272
10501
|
color: "black",
|
|
11273
10502
|
hierarchy: "h3",
|
|
11274
|
-
serif:
|
|
10503
|
+
serif: true,
|
|
11275
10504
|
size: isMobile ? 'small' : 'medium'
|
|
11276
10505
|
}, title)));
|
|
11277
10506
|
};
|
|
@@ -11524,10 +10753,10 @@ var SignUpForm = function SignUpForm(_ref) {
|
|
|
11524
10753
|
tabIndex: 0
|
|
11525
10754
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11526
10755
|
size: "small"
|
|
11527
|
-
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
10756
|
+
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
11528
10757
|
onClick: handleFormSubmit,
|
|
11529
10758
|
theme: theme
|
|
11530
|
-
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
10759
|
+
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
11531
10760
|
onClick: handleFormSubmit,
|
|
11532
10761
|
theme: theme
|
|
11533
10762
|
})), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
|
|
@@ -11579,7 +10808,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11579
10808
|
useEffect(function () {
|
|
11580
10809
|
setDropdownOpen(isOpened);
|
|
11581
10810
|
}, [isOpened]);
|
|
11582
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10811
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
11583
10812
|
theme: themeToColor(theme),
|
|
11584
10813
|
className: className
|
|
11585
10814
|
}, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
|
|
@@ -11644,13 +10873,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11644
10873
|
}))))));
|
|
11645
10874
|
};
|
|
11646
10875
|
|
|
11647
|
-
var _templateObject$
|
|
11648
|
-
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
10876
|
+
var _templateObject$1g, _templateObject2$_, _templateObject4$F, _templateObject5$z;
|
|
10877
|
+
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1g || (_templateObject$1g = /*#__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) {
|
|
11649
10878
|
var withShadow = _ref.withShadow;
|
|
11650
|
-
return withShadow && css(_templateObject2$
|
|
10879
|
+
return withShadow && css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11651
10880
|
}, devices.mobile);
|
|
11652
|
-
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$
|
|
11653
|
-
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$
|
|
10881
|
+
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$F || (_templateObject4$F = /*#__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);
|
|
10882
|
+
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11654
10883
|
|
|
11655
10884
|
var defaultGrid = {
|
|
11656
10885
|
columnStartDesktop: 2,
|
|
@@ -11708,12 +10937,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11708
10937
|
return null;
|
|
11709
10938
|
};
|
|
11710
10939
|
|
|
11711
|
-
var _templateObject$
|
|
11712
|
-
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$
|
|
10940
|
+
var _templateObject$1h, _templateObject2$$;
|
|
10941
|
+
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$1h || (_templateObject$1h = /*#__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) {
|
|
11713
10942
|
var hide = _ref.hide;
|
|
11714
10943
|
return hide && "display: none;";
|
|
11715
10944
|
}, devices.mobileAndTablet);
|
|
11716
|
-
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2
|
|
10945
|
+
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__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);
|
|
11717
10946
|
|
|
11718
10947
|
/**
|
|
11719
10948
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11805,8 +11034,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11805
11034
|
}));
|
|
11806
11035
|
};
|
|
11807
11036
|
|
|
11808
|
-
var _templateObject$
|
|
11809
|
-
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
11037
|
+
var _templateObject$1i;
|
|
11038
|
+
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$1i || (_templateObject$1i = /*#__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);
|
|
11810
11039
|
|
|
11811
11040
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11812
11041
|
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'] + "\">");
|
|
@@ -11866,27 +11095,27 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11866
11095
|
}, gridItemOrContent);
|
|
11867
11096
|
};
|
|
11868
11097
|
|
|
11869
|
-
var _templateObject$
|
|
11098
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
|
|
11870
11099
|
var color = 'primary-black';
|
|
11871
11100
|
var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
|
|
11872
11101
|
borderColor: color,
|
|
11873
11102
|
hoveredColor: color,
|
|
11874
11103
|
pressedColor: color,
|
|
11875
11104
|
textColor: color
|
|
11876
|
-
})(_templateObject$
|
|
11877
|
-
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11878
|
-
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$
|
|
11105
|
+
})(_templateObject$1j || (_templateObject$1j = /*#__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);
|
|
11106
|
+
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__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);
|
|
11107
|
+
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11879
11108
|
var Heading = /*#__PURE__*/styled(HarmonicHeader).attrs({
|
|
11880
11109
|
serif: true,
|
|
11881
11110
|
size: 'medium'
|
|
11882
|
-
})(_templateObject4$
|
|
11111
|
+
})(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11883
11112
|
var Intro = /*#__PURE__*/styled(HarmonicSubtitle).attrs({
|
|
11884
11113
|
size: 'large'
|
|
11885
|
-
})(_templateObject5$
|
|
11886
|
-
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$
|
|
11114
|
+
})(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11115
|
+
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11887
11116
|
var SignInPrompt = /*#__PURE__*/styled(BodyCopyHarmonic).attrs({
|
|
11888
11117
|
size: 'large'
|
|
11889
|
-
})(_templateObject7$
|
|
11118
|
+
})(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11890
11119
|
|
|
11891
11120
|
var Paywall = function Paywall(_ref) {
|
|
11892
11121
|
var className = _ref.className,
|
|
@@ -12079,14 +11308,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
12079
11308
|
})))))));
|
|
12080
11309
|
};
|
|
12081
11310
|
|
|
12082
|
-
var _templateObject$
|
|
12083
|
-
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
12084
|
-
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
12085
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$
|
|
12086
|
-
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12087
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
12088
|
-
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$
|
|
12089
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$
|
|
11311
|
+
var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11312
|
+
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$1k || (_templateObject$1k = /*#__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);
|
|
11313
|
+
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$11 || (_templateObject2$11 = /*#__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);
|
|
11314
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$O || (_templateObject3$O = /*#__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);
|
|
11315
|
+
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11316
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11317
|
+
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11318
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
12090
11319
|
|
|
12091
11320
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
12092
11321
|
var Footer = function Footer(_ref) {
|
|
@@ -12144,18 +11373,18 @@ var Footer = function Footer(_ref) {
|
|
|
12144
11373
|
}, additionalInfo))));
|
|
12145
11374
|
};
|
|
12146
11375
|
|
|
12147
|
-
var _templateObject$
|
|
11376
|
+
var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$I, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
|
|
12148
11377
|
var LIST_ITEM_GAP = 32;
|
|
12149
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
11378
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__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) {
|
|
12150
11379
|
var bottomBorder = _ref.bottomBorder;
|
|
12151
11380
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
12152
11381
|
}, zIndexes.anchor, function (_ref2) {
|
|
12153
11382
|
var withShadow = _ref2.withShadow;
|
|
12154
|
-
return withShadow && css(_templateObject2$
|
|
11383
|
+
return withShadow && css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
12155
11384
|
});
|
|
12156
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
12157
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12158
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
11385
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
11386
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11387
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
12159
11388
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
12160
11389
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
12161
11390
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -12166,11 +11395,11 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject5$D || (_templateObject5$D
|
|
|
12166
11395
|
hasTwoArrows = _ref5.hasTwoArrows;
|
|
12167
11396
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
12168
11397
|
});
|
|
12169
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject8$
|
|
11398
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
|
|
12170
11399
|
var withShadow = _ref7.withShadow;
|
|
12171
|
-
return withShadow && css(_templateObject9$
|
|
11400
|
+
return withShadow && css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
12172
11401
|
});
|
|
12173
|
-
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
11402
|
+
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
12174
11403
|
var disabled = _ref8.disabled;
|
|
12175
11404
|
return disabled ? 'not-allowed' : 'pointer';
|
|
12176
11405
|
}, function (_ref9) {
|
|
@@ -12425,20 +11654,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12425
11654
|
})))) : null))));
|
|
12426
11655
|
};
|
|
12427
11656
|
|
|
12428
|
-
var _templateObject$
|
|
12429
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
11657
|
+
var _templateObject$1m, _templateObject2$13, _templateObject3$Q, _templateObject4$J, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11658
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12430
11659
|
var sticky = _ref.sticky;
|
|
12431
11660
|
return sticky ? 'sticky' : 'initial';
|
|
12432
11661
|
}, zIndexes.anchor);
|
|
12433
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
12434
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
11662
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
11663
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__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) {
|
|
12435
11664
|
var title = _ref2.title;
|
|
12436
11665
|
return title ? 'row' : 'row-reverse';
|
|
12437
11666
|
}, devices.tablet, devices.mobile);
|
|
12438
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$
|
|
12439
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
12440
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12441
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$
|
|
11667
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__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);
|
|
11668
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
11669
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
11670
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
12442
11671
|
var theme = _ref3.theme;
|
|
12443
11672
|
return theme.colors.primaryButtonReverseBg;
|
|
12444
11673
|
}, function (_ref4) {
|
|
@@ -12451,8 +11680,8 @@ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$g
|
|
|
12451
11680
|
var theme = _ref6.theme;
|
|
12452
11681
|
return theme.colors.primaryButtonReverse;
|
|
12453
11682
|
});
|
|
12454
|
-
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
12455
|
-
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject0$
|
|
11683
|
+
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
11684
|
+
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
12456
11685
|
|
|
12457
11686
|
var _excluded$s = ["text"],
|
|
12458
11687
|
_excluded2$4 = ["text"];
|
|
@@ -12485,18 +11714,18 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12485
11714
|
}, message))));
|
|
12486
11715
|
};
|
|
12487
11716
|
|
|
12488
|
-
var _templateObject$
|
|
12489
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
12490
|
-
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$
|
|
12491
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12492
|
-
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$
|
|
11717
|
+
var _templateObject$1n, _templateObject2$14, _templateObject3$R, _templateObject4$K;
|
|
11718
|
+
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1n || (_templateObject$1n = /*#__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);
|
|
11719
|
+
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$14 || (_templateObject2$14 = /*#__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);
|
|
11720
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__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);
|
|
11721
|
+
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$K || (_templateObject4$K = /*#__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);
|
|
12493
11722
|
|
|
12494
|
-
var _templateObject$
|
|
12495
|
-
var Wrapper$
|
|
11723
|
+
var _templateObject$1o;
|
|
11724
|
+
var Wrapper$9 = /*#__PURE__*/styled.div(_templateObject$1o || (_templateObject$1o = /*#__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);
|
|
12496
11725
|
|
|
12497
11726
|
var UpsellCards = function UpsellCards(_ref) {
|
|
12498
11727
|
var upsellCards = _ref.upsellCards;
|
|
12499
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11728
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$9, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
|
|
12500
11729
|
return /*#__PURE__*/React__default.createElement(UpsellCard, {
|
|
12501
11730
|
key: "card-" + index,
|
|
12502
11731
|
title: card.title,
|
|
@@ -12521,15 +11750,13 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12521
11750
|
upsellCards = _ref.upsellCards,
|
|
12522
11751
|
_ref$theme = _ref.theme,
|
|
12523
11752
|
theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme,
|
|
12524
|
-
className = _ref.className
|
|
12525
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
11753
|
+
className = _ref.className;
|
|
12526
11754
|
var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
|
|
12527
11755
|
return _extends({}, card, {
|
|
12528
11756
|
theme: card.theme || theme,
|
|
12529
11757
|
secondaryTheme: card.secondaryTheme || card.theme || theme
|
|
12530
11758
|
});
|
|
12531
11759
|
}) : [];
|
|
12532
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12533
11760
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
12534
11761
|
theme: theme
|
|
12535
11762
|
}, /*#__PURE__*/React__default.createElement(Grid, {
|
|
@@ -12542,7 +11769,7 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12542
11769
|
columnStartSmallDevice: 1,
|
|
12543
11770
|
columnSpanSmallDevice: 14
|
|
12544
11771
|
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
|
|
12545
|
-
serif:
|
|
11772
|
+
serif: true
|
|
12546
11773
|
}, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
|
|
12547
11774
|
text: richText != null ? richText : '',
|
|
12548
11775
|
columnStartDesktop: 1,
|
|
@@ -12556,9 +11783,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12556
11783
|
})))));
|
|
12557
11784
|
};
|
|
12558
11785
|
|
|
12559
|
-
var _templateObject$
|
|
12560
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12561
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
11786
|
+
var _templateObject$1p, _templateObject2$15;
|
|
11787
|
+
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
11788
|
+
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__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) {
|
|
12562
11789
|
var bottomBorder = _ref.bottomBorder;
|
|
12563
11790
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12564
11791
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12589,11 +11816,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12589
11816
|
}, children)));
|
|
12590
11817
|
};
|
|
12591
11818
|
|
|
12592
|
-
var _templateObject$
|
|
12593
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
12594
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
12595
|
-
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12596
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
11819
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$S, _templateObject4$L;
|
|
11820
|
+
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1q || (_templateObject$1q = /*#__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);
|
|
11821
|
+
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$16 || (_templateObject2$16 = /*#__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);
|
|
11822
|
+
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11823
|
+
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$L || (_templateObject4$L = /*#__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"])));
|
|
12597
11824
|
|
|
12598
11825
|
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12599
11826
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -12797,29 +12024,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12797
12024
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12798
12025
|
};
|
|
12799
12026
|
|
|
12800
|
-
var _templateObject$
|
|
12801
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12027
|
+
var _templateObject$1r, _templateObject2$17, _templateObject3$T, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
|
|
12028
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1r || (_templateObject$1r = /*#__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) {
|
|
12802
12029
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12803
12030
|
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 }";
|
|
12804
12031
|
}, devices.mobile, function (_ref2) {
|
|
12805
12032
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12806
12033
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12807
12034
|
});
|
|
12808
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12035
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12809
12036
|
var type = _ref3.type,
|
|
12810
12037
|
isActive = _ref3.isActive;
|
|
12811
12038
|
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 ";
|
|
12812
12039
|
});
|
|
12813
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
12814
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12815
|
-
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
12040
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$T || (_templateObject3$T = /*#__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);
|
|
12041
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12042
|
+
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12816
12043
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12817
12044
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12818
12045
|
});
|
|
12819
|
-
var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$
|
|
12820
|
-
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12821
|
-
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$
|
|
12822
|
-
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$
|
|
12046
|
+
var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
|
|
12047
|
+
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
12048
|
+
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12049
|
+
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12823
12050
|
var active = _ref5.active;
|
|
12824
12051
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
12825
12052
|
}, devices.tablet, function (_ref6) {
|
|
@@ -12849,8 +12076,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12849
12076
|
_ref$infinite = _ref.infinite,
|
|
12850
12077
|
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
12851
12078
|
_ref$useOffset = _ref.useOffset,
|
|
12852
|
-
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset
|
|
12853
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
12079
|
+
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
|
|
12854
12080
|
var _useState = useState(false),
|
|
12855
12081
|
isFullscreen = _useState[0],
|
|
12856
12082
|
setIsFullscreen = _useState[1];
|
|
@@ -13000,7 +12226,6 @@ var Carousel = function Carousel(_ref) {
|
|
|
13000
12226
|
var carouselTitleId = "carousel-title-" + title;
|
|
13001
12227
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
13002
12228
|
var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
13003
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
13004
12229
|
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
13005
12230
|
className: className,
|
|
13006
12231
|
type: type,
|
|
@@ -13024,7 +12249,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
13024
12249
|
isDescriptionPresent: !!description
|
|
13025
12250
|
}, /*#__PURE__*/React__default.createElement(TitleText$1, {
|
|
13026
12251
|
size: "medium",
|
|
13027
|
-
serif:
|
|
12252
|
+
serif: true,
|
|
13028
12253
|
hierarchy: titleSemanticLevelValue
|
|
13029
12254
|
}, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
13030
12255
|
size: "large"
|
|
@@ -13064,18 +12289,18 @@ var Carousel = function Carousel(_ref) {
|
|
|
13064
12289
|
}, children))));
|
|
13065
12290
|
};
|
|
13066
12291
|
|
|
13067
|
-
var _templateObject$
|
|
13068
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
13069
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
13070
|
-
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
13071
|
-
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
13072
|
-
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
13073
|
-
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
13074
|
-
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
13075
|
-
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
13076
|
-
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
13077
|
-
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled.div(_templateObject0$
|
|
13078
|
-
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$
|
|
12292
|
+
var _templateObject$1s, _templateObject2$18, _templateObject3$U, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
12293
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$1s || (_templateObject$1s = /*#__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);
|
|
12294
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$18 || (_templateObject2$18 = /*#__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);
|
|
12295
|
+
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12296
|
+
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$N || (_templateObject4$N = /*#__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);
|
|
12297
|
+
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12298
|
+
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12299
|
+
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12300
|
+
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
12301
|
+
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12302
|
+
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12303
|
+
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13079
12304
|
var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
13080
12305
|
var FirstButtonComponentWrapper = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
13081
12306
|
var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -13214,7 +12439,7 @@ var VideoSlide = function VideoSlide(_ref) {
|
|
|
13214
12439
|
});
|
|
13215
12440
|
return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
|
|
13216
12441
|
isCurrentSlide: isCurrentSlide
|
|
13217
|
-
}, /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
12442
|
+
}, /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
|
|
13218
12443
|
video: video,
|
|
13219
12444
|
settings: settings
|
|
13220
12445
|
}));
|
|
@@ -13245,10 +12470,7 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
|
|
|
13245
12470
|
isCurrentSlide: index === currentSlide
|
|
13246
12471
|
})) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
|
|
13247
12472
|
alt: mediaContent.alt
|
|
13248
|
-
}, mediaContent
|
|
13249
|
-
fetchPriority: index === currentSlide ? 'high' : 'auto',
|
|
13250
|
-
loading: index === currentSlide ? 'eager' : 'lazy'
|
|
13251
|
-
})))));
|
|
12473
|
+
}, mediaContent)))));
|
|
13252
12474
|
}));
|
|
13253
12475
|
};
|
|
13254
12476
|
|
|
@@ -13257,8 +12479,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13257
12479
|
carouselTitle = _ref.carouselTitle,
|
|
13258
12480
|
slides = _ref.slides,
|
|
13259
12481
|
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
13260
|
-
className = _ref.className
|
|
13261
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
12482
|
+
className = _ref.className;
|
|
13262
12483
|
var slidesMedia = useMemo(function () {
|
|
13263
12484
|
return slides.map(function (_ref2) {
|
|
13264
12485
|
var mediaContent = _ref2.mediaContent;
|
|
@@ -13289,7 +12510,6 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13289
12510
|
var handleClickInside = function handleClickInside(e) {
|
|
13290
12511
|
e.stopPropagation();
|
|
13291
12512
|
};
|
|
13292
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
13293
12513
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid$1, {
|
|
13294
12514
|
role: "region",
|
|
13295
12515
|
"aria-labelledby": carouselTitleId,
|
|
@@ -13302,7 +12522,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13302
12522
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
13303
12523
|
className: TYPOGRAPHY_CLASS_NAME,
|
|
13304
12524
|
size: "medium",
|
|
13305
|
-
serif:
|
|
12525
|
+
serif: true,
|
|
13306
12526
|
hierarchy: titleSemanticLevelValue
|
|
13307
12527
|
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
13308
12528
|
onClickNext: onNext,
|
|
@@ -13394,9 +12614,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13394
12614
|
})));
|
|
13395
12615
|
};
|
|
13396
12616
|
|
|
13397
|
-
var _templateObject$
|
|
13398
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
13399
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12617
|
+
var _templateObject$1t, _templateObject3$V;
|
|
12618
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
12619
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13400
12620
|
|
|
13401
12621
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13402
12622
|
var children = _ref.children;
|
|
@@ -13991,8 +13211,8 @@ var Theme = function Theme(_ref) {
|
|
|
13991
13211
|
}, children);
|
|
13992
13212
|
};
|
|
13993
13213
|
|
|
13994
|
-
var _templateObject$
|
|
13995
|
-
var GlobalStyles = /*#__PURE__*/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) {
|
|
13214
|
+
var _templateObject$1u;
|
|
13215
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1u || (_templateObject$1u = /*#__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) {
|
|
13996
13216
|
var theme = _ref.theme;
|
|
13997
13217
|
return theme.colors.primary;
|
|
13998
13218
|
}, function (_ref2) {
|
|
@@ -14939,10 +14159,10 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1y || (_templa
|
|
|
14939
14159
|
return theme.footer.tablet.paddingBottom;
|
|
14940
14160
|
}, devices.desktop, devices.largeDesktop);
|
|
14941
14161
|
|
|
14942
|
-
var _templateObject$
|
|
14943
|
-
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$
|
|
14944
|
-
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$
|
|
14945
|
-
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$
|
|
14162
|
+
var _templateObject$1v, _templateObject2$19, _templateObject3$W;
|
|
14163
|
+
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14164
|
+
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14165
|
+
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$W || (_templateObject3$W = /*#__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);
|
|
14946
14166
|
|
|
14947
14167
|
/* eslint-disable react/no-danger */
|
|
14948
14168
|
var Quote = function Quote(_ref) {
|
|
@@ -14972,5 +14192,5 @@ var Quote = function Quote(_ref) {
|
|
|
14972
14192
|
}, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
|
|
14973
14193
|
};
|
|
14974
14194
|
|
|
14975
|
-
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote,
|
|
14195
|
+
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio2, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
|
|
14976
14196
|
//# sourceMappingURL=harmonic.esm.js.map
|