@royaloperahouse/harmonic 0.19.1-a → 0.19.1-c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Buttons/Auxiliary/AuxiliaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Buttons/Button.d.ts +10 -3
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.d.ts +17 -3
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Buttons/Secondary/SecondaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Radio/Radio.d.ts +7 -0
- package/dist/components/atoms/Radio/Radio.style.d.ts +4 -0
- package/dist/components/atoms/Radio/index.d.ts +2 -0
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.d.ts +4 -0
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.style.d.ts +5 -0
- package/dist/components/atoms/VideoControlsImpact/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts +2 -1
- package/dist/components/index.d.ts +3 -3
- package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +1 -0
- package/dist/components/molecules/HotFilters/HotFilters.style.d.ts +16 -1
- package/dist/components/molecules/PageHeading/Compact/Compact.style.d.ts +16 -1
- package/dist/components/molecules/PageHeading/Impact/Impact.style.d.ts +302 -9
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +2 -0
- package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +3 -1
- package/dist/components/molecules/PersonCard/PersonCard.style.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/RadioGroup.d.ts +7 -0
- package/dist/components/molecules/RadioGroup/RadioGroup.style.d.ts +1 -0
- package/dist/components/molecules/RadioGroup/index.d.ts +2 -0
- package/dist/components/molecules/Select/Select.d.ts +101 -0
- package/dist/components/molecules/Select/Select.style.d.ts +13 -0
- package/dist/components/molecules/Select/index.d.ts +2 -0
- package/dist/components/molecules/Select2/Select2.d.ts +1 -1
- package/dist/components/molecules/Swipe/Swipe.d.ts +1 -0
- package/dist/components/molecules/index.d.ts +3 -1
- package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +3 -1
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +3 -1
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +16 -1
- package/dist/harmonic.cjs.development.js +1401 -589
- 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 +1417 -608
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/card.d.ts +2 -0
- package/dist/types/impactHeader.d.ts +14 -32
- package/dist/types/signUpForm.d.ts +1 -0
- package/dist/types/types.d.ts +14 -0
- package/dist/types/upsell.d.ts +2 -0
- package/package.json +1 -1
|
@@ -10,9 +10,9 @@ var styled = require('styled-components');
|
|
|
10
10
|
var styled__default = _interopDefault(styled);
|
|
11
11
|
var moment = _interopDefault(require('moment'));
|
|
12
12
|
var server = require('react-dom/server');
|
|
13
|
-
var Select = require('react-select');
|
|
14
|
-
var
|
|
15
|
-
var Select$
|
|
13
|
+
var Select$1 = require('react-select');
|
|
14
|
+
var Select$1__default = _interopDefault(Select$1);
|
|
15
|
+
var Select$2 = _interopDefault(require('react-select/async'));
|
|
16
16
|
var Modal = _interopDefault(require('react-modal'));
|
|
17
17
|
var ScrollLock = _interopDefault(require('react-scrolllock'));
|
|
18
18
|
|
|
@@ -217,7 +217,8 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
|
217
217
|
em = _ref2.em,
|
|
218
218
|
_ref2$color = _ref2.color,
|
|
219
219
|
color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
|
|
220
|
-
serif = _ref2.serif,
|
|
220
|
+
_ref2$serif = _ref2.serif,
|
|
221
|
+
serif = _ref2$serif === void 0 ? false : _ref2$serif,
|
|
221
222
|
hierarchy = _ref2.hierarchy,
|
|
222
223
|
tag = _ref2.tag,
|
|
223
224
|
className = _ref2.className,
|
|
@@ -2626,7 +2627,7 @@ var Icon = /*#__PURE__*/React.memo(function (props) {
|
|
|
2626
2627
|
Icon.displayName = 'Icon';
|
|
2627
2628
|
|
|
2628
2629
|
var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
|
|
2629
|
-
var Button = function
|
|
2630
|
+
var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
2630
2631
|
var children = _ref.children,
|
|
2631
2632
|
iconName = _ref.iconName,
|
|
2632
2633
|
iconDirection = _ref.iconDirection,
|
|
@@ -2636,7 +2637,7 @@ var Button = function Button(_ref) {
|
|
|
2636
2637
|
href = _ref.href,
|
|
2637
2638
|
onClick = _ref.onClick,
|
|
2638
2639
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
2639
|
-
var truncatedString = children.substring(0, 30);
|
|
2640
|
+
var truncatedString = children == null ? void 0 : children.substring(0, 30);
|
|
2640
2641
|
var handleClick = React.useCallback(function (e) {
|
|
2641
2642
|
if (!href) e.preventDefault();
|
|
2642
2643
|
onClick == null || onClick(e);
|
|
@@ -2648,7 +2649,8 @@ var Button = function Button(_ref) {
|
|
|
2648
2649
|
href: href != null ? href : '#',
|
|
2649
2650
|
onClick: handleClick,
|
|
2650
2651
|
iconName: iconName,
|
|
2651
|
-
className: className
|
|
2652
|
+
className: className,
|
|
2653
|
+
ref: ref
|
|
2652
2654
|
}), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
|
|
2653
2655
|
"data-testid": "button-icon",
|
|
2654
2656
|
className: iconClassName
|
|
@@ -2659,7 +2661,8 @@ var Button = function Button(_ref) {
|
|
|
2659
2661
|
}))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
|
|
2660
2662
|
color: "inherit"
|
|
2661
2663
|
}, truncatedString));
|
|
2662
|
-
};
|
|
2664
|
+
});
|
|
2665
|
+
Button.displayName = 'Button';
|
|
2663
2666
|
|
|
2664
2667
|
var getPointerEvents = function getPointerEvents(_ref) {
|
|
2665
2668
|
var disabled = _ref.disabled;
|
|
@@ -2724,7 +2727,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
|
2724
2727
|
var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
2725
2728
|
|
|
2726
2729
|
var _excluded$3 = ["children", "disabled", "className"];
|
|
2727
|
-
var PrimaryButton = function
|
|
2730
|
+
var PrimaryButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
2728
2731
|
var children = _ref.children,
|
|
2729
2732
|
disabled = _ref.disabled,
|
|
2730
2733
|
className = _ref.className,
|
|
@@ -2739,6 +2742,7 @@ var PrimaryButton = function PrimaryButton(_ref) {
|
|
|
2739
2742
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
|
|
2740
2743
|
id: disabledButtonDescriptionId
|
|
2741
2744
|
}, disabledButtonDescription), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2745
|
+
ref: ref,
|
|
2742
2746
|
disabled: true,
|
|
2743
2747
|
"aria-disabled": "true",
|
|
2744
2748
|
role: "button",
|
|
@@ -2748,10 +2752,13 @@ var PrimaryButton = function PrimaryButton(_ref) {
|
|
|
2748
2752
|
onClick: handleClick
|
|
2749
2753
|
}), children));
|
|
2750
2754
|
}
|
|
2751
|
-
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2755
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2756
|
+
ref: ref
|
|
2757
|
+
}, props, {
|
|
2752
2758
|
className: className
|
|
2753
2759
|
}), children);
|
|
2754
|
-
};
|
|
2760
|
+
});
|
|
2761
|
+
PrimaryButton.displayName = 'PrimaryButton';
|
|
2755
2762
|
|
|
2756
2763
|
var COLORS$1 = {
|
|
2757
2764
|
disabled: 'var(--color-state-disabled)',
|
|
@@ -3260,56 +3267,10 @@ var Progress = function Progress(_ref) {
|
|
|
3260
3267
|
}, renderSteps()));
|
|
3261
3268
|
};
|
|
3262
3269
|
|
|
3263
|
-
var _templateObject$c, _templateObject2$7, _templateObject3$3
|
|
3264
|
-
var
|
|
3265
|
-
var
|
|
3266
|
-
|
|
3267
|
-
darkMode = _ref.darkMode,
|
|
3268
|
-
disabled = _ref.disabled;
|
|
3269
|
-
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3270
|
-
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3271
|
-
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3272
|
-
return '1px solid var(--base-color-black)';
|
|
3273
|
-
}, function (_ref2) {
|
|
3274
|
-
var disabled = _ref2.disabled,
|
|
3275
|
-
darkMode = _ref2.darkMode;
|
|
3276
|
-
if (disabled) return 'var(--base-color-light-grey)';
|
|
3277
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3278
|
-
return ' var(--base-color-white)';
|
|
3279
|
-
}, function (_ref3) {
|
|
3280
|
-
var disabled = _ref3.disabled,
|
|
3281
|
-
blackBox = _ref3.blackBox,
|
|
3282
|
-
darkMode = _ref3.darkMode;
|
|
3283
|
-
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3284
|
-
if (darkMode) return 'var(--base-color-black)';
|
|
3285
|
-
if (blackBox) return 'var(--base-color-white)';
|
|
3286
|
-
return ' var(--base-color-black)';
|
|
3287
|
-
});
|
|
3288
|
-
var TickboxLabel = /*#__PURE__*/styled__default.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) {
|
|
3289
|
-
var blackBox = _ref4.blackBox,
|
|
3290
|
-
darkMode = _ref4.darkMode;
|
|
3291
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3292
|
-
if (blackBox) return 'var(--base-color-black)';
|
|
3293
|
-
return ' var(--base-color-white)';
|
|
3294
|
-
}, Radio, function (_ref5) {
|
|
3295
|
-
var darkMode = _ref5.darkMode;
|
|
3296
|
-
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3297
|
-
return '3px solid var(--base-color-lapislazuli)';
|
|
3298
|
-
});
|
|
3299
|
-
var RadioIcon = /*#__PURE__*/styled__default.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);
|
|
3300
|
-
var TextLabel = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3301
|
-
var darkMode = _ref6.darkMode,
|
|
3302
|
-
disabled = _ref6.disabled;
|
|
3303
|
-
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3304
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3305
|
-
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3306
|
-
return 'var(--base-color-black)';
|
|
3307
|
-
});
|
|
3308
|
-
var ErrorLabel = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3309
|
-
var darkMode = _ref7.darkMode;
|
|
3310
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3311
|
-
return 'var(--base-color-errorstate)';
|
|
3312
|
-
});
|
|
3270
|
+
var _templateObject$c, _templateObject2$7, _templateObject3$3;
|
|
3271
|
+
var RadioContainer = /*#__PURE__*/styled__default.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
|
|
3272
|
+
var RadioLine = /*#__PURE__*/styled__default.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 20px;\n grid-template-columns: 1.15em 1fr;\n user-select: none;\n cursor: pointer;\n color: black;\n\n &:focus {\n outline: none;\n }\n\n input[type='radio'] {\n cursor: pointer;\n appearance: none;\n background-color: #ffffff00;\n margin: 0;\n color: black;\n width: 20px;\n height: 20px;\n border: 1px solid black;\n border-radius: 50%;\n position: relative;\n place-content: center;\n display: block;\n }\n\n input[type='radio']::before {\n content: '';\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #ffffff00;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n input[type='radio']:checked::before {\n background-color: black;\n }\n"])));
|
|
3273
|
+
var RadioError = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
|
|
3313
3274
|
|
|
3314
3275
|
var _templateObject$d;
|
|
3315
3276
|
var Wrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
@@ -3426,6 +3387,95 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
3426
3387
|
}, children);
|
|
3427
3388
|
};
|
|
3428
3389
|
|
|
3390
|
+
/**
|
|
3391
|
+
* DEPRECATED. Use Radio2 instead
|
|
3392
|
+
*/
|
|
3393
|
+
var Radio = function Radio(_ref) {
|
|
3394
|
+
var _ref$checked = _ref.checked,
|
|
3395
|
+
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
3396
|
+
error = _ref.error,
|
|
3397
|
+
label = _ref.label,
|
|
3398
|
+
onChange = _ref.onChange;
|
|
3399
|
+
var _useState = React.useState(checked),
|
|
3400
|
+
isChecked = _useState[0],
|
|
3401
|
+
setChecked = _useState[1];
|
|
3402
|
+
var handleRadioChange = function handleRadioChange() {
|
|
3403
|
+
setChecked(!isChecked);
|
|
3404
|
+
onChange == null || onChange(label != null ? label : '');
|
|
3405
|
+
};
|
|
3406
|
+
var handleKeyPress = function handleKeyPress(event) {
|
|
3407
|
+
if (event.key === 'Space' || event.key === ' ') handleRadioChange();
|
|
3408
|
+
};
|
|
3409
|
+
React.useEffect(function () {
|
|
3410
|
+
setChecked(checked);
|
|
3411
|
+
}, [onChange]);
|
|
3412
|
+
return /*#__PURE__*/React__default.createElement(RadioContainer, null, /*#__PURE__*/React__default.createElement(RadioLine, {
|
|
3413
|
+
role: "radio",
|
|
3414
|
+
tabIndex: 0,
|
|
3415
|
+
onClick: handleRadioChange,
|
|
3416
|
+
onKeyPress: handleKeyPress
|
|
3417
|
+
}, /*#__PURE__*/React__default.createElement("input", {
|
|
3418
|
+
type: "radio",
|
|
3419
|
+
checked: isChecked,
|
|
3420
|
+
readOnly: true
|
|
3421
|
+
}), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3422
|
+
level: 1
|
|
3423
|
+
}, label)), error && (/*#__PURE__*/React__default.createElement(RadioError, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3424
|
+
level: 1
|
|
3425
|
+
}, error))));
|
|
3426
|
+
};
|
|
3427
|
+
|
|
3428
|
+
var _templateObject$e, _templateObject2$8, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3429
|
+
var Container = /*#__PURE__*/styled__default.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3430
|
+
var Radio$1 = /*#__PURE__*/styled__default.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) {
|
|
3431
|
+
var error = _ref.error,
|
|
3432
|
+
darkMode = _ref.darkMode,
|
|
3433
|
+
disabled = _ref.disabled;
|
|
3434
|
+
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3435
|
+
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3436
|
+
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3437
|
+
return '1px solid var(--base-color-black)';
|
|
3438
|
+
}, function (_ref2) {
|
|
3439
|
+
var disabled = _ref2.disabled,
|
|
3440
|
+
darkMode = _ref2.darkMode;
|
|
3441
|
+
if (disabled) return 'var(--base-color-light-grey)';
|
|
3442
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3443
|
+
return ' var(--base-color-white)';
|
|
3444
|
+
}, function (_ref3) {
|
|
3445
|
+
var disabled = _ref3.disabled,
|
|
3446
|
+
blackBox = _ref3.blackBox,
|
|
3447
|
+
darkMode = _ref3.darkMode;
|
|
3448
|
+
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3449
|
+
if (darkMode) return 'var(--base-color-black)';
|
|
3450
|
+
if (blackBox) return 'var(--base-color-white)';
|
|
3451
|
+
return ' var(--base-color-black)';
|
|
3452
|
+
});
|
|
3453
|
+
var TickboxLabel = /*#__PURE__*/styled__default.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) {
|
|
3454
|
+
var blackBox = _ref4.blackBox,
|
|
3455
|
+
darkMode = _ref4.darkMode;
|
|
3456
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3457
|
+
if (blackBox) return 'var(--base-color-black)';
|
|
3458
|
+
return ' var(--base-color-white)';
|
|
3459
|
+
}, Radio$1, function (_ref5) {
|
|
3460
|
+
var darkMode = _ref5.darkMode;
|
|
3461
|
+
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3462
|
+
return '3px solid var(--base-color-lapislazuli)';
|
|
3463
|
+
});
|
|
3464
|
+
var RadioIcon = /*#__PURE__*/styled__default.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);
|
|
3465
|
+
var TextLabel = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3466
|
+
var darkMode = _ref6.darkMode,
|
|
3467
|
+
disabled = _ref6.disabled;
|
|
3468
|
+
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3469
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3470
|
+
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3471
|
+
return 'var(--base-color-black)';
|
|
3472
|
+
});
|
|
3473
|
+
var ErrorLabel = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3474
|
+
var darkMode = _ref7.darkMode;
|
|
3475
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3476
|
+
return 'var(--base-color-errorstate)';
|
|
3477
|
+
});
|
|
3478
|
+
|
|
3429
3479
|
var _excluded$7 = ["children", "disabled", "error", "darkMode", "blackBox"];
|
|
3430
3480
|
/**
|
|
3431
3481
|
* A Radio component, that wraps around the native `<input type="radio"/>` element
|
|
@@ -3464,7 +3514,7 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3464
3514
|
type: "radio",
|
|
3465
3515
|
ref: ref,
|
|
3466
3516
|
"data-testid": "radio-input"
|
|
3467
|
-
})), /*#__PURE__*/React__default.createElement(Radio, {
|
|
3517
|
+
})), /*#__PURE__*/React__default.createElement(Radio$1, {
|
|
3468
3518
|
error: error,
|
|
3469
3519
|
darkMode: darkMode,
|
|
3470
3520
|
disabled: disabled,
|
|
@@ -3484,9 +3534,9 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3484
3534
|
};
|
|
3485
3535
|
var Radio2 = /*#__PURE__*/React.forwardRef(Radio2Component);
|
|
3486
3536
|
|
|
3487
|
-
var _templateObject$
|
|
3488
|
-
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3489
|
-
var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3537
|
+
var _templateObject$f, _templateObject2$9, _templateObject3$5, _templateObject4$3, _templateObject5$2;
|
|
3538
|
+
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3539
|
+
var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__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) {
|
|
3490
3540
|
var size = _ref.size;
|
|
3491
3541
|
return size === 'small' ? 'var(--rotator-button-small-width)' : 'var(--rotator-button-width)';
|
|
3492
3542
|
}, function (_ref2) {
|
|
@@ -3499,7 +3549,7 @@ var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$8 || (_t
|
|
|
3499
3549
|
var size = _ref4.size;
|
|
3500
3550
|
return size === 'small' ? 'var(--rotator-button-small-icon-width)' : 'var(--rotator-button-icon-width)';
|
|
3501
3551
|
});
|
|
3502
|
-
var IconWrapper$1 = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject3$
|
|
3552
|
+
var IconWrapper$1 = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject3$5 || (_templateObject3$5 = /*#__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"])));
|
|
3503
3553
|
var IconUnavailableWrapper = /*#__PURE__*/styled__default(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);
|
|
3504
3554
|
var FullscreenIconWrapper = /*#__PURE__*/styled__default(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
|
|
3505
3555
|
|
|
@@ -3603,6 +3653,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3603
3653
|
isTablet = _useViewport.isTablet,
|
|
3604
3654
|
hydrated = _useViewport.hydrated;
|
|
3605
3655
|
if (!hydrated) return null;
|
|
3656
|
+
var preventMouseFocus = function preventMouseFocus(e) {
|
|
3657
|
+
e.preventDefault();
|
|
3658
|
+
};
|
|
3606
3659
|
var onClickLeftHandler = function onClickLeftHandler() {
|
|
3607
3660
|
if (onClickPrev) {
|
|
3608
3661
|
onClickPrev();
|
|
@@ -3655,6 +3708,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3655
3708
|
className: className
|
|
3656
3709
|
}, availablePrev ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
3657
3710
|
size: size,
|
|
3711
|
+
onMouseDown: preventMouseFocus,
|
|
3658
3712
|
onClick: onClickLeftHandler,
|
|
3659
3713
|
onKeyDown: onPrevKeyDownHandler,
|
|
3660
3714
|
tabIndex: 0,
|
|
@@ -3664,9 +3718,12 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3664
3718
|
role: "button"
|
|
3665
3719
|
}, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
3666
3720
|
size: size,
|
|
3667
|
-
|
|
3721
|
+
onMouseDown: preventMouseFocus,
|
|
3722
|
+
"data-testid": "iconprevnoavailable",
|
|
3723
|
+
"aria-hidden": "true"
|
|
3668
3724
|
}, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
3669
3725
|
size: size,
|
|
3726
|
+
onMouseDown: preventMouseFocus,
|
|
3670
3727
|
onClick: onClickRightHandler,
|
|
3671
3728
|
onKeyDown: onNextKeyDownHandler,
|
|
3672
3729
|
tabIndex: 0,
|
|
@@ -3676,9 +3733,12 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3676
3733
|
role: "button"
|
|
3677
3734
|
}, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
3678
3735
|
size: size,
|
|
3679
|
-
|
|
3736
|
+
onMouseDown: preventMouseFocus,
|
|
3737
|
+
"data-testid": "iconnextnoavailable",
|
|
3738
|
+
"aria-hidden": "true"
|
|
3680
3739
|
}, renderNextIcon())), showFullscreen && !isMobile && !isTablet && (/*#__PURE__*/React__default.createElement(FullscreenIconWrapper, {
|
|
3681
3740
|
size: size,
|
|
3741
|
+
onMouseDown: preventMouseFocus,
|
|
3682
3742
|
onClick: onClickFullscreenHandler,
|
|
3683
3743
|
onKeyDown: onFullscreenKeyDownHandler,
|
|
3684
3744
|
tabIndex: 0,
|
|
@@ -3689,8 +3749,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3689
3749
|
}, renderFullscreenIcon())));
|
|
3690
3750
|
};
|
|
3691
3751
|
|
|
3692
|
-
var _templateObject$
|
|
3693
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$
|
|
3752
|
+
var _templateObject$g;
|
|
3753
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3694
3754
|
var fillColor = _ref.fillColor;
|
|
3695
3755
|
return fillColor;
|
|
3696
3756
|
});
|
|
@@ -3715,9 +3775,9 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3715
3775
|
})));
|
|
3716
3776
|
};
|
|
3717
3777
|
|
|
3718
|
-
var _templateObject$
|
|
3719
|
-
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
3720
|
-
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3778
|
+
var _templateObject$h, _templateObject2$a;
|
|
3779
|
+
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3780
|
+
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--color-base-light-grey);\n"])));
|
|
3721
3781
|
|
|
3722
3782
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
3723
3783
|
var _ref$fullWidth = _ref.fullWidth,
|
|
@@ -3738,8 +3798,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3738
3798
|
}, /*#__PURE__*/React__default.createElement(Splitter, null))));
|
|
3739
3799
|
};
|
|
3740
3800
|
|
|
3741
|
-
var _templateObject$
|
|
3742
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3801
|
+
var _templateObject$i;
|
|
3802
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$i || (_templateObject$i = /*#__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);
|
|
3743
3803
|
|
|
3744
3804
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3745
3805
|
var imageSource = _ref.imageSource,
|
|
@@ -3766,10 +3826,10 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3766
3826
|
}) : children));
|
|
3767
3827
|
};
|
|
3768
3828
|
|
|
3769
|
-
var _templateObject$
|
|
3770
|
-
var SponsorshipWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3771
|
-
var SponsorshipLinkText = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3772
|
-
var SponsorshipLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
3829
|
+
var _templateObject$j, _templateObject2$b, _templateObject3$6, _templateObject4$4;
|
|
3830
|
+
var SponsorshipWrapper = /*#__PURE__*/styled__default.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n position: relative;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3831
|
+
var SponsorshipLinkText = /*#__PURE__*/styled__default.span(_templateObject2$b || (_templateObject2$b = /*#__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"])));
|
|
3832
|
+
var SponsorshipLink = /*#__PURE__*/styled__default.a(_templateObject3$6 || (_templateObject3$6 = /*#__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);
|
|
3773
3833
|
var SponsorshipStyledIframe = /*#__PURE__*/styled__default.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);
|
|
3774
3834
|
|
|
3775
3835
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3804,8 +3864,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3804
3864
|
}));
|
|
3805
3865
|
};
|
|
3806
3866
|
|
|
3807
|
-
var _templateObject$
|
|
3808
|
-
var TabText = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3867
|
+
var _templateObject$k, _templateObject2$c;
|
|
3868
|
+
var TabText = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObject$k = /*#__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) {
|
|
3809
3869
|
var color = _ref.color;
|
|
3810
3870
|
return color ? "var(--color-" + color + ")" : "var(--color-primary-black)";
|
|
3811
3871
|
}, function (props) {
|
|
@@ -3816,7 +3876,7 @@ var TabText = /*#__PURE__*/styled__default.a(_templateObject$j || (_templateObje
|
|
|
3816
3876
|
}
|
|
3817
3877
|
return "";
|
|
3818
3878
|
}, devices.mobileAndTablet);
|
|
3819
|
-
var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3879
|
+
var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$c || (_templateObject2$c = /*#__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) {
|
|
3820
3880
|
if (props.withIcon === 'left') {
|
|
3821
3881
|
return "\n flex-direction: row-reverse;\n svg {\n margin-right: 6px;\n }";
|
|
3822
3882
|
}
|
|
@@ -3901,8 +3961,8 @@ var Tab = function Tab(_ref) {
|
|
|
3901
3961
|
}));
|
|
3902
3962
|
};
|
|
3903
3963
|
|
|
3904
|
-
var _templateObject$
|
|
3905
|
-
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3964
|
+
var _templateObject$l, _templateObject2$d;
|
|
3965
|
+
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templateObject$l = /*#__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) {
|
|
3906
3966
|
var iconName = _ref.iconName;
|
|
3907
3967
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px) 0' : 'var(--harmonic-text-link-underline-offset) 0';
|
|
3908
3968
|
}, function (_ref2) {
|
|
@@ -3929,7 +3989,7 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$k || (_templ
|
|
|
3929
3989
|
var hoverColor = _ref7.hoverColor;
|
|
3930
3990
|
return hoverColor;
|
|
3931
3991
|
});
|
|
3932
|
-
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3992
|
+
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
|
|
3933
3993
|
|
|
3934
3994
|
var _excluded$9 = ["children", "iconName", "iconDirection", "color", "hoverColor", "className"];
|
|
3935
3995
|
var TabLink = function TabLink(_ref) {
|
|
@@ -3957,19 +4017,19 @@ var TabLink = function TabLink(_ref) {
|
|
|
3957
4017
|
}))) : null, children);
|
|
3958
4018
|
};
|
|
3959
4019
|
|
|
3960
|
-
var _templateObject$
|
|
3961
|
-
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4020
|
+
var _templateObject$m, _templateObject2$e, _templateObject3$7, _templateObject4$5;
|
|
4021
|
+
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3962
4022
|
var width = _ref.width;
|
|
3963
4023
|
return width ? width + "px;" : '100%;';
|
|
3964
4024
|
}, function (_ref2) {
|
|
3965
4025
|
var height = _ref2.height;
|
|
3966
4026
|
return height + "px;";
|
|
3967
4027
|
});
|
|
3968
|
-
var TextAreaLabel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4028
|
+
var TextAreaLabel = /*#__PURE__*/styled__default.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 0 15px;\n ", ";\n"])), function (_ref3) {
|
|
3969
4029
|
var darkMode = _ref3.darkMode;
|
|
3970
4030
|
return darkMode ? 'color: var(--base-color-white)' : '';
|
|
3971
4031
|
});
|
|
3972
|
-
var TextAreaBox = /*#__PURE__*/styled__default.textarea(_templateObject3$
|
|
4032
|
+
var TextAreaBox = /*#__PURE__*/styled__default.textarea(_templateObject3$7 || (_templateObject3$7 = /*#__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) {
|
|
3973
4033
|
var error = _ref4.error;
|
|
3974
4034
|
return error ? 'var(--base-color-errorstate)' : 'var(--base-color-light-grey)';
|
|
3975
4035
|
}, function (_ref5) {
|
|
@@ -4080,14 +4140,14 @@ var TextArea = function TextArea(_ref) {
|
|
|
4080
4140
|
}, error)))));
|
|
4081
4141
|
};
|
|
4082
4142
|
|
|
4083
|
-
var _templateObject$
|
|
4084
|
-
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4085
|
-
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4143
|
+
var _templateObject$n, _templateObject2$f, _templateObject3$8, _templateObject4$6, _templateObject5$3, _templateObject6$1, _templateObject7;
|
|
4144
|
+
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4145
|
+
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
4086
4146
|
var width = _ref.width;
|
|
4087
4147
|
if (!width) return 'none';
|
|
4088
4148
|
return width + "px";
|
|
4089
4149
|
});
|
|
4090
|
-
var Input = /*#__PURE__*/styled__default.input(_templateObject3$
|
|
4150
|
+
var Input = /*#__PURE__*/styled__default.input(_templateObject3$8 || (_templateObject3$8 = /*#__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) {
|
|
4091
4151
|
var isPasswordField = _ref2.isPasswordField;
|
|
4092
4152
|
if (isPasswordField) return "80px";
|
|
4093
4153
|
return "20px";
|
|
@@ -4214,9 +4274,9 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
|
|
|
4214
4274
|
};
|
|
4215
4275
|
var TextField = /*#__PURE__*/React.forwardRef(TextFieldComponent);
|
|
4216
4276
|
|
|
4217
|
-
var _templateObject$
|
|
4218
|
-
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4219
|
-
var textStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
4277
|
+
var _templateObject$o, _templateObject2$g, _templateObject3$9, _templateObject4$7, _templateObject5$4;
|
|
4278
|
+
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4279
|
+
var textStyles = /*#__PURE__*/styled.css(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
|
|
4220
4280
|
var theme = _ref.theme;
|
|
4221
4281
|
return theme.fonts.desktop.weights.body[1];
|
|
4222
4282
|
}, function (_ref2) {
|
|
@@ -4226,7 +4286,7 @@ var textStyles = /*#__PURE__*/styled.css(_templateObject2$f || (_templateObject2
|
|
|
4226
4286
|
var theme = _ref3.theme;
|
|
4227
4287
|
return theme.spacing[7];
|
|
4228
4288
|
});
|
|
4229
|
-
var Input$1 = /*#__PURE__*/styled__default.input(_templateObject3$
|
|
4289
|
+
var Input$1 = /*#__PURE__*/styled__default.input(_templateObject3$9 || (_templateObject3$9 = /*#__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) {
|
|
4230
4290
|
var width = _ref4.width;
|
|
4231
4291
|
return width ? width + "px" : '196px';
|
|
4232
4292
|
}, function (_ref5) {
|
|
@@ -4291,15 +4351,15 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4291
4351
|
}, error)) : null);
|
|
4292
4352
|
};
|
|
4293
4353
|
|
|
4294
|
-
var _templateObject$
|
|
4295
|
-
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
4354
|
+
var _templateObject$p, _templateObject2$h;
|
|
4355
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_templateObject$p = /*#__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) {
|
|
4296
4356
|
var iconName = _ref.iconName;
|
|
4297
4357
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
|
|
4298
4358
|
}, function (_ref2) {
|
|
4299
4359
|
var color = _ref2.color;
|
|
4300
4360
|
return color;
|
|
4301
4361
|
}, devices.mobile);
|
|
4302
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
4362
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
4303
4363
|
|
|
4304
4364
|
var _excluded$d = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
4305
4365
|
var TextLink = function TextLink(_ref) {
|
|
@@ -4330,12 +4390,12 @@ var TextLogoProduct;
|
|
|
4330
4390
|
TextLogoProduct["Cinema"] = "CINEMA";
|
|
4331
4391
|
})(TextLogoProduct || (TextLogoProduct = {}));
|
|
4332
4392
|
|
|
4333
|
-
var _templateObject$
|
|
4334
|
-
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4393
|
+
var _templateObject$q, _templateObject2$i, _templateObject3$a, _templateObject4$8;
|
|
4394
|
+
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4335
4395
|
var dark = _ref.dark;
|
|
4336
4396
|
return dark ? 'white' : 'errorstate';
|
|
4337
4397
|
});
|
|
4338
|
-
var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$
|
|
4398
|
+
var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$i || (_templateObject2$i = /*#__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) {
|
|
4339
4399
|
var dark = _ref2.dark,
|
|
4340
4400
|
disabled = _ref2.disabled;
|
|
4341
4401
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -4344,7 +4404,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$h || (_
|
|
|
4344
4404
|
var disabled = _ref3.disabled;
|
|
4345
4405
|
return disabled ? 'not-allowed' : 'pointer';
|
|
4346
4406
|
}, devices.mobileAndTablet);
|
|
4347
|
-
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$
|
|
4407
|
+
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$a || (_templateObject3$a = /*#__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) {
|
|
4348
4408
|
var dark = _ref4.dark,
|
|
4349
4409
|
disabled = _ref4.disabled,
|
|
4350
4410
|
error = _ref4.error;
|
|
@@ -4451,9 +4511,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
4451
4511
|
}, error))));
|
|
4452
4512
|
};
|
|
4453
4513
|
|
|
4454
|
-
var _templateObject$
|
|
4455
|
-
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4456
|
-
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4514
|
+
var _templateObject$r, _templateObject2$j, _templateObject3$b, _templateObject4$9, _templateObject5$5, _templateObject6$2;
|
|
4515
|
+
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4516
|
+
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templateObject2$j = /*#__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) {
|
|
4457
4517
|
var error = _ref.error,
|
|
4458
4518
|
darkMode = _ref.darkMode,
|
|
4459
4519
|
disabled = _ref.disabled;
|
|
@@ -4476,7 +4536,7 @@ var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templat
|
|
|
4476
4536
|
if (blackBox) return 'var(--base-color-white)';
|
|
4477
4537
|
return ' var(--base-color-black)';
|
|
4478
4538
|
});
|
|
4479
|
-
var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$
|
|
4539
|
+
var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$b || (_templateObject3$b = /*#__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) {
|
|
4480
4540
|
var blackBox = _ref4.blackBox,
|
|
4481
4541
|
darkMode = _ref4.darkMode;
|
|
4482
4542
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -4562,16 +4622,16 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
|
|
|
4562
4622
|
};
|
|
4563
4623
|
var Tickbox2 = /*#__PURE__*/React.forwardRef(Tickbox2Component);
|
|
4564
4624
|
|
|
4565
|
-
var _templateObject$
|
|
4566
|
-
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4625
|
+
var _templateObject$s, _templateObject2$k, _templateObject3$c, _templateObject4$a, _templateObject5$6, _templateObject6$3, _templateObject7$1, _templateObject8;
|
|
4626
|
+
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-", ");\n"])), function (_ref) {
|
|
4567
4627
|
var color = _ref.color;
|
|
4568
4628
|
return color;
|
|
4569
4629
|
});
|
|
4570
|
-
var Line = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4630
|
+
var Line = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__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) {
|
|
4571
4631
|
var color = _ref2.color;
|
|
4572
4632
|
return color;
|
|
4573
4633
|
}, devices.mobileAndTablet);
|
|
4574
|
-
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4634
|
+
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4575
4635
|
var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
4576
4636
|
var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
4577
4637
|
var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -4672,8 +4732,8 @@ var Timer = function Timer(_ref) {
|
|
|
4672
4732
|
}));
|
|
4673
4733
|
};
|
|
4674
4734
|
|
|
4675
|
-
var _templateObject$
|
|
4676
|
-
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
4735
|
+
var _templateObject$t;
|
|
4736
|
+
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$t || (_templateObject$t = /*#__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"])));
|
|
4677
4737
|
|
|
4678
4738
|
var TypeTags = function TypeTags(_ref) {
|
|
4679
4739
|
var list = _ref.list;
|
|
@@ -4686,10 +4746,10 @@ var TypeTags = function TypeTags(_ref) {
|
|
|
4686
4746
|
}));
|
|
4687
4747
|
};
|
|
4688
4748
|
|
|
4689
|
-
var _templateObject$
|
|
4690
|
-
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$
|
|
4691
|
-
var VideoFullscreenButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
4692
|
-
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4749
|
+
var _templateObject$u, _templateObject2$l, _templateObject3$d, _templateObject4$b, _templateObject5$7, _templateObject6$4, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject0;
|
|
4750
|
+
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$u || (_templateObject$u = /*#__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"])));
|
|
4751
|
+
var VideoFullscreenButton = /*#__PURE__*/styled__default.button(_templateObject2$l || (_templateObject2$l = /*#__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"])));
|
|
4752
|
+
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
4693
4753
|
var VideoControlsInnerWrapper = /*#__PURE__*/styled__default.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"])));
|
|
4694
4754
|
var LeftWrapper = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4695
4755
|
var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
@@ -4876,13 +4936,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4876
4936
|
}))));
|
|
4877
4937
|
};
|
|
4878
4938
|
|
|
4879
|
-
var _templateObject$
|
|
4880
|
-
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4881
|
-
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4939
|
+
var _templateObject$v, _templateObject2$m, _templateObject3$e, _templateObject4$c, _templateObject5$8;
|
|
4940
|
+
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
4941
|
+
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
4882
4942
|
var darkMode = _ref.darkMode;
|
|
4883
4943
|
return darkMode ? 'white' : 'errorstate';
|
|
4884
4944
|
});
|
|
4885
|
-
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4945
|
+
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$e || (_templateObject3$e = /*#__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) {
|
|
4886
4946
|
var darkMode = _ref2.darkMode,
|
|
4887
4947
|
disabled = _ref2.disabled,
|
|
4888
4948
|
error = _ref2.error;
|
|
@@ -5086,9 +5146,9 @@ var Component = function Component(_ref) {
|
|
|
5086
5146
|
}, error))));
|
|
5087
5147
|
};
|
|
5088
5148
|
|
|
5089
|
-
var _templateObject$
|
|
5090
|
-
var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5091
|
-
var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
5149
|
+
var _templateObject$w, _templateObject2$n;
|
|
5150
|
+
var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
|
|
5151
|
+
var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject2$n || (_templateObject2$n = /*#__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"])));
|
|
5092
5152
|
|
|
5093
5153
|
var SocialLinks = function SocialLinks(_ref) {
|
|
5094
5154
|
var items = _ref.items;
|
|
@@ -5112,16 +5172,16 @@ var SocialLinks = function SocialLinks(_ref) {
|
|
|
5112
5172
|
}));
|
|
5113
5173
|
};
|
|
5114
5174
|
|
|
5115
|
-
var _templateObject$
|
|
5116
|
-
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5175
|
+
var _templateObject$x, _templateObject2$o, _templateObject3$f, _templateObject4$d, _templateObject5$9, _templateObject6$5, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
5176
|
+
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__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) {
|
|
5117
5177
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5118
5178
|
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 ";
|
|
5119
5179
|
});
|
|
5120
|
-
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5180
|
+
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__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) {
|
|
5121
5181
|
var isMobile = _ref2.isMobile;
|
|
5122
5182
|
return isMobile ? zIndexes.overlay : zIndexes.searchOverlay;
|
|
5123
5183
|
}, devices.mobileAndTablet);
|
|
5124
|
-
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
5184
|
+
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$f || (_templateObject3$f = /*#__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);
|
|
5125
5185
|
var SearchBackground = /*#__PURE__*/styled__default.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) {
|
|
5126
5186
|
var visible = _ref3.visible;
|
|
5127
5187
|
return visible ? 'visible' : 'hidden';
|
|
@@ -5156,11 +5216,11 @@ var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObjec
|
|
|
5156
5216
|
var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
5157
5217
|
var NavTopContainerMobile = /*#__PURE__*/styled__default.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);
|
|
5158
5218
|
|
|
5159
|
-
var _templateObject$
|
|
5160
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5219
|
+
var _templateObject$y;
|
|
5220
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__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);
|
|
5161
5221
|
|
|
5162
|
-
var _templateObject$
|
|
5163
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5222
|
+
var _templateObject$z, _templateObject2$p, _templateObject3$g, _templateObject4$e, _templateObject5$a, _templateObject6$6;
|
|
5223
|
+
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__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) {
|
|
5164
5224
|
var selected = _ref.selected;
|
|
5165
5225
|
if (selected) {
|
|
5166
5226
|
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 ";
|
|
@@ -5173,8 +5233,8 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$y || (_te
|
|
|
5173
5233
|
}
|
|
5174
5234
|
return '';
|
|
5175
5235
|
});
|
|
5176
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5177
|
-
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5236
|
+
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5237
|
+
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$g || (_templateObject3$g = /*#__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"])));
|
|
5178
5238
|
var BasketInfo = /*#__PURE__*/styled__default.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);
|
|
5179
5239
|
var BasketNum = /*#__PURE__*/styled__default.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"])));
|
|
5180
5240
|
var BasketText = /*#__PURE__*/styled__default.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"])));
|
|
@@ -5321,15 +5381,15 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5321
5381
|
}, expiryTime ? basketText : text)) : ''));
|
|
5322
5382
|
};
|
|
5323
5383
|
|
|
5324
|
-
var _templateObject$
|
|
5325
|
-
var SearchContainer = /*#__PURE__*/styled__default.button(_templateObject$
|
|
5384
|
+
var _templateObject$A, _templateObject2$q;
|
|
5385
|
+
var SearchContainer = /*#__PURE__*/styled__default.button(_templateObject$A || (_templateObject$A = /*#__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) {
|
|
5326
5386
|
var selected = _ref.selected;
|
|
5327
5387
|
if (selected) {
|
|
5328
5388
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
5329
5389
|
}
|
|
5330
5390
|
return '';
|
|
5331
5391
|
});
|
|
5332
|
-
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5392
|
+
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5333
5393
|
|
|
5334
5394
|
var Search$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
5335
5395
|
var _ref$selected = _ref.selected,
|
|
@@ -5589,15 +5649,15 @@ var NavTop = function NavTop(_ref) {
|
|
|
5589
5649
|
}));
|
|
5590
5650
|
};
|
|
5591
5651
|
|
|
5592
|
-
var _templateObject$
|
|
5593
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5594
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5652
|
+
var _templateObject$B, _templateObject2$r, _templateObject3$h, _templateObject4$f;
|
|
5653
|
+
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
5654
|
+
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__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) {
|
|
5595
5655
|
if (props.showMenu) {
|
|
5596
5656
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
5597
5657
|
}
|
|
5598
5658
|
return "display: none;";
|
|
5599
5659
|
});
|
|
5600
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5660
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$h || (_templateObject3$h = /*#__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);
|
|
5601
5661
|
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 0;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5602
5662
|
|
|
5603
5663
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
@@ -5724,10 +5784,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
5724
5784
|
}, "Menu"))))));
|
|
5725
5785
|
};
|
|
5726
5786
|
|
|
5727
|
-
var _templateObject$
|
|
5728
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5729
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5730
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
5787
|
+
var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject5$b, _templateObject6$7, _templateObject7$4;
|
|
5788
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$C || (_templateObject$C = /*#__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);
|
|
5789
|
+
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
5790
|
+
var SvgContainerClose = /*#__PURE__*/styled__default.button(_templateObject3$i || (_templateObject3$i = /*#__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"])));
|
|
5731
5791
|
var InputContainer = /*#__PURE__*/styled__default.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);
|
|
5732
5792
|
var TextLinkWrapper$1 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
5733
5793
|
var SearchArrowContainer = /*#__PURE__*/styled__default.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"])));
|
|
@@ -5868,19 +5928,19 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5868
5928
|
})));
|
|
5869
5929
|
};
|
|
5870
5930
|
|
|
5871
|
-
var _templateObject$
|
|
5872
|
-
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5931
|
+
var _templateObject$D, _templateObject2$t, _templateObject3$j, _templateObject4$g, _templateObject5$c, _templateObject6$8, _templateObject7$5;
|
|
5932
|
+
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n border-top: 2px solid var(--color-base-light-grey);\n border-bottom: ", ";\n"])), function (_ref) {
|
|
5873
5933
|
var showLine = _ref.showLine;
|
|
5874
5934
|
return showLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5875
5935
|
});
|
|
5876
|
-
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5936
|
+
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__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) {
|
|
5877
5937
|
var isVisible = _ref2.isVisible;
|
|
5878
5938
|
return isVisible ? 1 : 0;
|
|
5879
5939
|
}, function (_ref3) {
|
|
5880
5940
|
var isVisible = _ref3.isVisible;
|
|
5881
5941
|
return isVisible ? 'auto' : 'none';
|
|
5882
5942
|
}, devices.mobile);
|
|
5883
|
-
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5943
|
+
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__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) {
|
|
5884
5944
|
var hasChildren = _ref4.hasChildren;
|
|
5885
5945
|
return hasChildren ? 'pointer' : 'default';
|
|
5886
5946
|
}, function (_ref5) {
|
|
@@ -5893,13 +5953,31 @@ var ContentContainer = /*#__PURE__*/styled__default(ExtendedBodyCopyHarmonic).wi
|
|
|
5893
5953
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5894
5954
|
return prop !== 'textHeight';
|
|
5895
5955
|
}
|
|
5896
|
-
})(_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) {
|
|
5956
|
+
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n overflow: ", ";\n margin-bottom: ", ";\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) {
|
|
5897
5957
|
var textHeight = _ref6.textHeight;
|
|
5898
5958
|
return textHeight;
|
|
5959
|
+
}, function (_ref7) {
|
|
5960
|
+
var textHeight = _ref7.textHeight;
|
|
5961
|
+
return textHeight === '0px' ? 'hidden' : 'visible';
|
|
5962
|
+
}, function (_ref8) {
|
|
5963
|
+
var textHeight = _ref8.textHeight;
|
|
5964
|
+
return textHeight === '0px' ? '0px' : '12px';
|
|
5899
5965
|
}, devices.mobile);
|
|
5900
5966
|
var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
5901
5967
|
|
|
5902
5968
|
/* eslint-disable react/no-unstable-nested-components */
|
|
5969
|
+
/** In-flow height only so absolutely positioned UI (e.g. react-select menu) does not inflate scrollHeight. */
|
|
5970
|
+
function getPanelContentHeight(panel) {
|
|
5971
|
+
var inner = panel.firstElementChild;
|
|
5972
|
+
if (!inner || !(inner instanceof HTMLElement)) {
|
|
5973
|
+
return panel.scrollHeight;
|
|
5974
|
+
}
|
|
5975
|
+
var innerStyle = window.getComputedStyle(inner);
|
|
5976
|
+
var marginY = (parseFloat(innerStyle.marginTop) || 0) + (parseFloat(innerStyle.marginBottom) || 0);
|
|
5977
|
+
var panelStyle = window.getComputedStyle(panel);
|
|
5978
|
+
var paddingY = (parseFloat(panelStyle.paddingTop) || 0) + (parseFloat(panelStyle.paddingBottom) || 0);
|
|
5979
|
+
return inner.offsetHeight + marginY + paddingY;
|
|
5980
|
+
}
|
|
5903
5981
|
var Accordion = function Accordion(_ref) {
|
|
5904
5982
|
var _expandedStateIcon$ic, _collapsedStateIcon$i;
|
|
5905
5983
|
var _ref$title = _ref.title,
|
|
@@ -5936,21 +6014,69 @@ var Accordion = function Accordion(_ref) {
|
|
|
5936
6014
|
var content = React.useRef(null);
|
|
5937
6015
|
var timeoutRef = React.useRef(null);
|
|
5938
6016
|
var rafRef = React.useRef(null);
|
|
6017
|
+
var resizeObserverRef = React.useRef(null);
|
|
6018
|
+
var intervalRef = React.useRef(null);
|
|
5939
6019
|
React.useEffect(function () {
|
|
5940
|
-
if (content
|
|
5941
|
-
setTextHeight(content.current
|
|
6020
|
+
if (content.current && initOpen) {
|
|
6021
|
+
setTextHeight(getPanelContentHeight(content.current) + "px");
|
|
5942
6022
|
}
|
|
5943
|
-
}, [
|
|
6023
|
+
}, [initOpen]);
|
|
5944
6024
|
React.useEffect(function () {
|
|
5945
|
-
|
|
5946
|
-
|
|
5947
|
-
|
|
5948
|
-
|
|
5949
|
-
|
|
5950
|
-
|
|
6025
|
+
var cleanup = function cleanup() {
|
|
6026
|
+
return undefined;
|
|
6027
|
+
};
|
|
6028
|
+
var el = content.current;
|
|
6029
|
+
if (!el) return cleanup;
|
|
6030
|
+
if (!openAccordion) {
|
|
5951
6031
|
setTextHeight('0px');
|
|
6032
|
+
if (resizeObserverRef.current) {
|
|
6033
|
+
resizeObserverRef.current.disconnect();
|
|
6034
|
+
resizeObserverRef.current = null;
|
|
6035
|
+
}
|
|
6036
|
+
if (intervalRef.current) {
|
|
6037
|
+
window.clearInterval(intervalRef.current);
|
|
6038
|
+
intervalRef.current = null;
|
|
6039
|
+
}
|
|
6040
|
+
if (rafRef.current) {
|
|
6041
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6042
|
+
rafRef.current = null;
|
|
6043
|
+
}
|
|
6044
|
+
return cleanup;
|
|
6045
|
+
}
|
|
6046
|
+
var updateHeight = function updateHeight() {
|
|
6047
|
+
setTextHeight(getPanelContentHeight(el) + "px");
|
|
6048
|
+
};
|
|
6049
|
+
rafRef.current = window.requestAnimationFrame(updateHeight);
|
|
6050
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
6051
|
+
var ro = new ResizeObserver(updateHeight);
|
|
6052
|
+
ro.observe(el);
|
|
6053
|
+
resizeObserverRef.current = ro;
|
|
6054
|
+
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6055
|
+
return function () {
|
|
6056
|
+
ro.disconnect();
|
|
6057
|
+
resizeObserverRef.current = null;
|
|
6058
|
+
if (intervalRef.current) {
|
|
6059
|
+
window.clearInterval(intervalRef.current);
|
|
6060
|
+
intervalRef.current = null;
|
|
6061
|
+
}
|
|
6062
|
+
if (rafRef.current) {
|
|
6063
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6064
|
+
rafRef.current = null;
|
|
6065
|
+
}
|
|
6066
|
+
};
|
|
5952
6067
|
}
|
|
5953
|
-
|
|
6068
|
+
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6069
|
+
return function () {
|
|
6070
|
+
if (intervalRef.current) {
|
|
6071
|
+
window.clearInterval(intervalRef.current);
|
|
6072
|
+
intervalRef.current = null;
|
|
6073
|
+
}
|
|
6074
|
+
if (rafRef.current) {
|
|
6075
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6076
|
+
rafRef.current = null;
|
|
6077
|
+
}
|
|
6078
|
+
};
|
|
6079
|
+
}, [openAccordion, childrenVisibility, children]);
|
|
5954
6080
|
React.useEffect(function () {
|
|
5955
6081
|
return function () {
|
|
5956
6082
|
if (timeoutRef.current) {
|
|
@@ -5961,6 +6087,14 @@ var Accordion = function Accordion(_ref) {
|
|
|
5961
6087
|
window.cancelAnimationFrame(rafRef.current);
|
|
5962
6088
|
rafRef.current = null;
|
|
5963
6089
|
}
|
|
6090
|
+
if (resizeObserverRef.current) {
|
|
6091
|
+
resizeObserverRef.current.disconnect();
|
|
6092
|
+
resizeObserverRef.current = null;
|
|
6093
|
+
}
|
|
6094
|
+
if (intervalRef.current) {
|
|
6095
|
+
window.clearInterval(intervalRef.current);
|
|
6096
|
+
intervalRef.current = null;
|
|
6097
|
+
}
|
|
5964
6098
|
};
|
|
5965
6099
|
}, []);
|
|
5966
6100
|
var toggleAccordion = function toggleAccordion() {
|
|
@@ -6014,8 +6148,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6014
6148
|
}, children)));
|
|
6015
6149
|
};
|
|
6016
6150
|
|
|
6017
|
-
var _templateObject$
|
|
6018
|
-
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6151
|
+
var _templateObject$E;
|
|
6152
|
+
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6019
6153
|
|
|
6020
6154
|
var Accordions = function Accordions(_ref) {
|
|
6021
6155
|
var _ref$items = _ref.items,
|
|
@@ -6037,16 +6171,16 @@ var Accordions = function Accordions(_ref) {
|
|
|
6037
6171
|
}));
|
|
6038
6172
|
};
|
|
6039
6173
|
|
|
6040
|
-
var _templateObject$
|
|
6041
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6042
|
-
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6174
|
+
var _templateObject$F, _templateObject2$u, _templateObject3$k, _templateObject4$h, _templateObject5$d;
|
|
6175
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$F || (_templateObject$F = /*#__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);
|
|
6176
|
+
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__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) {
|
|
6043
6177
|
var isClickable = _ref.isClickable;
|
|
6044
6178
|
return isClickable ? 'pointer' : 'default';
|
|
6045
6179
|
}, function (_ref2) {
|
|
6046
6180
|
var isClickable = _ref2.isClickable;
|
|
6047
6181
|
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 ";
|
|
6048
6182
|
});
|
|
6049
|
-
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6183
|
+
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-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"])));
|
|
6050
6184
|
var OverlineWrapper = /*#__PURE__*/styled__default(HarmonicOverline)(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
|
|
6051
6185
|
var BannerContentWrapper = /*#__PURE__*/styled__default(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) {
|
|
6052
6186
|
var variant = _ref3.variant;
|
|
@@ -6140,8 +6274,8 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
|
|
|
6140
6274
|
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
6141
6275
|
};
|
|
6142
6276
|
|
|
6143
|
-
var _templateObject$
|
|
6144
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
6277
|
+
var _templateObject$G;
|
|
6278
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$G || (_templateObject$G = /*#__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);
|
|
6145
6279
|
|
|
6146
6280
|
var _excluded$f = ["children", "className"];
|
|
6147
6281
|
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
@@ -6154,22 +6288,22 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
6154
6288
|
}), children);
|
|
6155
6289
|
};
|
|
6156
6290
|
|
|
6157
|
-
var _templateObject$
|
|
6291
|
+
var _templateObject$H, _templateObject2$v, _templateObject3$l, _templateObject4$i, _templateObject5$e, _templateObject6$9, _templateObject7$6, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1;
|
|
6158
6292
|
var LENGTH_LARGE_TEXT = 28;
|
|
6159
6293
|
var LENGTH_SMALL_TEXT = 19;
|
|
6160
6294
|
var LENGTH_TEXT_TABLET = 10;
|
|
6161
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6295
|
+
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
6162
6296
|
var isCardClickable = _ref.isCardClickable;
|
|
6163
6297
|
return isCardClickable ? 'pointer' : 'default';
|
|
6164
6298
|
}, function (_ref2) {
|
|
6165
6299
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
6166
6300
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
6167
6301
|
});
|
|
6168
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6302
|
+
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$v || (_templateObject2$v = /*#__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) {
|
|
6169
6303
|
var lineColor = _ref3.lineColor;
|
|
6170
6304
|
return lineColor ? "var(--color-" + lineColor + ")" : 'var(--color-primary-background)';
|
|
6171
6305
|
}, zIndexes.contentOverlay);
|
|
6172
|
-
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6306
|
+
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
|
|
6173
6307
|
var ContentContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
6174
6308
|
var fullWidth = _ref4.fullWidth;
|
|
6175
6309
|
return fullWidth ? '0' : '20px';
|
|
@@ -6450,9 +6584,9 @@ var Card = function Card(_ref) {
|
|
|
6450
6584
|
}, restSecondButton), tertiaryButtonTextTruncate)))));
|
|
6451
6585
|
};
|
|
6452
6586
|
|
|
6453
|
-
var _templateObject$
|
|
6454
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
6455
|
-
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
6587
|
+
var _templateObject$I, _templateObject2$w;
|
|
6588
|
+
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$I || (_templateObject$I = /*#__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);
|
|
6589
|
+
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
6456
6590
|
|
|
6457
6591
|
var Cards = function Cards(_ref) {
|
|
6458
6592
|
var cards = _ref.cards,
|
|
@@ -6494,38 +6628,41 @@ var Cards = function Cards(_ref) {
|
|
|
6494
6628
|
}));
|
|
6495
6629
|
};
|
|
6496
6630
|
|
|
6497
|
-
var _templateObject$
|
|
6498
|
-
var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6499
|
-
var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6500
|
-
var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6631
|
+
var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
|
|
6632
|
+
var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__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);
|
|
6633
|
+
var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6634
|
+
var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
|
|
6501
6635
|
var RotatorButtonsWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6502
|
-
var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x:
|
|
6636
|
+
var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: hidden;\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 overflow-x: scroll;\n }\n"])), devices.mobile);
|
|
6503
6637
|
var ActionButtons = /*#__PURE__*/styled__default.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);
|
|
6504
6638
|
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n margin-block-start: 2px;\n margin-inline: 2px;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n\n :focus-visible {\n outline: none;\n\n & > div:first-child {\n outline: 2px solid var(--color-base-black);\n }\n }\n\n @media ", " {\n flex-direction: row;\n gap: 20px;\n margin-block-end: 2px;\n margin-inline-end: unset;\n\n p {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
6505
6639
|
var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n width: 86px;\n height: 86px;\n min-width: 86px;\n border: 4px solid;\n border-color: ", ";\n border-radius: 50%;\n background: var(--color-base-white);\n position: relative;\n box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
|
|
6506
6640
|
var isSelected = _ref.isSelected;
|
|
6507
6641
|
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
6508
6642
|
});
|
|
6509
|
-
var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n\n // This is really specific to the SVG that we have been provided\n // as a fallback person image. I don't think there's a simpler and\n // more general way to handle this, so if we're given a new placeholder\n // image later, we may have to change the scale here\n ", "\n"])), function (_ref2) {
|
|
6510
|
-
var
|
|
6643
|
+
var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n filter: ", ";\n\n // This is really specific to the SVG that we have been provided\n // as a fallback person image. I don't think there's a simpler and\n // more general way to handle this, so if we're given a new placeholder\n // image later, we may have to change the scale here\n ", "\n"])), function (_ref2) {
|
|
6644
|
+
var greyscale = _ref2.greyscale;
|
|
6645
|
+
return greyscale ? 'grayscale(100%)' : 'none';
|
|
6646
|
+
}, function (_ref3) {
|
|
6647
|
+
var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
|
|
6511
6648
|
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6512
6649
|
});
|
|
6513
6650
|
var PersonName = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n\n @media ", " {\n max-width: unset;\n text-align: left;\n font-size: 17px;\n line-height: 24px;\n }\n"])), devices.mobile);
|
|
6514
|
-
var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (
|
|
6515
|
-
var isSelected = _ref3.isSelected;
|
|
6516
|
-
return isSelected ? 'flex' : 'none';
|
|
6517
|
-
}, function (_ref4) {
|
|
6651
|
+
var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (_ref4) {
|
|
6518
6652
|
var isSelected = _ref4.isSelected;
|
|
6519
6653
|
return isSelected ? 'flex' : 'none';
|
|
6654
|
+
}, function (_ref5) {
|
|
6655
|
+
var isSelected = _ref5.isSelected;
|
|
6656
|
+
return isSelected ? 'flex' : 'none';
|
|
6520
6657
|
});
|
|
6521
6658
|
var EmptySelectionTextSpacer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
|
|
6522
6659
|
|
|
6523
6660
|
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";
|
|
6524
6661
|
|
|
6525
|
-
var _templateObject$
|
|
6662
|
+
var _templateObject$K, _templateObject2$y;
|
|
6526
6663
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
6527
|
-
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6528
|
-
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6664
|
+
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
6665
|
+
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
6529
6666
|
var transitioning = _ref.transitioning;
|
|
6530
6667
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
6531
6668
|
}, function (_ref2) {
|
|
@@ -6586,7 +6723,7 @@ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
|
|
|
6586
6723
|
return movedSlides;
|
|
6587
6724
|
};
|
|
6588
6725
|
|
|
6589
|
-
var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
|
|
6726
|
+
var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange", "limitDragToNavigableRange"];
|
|
6590
6727
|
var MAX_CLONES_NUMBER = 6;
|
|
6591
6728
|
var CLICK_DRAG_THRESHOLD = 10;
|
|
6592
6729
|
var getClonesCount = function getClonesCount(infinite, childrenLength) {
|
|
@@ -6611,6 +6748,8 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6611
6748
|
slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
|
|
6612
6749
|
onActiveChange = _ref.onActiveChange,
|
|
6613
6750
|
onOverflowChange = _ref.onOverflowChange,
|
|
6751
|
+
_ref$limitDragToNavig = _ref.limitDragToNavigableRange,
|
|
6752
|
+
limitDragToNavigableRange = _ref$limitDragToNavig === void 0 ? false : _ref$limitDragToNavig,
|
|
6614
6753
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
6615
6754
|
var containerRef = React.useRef(null);
|
|
6616
6755
|
var childRefs = React.useRef([]);
|
|
@@ -6716,6 +6855,39 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6716
6855
|
}, 0);
|
|
6717
6856
|
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
6718
6857
|
};
|
|
6858
|
+
var canScrollRightFromIndex = function canScrollRightFromIndex(index) {
|
|
6859
|
+
if (infinite) return true;
|
|
6860
|
+
if (slideWidths.length === 0 || containerWidth === 0) return false;
|
|
6861
|
+
var totalContentWidth = slideWidths.reduce(function (sum, width) {
|
|
6862
|
+
return sum + width;
|
|
6863
|
+
}, 0);
|
|
6864
|
+
var widthBeforeCurrent = slideWidths.slice(0, index).reduce(function (sum, width) {
|
|
6865
|
+
return sum + width;
|
|
6866
|
+
}, 0);
|
|
6867
|
+
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
6868
|
+
var remainingToRight = totalContentWidth - widthBeforeCurrent - visibleSpace;
|
|
6869
|
+
var visible = getVisibleIndexes(index, slideWidths, containerWidth, slides.length);
|
|
6870
|
+
var lastVisibleIndex = visible.length ? visible[visible.length - 1] : index;
|
|
6871
|
+
var nextIndex = lastVisibleIndex + 1;
|
|
6872
|
+
if (nextIndex >= slideWidths.length) return false;
|
|
6873
|
+
var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
|
|
6874
|
+
if (nextSlideWidth === 0) return false;
|
|
6875
|
+
var EPS = 1; // pixel tolerance
|
|
6876
|
+
// full next slide fits
|
|
6877
|
+
if (remainingToRight + EPS >= nextSlideWidth) return true;
|
|
6878
|
+
return remainingToRight > 0;
|
|
6879
|
+
};
|
|
6880
|
+
var canMoveNext = function canMoveNext() {
|
|
6881
|
+
return canScrollRightFromIndex(currentIndex);
|
|
6882
|
+
};
|
|
6883
|
+
var getMaxNavigableIndex = function getMaxNavigableIndex() {
|
|
6884
|
+
if (infinite) return slides.length - 1;
|
|
6885
|
+
var index = 0;
|
|
6886
|
+
while (index < slides.length - 1 && canScrollRightFromIndex(index)) {
|
|
6887
|
+
index += 1;
|
|
6888
|
+
}
|
|
6889
|
+
return index;
|
|
6890
|
+
};
|
|
6719
6891
|
var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
|
|
6720
6892
|
var delta = currentTranslate.current - getTranslateX();
|
|
6721
6893
|
var direction = delta > 0 ? -1 : 1;
|
|
@@ -6723,7 +6895,8 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6723
6895
|
if (Math.abs(delta) > 20) {
|
|
6724
6896
|
movedSlides = Math.max(1, movedSlides);
|
|
6725
6897
|
var targetIndex = currentIndex + direction * movedSlides;
|
|
6726
|
-
var
|
|
6898
|
+
var maxNavigableIndex = limitDragToNavigableRange ? getMaxNavigableIndex() : slides.length - 1;
|
|
6899
|
+
var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(maxNavigableIndex, targetIndex));
|
|
6727
6900
|
if (!infinite) {
|
|
6728
6901
|
currentTranslate.current = getTranslateForIndex(finalIndex);
|
|
6729
6902
|
setDragTranslateX(null);
|
|
@@ -6738,28 +6911,6 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6738
6911
|
}
|
|
6739
6912
|
setDragTranslateX(null);
|
|
6740
6913
|
};
|
|
6741
|
-
var canMoveNext = function canMoveNext() {
|
|
6742
|
-
if (infinite) return true;
|
|
6743
|
-
if (slideWidths.length === 0 || containerWidth === 0) return false;
|
|
6744
|
-
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
6745
|
-
return acc + w;
|
|
6746
|
-
}, 0);
|
|
6747
|
-
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
|
|
6748
|
-
return acc + w;
|
|
6749
|
-
}, 0);
|
|
6750
|
-
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
6751
|
-
var remainingToRight = totalWidth - widthsBefore - visibleSpace;
|
|
6752
|
-
var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
6753
|
-
var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
|
|
6754
|
-
var nextIndex = lastVisibleIndex + 1;
|
|
6755
|
-
if (nextIndex >= slideWidths.length) return false;
|
|
6756
|
-
var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
|
|
6757
|
-
if (nextSlideWidth === 0) return false;
|
|
6758
|
-
var EPS = 1; // pixel tolerance
|
|
6759
|
-
// full next slide fits
|
|
6760
|
-
if (remainingToRight + EPS >= nextSlideWidth) return true;
|
|
6761
|
-
return remainingToRight > 0;
|
|
6762
|
-
};
|
|
6763
6914
|
var handleTransitionEnd = function handleTransitionEnd() {
|
|
6764
6915
|
setTransitioning(false);
|
|
6765
6916
|
if (!infinite) return;
|
|
@@ -6924,6 +7075,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6924
7075
|
onSelect = _ref.onSelect,
|
|
6925
7076
|
onApply = _ref.onApply,
|
|
6926
7077
|
onClear = _ref.onClear,
|
|
7078
|
+
_ref$greyscale = _ref.greyscale,
|
|
7079
|
+
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
6927
7080
|
_ref$selectedIndices = _ref.selectedIndices,
|
|
6928
7081
|
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
6929
7082
|
var _useViewport = useViewport(),
|
|
@@ -6969,11 +7122,13 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6969
7122
|
};
|
|
6970
7123
|
var onNext = function onNext() {
|
|
6971
7124
|
var _swipeRef$current4;
|
|
6972
|
-
|
|
7125
|
+
if (!availableNext) return;
|
|
7126
|
+
(_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.nextSlide();
|
|
6973
7127
|
};
|
|
6974
7128
|
var onPrev = function onPrev() {
|
|
6975
7129
|
var _swipeRef$current5;
|
|
6976
|
-
|
|
7130
|
+
if (!availablePrev) return;
|
|
7131
|
+
(_swipeRef$current5 = swipeRef.current) == null || _swipeRef$current5.prevSlide();
|
|
6977
7132
|
};
|
|
6978
7133
|
React.useEffect(function () {
|
|
6979
7134
|
var el = castWrapperRef.current;
|
|
@@ -6996,15 +7151,15 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6996
7151
|
};
|
|
6997
7152
|
}, []);
|
|
6998
7153
|
var handleMouseDown = React.useCallback(function (e) {
|
|
6999
|
-
if (!castWrapperRef.current) return;
|
|
7154
|
+
if (!isMobile || !castWrapperRef.current) return;
|
|
7000
7155
|
isDraggingRef.current = true;
|
|
7001
7156
|
hasDraggedRef.current = false;
|
|
7002
7157
|
startXRef.current = e.clientX;
|
|
7003
7158
|
scrollStartRef.current = castWrapperRef.current.scrollLeft;
|
|
7004
7159
|
if (e.target === castWrapperRef.current) e.preventDefault();
|
|
7005
|
-
}, []);
|
|
7160
|
+
}, [isMobile]);
|
|
7006
7161
|
var handleMouseMove = React.useCallback(function (e) {
|
|
7007
|
-
if (!isDraggingRef.current || !castWrapperRef.current) return;
|
|
7162
|
+
if (!isMobile || !isDraggingRef.current || !castWrapperRef.current) return;
|
|
7008
7163
|
var deltaX = e.clientX - startXRef.current;
|
|
7009
7164
|
var threshold = 5;
|
|
7010
7165
|
if (Math.abs(deltaX) > threshold) {
|
|
@@ -7012,17 +7167,19 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7012
7167
|
e.preventDefault();
|
|
7013
7168
|
castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
|
|
7014
7169
|
}
|
|
7015
|
-
}, []);
|
|
7170
|
+
}, [isMobile]);
|
|
7016
7171
|
var handleMouseUp = React.useCallback(function () {
|
|
7172
|
+
if (!isMobile) return;
|
|
7017
7173
|
isDraggingRef.current = false;
|
|
7018
7174
|
setTimeout(function () {
|
|
7019
7175
|
hasDraggedRef.current = false;
|
|
7020
7176
|
}, 0);
|
|
7021
|
-
}, []);
|
|
7177
|
+
}, [isMobile]);
|
|
7022
7178
|
var handleMouseLeave = React.useCallback(function () {
|
|
7179
|
+
if (!isMobile) return;
|
|
7023
7180
|
isDraggingRef.current = false;
|
|
7024
7181
|
hasDraggedRef.current = false;
|
|
7025
|
-
}, []);
|
|
7182
|
+
}, [isMobile]);
|
|
7026
7183
|
var handleClick = React__default.useCallback(function (index, onClick) {
|
|
7027
7184
|
if (hasDraggedRef.current) return;
|
|
7028
7185
|
if (onSelect) onSelect(index);
|
|
@@ -7064,7 +7221,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7064
7221
|
src: personImage,
|
|
7065
7222
|
alt: image ? name : "Placeholder image for " + name,
|
|
7066
7223
|
draggable: false,
|
|
7067
|
-
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7224
|
+
isDefaultPlaceholder: !(!!image || !!placeholderImage),
|
|
7225
|
+
greyscale: greyscale
|
|
7068
7226
|
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7069
7227
|
isSelected: isSelected
|
|
7070
7228
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -7107,7 +7265,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7107
7265
|
onIndexChange: onIndexChangeHandler,
|
|
7108
7266
|
"data-testid": "cast-filter-swipe",
|
|
7109
7267
|
ref: swipeRef,
|
|
7110
|
-
onOverflowChange: handleOverflowChange
|
|
7268
|
+
onOverflowChange: handleOverflowChange,
|
|
7269
|
+
limitDragToNavigableRange: true
|
|
7111
7270
|
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7112
7271
|
size: "medium",
|
|
7113
7272
|
className: "mobile-only"
|
|
@@ -7123,10 +7282,10 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7123
7282
|
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7124
7283
|
};
|
|
7125
7284
|
|
|
7126
|
-
var _templateObject$
|
|
7127
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7128
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7129
|
-
var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7285
|
+
var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
|
|
7286
|
+
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7287
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__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);
|
|
7288
|
+
var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7130
7289
|
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7131
7290
|
var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7132
7291
|
var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
@@ -7181,12 +7340,12 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7181
7340
|
}, addressString)))))))));
|
|
7182
7341
|
};
|
|
7183
7342
|
|
|
7184
|
-
var _templateObject$
|
|
7185
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
7186
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$
|
|
7343
|
+
var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$c;
|
|
7344
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7345
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$A || (_templateObject2$A = /*#__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) {
|
|
7187
7346
|
return props.clickable ? 'pointer' : 'default';
|
|
7188
7347
|
}, devices.mobile);
|
|
7189
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7348
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7190
7349
|
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.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) {
|
|
7191
7350
|
return props.showImage ? 2 : '1 / span 4';
|
|
7192
7351
|
}, devices.mobile);
|
|
@@ -7273,16 +7432,16 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7273
7432
|
}), link.text))));
|
|
7274
7433
|
};
|
|
7275
7434
|
|
|
7276
|
-
var _templateObject$
|
|
7277
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7435
|
+
var _templateObject$N, _templateObject2$B, _templateObject3$p, _templateObject4$m, _templateObject5$i;
|
|
7436
|
+
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__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) {
|
|
7278
7437
|
var imageToLeft = _ref.imageToLeft;
|
|
7279
7438
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7280
7439
|
}, devices.mobile);
|
|
7281
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7440
|
+
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7282
7441
|
var imageToLeft = _ref2.imageToLeft;
|
|
7283
7442
|
return imageToLeft ? 'left' : 'right';
|
|
7284
7443
|
}, devices.mobile);
|
|
7285
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7444
|
+
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7286
7445
|
var imageToLeft = _ref3.imageToLeft;
|
|
7287
7446
|
return imageToLeft ? 'right' : 'left';
|
|
7288
7447
|
}, devices.mobile);
|
|
@@ -7326,10 +7485,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7326
7485
|
})))));
|
|
7327
7486
|
};
|
|
7328
7487
|
|
|
7329
|
-
var _templateObject$
|
|
7330
|
-
var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7331
|
-
var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7332
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$
|
|
7488
|
+
var _templateObject$O, _templateObject2$C, _templateObject3$q;
|
|
7489
|
+
var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__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"])));
|
|
7490
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__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);
|
|
7491
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$q || (_templateObject3$q = /*#__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"])));
|
|
7333
7492
|
|
|
7334
7493
|
var _excluded$j = ["text", "onClick"];
|
|
7335
7494
|
var HotFilters = function HotFilters(_ref) {
|
|
@@ -7393,10 +7552,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7393
7552
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7394
7553
|
};
|
|
7395
7554
|
|
|
7396
|
-
var _templateObject$
|
|
7397
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7398
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
7399
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
7555
|
+
var _templateObject$P, _templateObject2$D, _templateObject3$r, _templateObject4$n;
|
|
7556
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__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);
|
|
7557
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7558
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$r || (_templateObject3$r = /*#__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) {
|
|
7400
7559
|
var variant = _ref.variant,
|
|
7401
7560
|
theme = _ref.theme;
|
|
7402
7561
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7619,13 +7778,13 @@ var Information = function Information(_ref) {
|
|
|
7619
7778
|
})))));
|
|
7620
7779
|
};
|
|
7621
7780
|
|
|
7622
|
-
var _templateObject$
|
|
7623
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
7781
|
+
var _templateObject$Q, _templateObject2$E, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
|
|
7782
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$Q || (_templateObject$Q = /*#__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) {
|
|
7624
7783
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7625
7784
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7626
7785
|
}, devices.mobile);
|
|
7627
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
7628
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7786
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$E || (_templateObject2$E = /*#__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);
|
|
7787
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
7629
7788
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7630
7789
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7631
7790
|
});
|
|
@@ -7715,92 +7874,275 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7715
7874
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7716
7875
|
};
|
|
7717
7876
|
|
|
7718
|
-
var _templateObject$
|
|
7719
|
-
var
|
|
7720
|
-
var
|
|
7721
|
-
var
|
|
7722
|
-
|
|
7723
|
-
|
|
7724
|
-
|
|
7725
|
-
|
|
7726
|
-
var
|
|
7877
|
+
var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
|
|
7878
|
+
var ImpactHeaderWrapper = /*#__PURE__*/styled__default.header(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-black);\n padding: 36px 0;\n\n @media ", " {\n padding: 21px 0;\n }\n"])), devices.mobile);
|
|
7879
|
+
var ImpactTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: grid;\n grid-template-columns: ", ";\n padding: 0 50px;\n\n @media ", " {\n padding: 0 50px;\n }\n\n @media ", " {\n padding: 0 20px;\n grid-template-columns: ", ";\n }\n"])), function (_ref) {
|
|
7880
|
+
var hasButton = _ref.hasButton,
|
|
7881
|
+
sponsorPresent = _ref.sponsorPresent;
|
|
7882
|
+
if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
|
|
7883
|
+
return '1fr';
|
|
7884
|
+
}, devices.tablet, devices.mobile, function (_ref2) {
|
|
7885
|
+
var sponsorPresent = _ref2.sponsorPresent;
|
|
7886
|
+
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7887
|
+
});
|
|
7888
|
+
var TitleButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7889
|
+
var sponsorWidth = _ref3.sponsorWidth;
|
|
7890
|
+
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7891
|
+
});
|
|
7892
|
+
var TitleButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n position: static;\n margin-right: 0;\n }\n"])), devices.mobile);
|
|
7893
|
+
var MobileButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 0 20px 16px 20px;\n"])));
|
|
7894
|
+
var ImpactTitle = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n align-self: center;\n grid-column: ", ";\n min-width: 0;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 2;\n max-height: calc(48px * 2);\n text-align: center;\n padding-bottom: 2px;\n\n @media ", " {\n grid-column: 1;\n -webkit-line-clamp: 4;\n max-height: calc(34px * 4);\n text-align: left;\n }\n"])), function (_ref4) {
|
|
7895
|
+
var hasColumns = _ref4.hasColumns;
|
|
7896
|
+
return hasColumns ? '3' : '1';
|
|
7897
|
+
}, devices.mobile);
|
|
7898
|
+
var ImpactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n aspect-ratio: 21 / 9;\n height: auto;\n &::before {\n content: '';\n display: block;\n padding-top: calc(9 / 21 * 100%);\n }\n\n > picture,\n img,\n video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n img {\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: cover;\n }\n }\n @media ", " {\n aspect-ratio: 1 / 1;\n &::before {\n padding-top: 100%;\n }\n max-height: 100vh;\n img {\n object-fit: cover;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
7899
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 5;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n z-index: ", ";\n min-width: ", ";\n\n @media ", " {\n grid-column: 3;\n justify-content: flex-start;\n min-width: unset;\n }\n"])), zIndexes.sponsorship, function (_ref5) {
|
|
7900
|
+
var buttonWidth = _ref5.buttonWidth;
|
|
7901
|
+
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7902
|
+
}, devices.mobile);
|
|
7903
|
+
|
|
7904
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q;
|
|
7905
|
+
var VideoPlayButton$1 = /*#__PURE__*/styled__default.button(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n background-color: var(--color-base-transparent);\n border: none;\n cursor: pointer;\n\n @media ", " {\n width: 60px;\n height: 60px;\n }\n"])), devices.mobile);
|
|
7906
|
+
var VideoControlsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
7907
|
+
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 20px;\n\n @media ", " {\n margin: 20px 4px;\n }\n"])), devices.mobile);
|
|
7908
|
+
var LeftWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7909
|
+
|
|
7910
|
+
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
7911
|
+
var videoElementId = _ref.videoElementId,
|
|
7912
|
+
_ref$loop = _ref.loop,
|
|
7913
|
+
loop = _ref$loop === void 0 ? false : _ref$loop;
|
|
7914
|
+
var _React$useState = React__default.useState(false),
|
|
7915
|
+
playing = _React$useState[0],
|
|
7916
|
+
setPlaying = _React$useState[1];
|
|
7917
|
+
var getVideoElement = function getVideoElement() {
|
|
7918
|
+
return document.querySelector("#" + videoElementId);
|
|
7919
|
+
};
|
|
7920
|
+
React__default.useEffect(function () {
|
|
7921
|
+
var video = getVideoElement();
|
|
7922
|
+
if (video) {
|
|
7923
|
+
video.loop = loop;
|
|
7924
|
+
}
|
|
7925
|
+
}, [loop]);
|
|
7926
|
+
var handlePlay = React__default.useCallback(function () {
|
|
7927
|
+
var video = getVideoElement();
|
|
7928
|
+
if (!video) return;
|
|
7929
|
+
if (playing) {
|
|
7930
|
+
video.pause();
|
|
7931
|
+
setPlaying(false);
|
|
7932
|
+
} else {
|
|
7933
|
+
video == null || video.play();
|
|
7934
|
+
setPlaying(true);
|
|
7935
|
+
}
|
|
7936
|
+
}, [playing]);
|
|
7937
|
+
return /*#__PURE__*/React__default.createElement(VideoControlsWrapper$1, {
|
|
7938
|
+
className: "video-controls-container"
|
|
7939
|
+
}, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper$1, null, /*#__PURE__*/React__default.createElement(LeftWrapper$1, null, /*#__PURE__*/React__default.createElement(VideoPlayButton$1, {
|
|
7940
|
+
id: "play",
|
|
7941
|
+
onClick: handlePlay,
|
|
7942
|
+
className: "video-play-button",
|
|
7943
|
+
"data-testid": "video-play-button",
|
|
7944
|
+
"aria-label": !playing ? 'Play' : 'Pause'
|
|
7945
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7946
|
+
iconName: !playing ? 'Play' : 'Pause',
|
|
7947
|
+
color: "white"
|
|
7948
|
+
})))));
|
|
7949
|
+
};
|
|
7727
7950
|
|
|
7728
7951
|
var _excluded$k = ["text"];
|
|
7729
|
-
var
|
|
7730
|
-
|
|
7731
|
-
|
|
7732
|
-
|
|
7733
|
-
|
|
7734
|
-
|
|
7735
|
-
|
|
7736
|
-
|
|
7737
|
-
|
|
7738
|
-
|
|
7739
|
-
|
|
7740
|
-
|
|
7741
|
-
|
|
7742
|
-
|
|
7743
|
-
|
|
7744
|
-
|
|
7745
|
-
|
|
7746
|
-
|
|
7747
|
-
|
|
7748
|
-
|
|
7749
|
-
|
|
7750
|
-
|
|
7751
|
-
|
|
7752
|
-
|
|
7753
|
-
|
|
7754
|
-
|
|
7755
|
-
|
|
7952
|
+
var CHAR_LIMIT = 100;
|
|
7953
|
+
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7954
|
+
var mobileVideo = video.mobile || video.desktop;
|
|
7955
|
+
var desktopVideo = video.desktop || video.mobile;
|
|
7956
|
+
var mobilePoster = poster.mobile || poster.desktop;
|
|
7957
|
+
var desktopPoster = poster.desktop || poster.mobile;
|
|
7958
|
+
var _useState = React.useState(desktopPoster),
|
|
7959
|
+
posterUrl = _useState[0],
|
|
7960
|
+
setPoster = _useState[1];
|
|
7961
|
+
var _useState2 = React.useState(desktopVideo),
|
|
7962
|
+
videoUrl = _useState2[0],
|
|
7963
|
+
setVideoUrl = _useState2[1];
|
|
7964
|
+
var isMobile = useMobile();
|
|
7965
|
+
React.useEffect(function () {
|
|
7966
|
+
setPoster(isMobile ? mobilePoster : desktopPoster);
|
|
7967
|
+
setVideoUrl(isMobile ? mobileVideo : desktopVideo);
|
|
7968
|
+
}, [isMobile]);
|
|
7969
|
+
return {
|
|
7970
|
+
posterUrl: posterUrl,
|
|
7971
|
+
videoUrl: videoUrl
|
|
7972
|
+
};
|
|
7973
|
+
};
|
|
7974
|
+
var VideoWithControls = function VideoWithControls(_ref) {
|
|
7975
|
+
var video = _ref.video,
|
|
7976
|
+
poster = _ref.poster;
|
|
7977
|
+
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
7978
|
+
posterUrl = _useResponsiveVideo.posterUrl,
|
|
7979
|
+
videoUrl = _useResponsiveVideo.videoUrl;
|
|
7980
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
|
|
7981
|
+
id: video.elementId,
|
|
7982
|
+
width: "100%",
|
|
7983
|
+
height: "100%",
|
|
7984
|
+
poster: posterUrl,
|
|
7985
|
+
src: videoUrl,
|
|
7986
|
+
"data-testid": "impact-video",
|
|
7987
|
+
playsInline: true
|
|
7988
|
+
}, /*#__PURE__*/React__default.createElement("source", {
|
|
7989
|
+
src: videoUrl
|
|
7990
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7991
|
+
src: posterUrl,
|
|
7992
|
+
alt: poster.alt,
|
|
7993
|
+
"data-testid": "impact-image"
|
|
7994
|
+
})), /*#__PURE__*/React__default.createElement(VideoControlsImpact, {
|
|
7995
|
+
loop: true,
|
|
7996
|
+
videoElementId: video.elementId
|
|
7997
|
+
}));
|
|
7998
|
+
};
|
|
7999
|
+
var ImpactHeaderImage = function ImpactHeaderImage(_ref2) {
|
|
8000
|
+
var mobile = _ref2.mobile,
|
|
8001
|
+
desktop = _ref2.desktop,
|
|
8002
|
+
alt = _ref2.alt;
|
|
8003
|
+
return /*#__PURE__*/React__default.createElement("picture", {
|
|
7756
8004
|
"data-testid": "impact-picture"
|
|
7757
|
-
},
|
|
7758
|
-
srcSet:
|
|
8005
|
+
}, mobile && /*#__PURE__*/React__default.createElement("source", {
|
|
8006
|
+
srcSet: mobile,
|
|
7759
8007
|
media: "" + devices.mobile,
|
|
7760
8008
|
"data-testid": "impact-mobile-image-source"
|
|
7761
|
-
})
|
|
7762
|
-
srcSet:
|
|
8009
|
+
}), /*#__PURE__*/React__default.createElement("source", {
|
|
8010
|
+
srcSet: desktop,
|
|
7763
8011
|
media: "" + devices.desktop,
|
|
7764
8012
|
"data-testid": "impact-desktop-image-source"
|
|
7765
8013
|
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7766
|
-
src:
|
|
7767
|
-
alt:
|
|
8014
|
+
src: desktop,
|
|
8015
|
+
alt: alt,
|
|
7768
8016
|
"data-testid": "impact-image"
|
|
7769
|
-
}))
|
|
7770
|
-
|
|
7771
|
-
|
|
7772
|
-
|
|
7773
|
-
|
|
7774
|
-
|
|
7775
|
-
|
|
7776
|
-
}
|
|
8017
|
+
}));
|
|
8018
|
+
};
|
|
8019
|
+
var ImpactHeaderVideo = function ImpactHeaderVideo(_ref3) {
|
|
8020
|
+
var video = _ref3.video,
|
|
8021
|
+
poster = _ref3.poster;
|
|
8022
|
+
if (!video.desktop && !video.mobile) {
|
|
8023
|
+
return /*#__PURE__*/React__default.createElement(ImpactHeaderImage, Object.assign({}, poster));
|
|
8024
|
+
}
|
|
8025
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8026
|
+
video: video,
|
|
8027
|
+
poster: poster
|
|
8028
|
+
});
|
|
8029
|
+
};
|
|
8030
|
+
var useElementWidth = function useElementWidth() {
|
|
8031
|
+
var _React$useState = React__default.useState(undefined),
|
|
8032
|
+
width = _React$useState[0],
|
|
8033
|
+
setWidth = _React$useState[1];
|
|
8034
|
+
var observerRef = React__default.useRef(null);
|
|
8035
|
+
var ref = React__default.useCallback(function (node) {
|
|
8036
|
+
if (observerRef.current) {
|
|
8037
|
+
observerRef.current.disconnect();
|
|
8038
|
+
observerRef.current = null;
|
|
8039
|
+
}
|
|
8040
|
+
if (!node) return;
|
|
8041
|
+
observerRef.current = new ResizeObserver(function () {
|
|
8042
|
+
setWidth(node.offsetWidth);
|
|
8043
|
+
});
|
|
8044
|
+
observerRef.current.observe(node);
|
|
8045
|
+
}, []);
|
|
8046
|
+
return [ref, width];
|
|
8047
|
+
};
|
|
8048
|
+
var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
8049
|
+
var text = _ref4.text,
|
|
8050
|
+
link = _ref4.link,
|
|
8051
|
+
_ref4$sponsor = _ref4.sponsor,
|
|
8052
|
+
sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
|
|
8053
|
+
customSponsorImage = _ref4.customSponsorImage,
|
|
8054
|
+
bgUrlDesktop = _ref4.bgUrlDesktop,
|
|
8055
|
+
bgUrlDevice = _ref4.bgUrlDevice,
|
|
8056
|
+
_ref4$bgImageAltText = _ref4.bgImageAltText,
|
|
8057
|
+
bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
|
|
8058
|
+
videoUrlDesktop = _ref4.videoUrlDesktop,
|
|
8059
|
+
videoUrlMobile = _ref4.videoUrlMobile,
|
|
8060
|
+
className = _ref4.className;
|
|
8061
|
+
var _useViewport = useViewport(),
|
|
8062
|
+
isMobile = _useViewport.isMobile,
|
|
8063
|
+
hydrated = _useViewport.hydrated;
|
|
8064
|
+
var _useElementWidth = useElementWidth(),
|
|
8065
|
+
buttonRef = _useElementWidth[0],
|
|
8066
|
+
buttonWidth = _useElementWidth[1];
|
|
8067
|
+
var _useElementWidth2 = useElementWidth(),
|
|
8068
|
+
sponsorRef = _useElementWidth2[0],
|
|
8069
|
+
sponsorWidth = _useElementWidth2[1];
|
|
8070
|
+
var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
|
|
8071
|
+
var _ref5 = link || {},
|
|
8072
|
+
linkText = _ref5.text,
|
|
8073
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
|
|
8074
|
+
var video = {
|
|
8075
|
+
elementId: 'impact-header-video',
|
|
8076
|
+
desktop: videoUrlDesktop,
|
|
8077
|
+
mobile: videoUrlMobile
|
|
8078
|
+
};
|
|
8079
|
+
var poster = {
|
|
8080
|
+
desktop: bgUrlDesktop,
|
|
8081
|
+
mobile: bgUrlDevice,
|
|
8082
|
+
alt: bgImageAltText
|
|
8083
|
+
};
|
|
8084
|
+
var sponsorContent = sponsor ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
8085
|
+
"data-testid": customSponsorImage ? 'impact-custom-sponsor' : undefined
|
|
8086
|
+
}, customSponsorImage != null ? customSponsorImage : {}))) : null;
|
|
8087
|
+
var hasButton = !isMobile && !!(link && linkText);
|
|
8088
|
+
var showSideColumns = hasButton || !!sponsor;
|
|
8089
|
+
var showTitleBar = !!(text || hasButton || sponsor);
|
|
8090
|
+
var renderSponsor = function renderSponsor() {
|
|
8091
|
+
if (isMobile) {
|
|
8092
|
+
if (!sponsorContent) return null;
|
|
8093
|
+
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8094
|
+
"data-testid": "impact-sponsor"
|
|
8095
|
+
}, sponsorContent);
|
|
8096
|
+
}
|
|
8097
|
+
if (!showSideColumns) return null;
|
|
8098
|
+
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8099
|
+
ref: sponsorRef,
|
|
8100
|
+
buttonWidth: buttonWidth,
|
|
8101
|
+
"data-testid": "impact-sponsor"
|
|
8102
|
+
}, sponsorContent);
|
|
8103
|
+
};
|
|
8104
|
+
if (!hydrated) return null;
|
|
8105
|
+
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
8106
|
+
theme: exports.ThemeType.Cinema
|
|
8107
|
+
}, showTitleBar ? (/*#__PURE__*/React__default.createElement(ImpactHeaderWrapper, {
|
|
8108
|
+
className: className
|
|
8109
|
+
}, /*#__PURE__*/React__default.createElement(ImpactTitleWrapper, {
|
|
8110
|
+
"data-testid": "impact-title-wrapper",
|
|
8111
|
+
sponsorPresent: !!sponsor,
|
|
8112
|
+
hasButton: hasButton
|
|
8113
|
+
}, !isMobile && showSideColumns ? (/*#__PURE__*/React__default.createElement(TitleButtonWrapper, {
|
|
8114
|
+
sponsorWidth: sponsorWidth
|
|
8115
|
+
}, hasButton ? (/*#__PURE__*/React__default.createElement(TitleButton, Object.assign({
|
|
8116
|
+
ref: buttonRef
|
|
8117
|
+
}, restLink, {
|
|
7777
8118
|
"data-testid": "impact-link"
|
|
7778
|
-
}
|
|
7779
|
-
|
|
7780
|
-
|
|
7781
|
-
|
|
7782
|
-
|
|
7783
|
-
|
|
7784
|
-
|
|
7785
|
-
|
|
7786
|
-
|
|
8119
|
+
}), linkText)) : null)) : null, text ? (/*#__PURE__*/React__default.createElement(ImpactTitle, {
|
|
8120
|
+
size: "large",
|
|
8121
|
+
color: "white",
|
|
8122
|
+
hasColumns: !isMobile && showSideColumns
|
|
8123
|
+
}, truncatedText)) : null, renderSponsor()))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderAssetWrapper, {
|
|
8124
|
+
className: className
|
|
8125
|
+
}, /*#__PURE__*/React__default.createElement(ImpactHeaderVideo, {
|
|
8126
|
+
video: video,
|
|
8127
|
+
poster: poster
|
|
8128
|
+
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
7787
8129
|
};
|
|
7788
8130
|
|
|
7789
|
-
var _templateObject$
|
|
7790
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8131
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$l;
|
|
8132
|
+
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
7791
8133
|
var color = _ref.color;
|
|
7792
8134
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
7793
8135
|
}, devices.mobileAndTablet);
|
|
7794
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8136
|
+
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
7795
8137
|
var hasImage = _ref2.hasImage;
|
|
7796
8138
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7797
8139
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7798
8140
|
var hasImage = _ref3.hasImage;
|
|
7799
8141
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7800
8142
|
});
|
|
7801
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7802
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7803
|
-
var ScrollDownWrapper
|
|
8143
|
+
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
8144
|
+
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8145
|
+
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7804
8146
|
|
|
7805
8147
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7806
8148
|
var _image$src, _image$alt;
|
|
@@ -7814,7 +8156,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7814
8156
|
"data-testid": "wrapper"
|
|
7815
8157
|
}, /*#__PURE__*/React__default.createElement(LeftPanel, {
|
|
7816
8158
|
hasImage: hasImage
|
|
7817
|
-
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper
|
|
8159
|
+
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
7818
8160
|
"data-testid": "scroll-link"
|
|
7819
8161
|
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
7820
8162
|
iconName: "Arrow",
|
|
@@ -7830,11 +8172,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7830
8172
|
})))));
|
|
7831
8173
|
};
|
|
7832
8174
|
|
|
7833
|
-
var _templateObject$
|
|
7834
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$
|
|
7835
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7836
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7837
|
-
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8175
|
+
var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
8176
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
8177
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
8178
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
8179
|
+
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
7838
8180
|
var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
|
|
7839
8181
|
var theme = _ref.theme;
|
|
7840
8182
|
return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
@@ -8044,7 +8386,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8044
8386
|
})))))))))));
|
|
8045
8387
|
};
|
|
8046
8388
|
|
|
8047
|
-
var _templateObject$
|
|
8389
|
+
var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$t;
|
|
8048
8390
|
var GRID = {
|
|
8049
8391
|
desktop: {
|
|
8050
8392
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8057,19 +8399,19 @@ var GRID = {
|
|
|
8057
8399
|
right: '2 / 1 / 3 / 15'
|
|
8058
8400
|
}
|
|
8059
8401
|
};
|
|
8060
|
-
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8402
|
+
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8061
8403
|
var $background = _ref.$background;
|
|
8062
8404
|
return "var(--color-" + $background + ")";
|
|
8063
8405
|
});
|
|
8064
|
-
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8406
|
+
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8065
8407
|
var hasImage = _ref2.hasImage;
|
|
8066
8408
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8067
8409
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8068
8410
|
var hasImage = _ref3.hasImage;
|
|
8069
8411
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8070
8412
|
});
|
|
8071
|
-
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8072
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8413
|
+
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
8414
|
+
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8073
8415
|
|
|
8074
8416
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
8075
8417
|
var _image$src, _image$alt;
|
|
@@ -8092,10 +8434,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8092
8434
|
})))));
|
|
8093
8435
|
};
|
|
8094
8436
|
|
|
8095
|
-
var _templateObject$
|
|
8096
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8097
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8098
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8437
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
|
|
8438
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8439
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
8440
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8099
8441
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
8100
8442
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8101
8443
|
var invert = _ref.invert,
|
|
@@ -8206,7 +8548,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8206
8548
|
};
|
|
8207
8549
|
|
|
8208
8550
|
var _excluded$l = ["text"];
|
|
8209
|
-
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
8551
|
+
var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
|
|
8210
8552
|
var mobileVideo = video.mobile || video.desktop;
|
|
8211
8553
|
var desktopVideo = video.desktop || video.mobile;
|
|
8212
8554
|
var mobilePoster = poster.mobile || poster.desktop;
|
|
@@ -8227,10 +8569,10 @@ var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
|
8227
8569
|
videoUrl: videoUrl
|
|
8228
8570
|
};
|
|
8229
8571
|
};
|
|
8230
|
-
var VideoWithControls = function VideoWithControls(_ref) {
|
|
8572
|
+
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
8231
8573
|
var video = _ref.video,
|
|
8232
8574
|
poster = _ref.poster;
|
|
8233
|
-
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
8575
|
+
var _useResponsiveVideo = useResponsiveVideo$1(video, poster),
|
|
8234
8576
|
posterUrl = _useResponsiveVideo.posterUrl,
|
|
8235
8577
|
videoUrl = _useResponsiveVideo.videoUrl;
|
|
8236
8578
|
var isIOS = useIOS();
|
|
@@ -8283,7 +8625,7 @@ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
|
|
|
8283
8625
|
if (!video.desktop && !video.mobile) {
|
|
8284
8626
|
return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
|
|
8285
8627
|
}
|
|
8286
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8628
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
|
|
8287
8629
|
video: video,
|
|
8288
8630
|
poster: poster
|
|
8289
8631
|
});
|
|
@@ -8346,11 +8688,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8346
8688
|
}), linkText))))));
|
|
8347
8689
|
};
|
|
8348
8690
|
|
|
8349
|
-
var _templateObject$
|
|
8350
|
-
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8351
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8352
|
-
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8353
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8691
|
+
var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject4$u, _templateObject5$o, _templateObject6$h, _templateObject7$d;
|
|
8692
|
+
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8693
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8694
|
+
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8695
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8354
8696
|
var hasImages = _ref.hasImages;
|
|
8355
8697
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8356
8698
|
}, devices.mobile, function (_ref2) {
|
|
@@ -8425,10 +8767,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8425
8767
|
}))))));
|
|
8426
8768
|
};
|
|
8427
8769
|
|
|
8428
|
-
var _templateObject$
|
|
8429
|
-
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8430
|
-
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
8431
|
-
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8770
|
+
var _templateObject$Y, _templateObject2$M, _templateObject3$A, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
|
|
8771
|
+
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
8772
|
+
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8773
|
+
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8432
8774
|
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
8433
8775
|
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8434
8776
|
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8584,16 +8926,19 @@ var Pagination = function Pagination(_ref) {
|
|
|
8584
8926
|
}))))));
|
|
8585
8927
|
};
|
|
8586
8928
|
|
|
8587
|
-
var _templateObject$
|
|
8588
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8929
|
+
var _templateObject$Z;
|
|
8930
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: ", ";\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
|
|
8931
|
+
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8932
|
+
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8933
|
+
});
|
|
8589
8934
|
|
|
8590
|
-
var _templateObject$
|
|
8591
|
-
var TextWrapper$
|
|
8592
|
-
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$
|
|
8935
|
+
var _templateObject$_, _templateObject2$N;
|
|
8936
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8937
|
+
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8593
8938
|
|
|
8594
|
-
var _templateObject
|
|
8595
|
-
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject
|
|
8596
|
-
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
8939
|
+
var _templateObject$$, _templateObject2$O;
|
|
8940
|
+
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
|
|
8941
|
+
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8597
8942
|
|
|
8598
8943
|
var Person = function Person(_ref) {
|
|
8599
8944
|
var person = _ref.person,
|
|
@@ -8616,7 +8961,7 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8616
8961
|
var _role$people;
|
|
8617
8962
|
var role = _ref.role,
|
|
8618
8963
|
className = _ref.className;
|
|
8619
|
-
return /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
8964
|
+
return /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
8620
8965
|
className: className
|
|
8621
8966
|
}, /*#__PURE__*/React__default.createElement(RoleContent, {
|
|
8622
8967
|
title: "role",
|
|
@@ -8632,13 +8977,17 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8632
8977
|
})));
|
|
8633
8978
|
};
|
|
8634
8979
|
|
|
8635
|
-
var _templateObject$
|
|
8636
|
-
var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8637
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8980
|
+
var _templateObject$10, _templateObject2$P;
|
|
8981
|
+
var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8982
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n filter: ", ";\n }\n"])), function (_ref) {
|
|
8983
|
+
var greyscale = _ref.greyscale;
|
|
8984
|
+
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8985
|
+
});
|
|
8638
8986
|
|
|
8639
8987
|
var PersonCard = function PersonCard(_ref) {
|
|
8640
8988
|
var role = _ref.role,
|
|
8641
|
-
className = _ref.className
|
|
8989
|
+
className = _ref.className,
|
|
8990
|
+
greyscale = _ref.greyscale;
|
|
8642
8991
|
var hasHeadshot = React__default.useMemo(function () {
|
|
8643
8992
|
var _role$people;
|
|
8644
8993
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
@@ -8646,7 +8995,9 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8646
8995
|
}, [role]);
|
|
8647
8996
|
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
8648
8997
|
className: className
|
|
8649
|
-
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper,
|
|
8998
|
+
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
|
|
8999
|
+
greyscale: greyscale
|
|
9000
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
8650
9001
|
src: role.people[0].headshot,
|
|
8651
9002
|
alt: role.people[0].name
|
|
8652
9003
|
})), /*#__PURE__*/React__default.createElement(PersonDetails, {
|
|
@@ -8660,26 +9011,31 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8660
9011
|
|
|
8661
9012
|
var PeopleListing = function PeopleListing(_ref) {
|
|
8662
9013
|
var roles = _ref.roles,
|
|
8663
|
-
className = _ref.className
|
|
9014
|
+
className = _ref.className,
|
|
9015
|
+
greyscale = _ref.greyscale,
|
|
9016
|
+
largeDesktopColumns = _ref.largeDesktopColumns;
|
|
8664
9017
|
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
|
|
8665
|
-
className: className
|
|
9018
|
+
className: className,
|
|
9019
|
+
"$largeDesktopColumns": largeDesktopColumns
|
|
8666
9020
|
}, roles.map(function (role, index) {
|
|
8667
9021
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8668
9022
|
key: role.name + "-" + index
|
|
8669
9023
|
}, /*#__PURE__*/React__default.createElement(PersonCard, {
|
|
8670
|
-
role: role
|
|
9024
|
+
role: role,
|
|
9025
|
+
className: className,
|
|
9026
|
+
greyscale: greyscale
|
|
8671
9027
|
}));
|
|
8672
9028
|
}));
|
|
8673
9029
|
};
|
|
8674
9030
|
|
|
8675
|
-
var _templateObject
|
|
8676
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8677
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
9031
|
+
var _templateObject$11, _templateObject2$Q, _templateObject3$B, _templateObject4$v;
|
|
9032
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9033
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8678
9034
|
var columnCount = _ref.columnCount;
|
|
8679
9035
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8680
9036
|
}, devices.mobile, devices.tablet);
|
|
8681
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8682
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9037
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
9038
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8683
9039
|
|
|
8684
9040
|
// Get the total character length of a property in an array of objects
|
|
8685
9041
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8768,7 +9124,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8768
9124
|
columnSpanSmallDevice: 1,
|
|
8769
9125
|
key: "credit-entry-" + name + "-" + index,
|
|
8770
9126
|
"data-testid": "credit-entry"
|
|
8771
|
-
}, /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
9127
|
+
}, /*#__PURE__*/React__default.createElement(TextWrapper$1, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
8772
9128
|
title: "role",
|
|
8773
9129
|
"data-roh": dataROH
|
|
8774
9130
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
@@ -8806,8 +9162,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8806
9162
|
}, creditEntries);
|
|
8807
9163
|
};
|
|
8808
9164
|
|
|
8809
|
-
var _templateObject$
|
|
8810
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$
|
|
9165
|
+
var _templateObject$12;
|
|
9166
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
8811
9167
|
|
|
8812
9168
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
8813
9169
|
var items = _ref.items;
|
|
@@ -8825,14 +9181,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
8825
9181
|
}));
|
|
8826
9182
|
};
|
|
8827
9183
|
|
|
8828
|
-
var _templateObject$
|
|
9184
|
+
var _templateObject$13, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
8829
9185
|
var LENGTH_TEXT = 28;
|
|
8830
9186
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8831
9187
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8832
9188
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8833
9189
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8834
9190
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8835
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9191
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8836
9192
|
var imageToLeft = _ref.imageToLeft;
|
|
8837
9193
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8838
9194
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8842,7 +9198,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 ||
|
|
|
8842
9198
|
var asCard = _ref3.asCard;
|
|
8843
9199
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8844
9200
|
});
|
|
8845
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9201
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
8846
9202
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
8847
9203
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8848
9204
|
}, function (_ref5) {
|
|
@@ -8866,7 +9222,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$A ||
|
|
|
8866
9222
|
}
|
|
8867
9223
|
return '';
|
|
8868
9224
|
});
|
|
8869
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9225
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
8870
9226
|
var marginBottom = _ref7.marginBottom;
|
|
8871
9227
|
return marginBottom + "px";
|
|
8872
9228
|
}, function (_ref8) {
|
|
@@ -9097,25 +9453,25 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9097
9453
|
}))));
|
|
9098
9454
|
};
|
|
9099
9455
|
|
|
9100
|
-
var _templateObject$
|
|
9456
|
+
var _templateObject$14, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g;
|
|
9101
9457
|
var LENGTH_TEXT$2 = 28;
|
|
9102
9458
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9103
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9459
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9104
9460
|
var imageToLeft = _ref.imageToLeft;
|
|
9105
9461
|
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'";
|
|
9106
9462
|
}, devices.tablet, function (_ref2) {
|
|
9107
9463
|
var imageToLeft = _ref2.imageToLeft;
|
|
9108
9464
|
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'";
|
|
9109
9465
|
}, devices.mobile);
|
|
9110
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9466
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9111
9467
|
var imageToLeft = _ref3.imageToLeft;
|
|
9112
9468
|
return imageToLeft ? 'left' : 'right';
|
|
9113
9469
|
}, devices.mobile);
|
|
9114
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9470
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
9115
9471
|
var imageToLeft = _ref4.imageToLeft;
|
|
9116
9472
|
return imageToLeft ? 'right' : 'left';
|
|
9117
9473
|
}, devices.mobile);
|
|
9118
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$
|
|
9474
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9119
9475
|
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9120
9476
|
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9121
9477
|
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
|
|
@@ -9140,8 +9496,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
|
|
|
9140
9496
|
return '';
|
|
9141
9497
|
});
|
|
9142
9498
|
|
|
9143
|
-
var _templateObject$
|
|
9144
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9499
|
+
var _templateObject$15;
|
|
9500
|
+
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
9145
9501
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9146
9502
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9147
9503
|
return aspectRatio;
|
|
@@ -9172,7 +9528,7 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
9172
9528
|
return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
|
|
9173
9529
|
};
|
|
9174
9530
|
|
|
9175
|
-
var VideoWithControls$
|
|
9531
|
+
var VideoWithControls$2 = function VideoWithControls(_ref) {
|
|
9176
9532
|
var video = _ref.video,
|
|
9177
9533
|
settings = _ref.settings;
|
|
9178
9534
|
var videoRef = React.useRef(null);
|
|
@@ -9247,7 +9603,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9247
9603
|
}, isImage && (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
9248
9604
|
aspectRatio: exports.AspectRatio['4:3'],
|
|
9249
9605
|
"data-testid": "AspectRatioWrapper"
|
|
9250
|
-
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
9606
|
+
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
|
|
9251
9607
|
video: children,
|
|
9252
9608
|
settings: videoSettings
|
|
9253
9609
|
}));
|
|
@@ -9310,7 +9666,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9310
9666
|
size: titleSize,
|
|
9311
9667
|
hierarchy: titleHierarchy
|
|
9312
9668
|
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
|
|
9313
|
-
size: "
|
|
9669
|
+
size: "small"
|
|
9314
9670
|
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
|
|
9315
9671
|
size: "large",
|
|
9316
9672
|
dangerouslySetInnerHTML: {
|
|
@@ -9323,9 +9679,65 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9323
9679
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9324
9680
|
};
|
|
9325
9681
|
|
|
9326
|
-
var _templateObject$
|
|
9327
|
-
var
|
|
9328
|
-
|
|
9682
|
+
var _templateObject$16;
|
|
9683
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9684
|
+
|
|
9685
|
+
/**
|
|
9686
|
+
* DEPRECATED. Use RadioGroup2 instead
|
|
9687
|
+
*/
|
|
9688
|
+
var RadioGroup = function RadioGroup(_ref) {
|
|
9689
|
+
var radios = _ref.radios,
|
|
9690
|
+
_ref$columnStartDeskt = _ref.columnStartDesktop,
|
|
9691
|
+
columnStartDesktop = _ref$columnStartDeskt === void 0 ? 1 : _ref$columnStartDeskt,
|
|
9692
|
+
_ref$columnStartDevic = _ref.columnStartDevice,
|
|
9693
|
+
columnStartDevice = _ref$columnStartDevic === void 0 ? 1 : _ref$columnStartDevic,
|
|
9694
|
+
_ref$columnSpanDeskto = _ref.columnSpanDesktop,
|
|
9695
|
+
columnSpanDesktop = _ref$columnSpanDeskto === void 0 ? 16 : _ref$columnSpanDeskto,
|
|
9696
|
+
_ref$columnSpanDevice = _ref.columnSpanDevice,
|
|
9697
|
+
columnSpanDevice = _ref$columnSpanDevice === void 0 ? 14 : _ref$columnSpanDevice,
|
|
9698
|
+
columnStartSmallDevice = _ref.columnStartSmallDevice,
|
|
9699
|
+
columnSpanSmallDevice = _ref.columnSpanSmallDevice,
|
|
9700
|
+
onChange = _ref.onChange;
|
|
9701
|
+
var _useState = React.useState(radios != null ? radios : []),
|
|
9702
|
+
radioProps = _useState[0],
|
|
9703
|
+
setRadioProps = _useState[1];
|
|
9704
|
+
var _useState2 = React.useState(null),
|
|
9705
|
+
checkedIndex = _useState2[0],
|
|
9706
|
+
setCheckedIndex = _useState2[1];
|
|
9707
|
+
var handleChange = function handleChange(_value, index) {
|
|
9708
|
+
setCheckedIndex(index);
|
|
9709
|
+
var newRadioProps = radios == null ? void 0 : radios.map(function (radio, i) {
|
|
9710
|
+
return _extends({}, radio, {
|
|
9711
|
+
checked: i === index
|
|
9712
|
+
});
|
|
9713
|
+
});
|
|
9714
|
+
setRadioProps(newRadioProps != null ? newRadioProps : []);
|
|
9715
|
+
onChange == null || onChange(radios ? radios[index] : undefined);
|
|
9716
|
+
};
|
|
9717
|
+
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9718
|
+
columnStartDesktop: columnStartDesktop,
|
|
9719
|
+
columnSpanDesktop: columnSpanDesktop,
|
|
9720
|
+
columnStartDevice: columnStartDevice,
|
|
9721
|
+
columnSpanDevice: columnSpanDevice,
|
|
9722
|
+
columnStartSmallDevice: columnStartSmallDevice,
|
|
9723
|
+
columnSpanSmallDevice: columnSpanSmallDevice
|
|
9724
|
+
}, /*#__PURE__*/React__default.createElement(RadioGroupContainer, null, radioProps == null ? void 0 : radioProps.map(function (radio, i) {
|
|
9725
|
+
var _radio$label;
|
|
9726
|
+
return /*#__PURE__*/React__default.createElement(Radio, {
|
|
9727
|
+
key: ((_radio$label = radio.label) != null ? _radio$label : 'defaultRadioKey') + i,
|
|
9728
|
+
checked: i === checkedIndex,
|
|
9729
|
+
// error={radio.error} // TO DO: Add error state - design not yet available
|
|
9730
|
+
label: radio.label,
|
|
9731
|
+
onChange: function onChange(e) {
|
|
9732
|
+
return handleChange(e, i);
|
|
9733
|
+
}
|
|
9734
|
+
});
|
|
9735
|
+
})));
|
|
9736
|
+
};
|
|
9737
|
+
|
|
9738
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
9739
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9740
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9329
9741
|
var horizontalMode = _ref.horizontalMode;
|
|
9330
9742
|
if (horizontalMode) return 'row';
|
|
9331
9743
|
return 'column';
|
|
@@ -9333,7 +9745,7 @@ var RadioGroup = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templa
|
|
|
9333
9745
|
var gap = _ref2.gap;
|
|
9334
9746
|
return gap + "px";
|
|
9335
9747
|
});
|
|
9336
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9748
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9337
9749
|
var darkMode = _ref3.darkMode;
|
|
9338
9750
|
if (darkMode) return 'var(--base-color-white)';
|
|
9339
9751
|
return 'var(--base-color-errorstate)';
|
|
@@ -9388,7 +9800,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9388
9800
|
var changeHandler = function changeHandler(e) {
|
|
9389
9801
|
onChange == null || onChange(e.target.value);
|
|
9390
9802
|
};
|
|
9391
|
-
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup, {
|
|
9803
|
+
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup$1, {
|
|
9392
9804
|
gap: gap,
|
|
9393
9805
|
horizontalMode: horizontalMode
|
|
9394
9806
|
}, radios.map(function (radio, idx) {
|
|
@@ -9410,10 +9822,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9410
9822
|
}, error))));
|
|
9411
9823
|
};
|
|
9412
9824
|
|
|
9413
|
-
var _templateObject$
|
|
9414
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9415
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9416
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9825
|
+
var _templateObject$18, _templateObject2$T, _templateObject3$F;
|
|
9826
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9827
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9828
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9417
9829
|
|
|
9418
9830
|
/* eslint-disable react/no-danger */
|
|
9419
9831
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9469,8 +9881,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9469
9881
|
return null;
|
|
9470
9882
|
};
|
|
9471
9883
|
|
|
9472
|
-
var _templateObject$
|
|
9473
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9884
|
+
var _templateObject$19;
|
|
9885
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9474
9886
|
|
|
9475
9887
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9476
9888
|
var HarmonicSize = {
|
|
@@ -9512,39 +9924,420 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9512
9924
|
}, description)))));
|
|
9513
9925
|
};
|
|
9514
9926
|
|
|
9515
|
-
var _templateObject$
|
|
9516
|
-
var
|
|
9517
|
-
var
|
|
9927
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7, _templateObject0$7, _templateObject1$5;
|
|
9928
|
+
var stateStyles = /*#__PURE__*/styled.css(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
9929
|
+
var theme = _ref.theme;
|
|
9930
|
+
return "3px solid " + theme.colors.lapisLazuli;
|
|
9931
|
+
}, function (_ref2) {
|
|
9932
|
+
var theme = _ref2.theme;
|
|
9933
|
+
return theme.colors.lightgrey;
|
|
9934
|
+
}, function (_ref3) {
|
|
9935
|
+
var theme = _ref3.theme;
|
|
9936
|
+
return theme.colors.lightgrey;
|
|
9937
|
+
});
|
|
9938
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9939
|
+
var theme = _ref4.theme;
|
|
9940
|
+
return theme.colors.darkgrey;
|
|
9941
|
+
});
|
|
9942
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9943
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9944
|
+
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
9945
|
+
var theme = _ref5.theme;
|
|
9946
|
+
return {
|
|
9947
|
+
iconName: 'DropdownArrow',
|
|
9948
|
+
color: theme.colors.black,
|
|
9949
|
+
title: 'Select Arrow'
|
|
9950
|
+
};
|
|
9951
|
+
})(_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"])));
|
|
9952
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9953
|
+
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9954
|
+
var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
9955
|
+
var Option = /*#__PURE__*/styled__default.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9956
|
+
var theme = _ref6.theme,
|
|
9957
|
+
hover = _ref6.hover;
|
|
9958
|
+
var _theme$colors = theme.colors,
|
|
9959
|
+
lightgrey = _theme$colors.lightgrey,
|
|
9960
|
+
midgrey = _theme$colors.midgrey;
|
|
9961
|
+
if (hover) return "background-color: " + midgrey;
|
|
9962
|
+
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
9963
|
+
});
|
|
9964
|
+
var selectStyles = function selectStyles(width, height) {
|
|
9965
|
+
return styled.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);
|
|
9966
|
+
};
|
|
9967
|
+
var SelectList = /*#__PURE__*/styled__default.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) {
|
|
9968
|
+
var width = _ref7.width,
|
|
9969
|
+
height = _ref7.height;
|
|
9970
|
+
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
9971
|
+
}, stateStyles, noMarginAndPaddingStyles, listItemStyles, borderStyles, ArrowIcon);
|
|
9972
|
+
|
|
9973
|
+
var useKeyboardAccessibility = function useKeyboardAccessibility(_ref) {
|
|
9974
|
+
var selectRef = _ref.selectRef,
|
|
9975
|
+
optionsRef = _ref.optionsRef,
|
|
9976
|
+
shouldHighlightOption = _ref.shouldHighlightOption;
|
|
9977
|
+
var _useState = React.useState(-1),
|
|
9978
|
+
itemToHighlight = _useState[0],
|
|
9979
|
+
setItemToHighlight = _useState[1];
|
|
9980
|
+
var clampIndex = function clampIndex(index) {
|
|
9981
|
+
if (index < -1) return -1;
|
|
9982
|
+
if (index > optionsRef.current.length - 1) return optionsRef.current.length - 1;
|
|
9983
|
+
return index;
|
|
9984
|
+
};
|
|
9985
|
+
var highlightNextOption = function highlightNextOption() {
|
|
9986
|
+
return setItemToHighlight(function (prev) {
|
|
9987
|
+
return clampIndex(prev + 1);
|
|
9988
|
+
});
|
|
9989
|
+
};
|
|
9990
|
+
var highlightPrevOption = function highlightPrevOption() {
|
|
9991
|
+
return setItemToHighlight(function (prev) {
|
|
9992
|
+
return clampIndex(prev - 1);
|
|
9993
|
+
});
|
|
9994
|
+
};
|
|
9995
|
+
var reset = function reset() {
|
|
9996
|
+
var _selectRef$current;
|
|
9997
|
+
(_selectRef$current = selectRef.current) == null || _selectRef$current.blur();
|
|
9998
|
+
setItemToHighlight(-1);
|
|
9999
|
+
};
|
|
10000
|
+
var handleKeyUp = function handleKeyUp(event) {
|
|
10001
|
+
if (!shouldHighlightOption) return undefined;
|
|
10002
|
+
var shouldHighlightOptionNext = event.key === 'ArrowDown';
|
|
10003
|
+
var shouldHighlightOptionPrev = event.key === 'ArrowUp';
|
|
10004
|
+
if (shouldHighlightOptionNext) return highlightNextOption();
|
|
10005
|
+
if (shouldHighlightOptionPrev) return highlightPrevOption();
|
|
10006
|
+
return undefined;
|
|
10007
|
+
};
|
|
10008
|
+
var preventScrollingWhileNavigating = function preventScrollingWhileNavigating(event) {
|
|
10009
|
+
if (!shouldHighlightOption) return;
|
|
10010
|
+
if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return;
|
|
10011
|
+
event.preventDefault();
|
|
10012
|
+
};
|
|
10013
|
+
var handleHighlighted = function handleHighlighted(cb) {
|
|
10014
|
+
return function (event) {
|
|
10015
|
+
if (itemToHighlight === -1) return;
|
|
10016
|
+
if (event.key !== 'Enter') return;
|
|
10017
|
+
cb(itemToHighlight);
|
|
10018
|
+
reset();
|
|
10019
|
+
};
|
|
10020
|
+
};
|
|
10021
|
+
React.useEffect(function () {
|
|
10022
|
+
if (shouldHighlightOption) return;
|
|
10023
|
+
reset();
|
|
10024
|
+
}, [shouldHighlightOption]);
|
|
10025
|
+
return {
|
|
10026
|
+
handleKeyUp: handleKeyUp,
|
|
10027
|
+
preventScrollingWhileNavigating: preventScrollingWhileNavigating,
|
|
10028
|
+
handleHighlighted: handleHighlighted,
|
|
10029
|
+
itemToHighlight: itemToHighlight
|
|
10030
|
+
};
|
|
10031
|
+
};
|
|
10032
|
+
var useVisualAccessibility = function useVisualAccessibility(_ref2) {
|
|
10033
|
+
var selectRef = _ref2.selectRef,
|
|
10034
|
+
isSelectDisabled = _ref2.isSelectDisabled;
|
|
10035
|
+
var addFocusClass = function addFocusClass() {
|
|
10036
|
+
var _selectRef$current2;
|
|
10037
|
+
(_selectRef$current2 = selectRef.current) == null || _selectRef$current2.classList.add('focus');
|
|
10038
|
+
};
|
|
10039
|
+
var removeFocusClass = function removeFocusClass() {
|
|
10040
|
+
var _selectRef$current3;
|
|
10041
|
+
(_selectRef$current3 = selectRef.current) == null || _selectRef$current3.classList.remove('focus');
|
|
10042
|
+
};
|
|
10043
|
+
var toggleFocus = function toggleFocus() {
|
|
10044
|
+
var _selectRef$current4;
|
|
10045
|
+
if ((_selectRef$current4 = selectRef.current) != null && _selectRef$current4.classList.contains('focus')) removeFocusClass();else addFocusClass();
|
|
10046
|
+
};
|
|
10047
|
+
var withClickAwayHandler = function withClickAwayHandler(cb) {
|
|
10048
|
+
return function (event) {
|
|
10049
|
+
if (!selectRef.current) return;
|
|
10050
|
+
if (selectRef.current.contains(event.target)) return;
|
|
10051
|
+
removeFocusClass();
|
|
10052
|
+
cb();
|
|
10053
|
+
};
|
|
10054
|
+
};
|
|
10055
|
+
React.useEffect(function () {
|
|
10056
|
+
if (!selectRef.current) return;
|
|
10057
|
+
if (isSelectDisabled) {
|
|
10058
|
+
selectRef.current.classList.add('disabled');
|
|
10059
|
+
} else selectRef.current.classList.remove('disabled');
|
|
10060
|
+
}, [isSelectDisabled]);
|
|
10061
|
+
return {
|
|
10062
|
+
withClickAwayHandler: withClickAwayHandler,
|
|
10063
|
+
toggleFocus: toggleFocus,
|
|
10064
|
+
addFocusClass: addFocusClass,
|
|
10065
|
+
removeFocusClass: removeFocusClass
|
|
10066
|
+
};
|
|
10067
|
+
};
|
|
10068
|
+
var useAccessibility = function useAccessibility(props) {
|
|
10069
|
+
var selectRef = props.selectRef;
|
|
10070
|
+
var _useKeyboardAccessibi = useKeyboardAccessibility(props),
|
|
10071
|
+
handleKeyUp = _useKeyboardAccessibi.handleKeyUp,
|
|
10072
|
+
preventScrollingWhileNavigating = _useKeyboardAccessibi.preventScrollingWhileNavigating,
|
|
10073
|
+
handleHighlighted = _useKeyboardAccessibi.handleHighlighted,
|
|
10074
|
+
itemToHighlight = _useKeyboardAccessibi.itemToHighlight;
|
|
10075
|
+
var _useVisualAccessibili = useVisualAccessibility(props),
|
|
10076
|
+
addFocusClass = _useVisualAccessibili.addFocusClass,
|
|
10077
|
+
removeFocusClass = _useVisualAccessibili.removeFocusClass,
|
|
10078
|
+
toggleFocus = _useVisualAccessibili.toggleFocus,
|
|
10079
|
+
withClickAwayHandler = _useVisualAccessibili.withClickAwayHandler;
|
|
10080
|
+
React.useEffect(function () {
|
|
10081
|
+
if (!selectRef.current) return undefined;
|
|
10082
|
+
selectRef.current.addEventListener('keydown', preventScrollingWhileNavigating);
|
|
10083
|
+
selectRef.current.addEventListener('keyup', handleKeyUp);
|
|
10084
|
+
selectRef.current.addEventListener('click', toggleFocus);
|
|
10085
|
+
selectRef.current.addEventListener('focus', addFocusClass);
|
|
10086
|
+
selectRef.current.addEventListener('blur', removeFocusClass);
|
|
10087
|
+
return function () {
|
|
10088
|
+
var _selectRef$current5, _selectRef$current6, _selectRef$current7, _selectRef$current8, _selectRef$current9;
|
|
10089
|
+
(_selectRef$current5 = selectRef.current) == null || _selectRef$current5.removeEventListener('keydown', preventScrollingWhileNavigating);
|
|
10090
|
+
(_selectRef$current6 = selectRef.current) == null || _selectRef$current6.removeEventListener('keyup', handleKeyUp);
|
|
10091
|
+
(_selectRef$current7 = selectRef.current) == null || _selectRef$current7.removeEventListener('click', toggleFocus);
|
|
10092
|
+
(_selectRef$current8 = selectRef.current) == null || _selectRef$current8.removeEventListener('focus', addFocusClass);
|
|
10093
|
+
(_selectRef$current9 = selectRef.current) == null || _selectRef$current9.removeEventListener('blur', removeFocusClass);
|
|
10094
|
+
};
|
|
10095
|
+
});
|
|
10096
|
+
return {
|
|
10097
|
+
withClickAwayHandler: withClickAwayHandler,
|
|
10098
|
+
handleHighlighted: handleHighlighted,
|
|
10099
|
+
itemToHighlight: itemToHighlight
|
|
10100
|
+
};
|
|
10101
|
+
};
|
|
10102
|
+
/**
|
|
10103
|
+
* DEPRECATED. Use Select2 instead.
|
|
10104
|
+
* A select component, created using <ul> and <li> elements, with bespoke accessibility
|
|
10105
|
+
* logic.
|
|
10106
|
+
*
|
|
10107
|
+
* # Usage
|
|
10108
|
+
* ## Defining a component that uses a typical Select element
|
|
10109
|
+
* ```tsx
|
|
10110
|
+
* const MyComponent = () => {
|
|
10111
|
+
* const handleSelect = (value: number, text: string) => {
|
|
10112
|
+
* console.log("Selected", value);
|
|
10113
|
+
* };
|
|
10114
|
+
*
|
|
10115
|
+
* return <>
|
|
10116
|
+
* <Select
|
|
10117
|
+
* label="This is a label"
|
|
10118
|
+
* options={[
|
|
10119
|
+
* { text: "Option 1", value: 1 },
|
|
10120
|
+
* { text: "Option 2", value: 2 },
|
|
10121
|
+
* ]}
|
|
10122
|
+
* onSelect={handleSelect}
|
|
10123
|
+
* />
|
|
10124
|
+
* </>
|
|
10125
|
+
* }
|
|
10126
|
+
* ```
|
|
10127
|
+
*
|
|
10128
|
+
* ## Defining a component that uses a disabled Select element
|
|
10129
|
+
* ```tsx
|
|
10130
|
+
* const MyComponent = () => {
|
|
10131
|
+
* const handleSelect = (value: number, text: string) => {
|
|
10132
|
+
* console.log("Selected", value);
|
|
10133
|
+
* };
|
|
10134
|
+
*
|
|
10135
|
+
* return <>
|
|
10136
|
+
* <Select
|
|
10137
|
+
* disabled // Select component disabled explicitely
|
|
10138
|
+
* label="This is a label"
|
|
10139
|
+
* options={[
|
|
10140
|
+
* { text: "Option 1", value: 1 },
|
|
10141
|
+
* { text: "Option 2", value: 2 },
|
|
10142
|
+
* ]}
|
|
10143
|
+
* onSelect={handleSelect}
|
|
10144
|
+
* />
|
|
10145
|
+
* <Select
|
|
10146
|
+
* label="This is a label"
|
|
10147
|
+
* options={[]} // Select component disabled implicitely by passing an empty array of options
|
|
10148
|
+
* onSelect={handleSelect}
|
|
10149
|
+
* />
|
|
10150
|
+
* </>
|
|
10151
|
+
* }
|
|
10152
|
+
* ```
|
|
10153
|
+
*
|
|
10154
|
+
* ## Defining a component with a non-labelled Select element
|
|
10155
|
+
* ```tsx
|
|
10156
|
+
* const MyComponent = () => {
|
|
10157
|
+
* const handleSelect = (value: number, text: string) => {
|
|
10158
|
+
* console.log("Selected", value);
|
|
10159
|
+
* };
|
|
10160
|
+
*
|
|
10161
|
+
* return <>
|
|
10162
|
+
* <Select
|
|
10163
|
+
* label=""
|
|
10164
|
+
* options={[
|
|
10165
|
+
* { text: "Option 1", value: 1 },
|
|
10166
|
+
* { text: "Option 2", value: 2 },
|
|
10167
|
+
* ]}
|
|
10168
|
+
* onSelect={handleSelect}
|
|
10169
|
+
* />
|
|
10170
|
+
* </>
|
|
10171
|
+
* }
|
|
10172
|
+
* ```
|
|
10173
|
+
*
|
|
10174
|
+
* ## Changing the dimensions of a Select element (px)
|
|
10175
|
+
* ```tsx
|
|
10176
|
+
* const MyComponent = () => {
|
|
10177
|
+
* const handleSelect = (value: number, text: string) => {
|
|
10178
|
+
* console.log("Selected", value);
|
|
10179
|
+
* };
|
|
10180
|
+
*
|
|
10181
|
+
* const selectWidthPx = 100;
|
|
10182
|
+
* const selectHeightPx = 27;
|
|
10183
|
+
*
|
|
10184
|
+
* return <>
|
|
10185
|
+
* <Select
|
|
10186
|
+
* label="This is a label"
|
|
10187
|
+
* options={[
|
|
10188
|
+
* { text: "Option 1", value: 1 },
|
|
10189
|
+
* { text: "Option 2", value: 2 },
|
|
10190
|
+
* ]}
|
|
10191
|
+
* onSelect={handleSelect}
|
|
10192
|
+
* width={selectWidthPx}
|
|
10193
|
+
* height={selectHeightPx}
|
|
10194
|
+
* />
|
|
10195
|
+
* </>
|
|
10196
|
+
* }
|
|
10197
|
+
* ```
|
|
10198
|
+
*/
|
|
10199
|
+
function Select(_ref3) {
|
|
10200
|
+
var _ref4, _selectedValue$text, _options$;
|
|
10201
|
+
var label = _ref3.label,
|
|
10202
|
+
options = _ref3.options,
|
|
10203
|
+
onSelect = _ref3.onSelect,
|
|
10204
|
+
_ref3$disabled = _ref3.disabled,
|
|
10205
|
+
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
|
|
10206
|
+
_ref3$resetWhenOption = _ref3.resetWhenOptionsUpdate,
|
|
10207
|
+
resetWhenOptionsUpdate = _ref3$resetWhenOption === void 0 ? false : _ref3$resetWhenOption,
|
|
10208
|
+
_ref3$width = _ref3.width,
|
|
10209
|
+
width = _ref3$width === void 0 ? 'default' : _ref3$width,
|
|
10210
|
+
_ref3$height = _ref3.height,
|
|
10211
|
+
height = _ref3$height === void 0 ? 'default' : _ref3$height;
|
|
10212
|
+
var selectRef = React.useRef(null);
|
|
10213
|
+
var optionsRef = React.useRef([]);
|
|
10214
|
+
var _useState2 = React.useState(null),
|
|
10215
|
+
selectedValue = _useState2[0],
|
|
10216
|
+
setSelectedValue = _useState2[1];
|
|
10217
|
+
var _useState3 = React.useState(false),
|
|
10218
|
+
isOpen = _useState3[0],
|
|
10219
|
+
setIsOpen = _useState3[1];
|
|
10220
|
+
var isDisabled = disabled || options.length === 0;
|
|
10221
|
+
var _useAccessibility = useAccessibility({
|
|
10222
|
+
selectRef: selectRef,
|
|
10223
|
+
optionsRef: optionsRef,
|
|
10224
|
+
shouldHighlightOption: isOpen,
|
|
10225
|
+
isSelectDisabled: isDisabled
|
|
10226
|
+
}),
|
|
10227
|
+
withClickAwayHandler = _useAccessibility.withClickAwayHandler,
|
|
10228
|
+
handleHighlighted = _useAccessibility.handleHighlighted,
|
|
10229
|
+
itemToHighlight = _useAccessibility.itemToHighlight;
|
|
10230
|
+
var openSelect = function openSelect() {
|
|
10231
|
+
return setIsOpen(true);
|
|
10232
|
+
};
|
|
10233
|
+
var closeSelect = function closeSelect() {
|
|
10234
|
+
return setIsOpen(false);
|
|
10235
|
+
};
|
|
10236
|
+
var toggleSelect = function toggleSelect() {
|
|
10237
|
+
return setIsOpen(function (prev) {
|
|
10238
|
+
return !prev;
|
|
10239
|
+
});
|
|
10240
|
+
};
|
|
10241
|
+
var closeSelectOnBlur = withClickAwayHandler(closeSelect);
|
|
10242
|
+
var handleOptionSelection = function handleOptionSelection(index) {
|
|
10243
|
+
var option = options[index];
|
|
10244
|
+
setSelectedValue(option);
|
|
10245
|
+
onSelect(option.value, option.text);
|
|
10246
|
+
};
|
|
10247
|
+
React.useEffect(function () {
|
|
10248
|
+
document.addEventListener('click', closeSelectOnBlur, false);
|
|
10249
|
+
return function () {
|
|
10250
|
+
document.removeEventListener('click', closeSelectOnBlur, false);
|
|
10251
|
+
};
|
|
10252
|
+
}, []);
|
|
10253
|
+
React.useEffect(function () {
|
|
10254
|
+
if (!resetWhenOptionsUpdate) return;
|
|
10255
|
+
if (options.length === 0) {
|
|
10256
|
+
setSelectedValue(null);
|
|
10257
|
+
return;
|
|
10258
|
+
}
|
|
10259
|
+
setSelectedValue(options[0]);
|
|
10260
|
+
}, [options, resetWhenOptionsUpdate]);
|
|
10261
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
10262
|
+
level: 1,
|
|
10263
|
+
tag: "p",
|
|
10264
|
+
"data-testid": "select-label"
|
|
10265
|
+
}, label)), /*#__PURE__*/React__default.createElement(SelectList, {
|
|
10266
|
+
id: "select",
|
|
10267
|
+
ref: selectRef,
|
|
10268
|
+
onClick: toggleSelect,
|
|
10269
|
+
onFocus: openSelect,
|
|
10270
|
+
onBlur: closeSelect,
|
|
10271
|
+
onMouseDown: function onMouseDown(e) {
|
|
10272
|
+
return e.preventDefault();
|
|
10273
|
+
},
|
|
10274
|
+
onKeyUp: handleHighlighted(handleOptionSelection),
|
|
10275
|
+
width: width,
|
|
10276
|
+
height: height,
|
|
10277
|
+
role: "listbox",
|
|
10278
|
+
tabIndex: 0,
|
|
10279
|
+
"aria-labelledby": label,
|
|
10280
|
+
"aria-disabled": isDisabled,
|
|
10281
|
+
"data-testid": "select"
|
|
10282
|
+
}, /*#__PURE__*/React__default.createElement(SelectWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10283
|
+
level: 1,
|
|
10284
|
+
tag: "p",
|
|
10285
|
+
"data-testid": "selected-value"
|
|
10286
|
+
}, (_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, {
|
|
10287
|
+
"data-testid": "options"
|
|
10288
|
+
}, options.map(function (option, index) {
|
|
10289
|
+
return /*#__PURE__*/React__default.createElement(Option, {
|
|
10290
|
+
ref: function ref(element) {
|
|
10291
|
+
if (!element || optionsRef.current.length === options.length) return;
|
|
10292
|
+
optionsRef.current.push(element);
|
|
10293
|
+
},
|
|
10294
|
+
role: "option",
|
|
10295
|
+
tabIndex: index + 1,
|
|
10296
|
+
hover: index === itemToHighlight,
|
|
10297
|
+
key: option.text,
|
|
10298
|
+
onClick: function onClick() {
|
|
10299
|
+
return handleOptionSelection(index);
|
|
10300
|
+
}
|
|
10301
|
+
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10302
|
+
level: 1,
|
|
10303
|
+
tag: "p"
|
|
10304
|
+
}, option.text));
|
|
10305
|
+
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10306
|
+
}
|
|
10307
|
+
|
|
10308
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$H, _templateObject4$z;
|
|
10309
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10310
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n\n .harmonic-select__control--is-focused {\n border-color: var(--color-base-dark-grey);\n box-shadow: ", ";\n }\n\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--color-primary-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n\n @media ", " {\n font-size: 17px;\n }\n }\n\n .harmonic-select__placeholder {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__single-value {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--color-base-light-grey);\n background: var(--color-base-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--color-base-dark-grey);\n }\n }\n\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--color-base-mid-grey);\n }\n\n .harmonic-select__menu-list {\n padding: 10px 0;\n }\n\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-primary-black);\n\n @media ", " {\n font-size: 17px;\n }\n\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--color-base-light-grey);\n }\n }\n\n .harmonic-select__option--is-selected {\n color: var(--color-primary-black);\n background: none;\n }\n\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n color: var(--color-primary-black);\n }\n\n .harmonic-select__menu-notice {\n color: var(--color-primary-black);\n padding: 20px 20px;\n text-align: left;\n }\n\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9518
10311
|
var width = _ref.width;
|
|
9519
10312
|
if (!width) return 'none';
|
|
9520
10313
|
return width + "px";
|
|
9521
10314
|
}, function (_ref2) {
|
|
9522
10315
|
var error = _ref2.error;
|
|
9523
|
-
if (error !== undefined) return "1px solid var(--
|
|
9524
|
-
return "1px solid var(--base-
|
|
10316
|
+
if (error !== undefined) return "1px solid var(--color-state-error)";
|
|
10317
|
+
return "1px solid var(--color-base-mid-grey)";
|
|
9525
10318
|
}, function (_ref3) {
|
|
9526
10319
|
var error = _ref3.error;
|
|
9527
|
-
if (error !== undefined) return "var(--
|
|
9528
|
-
return "var(--base-
|
|
10320
|
+
if (error !== undefined) return "var(--color-state-error)";
|
|
10321
|
+
return "var(--color-base-dark-grey)";
|
|
9529
10322
|
}, function (_ref4) {
|
|
9530
10323
|
var darkMode = _ref4.darkMode;
|
|
9531
|
-
if (darkMode) return "0 0 0
|
|
10324
|
+
if (darkMode) return "0 0 0 1px var(--color-state-medium)";
|
|
9532
10325
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9533
|
-
});
|
|
9534
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10326
|
+
}, devices.mobile, devices.mobile);
|
|
10327
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n\n @media ", " {\n margin: 0 0 12px;\n }\n"])), function (_ref5) {
|
|
9535
10328
|
var darkMode = _ref5.darkMode;
|
|
9536
|
-
if (darkMode) return "var(--base-
|
|
9537
|
-
return "var(--
|
|
9538
|
-
});
|
|
9539
|
-
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10329
|
+
if (darkMode) return "var(--color-base-white)";
|
|
10330
|
+
return "var(--color-primary-black)";
|
|
10331
|
+
}, devices.mobile);
|
|
10332
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9540
10333
|
var darkMode = _ref6.darkMode;
|
|
9541
|
-
if (darkMode) return "var(--base-
|
|
9542
|
-
return "var(--
|
|
10334
|
+
if (darkMode) return "var(--color-base-white)";
|
|
10335
|
+
return "var(--color-state-error)";
|
|
9543
10336
|
});
|
|
9544
10337
|
|
|
9545
|
-
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10338
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
|
|
9546
10339
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
9547
|
-
return /*#__PURE__*/React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10340
|
+
return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
9548
10341
|
iconName: "DropdownArrow"
|
|
9549
10342
|
}));
|
|
9550
10343
|
};
|
|
@@ -9553,21 +10346,24 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9553
10346
|
error = _ref.error,
|
|
9554
10347
|
width = _ref.width,
|
|
9555
10348
|
darkMode = _ref.darkMode,
|
|
9556
|
-
children = _ref.children
|
|
9557
|
-
|
|
10349
|
+
children = _ref.children,
|
|
10350
|
+
className = _ref.className;
|
|
10351
|
+
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
10352
|
+
className: className
|
|
10353
|
+
}, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9558
10354
|
darkMode: darkMode,
|
|
9559
10355
|
"data-testid": "select2-text-label"
|
|
9560
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
9561
|
-
|
|
9562
|
-
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper, {
|
|
10356
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10357
|
+
size: "large"
|
|
10358
|
+
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
9563
10359
|
width: width,
|
|
9564
10360
|
error: error,
|
|
9565
10361
|
darkMode: darkMode
|
|
9566
10362
|
}, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
9567
10363
|
darkMode: darkMode,
|
|
9568
10364
|
"data-testid": "select2-error-label"
|
|
9569
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
9570
|
-
|
|
10365
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10366
|
+
size: "medium"
|
|
9571
10367
|
}, error))));
|
|
9572
10368
|
};
|
|
9573
10369
|
/**
|
|
@@ -9593,13 +10389,15 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
9593
10389
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
9594
10390
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
9595
10391
|
components = _ref2.components,
|
|
10392
|
+
className = _ref2.className,
|
|
9596
10393
|
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
9597
10394
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
9598
10395
|
label: label,
|
|
9599
10396
|
error: error,
|
|
9600
10397
|
width: width,
|
|
9601
|
-
darkMode: darkMode
|
|
9602
|
-
|
|
10398
|
+
darkMode: darkMode,
|
|
10399
|
+
className: className
|
|
10400
|
+
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
|
|
9603
10401
|
components: _extends({
|
|
9604
10402
|
DropdownIndicator: DropdownIndicator,
|
|
9605
10403
|
LoadingIndicator: undefined,
|
|
@@ -9639,7 +10437,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9639
10437
|
error: error,
|
|
9640
10438
|
width: width,
|
|
9641
10439
|
darkMode: darkMode
|
|
9642
|
-
}, /*#__PURE__*/React__default.createElement(Select$
|
|
10440
|
+
}, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({}, selectProps, {
|
|
9643
10441
|
components: _extends({
|
|
9644
10442
|
DropdownIndicator: DropdownIndicator,
|
|
9645
10443
|
LoadingIndicator: undefined,
|
|
@@ -9650,24 +10448,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9650
10448
|
})));
|
|
9651
10449
|
};
|
|
9652
10450
|
|
|
9653
|
-
var _templateObject$
|
|
9654
|
-
var Wrapper$
|
|
9655
|
-
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$
|
|
9656
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10451
|
+
var _templateObject$1c, _templateObject3$I, _templateObject4$A, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
|
|
10452
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
10453
|
+
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
10454
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
9657
10455
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
9658
10456
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
9659
10457
|
}, function (_ref2) {
|
|
9660
10458
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
9661
10459
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
9662
10460
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
9663
|
-
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10461
|
+
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
|
|
9664
10462
|
var singleChild = _ref3.singleChild;
|
|
9665
10463
|
return singleChild ? '0' : '10px';
|
|
9666
10464
|
});
|
|
9667
|
-
var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$
|
|
9668
|
-
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
9669
|
-
var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$
|
|
9670
|
-
var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$
|
|
10465
|
+
var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
10466
|
+
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
10467
|
+
var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
|
|
10468
|
+
var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$8 || (_templateObject9$8 = /*#__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"])));
|
|
9671
10469
|
|
|
9672
10470
|
// Set max. character length
|
|
9673
10471
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -9720,7 +10518,7 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
9720
10518
|
var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
|
|
9721
10519
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
9722
10520
|
theme: theme
|
|
9723
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10521
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$6, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabel, {
|
|
9724
10522
|
tag: "div",
|
|
9725
10523
|
size: "small"
|
|
9726
10524
|
}, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
|
|
@@ -9756,8 +10554,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
9756
10554
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
9757
10555
|
};
|
|
9758
10556
|
|
|
9759
|
-
var _templateObject$
|
|
9760
|
-
var Wrapper$
|
|
10557
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$J;
|
|
10558
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
9761
10559
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9762
10560
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9763
10561
|
return aspectRatio;
|
|
@@ -9767,8 +10565,8 @@ var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$19 || (_temp
|
|
|
9767
10565
|
height = _ref2.height;
|
|
9768
10566
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
9769
10567
|
});
|
|
9770
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
9771
|
-
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$
|
|
10568
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
10569
|
+
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
9772
10570
|
|
|
9773
10571
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
9774
10572
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -9781,7 +10579,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9781
10579
|
aspectRatio = _ref.aspectRatio,
|
|
9782
10580
|
className = _ref.className,
|
|
9783
10581
|
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
|
9784
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10582
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, Object.assign({
|
|
9785
10583
|
aspectRatio: aspectRatio,
|
|
9786
10584
|
className: className
|
|
9787
10585
|
}, restProps), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
@@ -9801,13 +10599,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9801
10599
|
}, caption))));
|
|
9802
10600
|
};
|
|
9803
10601
|
|
|
9804
|
-
var _templateObject$
|
|
9805
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9806
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9807
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
9808
|
-
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9809
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9810
|
-
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
10602
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$u, _templateObject6$n;
|
|
10603
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
10604
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10605
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10606
|
+
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10607
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
10608
|
+
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
9811
10609
|
|
|
9812
10610
|
var MiniCard = function MiniCard(_ref) {
|
|
9813
10611
|
var _ref$title = _ref.title,
|
|
@@ -9845,18 +10643,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9845
10643
|
}, title)))));
|
|
9846
10644
|
};
|
|
9847
10645
|
|
|
9848
|
-
var _templateObject$
|
|
9849
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9850
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9851
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10646
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v;
|
|
10647
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
10648
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
10649
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
9852
10650
|
var isVisible = _ref.isVisible;
|
|
9853
10651
|
return isVisible ? 'visible' : 'hidden';
|
|
9854
10652
|
});
|
|
9855
|
-
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10653
|
+
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
9856
10654
|
var isVisible = _ref2.isVisible;
|
|
9857
10655
|
return isVisible ? 'visible' : 'hidden';
|
|
9858
10656
|
});
|
|
9859
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10657
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__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"])));
|
|
9860
10658
|
|
|
9861
10659
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9862
10660
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -9937,15 +10735,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
9937
10735
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
9938
10736
|
};
|
|
9939
10737
|
|
|
9940
|
-
var _templateObject$
|
|
9941
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$
|
|
9942
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
9943
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
9944
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
10738
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$w;
|
|
10739
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10740
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
|
|
10741
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
10742
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
|
|
9945
10743
|
var isActive = _ref.isActive;
|
|
9946
10744
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
9947
10745
|
}, exports.Colors.MidGrey);
|
|
9948
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
10746
|
+
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$w || (_templateObject5$w = /*#__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) {
|
|
9949
10747
|
var isOpen = _ref2.isOpen;
|
|
9950
10748
|
return isOpen ? 'block' : 'none';
|
|
9951
10749
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -10101,19 +10899,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10101
10899
|
});
|
|
10102
10900
|
};
|
|
10103
10901
|
|
|
10104
|
-
var _templateObject$
|
|
10105
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10106
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10107
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10902
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o;
|
|
10903
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10904
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10905
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10108
10906
|
var color = _ref.color;
|
|
10109
10907
|
return "var(--base-color-" + color + ")";
|
|
10110
10908
|
});
|
|
10111
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10112
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10909
|
+
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10910
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10113
10911
|
var color = _ref2.color;
|
|
10114
10912
|
return "var(--base-color-" + color + ")";
|
|
10115
10913
|
});
|
|
10116
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
10914
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10117
10915
|
var color = _ref3.color;
|
|
10118
10916
|
return "var(--base-color-" + color + ")";
|
|
10119
10917
|
});
|
|
@@ -10195,19 +10993,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10195
10993
|
}, strengthLabel))));
|
|
10196
10994
|
};
|
|
10197
10995
|
|
|
10198
|
-
var _templateObject$
|
|
10199
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$
|
|
10200
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2
|
|
10201
|
-
var Wrapper$
|
|
10202
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$
|
|
10996
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
|
|
10997
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10998
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10999
|
+
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11000
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10203
11001
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10204
11002
|
}, devices.tablet, devices.mobile);
|
|
10205
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
11003
|
+
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
10206
11004
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10207
11005
|
}, devices.mobile);
|
|
10208
|
-
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$
|
|
10209
|
-
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10210
|
-
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$
|
|
11006
|
+
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$p || (_templateObject6$p = /*#__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);
|
|
11007
|
+
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__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"])));
|
|
11008
|
+
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10211
11009
|
|
|
10212
11010
|
/* eslint-disable react/no-danger */
|
|
10213
11011
|
var Content = function Content(_ref) {
|
|
@@ -10380,7 +11178,7 @@ var Table = function Table(_ref) {
|
|
|
10380
11178
|
} else {
|
|
10381
11179
|
visibleRows = totalRows;
|
|
10382
11180
|
}
|
|
10383
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11181
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
10384
11182
|
className: className
|
|
10385
11183
|
}, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
10386
11184
|
onClickPrev: handlePrev,
|
|
@@ -10410,24 +11208,24 @@ var Table = function Table(_ref) {
|
|
|
10410
11208
|
}))));
|
|
10411
11209
|
};
|
|
10412
11210
|
|
|
10413
|
-
var _templateObject$
|
|
10414
|
-
var Wrapper$
|
|
11211
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$P, _templateObject4$G, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
11212
|
+
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10415
11213
|
var theme = _ref.theme;
|
|
10416
11214
|
return "var(--color-" + theme + ")";
|
|
10417
11215
|
}, function (_ref2) {
|
|
10418
11216
|
var theme = _ref2.theme;
|
|
10419
11217
|
return "var(--color-" + theme + ")";
|
|
10420
11218
|
});
|
|
10421
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
10422
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
10423
|
-
var Error = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10424
|
-
var Form = /*#__PURE__*/styled__default.form(_templateObject5$
|
|
10425
|
-
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
10426
|
-
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10427
|
-
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$
|
|
10428
|
-
var ButtonWrapper$
|
|
10429
|
-
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
10430
|
-
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$
|
|
11219
|
+
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11220
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
11221
|
+
var Error = /*#__PURE__*/styled__default.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
11222
|
+
var Form = /*#__PURE__*/styled__default.form(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
11223
|
+
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
11224
|
+
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
11225
|
+
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
11226
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
11227
|
+
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
11228
|
+
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
10431
11229
|
var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
10432
11230
|
var DropdownWrapper = /*#__PURE__*/styled__default.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) {
|
|
10433
11231
|
var _ref3$isOpen = _ref3.isOpen,
|
|
@@ -10453,7 +11251,9 @@ var themeToColor = function themeToColor(theme) {
|
|
|
10453
11251
|
var SignUpTitle = function SignUpTitle(_ref) {
|
|
10454
11252
|
var title = _ref.title,
|
|
10455
11253
|
_ref$isMobile = _ref.isMobile,
|
|
10456
|
-
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile
|
|
11254
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
|
|
11255
|
+
_ref$titleFontFamily = _ref.titleFontFamily,
|
|
11256
|
+
titleFontFamily = _ref$titleFontFamily === void 0 ? false : _ref$titleFontFamily;
|
|
10457
11257
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
10458
11258
|
columnStartDesktop: 3,
|
|
10459
11259
|
columnSpanDesktop: 10,
|
|
@@ -10462,7 +11262,7 @@ var SignUpTitle = function SignUpTitle(_ref) {
|
|
|
10462
11262
|
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
10463
11263
|
color: "black",
|
|
10464
11264
|
hierarchy: "h3",
|
|
10465
|
-
serif:
|
|
11265
|
+
serif: titleFontFamily === 'Victor',
|
|
10466
11266
|
size: isMobile ? 'small' : 'medium'
|
|
10467
11267
|
}, title)));
|
|
10468
11268
|
};
|
|
@@ -10715,10 +11515,10 @@ var SignUpForm = function SignUpForm(_ref) {
|
|
|
10715
11515
|
tabIndex: 0
|
|
10716
11516
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10717
11517
|
size: "small"
|
|
10718
|
-
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
11518
|
+
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
10719
11519
|
onClick: handleFormSubmit,
|
|
10720
11520
|
theme: theme
|
|
10721
|
-
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
11521
|
+
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
10722
11522
|
onClick: handleFormSubmit,
|
|
10723
11523
|
theme: theme
|
|
10724
11524
|
})), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
|
|
@@ -10770,7 +11570,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
10770
11570
|
React.useEffect(function () {
|
|
10771
11571
|
setDropdownOpen(isOpened);
|
|
10772
11572
|
}, [isOpened]);
|
|
10773
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11573
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$9, {
|
|
10774
11574
|
theme: themeToColor(theme),
|
|
10775
11575
|
className: className
|
|
10776
11576
|
}, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
|
|
@@ -10835,13 +11635,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
10835
11635
|
}))))));
|
|
10836
11636
|
};
|
|
10837
11637
|
|
|
10838
|
-
var _templateObject$
|
|
10839
|
-
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11638
|
+
var _templateObject$1k, _templateObject2$11, _templateObject4$H, _templateObject5$A;
|
|
11639
|
+
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
10840
11640
|
var withShadow = _ref.withShadow;
|
|
10841
|
-
return withShadow && styled.css(_templateObject2$
|
|
11641
|
+
return withShadow && styled.css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
10842
11642
|
}, devices.mobile);
|
|
10843
|
-
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
10844
|
-
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$
|
|
11643
|
+
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
11644
|
+
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
10845
11645
|
|
|
10846
11646
|
var defaultGrid = {
|
|
10847
11647
|
columnStartDesktop: 2,
|
|
@@ -10899,12 +11699,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
10899
11699
|
return null;
|
|
10900
11700
|
};
|
|
10901
11701
|
|
|
10902
|
-
var _templateObject$
|
|
10903
|
-
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$
|
|
11702
|
+
var _templateObject$1l, _templateObject2$12;
|
|
11703
|
+
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
10904
11704
|
var hide = _ref.hide;
|
|
10905
11705
|
return hide && "display: none;";
|
|
10906
11706
|
}, devices.mobileAndTablet);
|
|
10907
|
-
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2
|
|
11707
|
+
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
10908
11708
|
|
|
10909
11709
|
/**
|
|
10910
11710
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -10996,8 +11796,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
10996
11796
|
}));
|
|
10997
11797
|
};
|
|
10998
11798
|
|
|
10999
|
-
var _templateObject$
|
|
11000
|
-
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
11799
|
+
var _templateObject$1m;
|
|
11800
|
+
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
|
|
11001
11801
|
|
|
11002
11802
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11003
11803
|
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'] + "\">");
|
|
@@ -11057,27 +11857,27 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11057
11857
|
}, gridItemOrContent);
|
|
11058
11858
|
};
|
|
11059
11859
|
|
|
11060
|
-
var _templateObject$
|
|
11860
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11061
11861
|
var color = 'primary-black';
|
|
11062
11862
|
var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
11063
11863
|
borderColor: color,
|
|
11064
11864
|
hoveredColor: color,
|
|
11065
11865
|
pressedColor: color,
|
|
11066
11866
|
textColor: color
|
|
11067
|
-
})(_templateObject$
|
|
11068
|
-
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11069
|
-
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$
|
|
11867
|
+
})(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11868
|
+
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11869
|
+
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11070
11870
|
var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
|
|
11071
11871
|
serif: true,
|
|
11072
11872
|
size: 'medium'
|
|
11073
|
-
})(_templateObject4$
|
|
11873
|
+
})(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11074
11874
|
var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
|
|
11075
11875
|
size: 'large'
|
|
11076
|
-
})(_templateObject5$
|
|
11077
|
-
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$
|
|
11876
|
+
})(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11877
|
+
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11078
11878
|
var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
|
|
11079
11879
|
size: 'large'
|
|
11080
|
-
})(_templateObject7$
|
|
11880
|
+
})(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11081
11881
|
|
|
11082
11882
|
var Paywall = function Paywall(_ref) {
|
|
11083
11883
|
var className = _ref.className,
|
|
@@ -11270,14 +12070,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11270
12070
|
})))))));
|
|
11271
12071
|
};
|
|
11272
12072
|
|
|
11273
|
-
var _templateObject$
|
|
11274
|
-
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11275
|
-
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
11276
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$
|
|
11277
|
-
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11278
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
11279
|
-
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11280
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$
|
|
12073
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$C, _templateObject6$s, _templateObject7$m;
|
|
12074
|
+
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
12075
|
+
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
12076
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
12077
|
+
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
12078
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
12079
|
+
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
12080
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
11281
12081
|
|
|
11282
12082
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11283
12083
|
var Footer = function Footer(_ref) {
|
|
@@ -11335,18 +12135,18 @@ var Footer = function Footer(_ref) {
|
|
|
11335
12135
|
}, additionalInfo))));
|
|
11336
12136
|
};
|
|
11337
12137
|
|
|
11338
|
-
var _templateObject$
|
|
12138
|
+
var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11339
12139
|
var LIST_ITEM_GAP = 32;
|
|
11340
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12140
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
|
|
11341
12141
|
var bottomBorder = _ref.bottomBorder;
|
|
11342
12142
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11343
12143
|
}, zIndexes.anchor, function (_ref2) {
|
|
11344
12144
|
var withShadow = _ref2.withShadow;
|
|
11345
|
-
return withShadow && styled.css(_templateObject2$
|
|
12145
|
+
return withShadow && styled.css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11346
12146
|
});
|
|
11347
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
11348
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11349
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
12147
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
12148
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
12149
|
+
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11350
12150
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11351
12151
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
11352
12152
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -11357,11 +12157,11 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_templateO
|
|
|
11357
12157
|
hasTwoArrows = _ref5.hasTwoArrows;
|
|
11358
12158
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
11359
12159
|
});
|
|
11360
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
12160
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$f || (_templateObject8$f = /*#__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) {
|
|
11361
12161
|
var withShadow = _ref7.withShadow;
|
|
11362
|
-
return withShadow && styled.css(_templateObject9$
|
|
12162
|
+
return withShadow && styled.css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11363
12163
|
});
|
|
11364
|
-
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
12164
|
+
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pointer-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
11365
12165
|
var disabled = _ref8.disabled;
|
|
11366
12166
|
return disabled ? 'not-allowed' : 'pointer';
|
|
11367
12167
|
}, function (_ref9) {
|
|
@@ -11407,7 +12207,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
11407
12207
|
onTabClick(e, id);
|
|
11408
12208
|
}
|
|
11409
12209
|
setSelectedItem(id);
|
|
11410
|
-
var clickedTab = document.getElementById("tablink-" +
|
|
12210
|
+
var clickedTab = document.getElementById("tablink-" + id);
|
|
11411
12211
|
if (clickedTab) {
|
|
11412
12212
|
clickedTab.focus();
|
|
11413
12213
|
}
|
|
@@ -11616,20 +12416,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
11616
12416
|
})))) : null))));
|
|
11617
12417
|
};
|
|
11618
12418
|
|
|
11619
|
-
var _templateObject$
|
|
11620
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12419
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
|
|
12420
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
11621
12421
|
var sticky = _ref.sticky;
|
|
11622
12422
|
return sticky ? 'sticky' : 'initial';
|
|
11623
12423
|
}, zIndexes.anchor);
|
|
11624
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11625
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12424
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
12425
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
11626
12426
|
var title = _ref2.title;
|
|
11627
12427
|
return title ? 'row' : 'row-reverse';
|
|
11628
12428
|
}, devices.tablet, devices.mobile);
|
|
11629
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11630
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11631
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
11632
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$
|
|
12429
|
+
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
12430
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
12431
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
12432
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11633
12433
|
var theme = _ref3.theme;
|
|
11634
12434
|
return theme.colors.primaryButtonReverseBg;
|
|
11635
12435
|
}, function (_ref4) {
|
|
@@ -11642,8 +12442,8 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
11642
12442
|
var theme = _ref6.theme;
|
|
11643
12443
|
return theme.colors.primaryButtonReverse;
|
|
11644
12444
|
});
|
|
11645
|
-
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
11646
|
-
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
12445
|
+
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$b || (_templateObject9$b = /*#__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);
|
|
12446
|
+
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__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);
|
|
11647
12447
|
|
|
11648
12448
|
var _excluded$s = ["text"],
|
|
11649
12449
|
_excluded2$4 = ["text"];
|
|
@@ -11676,18 +12476,18 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
11676
12476
|
}, message))));
|
|
11677
12477
|
};
|
|
11678
12478
|
|
|
11679
|
-
var _templateObject$
|
|
11680
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11681
|
-
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$
|
|
11682
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11683
|
-
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$
|
|
12479
|
+
var _templateObject$1r, _templateObject2$17, _templateObject3$U, _templateObject4$M;
|
|
12480
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
|
|
12481
|
+
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
|
|
12482
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
12483
|
+
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11684
12484
|
|
|
11685
|
-
var _templateObject$
|
|
11686
|
-
var Wrapper$
|
|
12485
|
+
var _templateObject$1s;
|
|
12486
|
+
var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
|
|
11687
12487
|
|
|
11688
12488
|
var UpsellCards = function UpsellCards(_ref) {
|
|
11689
12489
|
var upsellCards = _ref.upsellCards;
|
|
11690
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
12490
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$a, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
|
|
11691
12491
|
return /*#__PURE__*/React__default.createElement(UpsellCard, {
|
|
11692
12492
|
key: "card-" + index,
|
|
11693
12493
|
title: card.title,
|
|
@@ -11712,13 +12512,15 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
11712
12512
|
upsellCards = _ref.upsellCards,
|
|
11713
12513
|
_ref$theme = _ref.theme,
|
|
11714
12514
|
theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme,
|
|
11715
|
-
className = _ref.className
|
|
12515
|
+
className = _ref.className,
|
|
12516
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
11716
12517
|
var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
|
|
11717
12518
|
return _extends({}, card, {
|
|
11718
12519
|
theme: card.theme || theme,
|
|
11719
12520
|
secondaryTheme: card.secondaryTheme || card.theme || theme
|
|
11720
12521
|
});
|
|
11721
12522
|
}) : [];
|
|
12523
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
11722
12524
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
11723
12525
|
theme: theme
|
|
11724
12526
|
}, /*#__PURE__*/React__default.createElement(Grid, {
|
|
@@ -11731,7 +12533,7 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
11731
12533
|
columnStartSmallDevice: 1,
|
|
11732
12534
|
columnSpanSmallDevice: 14
|
|
11733
12535
|
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
|
|
11734
|
-
serif:
|
|
12536
|
+
serif: isVictorTitleFont
|
|
11735
12537
|
}, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
|
|
11736
12538
|
text: richText != null ? richText : '',
|
|
11737
12539
|
columnStartDesktop: 1,
|
|
@@ -11745,9 +12547,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
11745
12547
|
})))));
|
|
11746
12548
|
};
|
|
11747
12549
|
|
|
11748
|
-
var _templateObject$
|
|
11749
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11750
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
12550
|
+
var _templateObject$1t, _templateObject2$18;
|
|
12551
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
12552
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
11751
12553
|
var bottomBorder = _ref.bottomBorder;
|
|
11752
12554
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
11753
12555
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -11778,11 +12580,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
11778
12580
|
}, children)));
|
|
11779
12581
|
};
|
|
11780
12582
|
|
|
11781
|
-
var _templateObject$
|
|
11782
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11783
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
11784
|
-
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11785
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
12583
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N;
|
|
12584
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
12585
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
12586
|
+
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
12587
|
+
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
11786
12588
|
|
|
11787
12589
|
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
11788
12590
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -11986,29 +12788,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
11986
12788
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
11987
12789
|
};
|
|
11988
12790
|
|
|
11989
|
-
var _templateObject$
|
|
11990
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12791
|
+
var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
|
|
12792
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
11991
12793
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
11992
12794
|
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 }";
|
|
11993
12795
|
}, devices.mobile, function (_ref2) {
|
|
11994
12796
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
11995
12797
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
11996
12798
|
});
|
|
11997
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12799
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
11998
12800
|
var type = _ref3.type,
|
|
11999
12801
|
isActive = _ref3.isActive;
|
|
12000
12802
|
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 ";
|
|
12001
12803
|
});
|
|
12002
|
-
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
12003
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12004
|
-
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12804
|
+
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
12805
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12806
|
+
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12005
12807
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12006
12808
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12007
12809
|
});
|
|
12008
|
-
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$
|
|
12009
|
-
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12010
|
-
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$
|
|
12011
|
-
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$
|
|
12810
|
+
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$u || (_templateObject6$u = /*#__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"])));
|
|
12811
|
+
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
12812
|
+
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12813
|
+
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$c || (_templateObject9$c = /*#__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) {
|
|
12012
12814
|
var active = _ref5.active;
|
|
12013
12815
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
12014
12816
|
}, devices.tablet, function (_ref6) {
|
|
@@ -12038,7 +12840,8 @@ var Carousel = function Carousel(_ref) {
|
|
|
12038
12840
|
_ref$infinite = _ref.infinite,
|
|
12039
12841
|
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
12040
12842
|
_ref$useOffset = _ref.useOffset,
|
|
12041
|
-
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset
|
|
12843
|
+
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset,
|
|
12844
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
12042
12845
|
var _useState = React.useState(false),
|
|
12043
12846
|
isFullscreen = _useState[0],
|
|
12044
12847
|
setIsFullscreen = _useState[1];
|
|
@@ -12188,6 +12991,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12188
12991
|
var carouselTitleId = "carousel-title-" + title;
|
|
12189
12992
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
12190
12993
|
var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
12994
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12191
12995
|
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
12192
12996
|
className: className,
|
|
12193
12997
|
type: type,
|
|
@@ -12211,7 +13015,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12211
13015
|
isDescriptionPresent: !!description
|
|
12212
13016
|
}, /*#__PURE__*/React__default.createElement(TitleText$1, {
|
|
12213
13017
|
size: "medium",
|
|
12214
|
-
serif:
|
|
13018
|
+
serif: isVictorTitleFont,
|
|
12215
13019
|
hierarchy: titleSemanticLevelValue
|
|
12216
13020
|
}, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12217
13021
|
size: "large"
|
|
@@ -12251,18 +13055,18 @@ var Carousel = function Carousel(_ref) {
|
|
|
12251
13055
|
}, children))));
|
|
12252
13056
|
};
|
|
12253
13057
|
|
|
12254
|
-
var _templateObject$
|
|
12255
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
12256
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12257
|
-
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12258
|
-
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12259
|
-
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12260
|
-
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12261
|
-
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12262
|
-
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
12263
|
-
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
12264
|
-
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
12265
|
-
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$
|
|
13058
|
+
var _templateObject$1w, _templateObject2$1b, _templateObject3$X, _templateObject4$P, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$d, _templateObject0$b, _templateObject1$7, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
13059
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
13060
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13061
|
+
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
13062
|
+
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$P || (_templateObject4$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13063
|
+
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13064
|
+
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
13065
|
+
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$p || (_templateObject7$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
13066
|
+
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$i || (_templateObject8$i = /*#__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);
|
|
13067
|
+
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$d || (_templateObject9$d = /*#__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);
|
|
13068
|
+
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$b || (_templateObject0$b = /*#__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);
|
|
13069
|
+
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$7 || (_templateObject1$7 = /*#__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);
|
|
12266
13070
|
var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
12267
13071
|
var FirstButtonComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
12268
13072
|
var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -12401,7 +13205,7 @@ var VideoSlide = function VideoSlide(_ref) {
|
|
|
12401
13205
|
});
|
|
12402
13206
|
return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
|
|
12403
13207
|
isCurrentSlide: isCurrentSlide
|
|
12404
|
-
}, /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
13208
|
+
}, /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
|
|
12405
13209
|
video: video,
|
|
12406
13210
|
settings: settings
|
|
12407
13211
|
}));
|
|
@@ -12432,7 +13236,10 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
|
|
|
12432
13236
|
isCurrentSlide: index === currentSlide
|
|
12433
13237
|
})) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
|
|
12434
13238
|
alt: mediaContent.alt
|
|
12435
|
-
}, mediaContent
|
|
13239
|
+
}, mediaContent, {
|
|
13240
|
+
fetchPriority: index === currentSlide ? 'high' : 'auto',
|
|
13241
|
+
loading: index === currentSlide ? 'eager' : 'lazy'
|
|
13242
|
+
})))));
|
|
12436
13243
|
}));
|
|
12437
13244
|
};
|
|
12438
13245
|
|
|
@@ -12441,7 +13248,8 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12441
13248
|
carouselTitle = _ref.carouselTitle,
|
|
12442
13249
|
slides = _ref.slides,
|
|
12443
13250
|
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
12444
|
-
className = _ref.className
|
|
13251
|
+
className = _ref.className,
|
|
13252
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
12445
13253
|
var slidesMedia = React.useMemo(function () {
|
|
12446
13254
|
return slides.map(function (_ref2) {
|
|
12447
13255
|
var mediaContent = _ref2.mediaContent;
|
|
@@ -12472,6 +13280,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12472
13280
|
var handleClickInside = function handleClickInside(e) {
|
|
12473
13281
|
e.stopPropagation();
|
|
12474
13282
|
};
|
|
13283
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12475
13284
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid$1, {
|
|
12476
13285
|
role: "region",
|
|
12477
13286
|
"aria-labelledby": carouselTitleId,
|
|
@@ -12484,7 +13293,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12484
13293
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
12485
13294
|
className: TYPOGRAPHY_CLASS_NAME,
|
|
12486
13295
|
size: "medium",
|
|
12487
|
-
serif:
|
|
13296
|
+
serif: isVictorTitleFont,
|
|
12488
13297
|
hierarchy: titleSemanticLevelValue
|
|
12489
13298
|
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12490
13299
|
onClickNext: onNext,
|
|
@@ -12576,9 +13385,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
12576
13385
|
})));
|
|
12577
13386
|
};
|
|
12578
13387
|
|
|
12579
|
-
var _templateObject$
|
|
12580
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12581
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
13388
|
+
var _templateObject$1x, _templateObject3$Y;
|
|
13389
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
13390
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
12582
13391
|
|
|
12583
13392
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
12584
13393
|
var children = _ref.children;
|
|
@@ -13173,8 +13982,8 @@ var Theme = function Theme(_ref) {
|
|
|
13173
13982
|
}, children);
|
|
13174
13983
|
};
|
|
13175
13984
|
|
|
13176
|
-
var _templateObject$
|
|
13177
|
-
var GlobalStyles = /*#__PURE__*/styled.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) {
|
|
13985
|
+
var _templateObject$1y;
|
|
13986
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13178
13987
|
var theme = _ref.theme;
|
|
13179
13988
|
return theme.colors.primary;
|
|
13180
13989
|
}, function (_ref2) {
|
|
@@ -14121,10 +14930,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1u || (
|
|
|
14121
14930
|
return theme.footer.tablet.paddingBottom;
|
|
14122
14931
|
}, devices.desktop, devices.largeDesktop);
|
|
14123
14932
|
|
|
14124
|
-
var _templateObject$
|
|
14125
|
-
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
14126
|
-
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$
|
|
14127
|
-
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$
|
|
14933
|
+
var _templateObject$1z, _templateObject2$1c, _templateObject3$Z;
|
|
14934
|
+
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1z || (_templateObject$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14935
|
+
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1c || (_templateObject2$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14936
|
+
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
14128
14937
|
|
|
14129
14938
|
/* eslint-disable react/no-danger */
|
|
14130
14939
|
var Quote = function Quote(_ref) {
|
|
@@ -14219,7 +15028,9 @@ exports.Progress = Progress;
|
|
|
14219
15028
|
exports.PromoWithTags = PromoWithTags;
|
|
14220
15029
|
exports.PromoWithTitle = PromoWithTitle;
|
|
14221
15030
|
exports.Quote = Quote;
|
|
15031
|
+
exports.Radio = Radio;
|
|
14222
15032
|
exports.Radio2 = Radio2;
|
|
15033
|
+
exports.RadioGroup = RadioGroup;
|
|
14223
15034
|
exports.RadioGroup2 = RadioGroup2;
|
|
14224
15035
|
exports.ReadMore = ReadMore;
|
|
14225
15036
|
exports.RotatorButtons = RotatorButtons;
|
|
@@ -14228,6 +15039,7 @@ exports.SecondaryButton = SecondaryButton;
|
|
|
14228
15039
|
exports.SecondaryLogo = SecondaryLogo;
|
|
14229
15040
|
exports.SectionSplitter = SectionSplitter;
|
|
14230
15041
|
exports.SectionTitle = SectionTitle;
|
|
15042
|
+
exports.Select = Select;
|
|
14231
15043
|
exports.Select2 = SelectComponent;
|
|
14232
15044
|
exports.Select2Async = SelectComponent$1;
|
|
14233
15045
|
exports.SignUpForm = SignUpFormComponent;
|
|
@@ -14256,7 +15068,7 @@ exports.TypeTags = TypeTags;
|
|
|
14256
15068
|
exports.UpsellCard = UpsellCard;
|
|
14257
15069
|
exports.UpsellSection = UpsellSection;
|
|
14258
15070
|
exports.VideoControls = VideoControls;
|
|
14259
|
-
exports.VideoWithControls = VideoWithControls$
|
|
15071
|
+
exports.VideoWithControls = VideoWithControls$2;
|
|
14260
15072
|
exports.breakpoints = breakpoints;
|
|
14261
15073
|
exports.devices = devices;
|
|
14262
15074
|
exports.useHarmonicTheme = useHarmonicTheme;
|