@royaloperahouse/harmonic 0.18.8 → 0.19.1-a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -0
- package/README.md +267 -43
- package/dist/components/atoms/index.d.ts +1 -2
- package/dist/components/index.d.ts +3 -3
- package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +0 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +0 -2
- package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +1 -3
- package/dist/components/molecules/PersonCard/PersonCard.style.d.ts +1 -3
- package/dist/components/molecules/Select2/Select2.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +1 -3
- package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +1 -3
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +1 -3
- package/dist/harmonic.cjs.development.js +468 -1062
- 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 +468 -1059
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/card.d.ts +0 -2
- package/dist/types/signUpForm.d.ts +0 -1
- package/dist/types/types.d.ts +0 -8
- package/dist/types/upsell.d.ts +0 -2
- package/package.json +6 -20
- package/README.GIT +0 -293
- package/dist/components/atoms/Radio/Radio.d.ts +0 -7
- package/dist/components/atoms/Radio/Radio.style.d.ts +0 -4
- package/dist/components/atoms/Radio/index.d.ts +0 -2
- package/dist/components/molecules/RadioGroup/RadioGroup.d.ts +0 -7
- package/dist/components/molecules/RadioGroup/RadioGroup.style.d.ts +0 -1
- package/dist/components/molecules/RadioGroup/index.d.ts +0 -2
- package/dist/components/molecules/Select/Select.d.ts +0 -101
- package/dist/components/molecules/Select/Select.style.d.ts +0 -13
- package/dist/components/molecules/Select/index.d.ts +0 -2
|
@@ -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
|
|
14
|
-
var
|
|
15
|
-
var Select$
|
|
13
|
+
var Select = require('react-select');
|
|
14
|
+
var Select__default = _interopDefault(Select);
|
|
15
|
+
var Select$1 = _interopDefault(require('react-select/async'));
|
|
16
16
|
var Modal = _interopDefault(require('react-modal'));
|
|
17
17
|
var ScrollLock = _interopDefault(require('react-scrolllock'));
|
|
18
18
|
|
|
@@ -217,8 +217,7 @@ 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
|
-
|
|
221
|
-
serif = _ref2$serif === void 0 ? false : _ref2$serif,
|
|
220
|
+
serif = _ref2.serif,
|
|
222
221
|
hierarchy = _ref2.hierarchy,
|
|
223
222
|
tag = _ref2.tag,
|
|
224
223
|
className = _ref2.className,
|
|
@@ -3261,10 +3260,56 @@ var Progress = function Progress(_ref) {
|
|
|
3261
3260
|
}, renderSteps()));
|
|
3262
3261
|
};
|
|
3263
3262
|
|
|
3264
|
-
var _templateObject$c, _templateObject2$7, _templateObject3$3;
|
|
3265
|
-
var
|
|
3266
|
-
var
|
|
3267
|
-
var
|
|
3263
|
+
var _templateObject$c, _templateObject2$7, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3264
|
+
var Container = /*#__PURE__*/styled__default.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3265
|
+
var Radio = /*#__PURE__*/styled__default.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3266
|
+
var error = _ref.error,
|
|
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
|
+
});
|
|
3268
3313
|
|
|
3269
3314
|
var _templateObject$d;
|
|
3270
3315
|
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) {
|
|
@@ -3381,95 +3426,6 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
3381
3426
|
}, children);
|
|
3382
3427
|
};
|
|
3383
3428
|
|
|
3384
|
-
/**
|
|
3385
|
-
* DEPRECATED. Use Radio2 instead
|
|
3386
|
-
*/
|
|
3387
|
-
var Radio = function Radio(_ref) {
|
|
3388
|
-
var _ref$checked = _ref.checked,
|
|
3389
|
-
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
3390
|
-
error = _ref.error,
|
|
3391
|
-
label = _ref.label,
|
|
3392
|
-
onChange = _ref.onChange;
|
|
3393
|
-
var _useState = React.useState(checked),
|
|
3394
|
-
isChecked = _useState[0],
|
|
3395
|
-
setChecked = _useState[1];
|
|
3396
|
-
var handleRadioChange = function handleRadioChange() {
|
|
3397
|
-
setChecked(!isChecked);
|
|
3398
|
-
onChange == null || onChange(label != null ? label : '');
|
|
3399
|
-
};
|
|
3400
|
-
var handleKeyPress = function handleKeyPress(event) {
|
|
3401
|
-
if (event.key === 'Space' || event.key === ' ') handleRadioChange();
|
|
3402
|
-
};
|
|
3403
|
-
React.useEffect(function () {
|
|
3404
|
-
setChecked(checked);
|
|
3405
|
-
}, [onChange]);
|
|
3406
|
-
return /*#__PURE__*/React__default.createElement(RadioContainer, null, /*#__PURE__*/React__default.createElement(RadioLine, {
|
|
3407
|
-
role: "radio",
|
|
3408
|
-
tabIndex: 0,
|
|
3409
|
-
onClick: handleRadioChange,
|
|
3410
|
-
onKeyPress: handleKeyPress
|
|
3411
|
-
}, /*#__PURE__*/React__default.createElement("input", {
|
|
3412
|
-
type: "radio",
|
|
3413
|
-
checked: isChecked,
|
|
3414
|
-
readOnly: true
|
|
3415
|
-
}), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3416
|
-
level: 1
|
|
3417
|
-
}, label)), error && (/*#__PURE__*/React__default.createElement(RadioError, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3418
|
-
level: 1
|
|
3419
|
-
}, error))));
|
|
3420
|
-
};
|
|
3421
|
-
|
|
3422
|
-
var _templateObject$e, _templateObject2$8, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3423
|
-
var Container = /*#__PURE__*/styled__default.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3424
|
-
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) {
|
|
3425
|
-
var error = _ref.error,
|
|
3426
|
-
darkMode = _ref.darkMode,
|
|
3427
|
-
disabled = _ref.disabled;
|
|
3428
|
-
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3429
|
-
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3430
|
-
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3431
|
-
return '1px solid var(--base-color-black)';
|
|
3432
|
-
}, function (_ref2) {
|
|
3433
|
-
var disabled = _ref2.disabled,
|
|
3434
|
-
darkMode = _ref2.darkMode;
|
|
3435
|
-
if (disabled) return 'var(--base-color-light-grey)';
|
|
3436
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3437
|
-
return ' var(--base-color-white)';
|
|
3438
|
-
}, function (_ref3) {
|
|
3439
|
-
var disabled = _ref3.disabled,
|
|
3440
|
-
blackBox = _ref3.blackBox,
|
|
3441
|
-
darkMode = _ref3.darkMode;
|
|
3442
|
-
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3443
|
-
if (darkMode) return 'var(--base-color-black)';
|
|
3444
|
-
if (blackBox) return 'var(--base-color-white)';
|
|
3445
|
-
return ' var(--base-color-black)';
|
|
3446
|
-
});
|
|
3447
|
-
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) {
|
|
3448
|
-
var blackBox = _ref4.blackBox,
|
|
3449
|
-
darkMode = _ref4.darkMode;
|
|
3450
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3451
|
-
if (blackBox) return 'var(--base-color-black)';
|
|
3452
|
-
return ' var(--base-color-white)';
|
|
3453
|
-
}, Radio$1, function (_ref5) {
|
|
3454
|
-
var darkMode = _ref5.darkMode;
|
|
3455
|
-
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3456
|
-
return '3px solid var(--base-color-lapislazuli)';
|
|
3457
|
-
});
|
|
3458
|
-
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);
|
|
3459
|
-
var TextLabel = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3460
|
-
var darkMode = _ref6.darkMode,
|
|
3461
|
-
disabled = _ref6.disabled;
|
|
3462
|
-
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3463
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3464
|
-
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3465
|
-
return 'var(--base-color-black)';
|
|
3466
|
-
});
|
|
3467
|
-
var ErrorLabel = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3468
|
-
var darkMode = _ref7.darkMode;
|
|
3469
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3470
|
-
return 'var(--base-color-errorstate)';
|
|
3471
|
-
});
|
|
3472
|
-
|
|
3473
3429
|
var _excluded$7 = ["children", "disabled", "error", "darkMode", "blackBox"];
|
|
3474
3430
|
/**
|
|
3475
3431
|
* A Radio component, that wraps around the native `<input type="radio"/>` element
|
|
@@ -3508,7 +3464,7 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3508
3464
|
type: "radio",
|
|
3509
3465
|
ref: ref,
|
|
3510
3466
|
"data-testid": "radio-input"
|
|
3511
|
-
})), /*#__PURE__*/React__default.createElement(Radio
|
|
3467
|
+
})), /*#__PURE__*/React__default.createElement(Radio, {
|
|
3512
3468
|
error: error,
|
|
3513
3469
|
darkMode: darkMode,
|
|
3514
3470
|
disabled: disabled,
|
|
@@ -3528,9 +3484,9 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3528
3484
|
};
|
|
3529
3485
|
var Radio2 = /*#__PURE__*/React.forwardRef(Radio2Component);
|
|
3530
3486
|
|
|
3531
|
-
var _templateObject$
|
|
3532
|
-
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3533
|
-
var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3487
|
+
var _templateObject$e, _templateObject2$8, _templateObject3$4, _templateObject4$3, _templateObject5$2;
|
|
3488
|
+
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3489
|
+
var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n\n width: ", ";\n height: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (_ref) {
|
|
3534
3490
|
var size = _ref.size;
|
|
3535
3491
|
return size === 'small' ? 'var(--rotator-button-small-width)' : 'var(--rotator-button-width)';
|
|
3536
3492
|
}, function (_ref2) {
|
|
@@ -3543,7 +3499,7 @@ var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_t
|
|
|
3543
3499
|
var size = _ref4.size;
|
|
3544
3500
|
return size === 'small' ? 'var(--rotator-button-small-icon-width)' : 'var(--rotator-button-icon-width)';
|
|
3545
3501
|
});
|
|
3546
|
-
var IconWrapper$1 = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject3$
|
|
3502
|
+
var IconWrapper$1 = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--rotator-button-bg-color);\n color: var(--rotator-button-color);\n\n svg path {\n fill: var(--rotator-button-color);\n }\n\n :hover {\n cursor: pointer;\n background-color: var(--rotator-button-hover-bg-color);\n\n && svg path {\n fill: var(--rotator-button-hover-color);\n }\n }\n"])));
|
|
3547
3503
|
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);
|
|
3548
3504
|
var FullscreenIconWrapper = /*#__PURE__*/styled__default(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
|
|
3549
3505
|
|
|
@@ -3733,8 +3689,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3733
3689
|
}, renderFullscreenIcon())));
|
|
3734
3690
|
};
|
|
3735
3691
|
|
|
3736
|
-
var _templateObject$
|
|
3737
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$
|
|
3692
|
+
var _templateObject$f;
|
|
3693
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3738
3694
|
var fillColor = _ref.fillColor;
|
|
3739
3695
|
return fillColor;
|
|
3740
3696
|
});
|
|
@@ -3759,9 +3715,9 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3759
3715
|
})));
|
|
3760
3716
|
};
|
|
3761
3717
|
|
|
3762
|
-
var _templateObject$
|
|
3763
|
-
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
3764
|
-
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3718
|
+
var _templateObject$g, _templateObject2$9;
|
|
3719
|
+
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3720
|
+
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--color-base-light-grey);\n"])));
|
|
3765
3721
|
|
|
3766
3722
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
3767
3723
|
var _ref$fullWidth = _ref.fullWidth,
|
|
@@ -3782,8 +3738,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3782
3738
|
}, /*#__PURE__*/React__default.createElement(Splitter, null))));
|
|
3783
3739
|
};
|
|
3784
3740
|
|
|
3785
|
-
var _templateObject$
|
|
3786
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3741
|
+
var _templateObject$h;
|
|
3742
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-block;\n height: auto;\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n\n img {\n display: block;\n width: 100%;\n }\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n"])), devices.tablet, devices.mobile);
|
|
3787
3743
|
|
|
3788
3744
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3789
3745
|
var imageSource = _ref.imageSource,
|
|
@@ -3810,10 +3766,10 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3810
3766
|
}) : children));
|
|
3811
3767
|
};
|
|
3812
3768
|
|
|
3813
|
-
var _templateObject$
|
|
3814
|
-
var SponsorshipWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3815
|
-
var SponsorshipLinkText = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3816
|
-
var SponsorshipLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
3769
|
+
var _templateObject$i, _templateObject2$a, _templateObject3$5, _templateObject4$4;
|
|
3770
|
+
var SponsorshipWrapper = /*#__PURE__*/styled__default.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n position: relative;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3771
|
+
var SponsorshipLinkText = /*#__PURE__*/styled__default.span(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n whitespace: nowrap;\n borderwidth: 0;\n"])));
|
|
3772
|
+
var SponsorshipLink = /*#__PURE__*/styled__default.a(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n inset: 0;\n width: 80px;\n height: 80px;\n z-index: 2;\n text-decoration: none;\n background: transparent;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3817
3773
|
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);
|
|
3818
3774
|
|
|
3819
3775
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3848,8 +3804,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3848
3804
|
}));
|
|
3849
3805
|
};
|
|
3850
3806
|
|
|
3851
|
-
var _templateObject$
|
|
3852
|
-
var TabText = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3807
|
+
var _templateObject$j, _templateObject2$b;
|
|
3808
|
+
var TabText = /*#__PURE__*/styled__default.a(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--harmonic-letter-spacing-navigation);\n text-decoration: none;\n margin-left: 5px;\n color: var(--color-primary-black);\n color: ", ";\n\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n ", "\n\n @media ", " {\n width: max-content;\n }\n"])), function (_ref) {
|
|
3853
3809
|
var color = _ref.color;
|
|
3854
3810
|
return color ? "var(--color-" + color + ")" : "var(--color-primary-black)";
|
|
3855
3811
|
}, function (props) {
|
|
@@ -3860,7 +3816,7 @@ var TabText = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObje
|
|
|
3860
3816
|
}
|
|
3861
3817
|
return "";
|
|
3862
3818
|
}, devices.mobileAndTablet);
|
|
3863
|
-
var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3819
|
+
var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: fit-content;\n height: 100%;\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n & path {\n fill: var(--color-primary-black);\n }\n }\n\n ", "\n\n ", "\n\n @media ", " {\n svg {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n"])), function (props) {
|
|
3864
3820
|
if (props.withIcon === 'left') {
|
|
3865
3821
|
return "\n flex-direction: row-reverse;\n svg {\n margin-right: 6px;\n }";
|
|
3866
3822
|
}
|
|
@@ -3945,8 +3901,8 @@ var Tab = function Tab(_ref) {
|
|
|
3945
3901
|
}));
|
|
3946
3902
|
};
|
|
3947
3903
|
|
|
3948
|
-
var _templateObject$
|
|
3949
|
-
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3904
|
+
var _templateObject$k, _templateObject2$c;
|
|
3905
|
+
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n\n && svg path {\n fill: ", ";\n }\n\n @media ", ", ", " {\n &:hover {\n color: var(--color-", ");\n border-bottom: 1px solid var(--color-", ");\n\n && svg path {\n fill: var(--color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3950
3906
|
var iconName = _ref.iconName;
|
|
3951
3907
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px) 0' : 'var(--harmonic-text-link-underline-offset) 0';
|
|
3952
3908
|
}, function (_ref2) {
|
|
@@ -3973,7 +3929,7 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templ
|
|
|
3973
3929
|
var hoverColor = _ref7.hoverColor;
|
|
3974
3930
|
return hoverColor;
|
|
3975
3931
|
});
|
|
3976
|
-
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3932
|
+
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
|
|
3977
3933
|
|
|
3978
3934
|
var _excluded$9 = ["children", "iconName", "iconDirection", "color", "hoverColor", "className"];
|
|
3979
3935
|
var TabLink = function TabLink(_ref) {
|
|
@@ -4001,19 +3957,19 @@ var TabLink = function TabLink(_ref) {
|
|
|
4001
3957
|
}))) : null, children);
|
|
4002
3958
|
};
|
|
4003
3959
|
|
|
4004
|
-
var _templateObject$
|
|
4005
|
-
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3960
|
+
var _templateObject$l, _templateObject2$d, _templateObject3$6, _templateObject4$5;
|
|
3961
|
+
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
4006
3962
|
var width = _ref.width;
|
|
4007
3963
|
return width ? width + "px;" : '100%;';
|
|
4008
3964
|
}, function (_ref2) {
|
|
4009
3965
|
var height = _ref2.height;
|
|
4010
3966
|
return height + "px;";
|
|
4011
3967
|
});
|
|
4012
|
-
var TextAreaLabel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3968
|
+
var TextAreaLabel = /*#__PURE__*/styled__default.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 0 15px;\n ", ";\n"])), function (_ref3) {
|
|
4013
3969
|
var darkMode = _ref3.darkMode;
|
|
4014
3970
|
return darkMode ? 'color: var(--base-color-white)' : '';
|
|
4015
3971
|
});
|
|
4016
|
-
var TextAreaBox = /*#__PURE__*/styled__default.textarea(_templateObject3$
|
|
3972
|
+
var TextAreaBox = /*#__PURE__*/styled__default.textarea(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n box-sizing: border-box;\n resize: none;\n padding: 20px;\n width: 100%;\n height: 100%;\n border: 1px solid ", ";\n\n ", ";\n\n :disabled {\n background-color: var(--base-color-light-grey);\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline-style: solid;\n outline-width: ", ";\n outline-color: ", ";\n }\n"])), function (_ref4) {
|
|
4017
3973
|
var error = _ref4.error;
|
|
4018
3974
|
return error ? 'var(--base-color-errorstate)' : 'var(--base-color-light-grey)';
|
|
4019
3975
|
}, function (_ref5) {
|
|
@@ -4124,14 +4080,14 @@ var TextArea = function TextArea(_ref) {
|
|
|
4124
4080
|
}, error)))));
|
|
4125
4081
|
};
|
|
4126
4082
|
|
|
4127
|
-
var _templateObject$
|
|
4128
|
-
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4129
|
-
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4083
|
+
var _templateObject$m, _templateObject2$e, _templateObject3$7, _templateObject4$6, _templateObject5$3, _templateObject6$1, _templateObject7;
|
|
4084
|
+
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4085
|
+
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
4130
4086
|
var width = _ref.width;
|
|
4131
4087
|
if (!width) return 'none';
|
|
4132
4088
|
return width + "px";
|
|
4133
4089
|
});
|
|
4134
|
-
var Input = /*#__PURE__*/styled__default.input(_templateObject3$
|
|
4090
|
+
var Input = /*#__PURE__*/styled__default.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--color-base-light-grey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n"])), function (_ref2) {
|
|
4135
4091
|
var isPasswordField = _ref2.isPasswordField;
|
|
4136
4092
|
if (isPasswordField) return "80px";
|
|
4137
4093
|
return "20px";
|
|
@@ -4258,9 +4214,9 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
|
|
|
4258
4214
|
};
|
|
4259
4215
|
var TextField = /*#__PURE__*/React.forwardRef(TextFieldComponent);
|
|
4260
4216
|
|
|
4261
|
-
var _templateObject$
|
|
4262
|
-
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4263
|
-
var textStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
4217
|
+
var _templateObject$n, _templateObject2$f, _templateObject3$8, _templateObject4$7, _templateObject5$4;
|
|
4218
|
+
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4219
|
+
var textStyles = /*#__PURE__*/styled.css(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
|
|
4264
4220
|
var theme = _ref.theme;
|
|
4265
4221
|
return theme.fonts.desktop.weights.body[1];
|
|
4266
4222
|
}, function (_ref2) {
|
|
@@ -4270,7 +4226,7 @@ var textStyles = /*#__PURE__*/styled.css(_templateObject2$g || (_templateObject2
|
|
|
4270
4226
|
var theme = _ref3.theme;
|
|
4271
4227
|
return theme.spacing[7];
|
|
4272
4228
|
});
|
|
4273
|
-
var Input$1 = /*#__PURE__*/styled__default.input(_templateObject3$
|
|
4229
|
+
var Input$1 = /*#__PURE__*/styled__default.input(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n width: ", ";\n height: 48px;\n padding: 0px 20px;\n\n border: 1px solid ", ";\n outline: none;\n\n ", "\n\n :disabled {\n background-color: ", ";\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline: ", "};\n }\n"])), textStyles, function (_ref4) {
|
|
4274
4230
|
var width = _ref4.width;
|
|
4275
4231
|
return width ? width + "px" : '196px';
|
|
4276
4232
|
}, function (_ref5) {
|
|
@@ -4335,15 +4291,15 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4335
4291
|
}, error)) : null);
|
|
4336
4292
|
};
|
|
4337
4293
|
|
|
4338
|
-
var _templateObject$
|
|
4339
|
-
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
4294
|
+
var _templateObject$o, _templateObject2$g;
|
|
4295
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n text-underline-offset: ", ";\n font-family: var(--font-family-sans);\n font-size: 19px;\n font-weight: 500;\n line-height: 17px;\n letter-spacing: 0.4px;\n color: var(--color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media ", " {\n font-size: 17px;\n }\n"])), function (_ref) {
|
|
4340
4296
|
var iconName = _ref.iconName;
|
|
4341
4297
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
|
|
4342
4298
|
}, function (_ref2) {
|
|
4343
4299
|
var color = _ref2.color;
|
|
4344
4300
|
return color;
|
|
4345
4301
|
}, devices.mobile);
|
|
4346
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
4302
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
4347
4303
|
|
|
4348
4304
|
var _excluded$d = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
4349
4305
|
var TextLink = function TextLink(_ref) {
|
|
@@ -4374,12 +4330,12 @@ var TextLogoProduct;
|
|
|
4374
4330
|
TextLogoProduct["Cinema"] = "CINEMA";
|
|
4375
4331
|
})(TextLogoProduct || (TextLogoProduct = {}));
|
|
4376
4332
|
|
|
4377
|
-
var _templateObject$
|
|
4378
|
-
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4333
|
+
var _templateObject$p, _templateObject2$h, _templateObject3$9, _templateObject4$8;
|
|
4334
|
+
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4379
4335
|
var dark = _ref.dark;
|
|
4380
4336
|
return dark ? 'white' : 'errorstate';
|
|
4381
4337
|
});
|
|
4382
|
-
var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$
|
|
4338
|
+
var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(\n --base-color-", "\n );\n cursor: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n div {\n margin-left: -32px;\n }\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref2) {
|
|
4383
4339
|
var dark = _ref2.dark,
|
|
4384
4340
|
disabled = _ref2.disabled;
|
|
4385
4341
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -4388,7 +4344,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$i || (_
|
|
|
4388
4344
|
var disabled = _ref3.disabled;
|
|
4389
4345
|
return disabled ? 'not-allowed' : 'pointer';
|
|
4390
4346
|
}, devices.mobileAndTablet);
|
|
4391
|
-
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$
|
|
4347
|
+
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n outline: ", ";\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref4) {
|
|
4392
4348
|
var dark = _ref4.dark,
|
|
4393
4349
|
disabled = _ref4.disabled,
|
|
4394
4350
|
error = _ref4.error;
|
|
@@ -4495,9 +4451,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
4495
4451
|
}, error))));
|
|
4496
4452
|
};
|
|
4497
4453
|
|
|
4498
|
-
var _templateObject$
|
|
4499
|
-
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4500
|
-
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4454
|
+
var _templateObject$q, _templateObject2$i, _templateObject3$a, _templateObject4$9, _templateObject5$5, _templateObject6$2;
|
|
4455
|
+
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4456
|
+
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
4501
4457
|
var error = _ref.error,
|
|
4502
4458
|
darkMode = _ref.darkMode,
|
|
4503
4459
|
disabled = _ref.disabled;
|
|
@@ -4520,7 +4476,7 @@ var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templat
|
|
|
4520
4476
|
if (blackBox) return 'var(--base-color-white)';
|
|
4521
4477
|
return ' var(--base-color-black)';
|
|
4522
4478
|
});
|
|
4523
|
-
var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$
|
|
4479
|
+
var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='checkbox'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Tickbox$1, function (_ref4) {
|
|
4524
4480
|
var blackBox = _ref4.blackBox,
|
|
4525
4481
|
darkMode = _ref4.darkMode;
|
|
4526
4482
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -4606,16 +4562,16 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
|
|
|
4606
4562
|
};
|
|
4607
4563
|
var Tickbox2 = /*#__PURE__*/React.forwardRef(Tickbox2Component);
|
|
4608
4564
|
|
|
4609
|
-
var _templateObject$
|
|
4610
|
-
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4565
|
+
var _templateObject$r, _templateObject2$j, _templateObject3$b, _templateObject4$a, _templateObject5$6, _templateObject6$3, _templateObject7$1, _templateObject8;
|
|
4566
|
+
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-", ");\n"])), function (_ref) {
|
|
4611
4567
|
var color = _ref.color;
|
|
4612
4568
|
return color;
|
|
4613
4569
|
});
|
|
4614
|
-
var Line = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4570
|
+
var Line = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
|
|
4615
4571
|
var color = _ref2.color;
|
|
4616
4572
|
return color;
|
|
4617
4573
|
}, devices.mobileAndTablet);
|
|
4618
|
-
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4574
|
+
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4619
4575
|
var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
4620
4576
|
var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
4621
4577
|
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);
|
|
@@ -4716,8 +4672,8 @@ var Timer = function Timer(_ref) {
|
|
|
4716
4672
|
}));
|
|
4717
4673
|
};
|
|
4718
4674
|
|
|
4719
|
-
var _templateObject$
|
|
4720
|
-
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
4675
|
+
var _templateObject$s;
|
|
4676
|
+
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\u2013';\n margin: 0 0.5em;\n }\n\n li:first-child:before {\n display: none;\n }\n"])));
|
|
4721
4677
|
|
|
4722
4678
|
var TypeTags = function TypeTags(_ref) {
|
|
4723
4679
|
var list = _ref.list;
|
|
@@ -4730,10 +4686,10 @@ var TypeTags = function TypeTags(_ref) {
|
|
|
4730
4686
|
}));
|
|
4731
4687
|
};
|
|
4732
4688
|
|
|
4733
|
-
var _templateObject$
|
|
4734
|
-
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$
|
|
4735
|
-
var VideoFullscreenButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
4736
|
-
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4689
|
+
var _templateObject$t, _templateObject2$k, _templateObject3$c, _templateObject4$b, _templateObject5$7, _templateObject6$4, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject0;
|
|
4690
|
+
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n cursor: pointer;\n"])));
|
|
4691
|
+
var VideoFullscreenButton = /*#__PURE__*/styled__default.button(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
|
|
4692
|
+
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
4737
4693
|
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"])));
|
|
4738
4694
|
var LeftWrapper = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4739
4695
|
var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
@@ -4920,13 +4876,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4920
4876
|
}))));
|
|
4921
4877
|
};
|
|
4922
4878
|
|
|
4923
|
-
var _templateObject$
|
|
4924
|
-
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4925
|
-
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4879
|
+
var _templateObject$u, _templateObject2$l, _templateObject3$d, _templateObject4$c, _templateObject5$8;
|
|
4880
|
+
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
4881
|
+
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
4926
4882
|
var darkMode = _ref.darkMode;
|
|
4927
4883
|
return darkMode ? 'white' : 'errorstate';
|
|
4928
4884
|
});
|
|
4929
|
-
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4885
|
+
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 154px;\n height: 48px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n ", ";\n\n * {\n color: var(--base-color-", ");\n word-break: unset;\n user-select: none;\n }\n\n path {\n fill: var(--base-color-", ") !important;\n }\n\n & > * {\n width: 51px;\n }\n"])), function (_ref2) {
|
|
4930
4886
|
var darkMode = _ref2.darkMode,
|
|
4931
4887
|
disabled = _ref2.disabled,
|
|
4932
4888
|
error = _ref2.error;
|
|
@@ -5130,9 +5086,9 @@ var Component = function Component(_ref) {
|
|
|
5130
5086
|
}, error))));
|
|
5131
5087
|
};
|
|
5132
5088
|
|
|
5133
|
-
var _templateObject$
|
|
5134
|
-
var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5135
|
-
var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
5089
|
+
var _templateObject$v, _templateObject2$m;
|
|
5090
|
+
var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
|
|
5091
|
+
var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n\n &:focus {\n outline: 2px solid var(--color-base-white);\n }\n"])));
|
|
5136
5092
|
|
|
5137
5093
|
var SocialLinks = function SocialLinks(_ref) {
|
|
5138
5094
|
var items = _ref.items;
|
|
@@ -5156,16 +5112,16 @@ var SocialLinks = function SocialLinks(_ref) {
|
|
|
5156
5112
|
}));
|
|
5157
5113
|
};
|
|
5158
5114
|
|
|
5159
|
-
var _templateObject$
|
|
5160
|
-
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5115
|
+
var _templateObject$w, _templateObject2$n, _templateObject3$e, _templateObject4$d, _templateObject5$9, _templateObject6$5, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
5116
|
+
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 4px;\n\n @media ", " {\n padding-top: 0px;\n }\n\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
5161
5117
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5162
5118
|
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 ";
|
|
5163
5119
|
});
|
|
5164
|
-
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5120
|
+
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: ", ";\n opacity: 0;\n animation: fadeIn 0.3s ease forwards;\n\n @media ", " {\n top: 230px;\n background-color: var(--color-base-black);\n }\n\n @keyframes fadeIn {\n to {\n opacity: 0.5;\n }\n }\n"])), function (_ref2) {
|
|
5165
5121
|
var isMobile = _ref2.isMobile;
|
|
5166
5122
|
return isMobile ? zIndexes.overlay : zIndexes.searchOverlay;
|
|
5167
5123
|
}, devices.mobileAndTablet);
|
|
5168
|
-
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
5124
|
+
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-white);\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n z-index: ", ";\n\n @media ", " {\n height: 60px;\n }\n"])), zIndexes.navigation, devices.mobileAndTablet);
|
|
5169
5125
|
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) {
|
|
5170
5126
|
var visible = _ref3.visible;
|
|
5171
5127
|
return visible ? 'visible' : 'hidden';
|
|
@@ -5200,11 +5156,11 @@ var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObjec
|
|
|
5200
5156
|
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);
|
|
5201
5157
|
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);
|
|
5202
5158
|
|
|
5203
|
-
var _templateObject$
|
|
5204
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5159
|
+
var _templateObject$x;
|
|
5160
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 100%;\n\n @media ", " {\n column-gap: 20px;\n }\n"])), devices.mobile);
|
|
5205
5161
|
|
|
5206
|
-
var _templateObject$
|
|
5207
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5162
|
+
var _templateObject$y, _templateObject2$o, _templateObject3$f, _templateObject4$e, _templateObject5$a, _templateObject6$6;
|
|
5163
|
+
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding-top: 3px;\n padding-bottom: 3px;\n\n & svg path {\n fill: var(--color-primary-black);\n }\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--color-primary-red);\n padding-bottom: 2px;\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
5208
5164
|
var selected = _ref.selected;
|
|
5209
5165
|
if (selected) {
|
|
5210
5166
|
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 ";
|
|
@@ -5217,8 +5173,8 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$z || (_te
|
|
|
5217
5173
|
}
|
|
5218
5174
|
return '';
|
|
5219
5175
|
});
|
|
5220
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5221
|
-
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5176
|
+
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5177
|
+
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n"])));
|
|
5222
5178
|
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);
|
|
5223
5179
|
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"])));
|
|
5224
5180
|
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"])));
|
|
@@ -5365,15 +5321,15 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5365
5321
|
}, expiryTime ? basketText : text)) : ''));
|
|
5366
5322
|
};
|
|
5367
5323
|
|
|
5368
|
-
var _templateObject$
|
|
5369
|
-
var SearchContainer = /*#__PURE__*/styled__default.button(_templateObject$
|
|
5324
|
+
var _templateObject$z, _templateObject2$p;
|
|
5325
|
+
var SearchContainer = /*#__PURE__*/styled__default.button(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid transparent;\n padding-top: 3px;\n padding-bottom: 3px;\n\n svg path {\n fill: var(--color-primary-black);\n }\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])), function (_ref) {
|
|
5370
5326
|
var selected = _ref.selected;
|
|
5371
5327
|
if (selected) {
|
|
5372
5328
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
5373
5329
|
}
|
|
5374
5330
|
return '';
|
|
5375
5331
|
});
|
|
5376
|
-
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5332
|
+
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5377
5333
|
|
|
5378
5334
|
var Search$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
5379
5335
|
var _ref$selected = _ref.selected,
|
|
@@ -5633,15 +5589,15 @@ var NavTop = function NavTop(_ref) {
|
|
|
5633
5589
|
}));
|
|
5634
5590
|
};
|
|
5635
5591
|
|
|
5636
|
-
var _templateObject$
|
|
5637
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5638
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5592
|
+
var _templateObject$A, _templateObject2$q, _templateObject3$g, _templateObject4$f;
|
|
5593
|
+
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
5594
|
+
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
5639
5595
|
if (props.showMenu) {
|
|
5640
5596
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
5641
5597
|
}
|
|
5642
5598
|
return "display: none;";
|
|
5643
5599
|
});
|
|
5644
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5600
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--color-primary-red);\n }\n }\n\n && svg path {\n fill: var(--color-primary-black);\n }\n\n :hover {\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5645
5601
|
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);
|
|
5646
5602
|
|
|
5647
5603
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
@@ -5768,10 +5724,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
5768
5724
|
}, "Menu"))))));
|
|
5769
5725
|
};
|
|
5770
5726
|
|
|
5771
|
-
var _templateObject$
|
|
5772
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5773
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5774
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
5727
|
+
var _templateObject$B, _templateObject2$r, _templateObject3$h, _templateObject5$b, _templateObject6$7, _templateObject7$4;
|
|
5728
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: transparent;\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
5729
|
+
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
5730
|
+
var SvgContainerClose = /*#__PURE__*/styled__default.button(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])));
|
|
5775
5731
|
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);
|
|
5776
5732
|
var TextLinkWrapper$1 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
5777
5733
|
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"])));
|
|
@@ -5912,19 +5868,19 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5912
5868
|
})));
|
|
5913
5869
|
};
|
|
5914
5870
|
|
|
5915
|
-
var _templateObject$
|
|
5916
|
-
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5871
|
+
var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject4$g, _templateObject5$c, _templateObject6$8, _templateObject7$5;
|
|
5872
|
+
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n border-top: 2px solid var(--color-base-light-grey);\n border-bottom: ", ";\n"])), function (_ref) {
|
|
5917
5873
|
var showLine = _ref.showLine;
|
|
5918
5874
|
return showLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5919
5875
|
});
|
|
5920
|
-
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5876
|
+
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n opacity: ", ";\n transition: opacity 0.2s ease;\n pointer-events: ", ";\n\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref2) {
|
|
5921
5877
|
var isVisible = _ref2.isVisible;
|
|
5922
5878
|
return isVisible ? 1 : 0;
|
|
5923
5879
|
}, function (_ref3) {
|
|
5924
5880
|
var isVisible = _ref3.isVisible;
|
|
5925
5881
|
return isVisible ? 'auto' : 'none';
|
|
5926
5882
|
}, devices.mobile);
|
|
5927
|
-
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5883
|
+
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-top: 28px;\n padding-bottom: 28px;\n color: var(--color-primary-black);\n\n && svg {\n width: 24px;\n height: 24px;\n }\n\n :hover {\n cursor: ", ";\n pointer-events: ", ";\n }\n\n @media ", " {\n padding-top: 16px;\n padding-bottom: 16px;\n }\n"])), function (_ref4) {
|
|
5928
5884
|
var hasChildren = _ref4.hasChildren;
|
|
5929
5885
|
return hasChildren ? 'pointer' : 'default';
|
|
5930
5886
|
}, function (_ref5) {
|
|
@@ -5937,31 +5893,13 @@ var ContentContainer = /*#__PURE__*/styled__default(ExtendedBodyCopyHarmonic).wi
|
|
|
5937
5893
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5938
5894
|
return prop !== 'textHeight';
|
|
5939
5895
|
}
|
|
5940
|
-
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n
|
|
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) {
|
|
5941
5897
|
var textHeight = _ref6.textHeight;
|
|
5942
5898
|
return textHeight;
|
|
5943
|
-
}, function (_ref7) {
|
|
5944
|
-
var textHeight = _ref7.textHeight;
|
|
5945
|
-
return textHeight === '0px' ? 'hidden' : 'visible';
|
|
5946
|
-
}, function (_ref8) {
|
|
5947
|
-
var textHeight = _ref8.textHeight;
|
|
5948
|
-
return textHeight === '0px' ? '0px' : '12px';
|
|
5949
5899
|
}, devices.mobile);
|
|
5950
5900
|
var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
5951
5901
|
|
|
5952
5902
|
/* eslint-disable react/no-unstable-nested-components */
|
|
5953
|
-
/** In-flow height only so absolutely positioned UI (e.g. react-select menu) does not inflate scrollHeight. */
|
|
5954
|
-
function getPanelContentHeight(panel) {
|
|
5955
|
-
var inner = panel.firstElementChild;
|
|
5956
|
-
if (!inner || !(inner instanceof HTMLElement)) {
|
|
5957
|
-
return panel.scrollHeight;
|
|
5958
|
-
}
|
|
5959
|
-
var innerStyle = window.getComputedStyle(inner);
|
|
5960
|
-
var marginY = (parseFloat(innerStyle.marginTop) || 0) + (parseFloat(innerStyle.marginBottom) || 0);
|
|
5961
|
-
var panelStyle = window.getComputedStyle(panel);
|
|
5962
|
-
var paddingY = (parseFloat(panelStyle.paddingTop) || 0) + (parseFloat(panelStyle.paddingBottom) || 0);
|
|
5963
|
-
return inner.offsetHeight + marginY + paddingY;
|
|
5964
|
-
}
|
|
5965
5903
|
var Accordion = function Accordion(_ref) {
|
|
5966
5904
|
var _expandedStateIcon$ic, _collapsedStateIcon$i;
|
|
5967
5905
|
var _ref$title = _ref.title,
|
|
@@ -5998,69 +5936,21 @@ var Accordion = function Accordion(_ref) {
|
|
|
5998
5936
|
var content = React.useRef(null);
|
|
5999
5937
|
var timeoutRef = React.useRef(null);
|
|
6000
5938
|
var rafRef = React.useRef(null);
|
|
6001
|
-
var resizeObserverRef = React.useRef(null);
|
|
6002
|
-
var intervalRef = React.useRef(null);
|
|
6003
5939
|
React.useEffect(function () {
|
|
6004
|
-
if (content.current && initOpen) {
|
|
6005
|
-
setTextHeight(
|
|
5940
|
+
if (content != null && content.current && initOpen) {
|
|
5941
|
+
setTextHeight(content.current.scrollHeight + "px");
|
|
6006
5942
|
}
|
|
6007
|
-
}, [initOpen]);
|
|
5943
|
+
}, [content, initOpen]);
|
|
6008
5944
|
React.useEffect(function () {
|
|
6009
|
-
|
|
6010
|
-
|
|
6011
|
-
|
|
6012
|
-
|
|
6013
|
-
|
|
6014
|
-
if (!openAccordion) {
|
|
5945
|
+
if (openAccordion && content != null && content.current) {
|
|
5946
|
+
rafRef.current = window.requestAnimationFrame(function () {
|
|
5947
|
+
var _content$current$scro, _content$current;
|
|
5948
|
+
setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
|
|
5949
|
+
});
|
|
5950
|
+
} else if (!openAccordion) {
|
|
6015
5951
|
setTextHeight('0px');
|
|
6016
|
-
if (resizeObserverRef.current) {
|
|
6017
|
-
resizeObserverRef.current.disconnect();
|
|
6018
|
-
resizeObserverRef.current = null;
|
|
6019
|
-
}
|
|
6020
|
-
if (intervalRef.current) {
|
|
6021
|
-
window.clearInterval(intervalRef.current);
|
|
6022
|
-
intervalRef.current = null;
|
|
6023
|
-
}
|
|
6024
|
-
if (rafRef.current) {
|
|
6025
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6026
|
-
rafRef.current = null;
|
|
6027
|
-
}
|
|
6028
|
-
return cleanup;
|
|
6029
5952
|
}
|
|
6030
|
-
|
|
6031
|
-
setTextHeight(getPanelContentHeight(el) + "px");
|
|
6032
|
-
};
|
|
6033
|
-
rafRef.current = window.requestAnimationFrame(updateHeight);
|
|
6034
|
-
if (typeof ResizeObserver !== 'undefined') {
|
|
6035
|
-
var ro = new ResizeObserver(updateHeight);
|
|
6036
|
-
ro.observe(el);
|
|
6037
|
-
resizeObserverRef.current = ro;
|
|
6038
|
-
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6039
|
-
return function () {
|
|
6040
|
-
ro.disconnect();
|
|
6041
|
-
resizeObserverRef.current = null;
|
|
6042
|
-
if (intervalRef.current) {
|
|
6043
|
-
window.clearInterval(intervalRef.current);
|
|
6044
|
-
intervalRef.current = null;
|
|
6045
|
-
}
|
|
6046
|
-
if (rafRef.current) {
|
|
6047
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6048
|
-
rafRef.current = null;
|
|
6049
|
-
}
|
|
6050
|
-
};
|
|
6051
|
-
}
|
|
6052
|
-
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6053
|
-
return function () {
|
|
6054
|
-
if (intervalRef.current) {
|
|
6055
|
-
window.clearInterval(intervalRef.current);
|
|
6056
|
-
intervalRef.current = null;
|
|
6057
|
-
}
|
|
6058
|
-
if (rafRef.current) {
|
|
6059
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6060
|
-
rafRef.current = null;
|
|
6061
|
-
}
|
|
6062
|
-
};
|
|
6063
|
-
}, [openAccordion, childrenVisibility, children]);
|
|
5953
|
+
}, [openAccordion, childrenVisibility, content]);
|
|
6064
5954
|
React.useEffect(function () {
|
|
6065
5955
|
return function () {
|
|
6066
5956
|
if (timeoutRef.current) {
|
|
@@ -6071,14 +5961,6 @@ var Accordion = function Accordion(_ref) {
|
|
|
6071
5961
|
window.cancelAnimationFrame(rafRef.current);
|
|
6072
5962
|
rafRef.current = null;
|
|
6073
5963
|
}
|
|
6074
|
-
if (resizeObserverRef.current) {
|
|
6075
|
-
resizeObserverRef.current.disconnect();
|
|
6076
|
-
resizeObserverRef.current = null;
|
|
6077
|
-
}
|
|
6078
|
-
if (intervalRef.current) {
|
|
6079
|
-
window.clearInterval(intervalRef.current);
|
|
6080
|
-
intervalRef.current = null;
|
|
6081
|
-
}
|
|
6082
5964
|
};
|
|
6083
5965
|
}, []);
|
|
6084
5966
|
var toggleAccordion = function toggleAccordion() {
|
|
@@ -6132,8 +6014,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6132
6014
|
}, children)));
|
|
6133
6015
|
};
|
|
6134
6016
|
|
|
6135
|
-
var _templateObject$
|
|
6136
|
-
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6017
|
+
var _templateObject$D;
|
|
6018
|
+
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6137
6019
|
|
|
6138
6020
|
var Accordions = function Accordions(_ref) {
|
|
6139
6021
|
var _ref$items = _ref.items,
|
|
@@ -6155,16 +6037,16 @@ var Accordions = function Accordions(_ref) {
|
|
|
6155
6037
|
}));
|
|
6156
6038
|
};
|
|
6157
6039
|
|
|
6158
|
-
var _templateObject$
|
|
6159
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6160
|
-
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6040
|
+
var _templateObject$E, _templateObject2$t, _templateObject3$j, _templateObject4$h, _templateObject5$d;
|
|
6041
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: var(--announcement-banner-bg-color);\n color: var(--announcement-banner-color);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), devices.mobile);
|
|
6042
|
+
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n cursor: ", ";\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n\n path {\n fill: var(--announcement-banner-color);\n }\n }\n"])), function (_ref) {
|
|
6161
6043
|
var isClickable = _ref.isClickable;
|
|
6162
6044
|
return isClickable ? 'pointer' : 'default';
|
|
6163
6045
|
}, function (_ref2) {
|
|
6164
6046
|
var isClickable = _ref2.isClickable;
|
|
6165
6047
|
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 ";
|
|
6166
6048
|
});
|
|
6167
|
-
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6049
|
+
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-sans);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--announcement-banner-color);\n a {\n color: var(--announcement-banner-color);\n text-decoration: underline;\n }\n\n * {\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n margin-inline-end: 0;\n }\n"])));
|
|
6168
6050
|
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"])));
|
|
6169
6051
|
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) {
|
|
6170
6052
|
var variant = _ref3.variant;
|
|
@@ -6258,8 +6140,8 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
|
|
|
6258
6140
|
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
6259
6141
|
};
|
|
6260
6142
|
|
|
6261
|
-
var _templateObject$
|
|
6262
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
6143
|
+
var _templateObject$F;
|
|
6144
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
|
|
6263
6145
|
|
|
6264
6146
|
var _excluded$f = ["children", "className"];
|
|
6265
6147
|
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
@@ -6272,22 +6154,22 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
6272
6154
|
}), children);
|
|
6273
6155
|
};
|
|
6274
6156
|
|
|
6275
|
-
var _templateObject$
|
|
6157
|
+
var _templateObject$G, _templateObject2$u, _templateObject3$k, _templateObject4$i, _templateObject5$e, _templateObject6$9, _templateObject7$6, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1;
|
|
6276
6158
|
var LENGTH_LARGE_TEXT = 28;
|
|
6277
6159
|
var LENGTH_SMALL_TEXT = 19;
|
|
6278
6160
|
var LENGTH_TEXT_TABLET = 10;
|
|
6279
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6161
|
+
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
6280
6162
|
var isCardClickable = _ref.isCardClickable;
|
|
6281
6163
|
return isCardClickable ? 'pointer' : 'default';
|
|
6282
6164
|
}, function (_ref2) {
|
|
6283
6165
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
6284
6166
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
6285
6167
|
});
|
|
6286
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6168
|
+
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n background-color: var(--button-bg-color);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
6287
6169
|
var lineColor = _ref3.lineColor;
|
|
6288
6170
|
return lineColor ? "var(--color-" + lineColor + ")" : 'var(--color-primary-background)';
|
|
6289
6171
|
}, zIndexes.contentOverlay);
|
|
6290
|
-
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6172
|
+
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
|
|
6291
6173
|
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) {
|
|
6292
6174
|
var fullWidth = _ref4.fullWidth;
|
|
6293
6175
|
return fullWidth ? '0' : '20px';
|
|
@@ -6568,9 +6450,9 @@ var Card = function Card(_ref) {
|
|
|
6568
6450
|
}, restSecondButton), tertiaryButtonTextTruncate)))));
|
|
6569
6451
|
};
|
|
6570
6452
|
|
|
6571
|
-
var _templateObject$
|
|
6572
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
6573
|
-
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
6453
|
+
var _templateObject$H, _templateObject2$v;
|
|
6454
|
+
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
6455
|
+
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
6574
6456
|
|
|
6575
6457
|
var Cards = function Cards(_ref) {
|
|
6576
6458
|
var cards = _ref.cards,
|
|
@@ -6612,10 +6494,10 @@ var Cards = function Cards(_ref) {
|
|
|
6612
6494
|
}));
|
|
6613
6495
|
};
|
|
6614
6496
|
|
|
6615
|
-
var _templateObject$
|
|
6616
|
-
var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6617
|
-
var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6618
|
-
var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6497
|
+
var _templateObject$I, _templateObject2$w, _templateObject3$l, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
|
|
6498
|
+
var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n flex-direction: column-reverse;\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6499
|
+
var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6500
|
+
var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
|
|
6619
6501
|
var RotatorButtonsWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6620
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: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n @media ", " {\n flex-direction: column;\n gap: 10px;\n }\n"])), devices.mobile);
|
|
6621
6503
|
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);
|
|
@@ -6624,29 +6506,26 @@ var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_temp
|
|
|
6624
6506
|
var isSelected = _ref.isSelected;
|
|
6625
6507
|
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
6626
6508
|
});
|
|
6627
|
-
var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n
|
|
6628
|
-
var
|
|
6629
|
-
return greyscale ? 'grayscale(100%)' : 'none';
|
|
6630
|
-
}, function (_ref3) {
|
|
6631
|
-
var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
|
|
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 isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
|
|
6632
6511
|
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6633
6512
|
});
|
|
6634
6513
|
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);
|
|
6635
|
-
var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (
|
|
6636
|
-
var isSelected =
|
|
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 (_ref3) {
|
|
6515
|
+
var isSelected = _ref3.isSelected;
|
|
6637
6516
|
return isSelected ? 'flex' : 'none';
|
|
6638
|
-
}, function (
|
|
6639
|
-
var isSelected =
|
|
6517
|
+
}, function (_ref4) {
|
|
6518
|
+
var isSelected = _ref4.isSelected;
|
|
6640
6519
|
return isSelected ? 'flex' : 'none';
|
|
6641
6520
|
});
|
|
6642
6521
|
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);
|
|
6643
6522
|
|
|
6644
6523
|
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";
|
|
6645
6524
|
|
|
6646
|
-
var _templateObject$
|
|
6525
|
+
var _templateObject$J, _templateObject2$x;
|
|
6647
6526
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
6648
|
-
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6649
|
-
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6527
|
+
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
6528
|
+
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
6650
6529
|
var transitioning = _ref.transitioning;
|
|
6651
6530
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
6652
6531
|
}, function (_ref2) {
|
|
@@ -7045,8 +6924,6 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7045
6924
|
onSelect = _ref.onSelect,
|
|
7046
6925
|
onApply = _ref.onApply,
|
|
7047
6926
|
onClear = _ref.onClear,
|
|
7048
|
-
_ref$greyscale = _ref.greyscale,
|
|
7049
|
-
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
7050
6927
|
_ref$selectedIndices = _ref.selectedIndices,
|
|
7051
6928
|
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
7052
6929
|
var _useViewport = useViewport(),
|
|
@@ -7187,8 +7064,7 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7187
7064
|
src: personImage,
|
|
7188
7065
|
alt: image ? name : "Placeholder image for " + name,
|
|
7189
7066
|
draggable: false,
|
|
7190
|
-
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7191
|
-
greyscale: greyscale
|
|
7067
|
+
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7192
7068
|
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7193
7069
|
isSelected: isSelected
|
|
7194
7070
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -7247,10 +7123,10 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7247
7123
|
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7248
7124
|
};
|
|
7249
7125
|
|
|
7250
|
-
var _templateObject$
|
|
7251
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7252
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7253
|
-
var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7126
|
+
var _templateObject$K, _templateObject2$y, _templateObject3$m, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
|
|
7127
|
+
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7128
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
|
|
7129
|
+
var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7254
7130
|
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7255
7131
|
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);
|
|
7256
7132
|
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);
|
|
@@ -7305,12 +7181,12 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7305
7181
|
}, addressString)))))))));
|
|
7306
7182
|
};
|
|
7307
7183
|
|
|
7308
|
-
var _templateObject$
|
|
7309
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
7310
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$
|
|
7184
|
+
var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$l, _templateObject5$h, _templateObject6$c;
|
|
7185
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7186
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7311
7187
|
return props.clickable ? 'pointer' : 'default';
|
|
7312
7188
|
}, devices.mobile);
|
|
7313
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7189
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7314
7190
|
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) {
|
|
7315
7191
|
return props.showImage ? 2 : '1 / span 4';
|
|
7316
7192
|
}, devices.mobile);
|
|
@@ -7397,16 +7273,16 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7397
7273
|
}), link.text))));
|
|
7398
7274
|
};
|
|
7399
7275
|
|
|
7400
|
-
var _templateObject$
|
|
7401
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7276
|
+
var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$m, _templateObject5$i;
|
|
7277
|
+
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7402
7278
|
var imageToLeft = _ref.imageToLeft;
|
|
7403
7279
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7404
7280
|
}, devices.mobile);
|
|
7405
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7281
|
+
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7406
7282
|
var imageToLeft = _ref2.imageToLeft;
|
|
7407
7283
|
return imageToLeft ? 'left' : 'right';
|
|
7408
7284
|
}, devices.mobile);
|
|
7409
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7285
|
+
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7410
7286
|
var imageToLeft = _ref3.imageToLeft;
|
|
7411
7287
|
return imageToLeft ? 'right' : 'left';
|
|
7412
7288
|
}, devices.mobile);
|
|
@@ -7450,10 +7326,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7450
7326
|
})))));
|
|
7451
7327
|
};
|
|
7452
7328
|
|
|
7453
|
-
var _templateObject$
|
|
7454
|
-
var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7455
|
-
var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7456
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$
|
|
7329
|
+
var _templateObject$N, _templateObject2$B, _templateObject3$p;
|
|
7330
|
+
var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
7331
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
7332
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
|
|
7457
7333
|
|
|
7458
7334
|
var _excluded$j = ["text", "onClick"];
|
|
7459
7335
|
var HotFilters = function HotFilters(_ref) {
|
|
@@ -7517,10 +7393,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7517
7393
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7518
7394
|
};
|
|
7519
7395
|
|
|
7520
|
-
var _templateObject$
|
|
7521
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7522
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
7523
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
7396
|
+
var _templateObject$O, _templateObject2$C, _templateObject3$q, _templateObject4$n;
|
|
7397
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
|
|
7398
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7399
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
|
|
7524
7400
|
var variant = _ref.variant,
|
|
7525
7401
|
theme = _ref.theme;
|
|
7526
7402
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7743,13 +7619,13 @@ var Information = function Information(_ref) {
|
|
|
7743
7619
|
})))));
|
|
7744
7620
|
};
|
|
7745
7621
|
|
|
7746
|
-
var _templateObject$
|
|
7747
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
7622
|
+
var _templateObject$P, _templateObject2$D, _templateObject3$r, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
|
|
7623
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7748
7624
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7749
7625
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7750
7626
|
}, devices.mobile);
|
|
7751
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
7752
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7627
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
7628
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
7753
7629
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7754
7630
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7755
7631
|
});
|
|
@@ -7839,10 +7715,10 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7839
7715
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7840
7716
|
};
|
|
7841
7717
|
|
|
7842
|
-
var _templateObject$
|
|
7843
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7844
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7845
|
-
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
7718
|
+
var _templateObject$Q, _templateObject2$E, _templateObject3$s, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
|
|
7719
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
7720
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
7721
|
+
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7846
7722
|
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7847
7723
|
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7848
7724
|
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
@@ -7910,19 +7786,19 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7910
7786
|
}, "Scroll Down"))) : null);
|
|
7911
7787
|
};
|
|
7912
7788
|
|
|
7913
|
-
var _templateObject$
|
|
7914
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7789
|
+
var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$q, _templateObject5$l;
|
|
7790
|
+
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
7915
7791
|
var color = _ref.color;
|
|
7916
7792
|
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 ";
|
|
7917
7793
|
}, devices.mobileAndTablet);
|
|
7918
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7794
|
+
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
7919
7795
|
var hasImage = _ref2.hasImage;
|
|
7920
7796
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7921
7797
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7922
7798
|
var hasImage = _ref3.hasImage;
|
|
7923
7799
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7924
7800
|
});
|
|
7925
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7801
|
+
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
7926
7802
|
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
7927
7803
|
var ScrollDownWrapper$1 = /*#__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);
|
|
7928
7804
|
|
|
@@ -7954,10 +7830,10 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7954
7830
|
})))));
|
|
7955
7831
|
};
|
|
7956
7832
|
|
|
7957
|
-
var _templateObject$
|
|
7958
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$
|
|
7959
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7960
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7833
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
7834
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
7835
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
7836
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7961
7837
|
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
7962
7838
|
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) {
|
|
7963
7839
|
var theme = _ref.theme;
|
|
@@ -8168,7 +8044,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8168
8044
|
})))))))))));
|
|
8169
8045
|
};
|
|
8170
8046
|
|
|
8171
|
-
var _templateObject$
|
|
8047
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$s;
|
|
8172
8048
|
var GRID = {
|
|
8173
8049
|
desktop: {
|
|
8174
8050
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8181,18 +8057,18 @@ var GRID = {
|
|
|
8181
8057
|
right: '2 / 1 / 3 / 15'
|
|
8182
8058
|
}
|
|
8183
8059
|
};
|
|
8184
|
-
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8060
|
+
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8185
8061
|
var $background = _ref.$background;
|
|
8186
8062
|
return "var(--color-" + $background + ")";
|
|
8187
8063
|
});
|
|
8188
|
-
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8064
|
+
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8189
8065
|
var hasImage = _ref2.hasImage;
|
|
8190
8066
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8191
8067
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8192
8068
|
var hasImage = _ref3.hasImage;
|
|
8193
8069
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8194
8070
|
});
|
|
8195
|
-
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8071
|
+
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
8196
8072
|
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8197
8073
|
|
|
8198
8074
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
@@ -8216,10 +8092,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8216
8092
|
})))));
|
|
8217
8093
|
};
|
|
8218
8094
|
|
|
8219
|
-
var _templateObject$
|
|
8220
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8221
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8222
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8095
|
+
var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
|
|
8096
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8097
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
8098
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8223
8099
|
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);
|
|
8224
8100
|
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) {
|
|
8225
8101
|
var invert = _ref.invert,
|
|
@@ -8470,10 +8346,10 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8470
8346
|
}), linkText))))));
|
|
8471
8347
|
};
|
|
8472
8348
|
|
|
8473
|
-
var _templateObject$
|
|
8474
|
-
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8475
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8476
|
-
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8349
|
+
var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$d;
|
|
8350
|
+
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8351
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8352
|
+
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8477
8353
|
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8478
8354
|
var hasImages = _ref.hasImages;
|
|
8479
8355
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
@@ -8549,10 +8425,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8549
8425
|
}))))));
|
|
8550
8426
|
};
|
|
8551
8427
|
|
|
8552
|
-
var _templateObject$
|
|
8553
|
-
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8554
|
-
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
8555
|
-
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8428
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
|
|
8429
|
+
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
8430
|
+
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8431
|
+
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8556
8432
|
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"])));
|
|
8557
8433
|
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8558
8434
|
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8708,19 +8584,16 @@ var Pagination = function Pagination(_ref) {
|
|
|
8708
8584
|
}))))));
|
|
8709
8585
|
};
|
|
8710
8586
|
|
|
8711
|
-
var _templateObject$
|
|
8712
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8713
|
-
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8714
|
-
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8715
|
-
});
|
|
8587
|
+
var _templateObject$X;
|
|
8588
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8716
8589
|
|
|
8717
|
-
var _templateObject$
|
|
8718
|
-
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8719
|
-
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$
|
|
8590
|
+
var _templateObject$Y, _templateObject2$L;
|
|
8591
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8592
|
+
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8720
8593
|
|
|
8721
|
-
var _templateObject$
|
|
8722
|
-
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$
|
|
8723
|
-
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
8594
|
+
var _templateObject$Z, _templateObject2$M;
|
|
8595
|
+
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
|
|
8596
|
+
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8724
8597
|
|
|
8725
8598
|
var Person = function Person(_ref) {
|
|
8726
8599
|
var person = _ref.person,
|
|
@@ -8759,17 +8632,13 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8759
8632
|
})));
|
|
8760
8633
|
};
|
|
8761
8634
|
|
|
8762
|
-
var _templateObject
|
|
8763
|
-
var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject
|
|
8764
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8765
|
-
var greyscale = _ref.greyscale;
|
|
8766
|
-
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8767
|
-
});
|
|
8635
|
+
var _templateObject$_, _templateObject2$N;
|
|
8636
|
+
var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8637
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
|
|
8768
8638
|
|
|
8769
8639
|
var PersonCard = function PersonCard(_ref) {
|
|
8770
8640
|
var role = _ref.role,
|
|
8771
|
-
className = _ref.className
|
|
8772
|
-
greyscale = _ref.greyscale;
|
|
8641
|
+
className = _ref.className;
|
|
8773
8642
|
var hasHeadshot = React__default.useMemo(function () {
|
|
8774
8643
|
var _role$people;
|
|
8775
8644
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
@@ -8777,9 +8646,7 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8777
8646
|
}, [role]);
|
|
8778
8647
|
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
8779
8648
|
className: className
|
|
8780
|
-
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
|
|
8781
|
-
greyscale: greyscale
|
|
8782
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
8649
|
+
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
|
|
8783
8650
|
src: role.people[0].headshot,
|
|
8784
8651
|
alt: role.people[0].name
|
|
8785
8652
|
})), /*#__PURE__*/React__default.createElement(PersonDetails, {
|
|
@@ -8793,30 +8660,25 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8793
8660
|
|
|
8794
8661
|
var PeopleListing = function PeopleListing(_ref) {
|
|
8795
8662
|
var roles = _ref.roles,
|
|
8796
|
-
className = _ref.className
|
|
8797
|
-
greyscale = _ref.greyscale,
|
|
8798
|
-
largeDesktopColumns = _ref.largeDesktopColumns;
|
|
8663
|
+
className = _ref.className;
|
|
8799
8664
|
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
|
|
8800
|
-
className: className
|
|
8801
|
-
"$largeDesktopColumns": largeDesktopColumns
|
|
8665
|
+
className: className
|
|
8802
8666
|
}, roles.map(function (role, index) {
|
|
8803
8667
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8804
8668
|
key: role.name + "-" + index
|
|
8805
8669
|
}, /*#__PURE__*/React__default.createElement(PersonCard, {
|
|
8806
|
-
role: role
|
|
8807
|
-
className: className,
|
|
8808
|
-
greyscale: greyscale
|
|
8670
|
+
role: role
|
|
8809
8671
|
}));
|
|
8810
8672
|
}));
|
|
8811
8673
|
};
|
|
8812
8674
|
|
|
8813
|
-
var _templateObject
|
|
8814
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8815
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
8675
|
+
var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$u;
|
|
8676
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8677
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8816
8678
|
var columnCount = _ref.columnCount;
|
|
8817
8679
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8818
8680
|
}, devices.mobile, devices.tablet);
|
|
8819
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8681
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
8820
8682
|
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8821
8683
|
|
|
8822
8684
|
// Get the total character length of a property in an array of objects
|
|
@@ -8944,8 +8806,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8944
8806
|
}, creditEntries);
|
|
8945
8807
|
};
|
|
8946
8808
|
|
|
8947
|
-
var _templateObject$
|
|
8948
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$
|
|
8809
|
+
var _templateObject$10;
|
|
8810
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
8949
8811
|
|
|
8950
8812
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
8951
8813
|
var items = _ref.items;
|
|
@@ -8963,14 +8825,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
8963
8825
|
}));
|
|
8964
8826
|
};
|
|
8965
8827
|
|
|
8966
|
-
var _templateObject$
|
|
8828
|
+
var _templateObject$11, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
8967
8829
|
var LENGTH_TEXT = 28;
|
|
8968
8830
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8969
8831
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8970
8832
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8971
8833
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8972
8834
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8973
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8835
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8974
8836
|
var imageToLeft = _ref.imageToLeft;
|
|
8975
8837
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8976
8838
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8980,7 +8842,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 ||
|
|
|
8980
8842
|
var asCard = _ref3.asCard;
|
|
8981
8843
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8982
8844
|
});
|
|
8983
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8845
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
8984
8846
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
8985
8847
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8986
8848
|
}, function (_ref5) {
|
|
@@ -9235,21 +9097,21 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9235
9097
|
}))));
|
|
9236
9098
|
};
|
|
9237
9099
|
|
|
9238
|
-
var _templateObject$
|
|
9100
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
|
|
9239
9101
|
var LENGTH_TEXT$2 = 28;
|
|
9240
9102
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9241
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9103
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9242
9104
|
var imageToLeft = _ref.imageToLeft;
|
|
9243
9105
|
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'";
|
|
9244
9106
|
}, devices.tablet, function (_ref2) {
|
|
9245
9107
|
var imageToLeft = _ref2.imageToLeft;
|
|
9246
9108
|
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'";
|
|
9247
9109
|
}, devices.mobile);
|
|
9248
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9110
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9249
9111
|
var imageToLeft = _ref3.imageToLeft;
|
|
9250
9112
|
return imageToLeft ? 'left' : 'right';
|
|
9251
9113
|
}, devices.mobile);
|
|
9252
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9114
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
9253
9115
|
var imageToLeft = _ref4.imageToLeft;
|
|
9254
9116
|
return imageToLeft ? 'right' : 'left';
|
|
9255
9117
|
}, devices.mobile);
|
|
@@ -9278,8 +9140,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
|
|
|
9278
9140
|
return '';
|
|
9279
9141
|
});
|
|
9280
9142
|
|
|
9281
|
-
var _templateObject$
|
|
9282
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9143
|
+
var _templateObject$13;
|
|
9144
|
+
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
9283
9145
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9284
9146
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9285
9147
|
return aspectRatio;
|
|
@@ -9461,65 +9323,9 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9461
9323
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9462
9324
|
};
|
|
9463
9325
|
|
|
9464
|
-
var _templateObject$
|
|
9465
|
-
var
|
|
9466
|
-
|
|
9467
|
-
/**
|
|
9468
|
-
* DEPRECATED. Use RadioGroup2 instead
|
|
9469
|
-
*/
|
|
9470
|
-
var RadioGroup = function RadioGroup(_ref) {
|
|
9471
|
-
var radios = _ref.radios,
|
|
9472
|
-
_ref$columnStartDeskt = _ref.columnStartDesktop,
|
|
9473
|
-
columnStartDesktop = _ref$columnStartDeskt === void 0 ? 1 : _ref$columnStartDeskt,
|
|
9474
|
-
_ref$columnStartDevic = _ref.columnStartDevice,
|
|
9475
|
-
columnStartDevice = _ref$columnStartDevic === void 0 ? 1 : _ref$columnStartDevic,
|
|
9476
|
-
_ref$columnSpanDeskto = _ref.columnSpanDesktop,
|
|
9477
|
-
columnSpanDesktop = _ref$columnSpanDeskto === void 0 ? 16 : _ref$columnSpanDeskto,
|
|
9478
|
-
_ref$columnSpanDevice = _ref.columnSpanDevice,
|
|
9479
|
-
columnSpanDevice = _ref$columnSpanDevice === void 0 ? 14 : _ref$columnSpanDevice,
|
|
9480
|
-
columnStartSmallDevice = _ref.columnStartSmallDevice,
|
|
9481
|
-
columnSpanSmallDevice = _ref.columnSpanSmallDevice,
|
|
9482
|
-
onChange = _ref.onChange;
|
|
9483
|
-
var _useState = React.useState(radios != null ? radios : []),
|
|
9484
|
-
radioProps = _useState[0],
|
|
9485
|
-
setRadioProps = _useState[1];
|
|
9486
|
-
var _useState2 = React.useState(null),
|
|
9487
|
-
checkedIndex = _useState2[0],
|
|
9488
|
-
setCheckedIndex = _useState2[1];
|
|
9489
|
-
var handleChange = function handleChange(_value, index) {
|
|
9490
|
-
setCheckedIndex(index);
|
|
9491
|
-
var newRadioProps = radios == null ? void 0 : radios.map(function (radio, i) {
|
|
9492
|
-
return _extends({}, radio, {
|
|
9493
|
-
checked: i === index
|
|
9494
|
-
});
|
|
9495
|
-
});
|
|
9496
|
-
setRadioProps(newRadioProps != null ? newRadioProps : []);
|
|
9497
|
-
onChange == null || onChange(radios ? radios[index] : undefined);
|
|
9498
|
-
};
|
|
9499
|
-
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9500
|
-
columnStartDesktop: columnStartDesktop,
|
|
9501
|
-
columnSpanDesktop: columnSpanDesktop,
|
|
9502
|
-
columnStartDevice: columnStartDevice,
|
|
9503
|
-
columnSpanDevice: columnSpanDevice,
|
|
9504
|
-
columnStartSmallDevice: columnStartSmallDevice,
|
|
9505
|
-
columnSpanSmallDevice: columnSpanSmallDevice
|
|
9506
|
-
}, /*#__PURE__*/React__default.createElement(RadioGroupContainer, null, radioProps == null ? void 0 : radioProps.map(function (radio, i) {
|
|
9507
|
-
var _radio$label;
|
|
9508
|
-
return /*#__PURE__*/React__default.createElement(Radio, {
|
|
9509
|
-
key: ((_radio$label = radio.label) != null ? _radio$label : 'defaultRadioKey') + i,
|
|
9510
|
-
checked: i === checkedIndex,
|
|
9511
|
-
// error={radio.error} // TO DO: Add error state - design not yet available
|
|
9512
|
-
label: radio.label,
|
|
9513
|
-
onChange: function onChange(e) {
|
|
9514
|
-
return handleChange(e, i);
|
|
9515
|
-
}
|
|
9516
|
-
});
|
|
9517
|
-
})));
|
|
9518
|
-
};
|
|
9519
|
-
|
|
9520
|
-
var _templateObject$16, _templateObject2$R, _templateObject3$D;
|
|
9521
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9522
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9326
|
+
var _templateObject$14, _templateObject2$Q, _templateObject3$C;
|
|
9327
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9328
|
+
var RadioGroup = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9523
9329
|
var horizontalMode = _ref.horizontalMode;
|
|
9524
9330
|
if (horizontalMode) return 'row';
|
|
9525
9331
|
return 'column';
|
|
@@ -9527,7 +9333,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_temp
|
|
|
9527
9333
|
var gap = _ref2.gap;
|
|
9528
9334
|
return gap + "px";
|
|
9529
9335
|
});
|
|
9530
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9336
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9531
9337
|
var darkMode = _ref3.darkMode;
|
|
9532
9338
|
if (darkMode) return 'var(--base-color-white)';
|
|
9533
9339
|
return 'var(--base-color-errorstate)';
|
|
@@ -9582,7 +9388,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9582
9388
|
var changeHandler = function changeHandler(e) {
|
|
9583
9389
|
onChange == null || onChange(e.target.value);
|
|
9584
9390
|
};
|
|
9585
|
-
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup
|
|
9391
|
+
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup, {
|
|
9586
9392
|
gap: gap,
|
|
9587
9393
|
horizontalMode: horizontalMode
|
|
9588
9394
|
}, radios.map(function (radio, idx) {
|
|
@@ -9604,10 +9410,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9604
9410
|
}, error))));
|
|
9605
9411
|
};
|
|
9606
9412
|
|
|
9607
|
-
var _templateObject$
|
|
9608
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9609
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9610
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9413
|
+
var _templateObject$15, _templateObject2$R, _templateObject3$D;
|
|
9414
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9415
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9416
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9611
9417
|
|
|
9612
9418
|
/* eslint-disable react/no-danger */
|
|
9613
9419
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9663,8 +9469,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9663
9469
|
return null;
|
|
9664
9470
|
};
|
|
9665
9471
|
|
|
9666
|
-
var _templateObject$
|
|
9667
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9472
|
+
var _templateObject$16;
|
|
9473
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9668
9474
|
|
|
9669
9475
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9670
9476
|
var HarmonicSize = {
|
|
@@ -9706,420 +9512,39 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9706
9512
|
}, description)))));
|
|
9707
9513
|
};
|
|
9708
9514
|
|
|
9709
|
-
var _templateObject$
|
|
9710
|
-
var
|
|
9711
|
-
|
|
9712
|
-
return "3px solid " + theme.colors.lapisLazuli;
|
|
9713
|
-
}, function (_ref2) {
|
|
9714
|
-
var theme = _ref2.theme;
|
|
9715
|
-
return theme.colors.lightgrey;
|
|
9716
|
-
}, function (_ref3) {
|
|
9717
|
-
var theme = _ref3.theme;
|
|
9718
|
-
return theme.colors.lightgrey;
|
|
9719
|
-
});
|
|
9720
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9721
|
-
var theme = _ref4.theme;
|
|
9722
|
-
return theme.colors.darkgrey;
|
|
9723
|
-
});
|
|
9724
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9725
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9726
|
-
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
9727
|
-
var theme = _ref5.theme;
|
|
9728
|
-
return {
|
|
9729
|
-
iconName: 'DropdownArrow',
|
|
9730
|
-
color: theme.colors.black,
|
|
9731
|
-
title: 'Select Arrow'
|
|
9732
|
-
};
|
|
9733
|
-
})(_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"])));
|
|
9734
|
-
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);
|
|
9735
|
-
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9736
|
-
var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
9737
|
-
var Option = /*#__PURE__*/styled__default.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9738
|
-
var theme = _ref6.theme,
|
|
9739
|
-
hover = _ref6.hover;
|
|
9740
|
-
var _theme$colors = theme.colors,
|
|
9741
|
-
lightgrey = _theme$colors.lightgrey,
|
|
9742
|
-
midgrey = _theme$colors.midgrey;
|
|
9743
|
-
if (hover) return "background-color: " + midgrey;
|
|
9744
|
-
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
9745
|
-
});
|
|
9746
|
-
var selectStyles = function selectStyles(width, height) {
|
|
9747
|
-
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);
|
|
9748
|
-
};
|
|
9749
|
-
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) {
|
|
9750
|
-
var width = _ref7.width,
|
|
9751
|
-
height = _ref7.height;
|
|
9752
|
-
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
9753
|
-
}, stateStyles, noMarginAndPaddingStyles, listItemStyles, borderStyles, ArrowIcon);
|
|
9754
|
-
|
|
9755
|
-
var useKeyboardAccessibility = function useKeyboardAccessibility(_ref) {
|
|
9756
|
-
var selectRef = _ref.selectRef,
|
|
9757
|
-
optionsRef = _ref.optionsRef,
|
|
9758
|
-
shouldHighlightOption = _ref.shouldHighlightOption;
|
|
9759
|
-
var _useState = React.useState(-1),
|
|
9760
|
-
itemToHighlight = _useState[0],
|
|
9761
|
-
setItemToHighlight = _useState[1];
|
|
9762
|
-
var clampIndex = function clampIndex(index) {
|
|
9763
|
-
if (index < -1) return -1;
|
|
9764
|
-
if (index > optionsRef.current.length - 1) return optionsRef.current.length - 1;
|
|
9765
|
-
return index;
|
|
9766
|
-
};
|
|
9767
|
-
var highlightNextOption = function highlightNextOption() {
|
|
9768
|
-
return setItemToHighlight(function (prev) {
|
|
9769
|
-
return clampIndex(prev + 1);
|
|
9770
|
-
});
|
|
9771
|
-
};
|
|
9772
|
-
var highlightPrevOption = function highlightPrevOption() {
|
|
9773
|
-
return setItemToHighlight(function (prev) {
|
|
9774
|
-
return clampIndex(prev - 1);
|
|
9775
|
-
});
|
|
9776
|
-
};
|
|
9777
|
-
var reset = function reset() {
|
|
9778
|
-
var _selectRef$current;
|
|
9779
|
-
(_selectRef$current = selectRef.current) == null || _selectRef$current.blur();
|
|
9780
|
-
setItemToHighlight(-1);
|
|
9781
|
-
};
|
|
9782
|
-
var handleKeyUp = function handleKeyUp(event) {
|
|
9783
|
-
if (!shouldHighlightOption) return undefined;
|
|
9784
|
-
var shouldHighlightOptionNext = event.key === 'ArrowDown';
|
|
9785
|
-
var shouldHighlightOptionPrev = event.key === 'ArrowUp';
|
|
9786
|
-
if (shouldHighlightOptionNext) return highlightNextOption();
|
|
9787
|
-
if (shouldHighlightOptionPrev) return highlightPrevOption();
|
|
9788
|
-
return undefined;
|
|
9789
|
-
};
|
|
9790
|
-
var preventScrollingWhileNavigating = function preventScrollingWhileNavigating(event) {
|
|
9791
|
-
if (!shouldHighlightOption) return;
|
|
9792
|
-
if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return;
|
|
9793
|
-
event.preventDefault();
|
|
9794
|
-
};
|
|
9795
|
-
var handleHighlighted = function handleHighlighted(cb) {
|
|
9796
|
-
return function (event) {
|
|
9797
|
-
if (itemToHighlight === -1) return;
|
|
9798
|
-
if (event.key !== 'Enter') return;
|
|
9799
|
-
cb(itemToHighlight);
|
|
9800
|
-
reset();
|
|
9801
|
-
};
|
|
9802
|
-
};
|
|
9803
|
-
React.useEffect(function () {
|
|
9804
|
-
if (shouldHighlightOption) return;
|
|
9805
|
-
reset();
|
|
9806
|
-
}, [shouldHighlightOption]);
|
|
9807
|
-
return {
|
|
9808
|
-
handleKeyUp: handleKeyUp,
|
|
9809
|
-
preventScrollingWhileNavigating: preventScrollingWhileNavigating,
|
|
9810
|
-
handleHighlighted: handleHighlighted,
|
|
9811
|
-
itemToHighlight: itemToHighlight
|
|
9812
|
-
};
|
|
9813
|
-
};
|
|
9814
|
-
var useVisualAccessibility = function useVisualAccessibility(_ref2) {
|
|
9815
|
-
var selectRef = _ref2.selectRef,
|
|
9816
|
-
isSelectDisabled = _ref2.isSelectDisabled;
|
|
9817
|
-
var addFocusClass = function addFocusClass() {
|
|
9818
|
-
var _selectRef$current2;
|
|
9819
|
-
(_selectRef$current2 = selectRef.current) == null || _selectRef$current2.classList.add('focus');
|
|
9820
|
-
};
|
|
9821
|
-
var removeFocusClass = function removeFocusClass() {
|
|
9822
|
-
var _selectRef$current3;
|
|
9823
|
-
(_selectRef$current3 = selectRef.current) == null || _selectRef$current3.classList.remove('focus');
|
|
9824
|
-
};
|
|
9825
|
-
var toggleFocus = function toggleFocus() {
|
|
9826
|
-
var _selectRef$current4;
|
|
9827
|
-
if ((_selectRef$current4 = selectRef.current) != null && _selectRef$current4.classList.contains('focus')) removeFocusClass();else addFocusClass();
|
|
9828
|
-
};
|
|
9829
|
-
var withClickAwayHandler = function withClickAwayHandler(cb) {
|
|
9830
|
-
return function (event) {
|
|
9831
|
-
if (!selectRef.current) return;
|
|
9832
|
-
if (selectRef.current.contains(event.target)) return;
|
|
9833
|
-
removeFocusClass();
|
|
9834
|
-
cb();
|
|
9835
|
-
};
|
|
9836
|
-
};
|
|
9837
|
-
React.useEffect(function () {
|
|
9838
|
-
if (!selectRef.current) return;
|
|
9839
|
-
if (isSelectDisabled) {
|
|
9840
|
-
selectRef.current.classList.add('disabled');
|
|
9841
|
-
} else selectRef.current.classList.remove('disabled');
|
|
9842
|
-
}, [isSelectDisabled]);
|
|
9843
|
-
return {
|
|
9844
|
-
withClickAwayHandler: withClickAwayHandler,
|
|
9845
|
-
toggleFocus: toggleFocus,
|
|
9846
|
-
addFocusClass: addFocusClass,
|
|
9847
|
-
removeFocusClass: removeFocusClass
|
|
9848
|
-
};
|
|
9849
|
-
};
|
|
9850
|
-
var useAccessibility = function useAccessibility(props) {
|
|
9851
|
-
var selectRef = props.selectRef;
|
|
9852
|
-
var _useKeyboardAccessibi = useKeyboardAccessibility(props),
|
|
9853
|
-
handleKeyUp = _useKeyboardAccessibi.handleKeyUp,
|
|
9854
|
-
preventScrollingWhileNavigating = _useKeyboardAccessibi.preventScrollingWhileNavigating,
|
|
9855
|
-
handleHighlighted = _useKeyboardAccessibi.handleHighlighted,
|
|
9856
|
-
itemToHighlight = _useKeyboardAccessibi.itemToHighlight;
|
|
9857
|
-
var _useVisualAccessibili = useVisualAccessibility(props),
|
|
9858
|
-
addFocusClass = _useVisualAccessibili.addFocusClass,
|
|
9859
|
-
removeFocusClass = _useVisualAccessibili.removeFocusClass,
|
|
9860
|
-
toggleFocus = _useVisualAccessibili.toggleFocus,
|
|
9861
|
-
withClickAwayHandler = _useVisualAccessibili.withClickAwayHandler;
|
|
9862
|
-
React.useEffect(function () {
|
|
9863
|
-
if (!selectRef.current) return undefined;
|
|
9864
|
-
selectRef.current.addEventListener('keydown', preventScrollingWhileNavigating);
|
|
9865
|
-
selectRef.current.addEventListener('keyup', handleKeyUp);
|
|
9866
|
-
selectRef.current.addEventListener('click', toggleFocus);
|
|
9867
|
-
selectRef.current.addEventListener('focus', addFocusClass);
|
|
9868
|
-
selectRef.current.addEventListener('blur', removeFocusClass);
|
|
9869
|
-
return function () {
|
|
9870
|
-
var _selectRef$current5, _selectRef$current6, _selectRef$current7, _selectRef$current8, _selectRef$current9;
|
|
9871
|
-
(_selectRef$current5 = selectRef.current) == null || _selectRef$current5.removeEventListener('keydown', preventScrollingWhileNavigating);
|
|
9872
|
-
(_selectRef$current6 = selectRef.current) == null || _selectRef$current6.removeEventListener('keyup', handleKeyUp);
|
|
9873
|
-
(_selectRef$current7 = selectRef.current) == null || _selectRef$current7.removeEventListener('click', toggleFocus);
|
|
9874
|
-
(_selectRef$current8 = selectRef.current) == null || _selectRef$current8.removeEventListener('focus', addFocusClass);
|
|
9875
|
-
(_selectRef$current9 = selectRef.current) == null || _selectRef$current9.removeEventListener('blur', removeFocusClass);
|
|
9876
|
-
};
|
|
9877
|
-
});
|
|
9878
|
-
return {
|
|
9879
|
-
withClickAwayHandler: withClickAwayHandler,
|
|
9880
|
-
handleHighlighted: handleHighlighted,
|
|
9881
|
-
itemToHighlight: itemToHighlight
|
|
9882
|
-
};
|
|
9883
|
-
};
|
|
9884
|
-
/**
|
|
9885
|
-
* DEPRECATED. Use Select2 instead.
|
|
9886
|
-
* A select component, created using <ul> and <li> elements, with bespoke accessibility
|
|
9887
|
-
* logic.
|
|
9888
|
-
*
|
|
9889
|
-
* # Usage
|
|
9890
|
-
* ## Defining a component that uses a typical Select element
|
|
9891
|
-
* ```tsx
|
|
9892
|
-
* const MyComponent = () => {
|
|
9893
|
-
* const handleSelect = (value: number, text: string) => {
|
|
9894
|
-
* console.log("Selected", value);
|
|
9895
|
-
* };
|
|
9896
|
-
*
|
|
9897
|
-
* return <>
|
|
9898
|
-
* <Select
|
|
9899
|
-
* label="This is a label"
|
|
9900
|
-
* options={[
|
|
9901
|
-
* { text: "Option 1", value: 1 },
|
|
9902
|
-
* { text: "Option 2", value: 2 },
|
|
9903
|
-
* ]}
|
|
9904
|
-
* onSelect={handleSelect}
|
|
9905
|
-
* />
|
|
9906
|
-
* </>
|
|
9907
|
-
* }
|
|
9908
|
-
* ```
|
|
9909
|
-
*
|
|
9910
|
-
* ## Defining a component that uses a disabled Select element
|
|
9911
|
-
* ```tsx
|
|
9912
|
-
* const MyComponent = () => {
|
|
9913
|
-
* const handleSelect = (value: number, text: string) => {
|
|
9914
|
-
* console.log("Selected", value);
|
|
9915
|
-
* };
|
|
9916
|
-
*
|
|
9917
|
-
* return <>
|
|
9918
|
-
* <Select
|
|
9919
|
-
* disabled // Select component disabled explicitely
|
|
9920
|
-
* label="This is a label"
|
|
9921
|
-
* options={[
|
|
9922
|
-
* { text: "Option 1", value: 1 },
|
|
9923
|
-
* { text: "Option 2", value: 2 },
|
|
9924
|
-
* ]}
|
|
9925
|
-
* onSelect={handleSelect}
|
|
9926
|
-
* />
|
|
9927
|
-
* <Select
|
|
9928
|
-
* label="This is a label"
|
|
9929
|
-
* options={[]} // Select component disabled implicitely by passing an empty array of options
|
|
9930
|
-
* onSelect={handleSelect}
|
|
9931
|
-
* />
|
|
9932
|
-
* </>
|
|
9933
|
-
* }
|
|
9934
|
-
* ```
|
|
9935
|
-
*
|
|
9936
|
-
* ## Defining a component with a non-labelled Select element
|
|
9937
|
-
* ```tsx
|
|
9938
|
-
* const MyComponent = () => {
|
|
9939
|
-
* const handleSelect = (value: number, text: string) => {
|
|
9940
|
-
* console.log("Selected", value);
|
|
9941
|
-
* };
|
|
9942
|
-
*
|
|
9943
|
-
* return <>
|
|
9944
|
-
* <Select
|
|
9945
|
-
* label=""
|
|
9946
|
-
* options={[
|
|
9947
|
-
* { text: "Option 1", value: 1 },
|
|
9948
|
-
* { text: "Option 2", value: 2 },
|
|
9949
|
-
* ]}
|
|
9950
|
-
* onSelect={handleSelect}
|
|
9951
|
-
* />
|
|
9952
|
-
* </>
|
|
9953
|
-
* }
|
|
9954
|
-
* ```
|
|
9955
|
-
*
|
|
9956
|
-
* ## Changing the dimensions of a Select element (px)
|
|
9957
|
-
* ```tsx
|
|
9958
|
-
* const MyComponent = () => {
|
|
9959
|
-
* const handleSelect = (value: number, text: string) => {
|
|
9960
|
-
* console.log("Selected", value);
|
|
9961
|
-
* };
|
|
9962
|
-
*
|
|
9963
|
-
* const selectWidthPx = 100;
|
|
9964
|
-
* const selectHeightPx = 27;
|
|
9965
|
-
*
|
|
9966
|
-
* return <>
|
|
9967
|
-
* <Select
|
|
9968
|
-
* label="This is a label"
|
|
9969
|
-
* options={[
|
|
9970
|
-
* { text: "Option 1", value: 1 },
|
|
9971
|
-
* { text: "Option 2", value: 2 },
|
|
9972
|
-
* ]}
|
|
9973
|
-
* onSelect={handleSelect}
|
|
9974
|
-
* width={selectWidthPx}
|
|
9975
|
-
* height={selectHeightPx}
|
|
9976
|
-
* />
|
|
9977
|
-
* </>
|
|
9978
|
-
* }
|
|
9979
|
-
* ```
|
|
9980
|
-
*/
|
|
9981
|
-
function Select(_ref3) {
|
|
9982
|
-
var _ref4, _selectedValue$text, _options$;
|
|
9983
|
-
var label = _ref3.label,
|
|
9984
|
-
options = _ref3.options,
|
|
9985
|
-
onSelect = _ref3.onSelect,
|
|
9986
|
-
_ref3$disabled = _ref3.disabled,
|
|
9987
|
-
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
|
|
9988
|
-
_ref3$resetWhenOption = _ref3.resetWhenOptionsUpdate,
|
|
9989
|
-
resetWhenOptionsUpdate = _ref3$resetWhenOption === void 0 ? false : _ref3$resetWhenOption,
|
|
9990
|
-
_ref3$width = _ref3.width,
|
|
9991
|
-
width = _ref3$width === void 0 ? 'default' : _ref3$width,
|
|
9992
|
-
_ref3$height = _ref3.height,
|
|
9993
|
-
height = _ref3$height === void 0 ? 'default' : _ref3$height;
|
|
9994
|
-
var selectRef = React.useRef(null);
|
|
9995
|
-
var optionsRef = React.useRef([]);
|
|
9996
|
-
var _useState2 = React.useState(null),
|
|
9997
|
-
selectedValue = _useState2[0],
|
|
9998
|
-
setSelectedValue = _useState2[1];
|
|
9999
|
-
var _useState3 = React.useState(false),
|
|
10000
|
-
isOpen = _useState3[0],
|
|
10001
|
-
setIsOpen = _useState3[1];
|
|
10002
|
-
var isDisabled = disabled || options.length === 0;
|
|
10003
|
-
var _useAccessibility = useAccessibility({
|
|
10004
|
-
selectRef: selectRef,
|
|
10005
|
-
optionsRef: optionsRef,
|
|
10006
|
-
shouldHighlightOption: isOpen,
|
|
10007
|
-
isSelectDisabled: isDisabled
|
|
10008
|
-
}),
|
|
10009
|
-
withClickAwayHandler = _useAccessibility.withClickAwayHandler,
|
|
10010
|
-
handleHighlighted = _useAccessibility.handleHighlighted,
|
|
10011
|
-
itemToHighlight = _useAccessibility.itemToHighlight;
|
|
10012
|
-
var openSelect = function openSelect() {
|
|
10013
|
-
return setIsOpen(true);
|
|
10014
|
-
};
|
|
10015
|
-
var closeSelect = function closeSelect() {
|
|
10016
|
-
return setIsOpen(false);
|
|
10017
|
-
};
|
|
10018
|
-
var toggleSelect = function toggleSelect() {
|
|
10019
|
-
return setIsOpen(function (prev) {
|
|
10020
|
-
return !prev;
|
|
10021
|
-
});
|
|
10022
|
-
};
|
|
10023
|
-
var closeSelectOnBlur = withClickAwayHandler(closeSelect);
|
|
10024
|
-
var handleOptionSelection = function handleOptionSelection(index) {
|
|
10025
|
-
var option = options[index];
|
|
10026
|
-
setSelectedValue(option);
|
|
10027
|
-
onSelect(option.value, option.text);
|
|
10028
|
-
};
|
|
10029
|
-
React.useEffect(function () {
|
|
10030
|
-
document.addEventListener('click', closeSelectOnBlur, false);
|
|
10031
|
-
return function () {
|
|
10032
|
-
document.removeEventListener('click', closeSelectOnBlur, false);
|
|
10033
|
-
};
|
|
10034
|
-
}, []);
|
|
10035
|
-
React.useEffect(function () {
|
|
10036
|
-
if (!resetWhenOptionsUpdate) return;
|
|
10037
|
-
if (options.length === 0) {
|
|
10038
|
-
setSelectedValue(null);
|
|
10039
|
-
return;
|
|
10040
|
-
}
|
|
10041
|
-
setSelectedValue(options[0]);
|
|
10042
|
-
}, [options, resetWhenOptionsUpdate]);
|
|
10043
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
10044
|
-
level: 1,
|
|
10045
|
-
tag: "p",
|
|
10046
|
-
"data-testid": "select-label"
|
|
10047
|
-
}, label)), /*#__PURE__*/React__default.createElement(SelectList, {
|
|
10048
|
-
id: "select",
|
|
10049
|
-
ref: selectRef,
|
|
10050
|
-
onClick: toggleSelect,
|
|
10051
|
-
onFocus: openSelect,
|
|
10052
|
-
onBlur: closeSelect,
|
|
10053
|
-
onMouseDown: function onMouseDown(e) {
|
|
10054
|
-
return e.preventDefault();
|
|
10055
|
-
},
|
|
10056
|
-
onKeyUp: handleHighlighted(handleOptionSelection),
|
|
10057
|
-
width: width,
|
|
10058
|
-
height: height,
|
|
10059
|
-
role: "listbox",
|
|
10060
|
-
tabIndex: 0,
|
|
10061
|
-
"aria-labelledby": label,
|
|
10062
|
-
"aria-disabled": isDisabled,
|
|
10063
|
-
"data-testid": "select"
|
|
10064
|
-
}, /*#__PURE__*/React__default.createElement(SelectWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10065
|
-
level: 1,
|
|
10066
|
-
tag: "p",
|
|
10067
|
-
"data-testid": "selected-value"
|
|
10068
|
-
}, (_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, {
|
|
10069
|
-
"data-testid": "options"
|
|
10070
|
-
}, options.map(function (option, index) {
|
|
10071
|
-
return /*#__PURE__*/React__default.createElement(Option, {
|
|
10072
|
-
ref: function ref(element) {
|
|
10073
|
-
if (!element || optionsRef.current.length === options.length) return;
|
|
10074
|
-
optionsRef.current.push(element);
|
|
10075
|
-
},
|
|
10076
|
-
role: "option",
|
|
10077
|
-
tabIndex: index + 1,
|
|
10078
|
-
hover: index === itemToHighlight,
|
|
10079
|
-
key: option.text,
|
|
10080
|
-
onClick: function onClick() {
|
|
10081
|
-
return handleOptionSelection(index);
|
|
10082
|
-
}
|
|
10083
|
-
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10084
|
-
level: 1,
|
|
10085
|
-
tag: "p"
|
|
10086
|
-
}, option.text));
|
|
10087
|
-
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10088
|
-
}
|
|
10089
|
-
|
|
10090
|
-
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
|
|
10091
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10092
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n\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) {
|
|
9515
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E, _templateObject4$x;
|
|
9516
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9517
|
+
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
10093
9518
|
var width = _ref.width;
|
|
10094
9519
|
if (!width) return 'none';
|
|
10095
9520
|
return width + "px";
|
|
10096
9521
|
}, function (_ref2) {
|
|
10097
9522
|
var error = _ref2.error;
|
|
10098
|
-
if (error !== undefined) return "1px solid var(--color-
|
|
10099
|
-
return "1px solid var(--color-
|
|
9523
|
+
if (error !== undefined) return "1px solid var(--base-color-errorstate)";
|
|
9524
|
+
return "1px solid var(--base-color-dark-grey)";
|
|
10100
9525
|
}, function (_ref3) {
|
|
10101
9526
|
var error = _ref3.error;
|
|
10102
|
-
if (error !== undefined) return "var(--color-
|
|
10103
|
-
return "var(--color-
|
|
9527
|
+
if (error !== undefined) return "var(--base-color-errorstate)";
|
|
9528
|
+
return "var(--base-color-dark-grey)";
|
|
10104
9529
|
}, function (_ref4) {
|
|
10105
9530
|
var darkMode = _ref4.darkMode;
|
|
10106
|
-
if (darkMode) return "0 0 0
|
|
9531
|
+
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
10107
9532
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10108
|
-
}
|
|
10109
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9533
|
+
});
|
|
9534
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
10110
9535
|
var darkMode = _ref5.darkMode;
|
|
10111
|
-
if (darkMode) return "var(--color-
|
|
10112
|
-
return "var(--color-
|
|
10113
|
-
}
|
|
10114
|
-
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9536
|
+
if (darkMode) return "var(--base-color-white)";
|
|
9537
|
+
return "var(--base-color-black)";
|
|
9538
|
+
});
|
|
9539
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
10115
9540
|
var darkMode = _ref6.darkMode;
|
|
10116
|
-
if (darkMode) return "var(--color-
|
|
10117
|
-
return "var(--color-
|
|
9541
|
+
if (darkMode) return "var(--base-color-white)";
|
|
9542
|
+
return "var(--base-color-errorstate)";
|
|
10118
9543
|
});
|
|
10119
9544
|
|
|
10120
|
-
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"
|
|
9545
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10121
9546
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10122
|
-
return /*#__PURE__*/React__default.createElement(Select
|
|
9547
|
+
return /*#__PURE__*/React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10123
9548
|
iconName: "DropdownArrow"
|
|
10124
9549
|
}));
|
|
10125
9550
|
};
|
|
@@ -10128,24 +9553,21 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
10128
9553
|
error = _ref.error,
|
|
10129
9554
|
width = _ref.width,
|
|
10130
9555
|
darkMode = _ref.darkMode,
|
|
10131
|
-
children = _ref.children
|
|
10132
|
-
|
|
10133
|
-
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
10134
|
-
className: className
|
|
10135
|
-
}, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9556
|
+
children = _ref.children;
|
|
9557
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
10136
9558
|
darkMode: darkMode,
|
|
10137
9559
|
"data-testid": "select2-text-label"
|
|
10138
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10139
|
-
|
|
10140
|
-
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper
|
|
9560
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9561
|
+
level: 6
|
|
9562
|
+
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper, {
|
|
10141
9563
|
width: width,
|
|
10142
9564
|
error: error,
|
|
10143
9565
|
darkMode: darkMode
|
|
10144
9566
|
}, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
10145
9567
|
darkMode: darkMode,
|
|
10146
9568
|
"data-testid": "select2-error-label"
|
|
10147
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10148
|
-
|
|
9569
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9570
|
+
level: 6
|
|
10149
9571
|
}, error))));
|
|
10150
9572
|
};
|
|
10151
9573
|
/**
|
|
@@ -10171,15 +9593,13 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10171
9593
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10172
9594
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10173
9595
|
components = _ref2.components,
|
|
10174
|
-
className = _ref2.className,
|
|
10175
9596
|
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
10176
9597
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10177
9598
|
label: label,
|
|
10178
9599
|
error: error,
|
|
10179
9600
|
width: width,
|
|
10180
|
-
darkMode: darkMode
|
|
10181
|
-
|
|
10182
|
-
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
|
|
9601
|
+
darkMode: darkMode
|
|
9602
|
+
}, /*#__PURE__*/React__default.createElement(Select__default, Object.assign({}, selectProps, {
|
|
10183
9603
|
components: _extends({
|
|
10184
9604
|
DropdownIndicator: DropdownIndicator,
|
|
10185
9605
|
LoadingIndicator: undefined,
|
|
@@ -10219,7 +9639,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10219
9639
|
error: error,
|
|
10220
9640
|
width: width,
|
|
10221
9641
|
darkMode: darkMode
|
|
10222
|
-
}, /*#__PURE__*/React__default.createElement(Select$
|
|
9642
|
+
}, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, selectProps, {
|
|
10223
9643
|
components: _extends({
|
|
10224
9644
|
DropdownIndicator: DropdownIndicator,
|
|
10225
9645
|
LoadingIndicator: undefined,
|
|
@@ -10230,24 +9650,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10230
9650
|
})));
|
|
10231
9651
|
};
|
|
10232
9652
|
|
|
10233
|
-
var _templateObject$
|
|
10234
|
-
var Wrapper$
|
|
10235
|
-
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$
|
|
10236
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9653
|
+
var _templateObject$18, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
|
|
9654
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
9655
|
+
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
9656
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
10237
9657
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10238
9658
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10239
9659
|
}, function (_ref2) {
|
|
10240
9660
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
10241
9661
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
10242
9662
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
10243
|
-
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9663
|
+
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
|
|
10244
9664
|
var singleChild = _ref3.singleChild;
|
|
10245
9665
|
return singleChild ? '0' : '10px';
|
|
10246
9666
|
});
|
|
10247
|
-
var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$
|
|
10248
|
-
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10249
|
-
var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$
|
|
10250
|
-
var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$
|
|
9667
|
+
var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
9668
|
+
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
9669
|
+
var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
|
|
9670
|
+
var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
|
|
10251
9671
|
|
|
10252
9672
|
// Set max. character length
|
|
10253
9673
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -10300,7 +9720,7 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10300
9720
|
var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
|
|
10301
9721
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
10302
9722
|
theme: theme
|
|
10303
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9723
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$5, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabel, {
|
|
10304
9724
|
tag: "div",
|
|
10305
9725
|
size: "small"
|
|
10306
9726
|
}, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
|
|
@@ -10336,8 +9756,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10336
9756
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10337
9757
|
};
|
|
10338
9758
|
|
|
10339
|
-
var _templateObject$
|
|
10340
|
-
var Wrapper$
|
|
9759
|
+
var _templateObject$19, _templateObject2$T, _templateObject3$G;
|
|
9760
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
10341
9761
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10342
9762
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10343
9763
|
return aspectRatio;
|
|
@@ -10347,8 +9767,8 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_temp
|
|
|
10347
9767
|
height = _ref2.height;
|
|
10348
9768
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10349
9769
|
});
|
|
10350
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
10351
|
-
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$
|
|
9770
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
9771
|
+
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
10352
9772
|
|
|
10353
9773
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10354
9774
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -10361,7 +9781,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10361
9781
|
aspectRatio = _ref.aspectRatio,
|
|
10362
9782
|
className = _ref.className,
|
|
10363
9783
|
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
|
10364
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9784
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$6, Object.assign({
|
|
10365
9785
|
aspectRatio: aspectRatio,
|
|
10366
9786
|
className: className
|
|
10367
9787
|
}, restProps), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
@@ -10381,13 +9801,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10381
9801
|
}, caption))));
|
|
10382
9802
|
};
|
|
10383
9803
|
|
|
10384
|
-
var _templateObject$
|
|
10385
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10386
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10387
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
10388
|
-
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10389
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10390
|
-
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
9804
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m;
|
|
9805
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
9806
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
9807
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
9808
|
+
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
9809
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
9810
|
+
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
10391
9811
|
|
|
10392
9812
|
var MiniCard = function MiniCard(_ref) {
|
|
10393
9813
|
var _ref$title = _ref.title,
|
|
@@ -10425,18 +9845,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10425
9845
|
}, title)))));
|
|
10426
9846
|
};
|
|
10427
9847
|
|
|
10428
|
-
var _templateObject$
|
|
10429
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10430
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10431
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9848
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$I, _templateObject4$A, _templateObject5$u;
|
|
9849
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
9850
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
9851
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10432
9852
|
var isVisible = _ref.isVisible;
|
|
10433
9853
|
return isVisible ? 'visible' : 'hidden';
|
|
10434
9854
|
});
|
|
10435
|
-
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9855
|
+
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10436
9856
|
var isVisible = _ref2.isVisible;
|
|
10437
9857
|
return isVisible ? 'visible' : 'hidden';
|
|
10438
9858
|
});
|
|
10439
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9859
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
10440
9860
|
|
|
10441
9861
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10442
9862
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10517,15 +9937,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10517
9937
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10518
9938
|
};
|
|
10519
9939
|
|
|
10520
|
-
var _templateObject$
|
|
10521
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$
|
|
10522
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
10523
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
10524
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
9940
|
+
var _templateObject$1c, _templateObject2$W, _templateObject3$J, _templateObject4$B, _templateObject5$v;
|
|
9941
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
9942
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
|
|
9943
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
9944
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
|
|
10525
9945
|
var isActive = _ref.isActive;
|
|
10526
9946
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10527
9947
|
}, exports.Colors.MidGrey);
|
|
10528
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
9948
|
+
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10529
9949
|
var isOpen = _ref2.isOpen;
|
|
10530
9950
|
return isOpen ? 'block' : 'none';
|
|
10531
9951
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -10681,19 +10101,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10681
10101
|
});
|
|
10682
10102
|
};
|
|
10683
10103
|
|
|
10684
|
-
var _templateObject$
|
|
10685
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10686
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10687
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10104
|
+
var _templateObject$1d, _templateObject2$X, _templateObject3$K, _templateObject4$C, _templateObject5$w, _templateObject6$n;
|
|
10105
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10106
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10107
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10688
10108
|
var color = _ref.color;
|
|
10689
10109
|
return "var(--base-color-" + color + ")";
|
|
10690
10110
|
});
|
|
10691
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10692
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10111
|
+
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10112
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10693
10113
|
var color = _ref2.color;
|
|
10694
10114
|
return "var(--base-color-" + color + ")";
|
|
10695
10115
|
});
|
|
10696
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
10116
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10697
10117
|
var color = _ref3.color;
|
|
10698
10118
|
return "var(--base-color-" + color + ")";
|
|
10699
10119
|
});
|
|
@@ -10775,19 +10195,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10775
10195
|
}, strengthLabel))));
|
|
10776
10196
|
};
|
|
10777
10197
|
|
|
10778
|
-
var _templateObject$
|
|
10779
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$
|
|
10780
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10781
|
-
var Wrapper$
|
|
10782
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$
|
|
10198
|
+
var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
|
|
10199
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10200
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10201
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10202
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10783
10203
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10784
10204
|
}, devices.tablet, devices.mobile);
|
|
10785
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
10205
|
+
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
10786
10206
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10787
10207
|
}, devices.mobile);
|
|
10788
|
-
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$
|
|
10789
|
-
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10790
|
-
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$
|
|
10208
|
+
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
|
|
10209
|
+
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
|
|
10210
|
+
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10791
10211
|
|
|
10792
10212
|
/* eslint-disable react/no-danger */
|
|
10793
10213
|
var Content = function Content(_ref) {
|
|
@@ -10960,7 +10380,7 @@ var Table = function Table(_ref) {
|
|
|
10960
10380
|
} else {
|
|
10961
10381
|
visibleRows = totalRows;
|
|
10962
10382
|
}
|
|
10963
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10383
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, {
|
|
10964
10384
|
className: className
|
|
10965
10385
|
}, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
10966
10386
|
onClickPrev: handlePrev,
|
|
@@ -10990,24 +10410,24 @@ var Table = function Table(_ref) {
|
|
|
10990
10410
|
}))));
|
|
10991
10411
|
};
|
|
10992
10412
|
|
|
10993
|
-
var _templateObject$
|
|
10994
|
-
var Wrapper$
|
|
10413
|
+
var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
10414
|
+
var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10995
10415
|
var theme = _ref.theme;
|
|
10996
10416
|
return "var(--color-" + theme + ")";
|
|
10997
10417
|
}, function (_ref2) {
|
|
10998
10418
|
var theme = _ref2.theme;
|
|
10999
10419
|
return "var(--color-" + theme + ")";
|
|
11000
10420
|
});
|
|
11001
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2
|
|
11002
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
11003
|
-
var Error = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11004
|
-
var Form = /*#__PURE__*/styled__default.form(_templateObject5$
|
|
11005
|
-
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11006
|
-
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
11007
|
-
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$
|
|
11008
|
-
var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
11009
|
-
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11010
|
-
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$
|
|
10421
|
+
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
10422
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
10423
|
+
var Error = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10424
|
+
var Form = /*#__PURE__*/styled__default.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
10425
|
+
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
10426
|
+
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
10427
|
+
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
10428
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
10429
|
+
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
10430
|
+
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
11011
10431
|
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"])));
|
|
11012
10432
|
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) {
|
|
11013
10433
|
var _ref3$isOpen = _ref3.isOpen,
|
|
@@ -11033,9 +10453,7 @@ var themeToColor = function themeToColor(theme) {
|
|
|
11033
10453
|
var SignUpTitle = function SignUpTitle(_ref) {
|
|
11034
10454
|
var title = _ref.title,
|
|
11035
10455
|
_ref$isMobile = _ref.isMobile,
|
|
11036
|
-
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile
|
|
11037
|
-
_ref$titleFontFamily = _ref.titleFontFamily,
|
|
11038
|
-
titleFontFamily = _ref$titleFontFamily === void 0 ? false : _ref$titleFontFamily;
|
|
10456
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
|
|
11039
10457
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
11040
10458
|
columnStartDesktop: 3,
|
|
11041
10459
|
columnSpanDesktop: 10,
|
|
@@ -11044,7 +10462,7 @@ var SignUpTitle = function SignUpTitle(_ref) {
|
|
|
11044
10462
|
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
11045
10463
|
color: "black",
|
|
11046
10464
|
hierarchy: "h3",
|
|
11047
|
-
serif:
|
|
10465
|
+
serif: true,
|
|
11048
10466
|
size: isMobile ? 'small' : 'medium'
|
|
11049
10467
|
}, title)));
|
|
11050
10468
|
};
|
|
@@ -11352,7 +10770,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11352
10770
|
React.useEffect(function () {
|
|
11353
10771
|
setDropdownOpen(isOpened);
|
|
11354
10772
|
}, [isOpened]);
|
|
11355
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10773
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
11356
10774
|
theme: themeToColor(theme),
|
|
11357
10775
|
className: className
|
|
11358
10776
|
}, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
|
|
@@ -11417,13 +10835,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11417
10835
|
}))))));
|
|
11418
10836
|
};
|
|
11419
10837
|
|
|
11420
|
-
var _templateObject$
|
|
11421
|
-
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
10838
|
+
var _templateObject$1g, _templateObject2$_, _templateObject4$F, _templateObject5$z;
|
|
10839
|
+
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
11422
10840
|
var withShadow = _ref.withShadow;
|
|
11423
|
-
return withShadow && styled.css(_templateObject2$
|
|
10841
|
+
return withShadow && styled.css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11424
10842
|
}, devices.mobile);
|
|
11425
|
-
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
11426
|
-
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$
|
|
10843
|
+
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
10844
|
+
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11427
10845
|
|
|
11428
10846
|
var defaultGrid = {
|
|
11429
10847
|
columnStartDesktop: 2,
|
|
@@ -11481,12 +10899,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11481
10899
|
return null;
|
|
11482
10900
|
};
|
|
11483
10901
|
|
|
11484
|
-
var _templateObject$
|
|
11485
|
-
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$
|
|
10902
|
+
var _templateObject$1h, _templateObject2$$;
|
|
10903
|
+
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
11486
10904
|
var hide = _ref.hide;
|
|
11487
10905
|
return hide && "display: none;";
|
|
11488
10906
|
}, devices.mobileAndTablet);
|
|
11489
|
-
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2
|
|
10907
|
+
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
11490
10908
|
|
|
11491
10909
|
/**
|
|
11492
10910
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11578,8 +10996,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11578
10996
|
}));
|
|
11579
10997
|
};
|
|
11580
10998
|
|
|
11581
|
-
var _templateObject$
|
|
11582
|
-
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
10999
|
+
var _templateObject$1i;
|
|
11000
|
+
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
|
|
11583
11001
|
|
|
11584
11002
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11585
11003
|
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'] + "\">");
|
|
@@ -11639,27 +11057,27 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11639
11057
|
}, gridItemOrContent);
|
|
11640
11058
|
};
|
|
11641
11059
|
|
|
11642
|
-
var _templateObject$
|
|
11060
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
|
|
11643
11061
|
var color = 'primary-black';
|
|
11644
11062
|
var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
11645
11063
|
borderColor: color,
|
|
11646
11064
|
hoveredColor: color,
|
|
11647
11065
|
pressedColor: color,
|
|
11648
11066
|
textColor: color
|
|
11649
|
-
})(_templateObject$
|
|
11650
|
-
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11651
|
-
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$
|
|
11067
|
+
})(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11068
|
+
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11069
|
+
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11652
11070
|
var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
|
|
11653
11071
|
serif: true,
|
|
11654
11072
|
size: 'medium'
|
|
11655
|
-
})(_templateObject4$
|
|
11073
|
+
})(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11656
11074
|
var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
|
|
11657
11075
|
size: 'large'
|
|
11658
|
-
})(_templateObject5$
|
|
11659
|
-
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$
|
|
11076
|
+
})(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11077
|
+
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11660
11078
|
var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
|
|
11661
11079
|
size: 'large'
|
|
11662
|
-
})(_templateObject7$
|
|
11080
|
+
})(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11663
11081
|
|
|
11664
11082
|
var Paywall = function Paywall(_ref) {
|
|
11665
11083
|
var className = _ref.className,
|
|
@@ -11852,14 +11270,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11852
11270
|
})))))));
|
|
11853
11271
|
};
|
|
11854
11272
|
|
|
11855
|
-
var _templateObject$
|
|
11856
|
-
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11857
|
-
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
11858
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$
|
|
11859
|
-
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11860
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
11861
|
-
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11862
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$
|
|
11273
|
+
var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11274
|
+
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
11275
|
+
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
11276
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
11277
|
+
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11278
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11279
|
+
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11280
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
11863
11281
|
|
|
11864
11282
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11865
11283
|
var Footer = function Footer(_ref) {
|
|
@@ -11917,18 +11335,18 @@ var Footer = function Footer(_ref) {
|
|
|
11917
11335
|
}, additionalInfo))));
|
|
11918
11336
|
};
|
|
11919
11337
|
|
|
11920
|
-
var _templateObject$
|
|
11338
|
+
var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$I, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
|
|
11921
11339
|
var LIST_ITEM_GAP = 32;
|
|
11922
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11340
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
|
|
11923
11341
|
var bottomBorder = _ref.bottomBorder;
|
|
11924
11342
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11925
11343
|
}, zIndexes.anchor, function (_ref2) {
|
|
11926
11344
|
var withShadow = _ref2.withShadow;
|
|
11927
|
-
return withShadow && styled.css(_templateObject2$
|
|
11345
|
+
return withShadow && styled.css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11928
11346
|
});
|
|
11929
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
11930
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11931
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
11347
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
11348
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11349
|
+
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11932
11350
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11933
11351
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
11934
11352
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -11939,11 +11357,11 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateO
|
|
|
11939
11357
|
hasTwoArrows = _ref5.hasTwoArrows;
|
|
11940
11358
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
11941
11359
|
});
|
|
11942
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
11360
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
|
|
11943
11361
|
var withShadow = _ref7.withShadow;
|
|
11944
|
-
return withShadow && styled.css(_templateObject9$
|
|
11362
|
+
return withShadow && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11945
11363
|
});
|
|
11946
|
-
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11364
|
+
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
11947
11365
|
var disabled = _ref8.disabled;
|
|
11948
11366
|
return disabled ? 'not-allowed' : 'pointer';
|
|
11949
11367
|
}, function (_ref9) {
|
|
@@ -12198,20 +11616,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12198
11616
|
})))) : null))));
|
|
12199
11617
|
};
|
|
12200
11618
|
|
|
12201
|
-
var _templateObject$
|
|
12202
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11619
|
+
var _templateObject$1m, _templateObject2$13, _templateObject3$Q, _templateObject4$J, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11620
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12203
11621
|
var sticky = _ref.sticky;
|
|
12204
11622
|
return sticky ? 'sticky' : 'initial';
|
|
12205
11623
|
}, zIndexes.anchor);
|
|
12206
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
12207
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11624
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
11625
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
12208
11626
|
var title = _ref2.title;
|
|
12209
11627
|
return title ? 'row' : 'row-reverse';
|
|
12210
11628
|
}, devices.tablet, devices.mobile);
|
|
12211
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12212
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12213
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12214
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$
|
|
11629
|
+
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
11630
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
11631
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
11632
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
12215
11633
|
var theme = _ref3.theme;
|
|
12216
11634
|
return theme.colors.primaryButtonReverseBg;
|
|
12217
11635
|
}, function (_ref4) {
|
|
@@ -12224,8 +11642,8 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
12224
11642
|
var theme = _ref6.theme;
|
|
12225
11643
|
return theme.colors.primaryButtonReverse;
|
|
12226
11644
|
});
|
|
12227
|
-
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
12228
|
-
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11645
|
+
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
11646
|
+
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
12229
11647
|
|
|
12230
11648
|
var _excluded$s = ["text"],
|
|
12231
11649
|
_excluded2$4 = ["text"];
|
|
@@ -12258,18 +11676,18 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12258
11676
|
}, message))));
|
|
12259
11677
|
};
|
|
12260
11678
|
|
|
12261
|
-
var _templateObject$
|
|
12262
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12263
|
-
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$
|
|
12264
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12265
|
-
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$
|
|
11679
|
+
var _templateObject$1n, _templateObject2$14, _templateObject3$R, _templateObject4$K;
|
|
11680
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
|
|
11681
|
+
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
|
|
11682
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
11683
|
+
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
12266
11684
|
|
|
12267
|
-
var _templateObject$
|
|
12268
|
-
var Wrapper$
|
|
11685
|
+
var _templateObject$1o;
|
|
11686
|
+
var Wrapper$9 = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
|
|
12269
11687
|
|
|
12270
11688
|
var UpsellCards = function UpsellCards(_ref) {
|
|
12271
11689
|
var upsellCards = _ref.upsellCards;
|
|
12272
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11690
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$9, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
|
|
12273
11691
|
return /*#__PURE__*/React__default.createElement(UpsellCard, {
|
|
12274
11692
|
key: "card-" + index,
|
|
12275
11693
|
title: card.title,
|
|
@@ -12294,15 +11712,13 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12294
11712
|
upsellCards = _ref.upsellCards,
|
|
12295
11713
|
_ref$theme = _ref.theme,
|
|
12296
11714
|
theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme,
|
|
12297
|
-
className = _ref.className
|
|
12298
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
11715
|
+
className = _ref.className;
|
|
12299
11716
|
var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
|
|
12300
11717
|
return _extends({}, card, {
|
|
12301
11718
|
theme: card.theme || theme,
|
|
12302
11719
|
secondaryTheme: card.secondaryTheme || card.theme || theme
|
|
12303
11720
|
});
|
|
12304
11721
|
}) : [];
|
|
12305
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12306
11722
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
12307
11723
|
theme: theme
|
|
12308
11724
|
}, /*#__PURE__*/React__default.createElement(Grid, {
|
|
@@ -12315,7 +11731,7 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12315
11731
|
columnStartSmallDevice: 1,
|
|
12316
11732
|
columnSpanSmallDevice: 14
|
|
12317
11733
|
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
|
|
12318
|
-
serif:
|
|
11734
|
+
serif: true
|
|
12319
11735
|
}, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
|
|
12320
11736
|
text: richText != null ? richText : '',
|
|
12321
11737
|
columnStartDesktop: 1,
|
|
@@ -12329,9 +11745,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12329
11745
|
})))));
|
|
12330
11746
|
};
|
|
12331
11747
|
|
|
12332
|
-
var _templateObject$
|
|
12333
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12334
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11748
|
+
var _templateObject$1p, _templateObject2$15;
|
|
11749
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
11750
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
12335
11751
|
var bottomBorder = _ref.bottomBorder;
|
|
12336
11752
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12337
11753
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12362,11 +11778,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12362
11778
|
}, children)));
|
|
12363
11779
|
};
|
|
12364
11780
|
|
|
12365
|
-
var _templateObject$
|
|
12366
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12367
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
12368
|
-
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12369
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
11781
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$S, _templateObject4$L;
|
|
11782
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
11783
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
11784
|
+
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11785
|
+
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
12370
11786
|
|
|
12371
11787
|
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12372
11788
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -12570,29 +11986,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12570
11986
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12571
11987
|
};
|
|
12572
11988
|
|
|
12573
|
-
var _templateObject$
|
|
12574
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11989
|
+
var _templateObject$1r, _templateObject2$17, _templateObject3$T, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
|
|
11990
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
12575
11991
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12576
11992
|
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 }";
|
|
12577
11993
|
}, devices.mobile, function (_ref2) {
|
|
12578
11994
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12579
11995
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12580
11996
|
});
|
|
12581
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11997
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12582
11998
|
var type = _ref3.type,
|
|
12583
11999
|
isActive = _ref3.isActive;
|
|
12584
12000
|
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 ";
|
|
12585
12001
|
});
|
|
12586
|
-
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
12587
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12588
|
-
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12002
|
+
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
12003
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12004
|
+
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12589
12005
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12590
12006
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12591
12007
|
});
|
|
12592
|
-
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$
|
|
12593
|
-
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12594
|
-
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$
|
|
12595
|
-
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$
|
|
12008
|
+
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
|
|
12009
|
+
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
12010
|
+
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12011
|
+
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12596
12012
|
var active = _ref5.active;
|
|
12597
12013
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
12598
12014
|
}, devices.tablet, function (_ref6) {
|
|
@@ -12622,8 +12038,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12622
12038
|
_ref$infinite = _ref.infinite,
|
|
12623
12039
|
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
12624
12040
|
_ref$useOffset = _ref.useOffset,
|
|
12625
|
-
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset
|
|
12626
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
12041
|
+
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
|
|
12627
12042
|
var _useState = React.useState(false),
|
|
12628
12043
|
isFullscreen = _useState[0],
|
|
12629
12044
|
setIsFullscreen = _useState[1];
|
|
@@ -12773,7 +12188,6 @@ var Carousel = function Carousel(_ref) {
|
|
|
12773
12188
|
var carouselTitleId = "carousel-title-" + title;
|
|
12774
12189
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
12775
12190
|
var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
12776
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12777
12191
|
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
12778
12192
|
className: className,
|
|
12779
12193
|
type: type,
|
|
@@ -12797,7 +12211,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12797
12211
|
isDescriptionPresent: !!description
|
|
12798
12212
|
}, /*#__PURE__*/React__default.createElement(TitleText$1, {
|
|
12799
12213
|
size: "medium",
|
|
12800
|
-
serif:
|
|
12214
|
+
serif: true,
|
|
12801
12215
|
hierarchy: titleSemanticLevelValue
|
|
12802
12216
|
}, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12803
12217
|
size: "large"
|
|
@@ -12837,18 +12251,18 @@ var Carousel = function Carousel(_ref) {
|
|
|
12837
12251
|
}, children))));
|
|
12838
12252
|
};
|
|
12839
12253
|
|
|
12840
|
-
var _templateObject$
|
|
12841
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
12842
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12843
|
-
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12844
|
-
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12845
|
-
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12846
|
-
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12847
|
-
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12848
|
-
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
12849
|
-
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
12850
|
-
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
12851
|
-
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$
|
|
12254
|
+
var _templateObject$1s, _templateObject2$18, _templateObject3$U, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
12255
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
12256
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12257
|
+
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12258
|
+
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12259
|
+
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12260
|
+
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12261
|
+
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12262
|
+
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
12263
|
+
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12264
|
+
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12265
|
+
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12852
12266
|
var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
12853
12267
|
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);
|
|
12854
12268
|
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);
|
|
@@ -13018,10 +12432,7 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
|
|
|
13018
12432
|
isCurrentSlide: index === currentSlide
|
|
13019
12433
|
})) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
|
|
13020
12434
|
alt: mediaContent.alt
|
|
13021
|
-
}, mediaContent
|
|
13022
|
-
fetchPriority: index === currentSlide ? 'high' : 'auto',
|
|
13023
|
-
loading: index === currentSlide ? 'eager' : 'lazy'
|
|
13024
|
-
})))));
|
|
12435
|
+
}, mediaContent)))));
|
|
13025
12436
|
}));
|
|
13026
12437
|
};
|
|
13027
12438
|
|
|
@@ -13030,8 +12441,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13030
12441
|
carouselTitle = _ref.carouselTitle,
|
|
13031
12442
|
slides = _ref.slides,
|
|
13032
12443
|
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
13033
|
-
className = _ref.className
|
|
13034
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
12444
|
+
className = _ref.className;
|
|
13035
12445
|
var slidesMedia = React.useMemo(function () {
|
|
13036
12446
|
return slides.map(function (_ref2) {
|
|
13037
12447
|
var mediaContent = _ref2.mediaContent;
|
|
@@ -13062,7 +12472,6 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13062
12472
|
var handleClickInside = function handleClickInside(e) {
|
|
13063
12473
|
e.stopPropagation();
|
|
13064
12474
|
};
|
|
13065
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
13066
12475
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid$1, {
|
|
13067
12476
|
role: "region",
|
|
13068
12477
|
"aria-labelledby": carouselTitleId,
|
|
@@ -13075,7 +12484,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13075
12484
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
13076
12485
|
className: TYPOGRAPHY_CLASS_NAME,
|
|
13077
12486
|
size: "medium",
|
|
13078
|
-
serif:
|
|
12487
|
+
serif: true,
|
|
13079
12488
|
hierarchy: titleSemanticLevelValue
|
|
13080
12489
|
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
13081
12490
|
onClickNext: onNext,
|
|
@@ -13167,9 +12576,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13167
12576
|
})));
|
|
13168
12577
|
};
|
|
13169
12578
|
|
|
13170
|
-
var _templateObject$
|
|
13171
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
13172
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12579
|
+
var _templateObject$1t, _templateObject3$V;
|
|
12580
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
12581
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13173
12582
|
|
|
13174
12583
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13175
12584
|
var children = _ref.children;
|
|
@@ -13764,8 +13173,8 @@ var Theme = function Theme(_ref) {
|
|
|
13764
13173
|
}, children);
|
|
13765
13174
|
};
|
|
13766
13175
|
|
|
13767
|
-
var _templateObject$
|
|
13768
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13176
|
+
var _templateObject$1u;
|
|
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) {
|
|
13769
13178
|
var theme = _ref.theme;
|
|
13770
13179
|
return theme.colors.primary;
|
|
13771
13180
|
}, function (_ref2) {
|
|
@@ -14712,10 +14121,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1x || (
|
|
|
14712
14121
|
return theme.footer.tablet.paddingBottom;
|
|
14713
14122
|
}, devices.desktop, devices.largeDesktop);
|
|
14714
14123
|
|
|
14715
|
-
var _templateObject$
|
|
14716
|
-
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
14717
|
-
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$
|
|
14718
|
-
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$
|
|
14124
|
+
var _templateObject$1v, _templateObject2$19, _templateObject3$W;
|
|
14125
|
+
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14126
|
+
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14127
|
+
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
14719
14128
|
|
|
14720
14129
|
/* eslint-disable react/no-danger */
|
|
14721
14130
|
var Quote = function Quote(_ref) {
|
|
@@ -14810,9 +14219,7 @@ exports.Progress = Progress;
|
|
|
14810
14219
|
exports.PromoWithTags = PromoWithTags;
|
|
14811
14220
|
exports.PromoWithTitle = PromoWithTitle;
|
|
14812
14221
|
exports.Quote = Quote;
|
|
14813
|
-
exports.Radio = Radio;
|
|
14814
14222
|
exports.Radio2 = Radio2;
|
|
14815
|
-
exports.RadioGroup = RadioGroup;
|
|
14816
14223
|
exports.RadioGroup2 = RadioGroup2;
|
|
14817
14224
|
exports.ReadMore = ReadMore;
|
|
14818
14225
|
exports.RotatorButtons = RotatorButtons;
|
|
@@ -14821,7 +14228,6 @@ exports.SecondaryButton = SecondaryButton;
|
|
|
14821
14228
|
exports.SecondaryLogo = SecondaryLogo;
|
|
14822
14229
|
exports.SectionSplitter = SectionSplitter;
|
|
14823
14230
|
exports.SectionTitle = SectionTitle;
|
|
14824
|
-
exports.Select = Select;
|
|
14825
14231
|
exports.Select2 = SelectComponent;
|
|
14826
14232
|
exports.Select2Async = SelectComponent$1;
|
|
14827
14233
|
exports.SignUpForm = SignUpFormComponent;
|