@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
package/dist/harmonic.esm.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React__default, { createElement, memo, useCallback, useRef, useImperativeHandle, useMemo, useEffect,
|
|
1
|
+
import React__default, { createElement, memo, useCallback, useRef, useImperativeHandle, useMemo, useEffect, forwardRef, useState, cloneElement, useLayoutEffect } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import { renderToString } from 'react-dom/server';
|
|
5
|
-
import Select
|
|
6
|
-
import Select$
|
|
5
|
+
import Select, { components } from 'react-select';
|
|
6
|
+
import Select$1 from 'react-select/async';
|
|
7
7
|
import Modal from 'react-modal';
|
|
8
8
|
import ScrollLock from 'react-scrolllock';
|
|
9
9
|
|
|
@@ -237,8 +237,7 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
|
237
237
|
em = _ref2.em,
|
|
238
238
|
_ref2$color = _ref2.color,
|
|
239
239
|
color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
|
|
240
|
-
|
|
241
|
-
serif = _ref2$serif === void 0 ? false : _ref2$serif,
|
|
240
|
+
serif = _ref2.serif,
|
|
242
241
|
hierarchy = _ref2.hierarchy,
|
|
243
242
|
tag = _ref2.tag,
|
|
244
243
|
className = _ref2.className,
|
|
@@ -3285,10 +3284,56 @@ var Progress = function Progress(_ref) {
|
|
|
3285
3284
|
}, renderSteps()));
|
|
3286
3285
|
};
|
|
3287
3286
|
|
|
3288
|
-
var _templateObject$c, _templateObject2$7, _templateObject3$3;
|
|
3289
|
-
var
|
|
3290
|
-
var
|
|
3291
|
-
var
|
|
3287
|
+
var _templateObject$c, _templateObject2$7, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3288
|
+
var Container = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3289
|
+
var Radio = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3290
|
+
var error = _ref.error,
|
|
3291
|
+
darkMode = _ref.darkMode,
|
|
3292
|
+
disabled = _ref.disabled;
|
|
3293
|
+
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3294
|
+
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3295
|
+
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3296
|
+
return '1px solid var(--base-color-black)';
|
|
3297
|
+
}, function (_ref2) {
|
|
3298
|
+
var disabled = _ref2.disabled,
|
|
3299
|
+
darkMode = _ref2.darkMode;
|
|
3300
|
+
if (disabled) return 'var(--base-color-light-grey)';
|
|
3301
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3302
|
+
return ' var(--base-color-white)';
|
|
3303
|
+
}, function (_ref3) {
|
|
3304
|
+
var disabled = _ref3.disabled,
|
|
3305
|
+
blackBox = _ref3.blackBox,
|
|
3306
|
+
darkMode = _ref3.darkMode;
|
|
3307
|
+
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3308
|
+
if (darkMode) return 'var(--base-color-black)';
|
|
3309
|
+
if (blackBox) return 'var(--base-color-white)';
|
|
3310
|
+
return ' var(--base-color-black)';
|
|
3311
|
+
});
|
|
3312
|
+
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='radio'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Radio, function (_ref4) {
|
|
3313
|
+
var blackBox = _ref4.blackBox,
|
|
3314
|
+
darkMode = _ref4.darkMode;
|
|
3315
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3316
|
+
if (blackBox) return 'var(--base-color-black)';
|
|
3317
|
+
return ' var(--base-color-white)';
|
|
3318
|
+
}, Radio, function (_ref5) {
|
|
3319
|
+
var darkMode = _ref5.darkMode;
|
|
3320
|
+
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3321
|
+
return '3px solid var(--base-color-lapislazuli)';
|
|
3322
|
+
});
|
|
3323
|
+
var RadioIcon = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: currentColor;\n input[type='radio']:checked + ", " & {\n display: block;\n }\n"])), Radio);
|
|
3324
|
+
var TextLabel = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3325
|
+
var darkMode = _ref6.darkMode,
|
|
3326
|
+
disabled = _ref6.disabled;
|
|
3327
|
+
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3328
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3329
|
+
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3330
|
+
return 'var(--base-color-black)';
|
|
3331
|
+
});
|
|
3332
|
+
var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3333
|
+
var darkMode = _ref7.darkMode;
|
|
3334
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3335
|
+
return 'var(--base-color-errorstate)';
|
|
3336
|
+
});
|
|
3292
3337
|
|
|
3293
3338
|
var _templateObject$d;
|
|
3294
3339
|
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n margin: var(--margin-", "-", ");\n"])), function (_ref) {
|
|
@@ -3405,95 +3450,6 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
3405
3450
|
}, children);
|
|
3406
3451
|
};
|
|
3407
3452
|
|
|
3408
|
-
/**
|
|
3409
|
-
* DEPRECATED. Use Radio2 instead
|
|
3410
|
-
*/
|
|
3411
|
-
var Radio = function Radio(_ref) {
|
|
3412
|
-
var _ref$checked = _ref.checked,
|
|
3413
|
-
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
3414
|
-
error = _ref.error,
|
|
3415
|
-
label = _ref.label,
|
|
3416
|
-
onChange = _ref.onChange;
|
|
3417
|
-
var _useState = useState(checked),
|
|
3418
|
-
isChecked = _useState[0],
|
|
3419
|
-
setChecked = _useState[1];
|
|
3420
|
-
var handleRadioChange = function handleRadioChange() {
|
|
3421
|
-
setChecked(!isChecked);
|
|
3422
|
-
onChange == null || onChange(label != null ? label : '');
|
|
3423
|
-
};
|
|
3424
|
-
var handleKeyPress = function handleKeyPress(event) {
|
|
3425
|
-
if (event.key === 'Space' || event.key === ' ') handleRadioChange();
|
|
3426
|
-
};
|
|
3427
|
-
useEffect(function () {
|
|
3428
|
-
setChecked(checked);
|
|
3429
|
-
}, [onChange]);
|
|
3430
|
-
return /*#__PURE__*/React__default.createElement(RadioContainer, null, /*#__PURE__*/React__default.createElement(RadioLine, {
|
|
3431
|
-
role: "radio",
|
|
3432
|
-
tabIndex: 0,
|
|
3433
|
-
onClick: handleRadioChange,
|
|
3434
|
-
onKeyPress: handleKeyPress
|
|
3435
|
-
}, /*#__PURE__*/React__default.createElement("input", {
|
|
3436
|
-
type: "radio",
|
|
3437
|
-
checked: isChecked,
|
|
3438
|
-
readOnly: true
|
|
3439
|
-
}), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3440
|
-
level: 1
|
|
3441
|
-
}, label)), error && (/*#__PURE__*/React__default.createElement(RadioError, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3442
|
-
level: 1
|
|
3443
|
-
}, error))));
|
|
3444
|
-
};
|
|
3445
|
-
|
|
3446
|
-
var _templateObject$e, _templateObject2$8, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3447
|
-
var Container = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3448
|
-
var Radio$1 = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3449
|
-
var error = _ref.error,
|
|
3450
|
-
darkMode = _ref.darkMode,
|
|
3451
|
-
disabled = _ref.disabled;
|
|
3452
|
-
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3453
|
-
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3454
|
-
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3455
|
-
return '1px solid var(--base-color-black)';
|
|
3456
|
-
}, function (_ref2) {
|
|
3457
|
-
var disabled = _ref2.disabled,
|
|
3458
|
-
darkMode = _ref2.darkMode;
|
|
3459
|
-
if (disabled) return 'var(--base-color-light-grey)';
|
|
3460
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3461
|
-
return ' var(--base-color-white)';
|
|
3462
|
-
}, function (_ref3) {
|
|
3463
|
-
var disabled = _ref3.disabled,
|
|
3464
|
-
blackBox = _ref3.blackBox,
|
|
3465
|
-
darkMode = _ref3.darkMode;
|
|
3466
|
-
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3467
|
-
if (darkMode) return 'var(--base-color-black)';
|
|
3468
|
-
if (blackBox) return 'var(--base-color-white)';
|
|
3469
|
-
return ' var(--base-color-black)';
|
|
3470
|
-
});
|
|
3471
|
-
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='radio'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Radio$1, function (_ref4) {
|
|
3472
|
-
var blackBox = _ref4.blackBox,
|
|
3473
|
-
darkMode = _ref4.darkMode;
|
|
3474
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3475
|
-
if (blackBox) return 'var(--base-color-black)';
|
|
3476
|
-
return ' var(--base-color-white)';
|
|
3477
|
-
}, Radio$1, function (_ref5) {
|
|
3478
|
-
var darkMode = _ref5.darkMode;
|
|
3479
|
-
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3480
|
-
return '3px solid var(--base-color-lapislazuli)';
|
|
3481
|
-
});
|
|
3482
|
-
var RadioIcon = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: currentColor;\n input[type='radio']:checked + ", " & {\n display: block;\n }\n"])), Radio$1);
|
|
3483
|
-
var TextLabel = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3484
|
-
var darkMode = _ref6.darkMode,
|
|
3485
|
-
disabled = _ref6.disabled;
|
|
3486
|
-
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3487
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3488
|
-
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3489
|
-
return 'var(--base-color-black)';
|
|
3490
|
-
});
|
|
3491
|
-
var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3492
|
-
var darkMode = _ref7.darkMode;
|
|
3493
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3494
|
-
return 'var(--base-color-errorstate)';
|
|
3495
|
-
});
|
|
3496
|
-
|
|
3497
3453
|
var _excluded$7 = ["children", "disabled", "error", "darkMode", "blackBox"];
|
|
3498
3454
|
/**
|
|
3499
3455
|
* A Radio component, that wraps around the native `<input type="radio"/>` element
|
|
@@ -3532,7 +3488,7 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3532
3488
|
type: "radio",
|
|
3533
3489
|
ref: ref,
|
|
3534
3490
|
"data-testid": "radio-input"
|
|
3535
|
-
})), /*#__PURE__*/React__default.createElement(Radio
|
|
3491
|
+
})), /*#__PURE__*/React__default.createElement(Radio, {
|
|
3536
3492
|
error: error,
|
|
3537
3493
|
darkMode: darkMode,
|
|
3538
3494
|
disabled: disabled,
|
|
@@ -3552,9 +3508,9 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3552
3508
|
};
|
|
3553
3509
|
var Radio2 = /*#__PURE__*/forwardRef(Radio2Component);
|
|
3554
3510
|
|
|
3555
|
-
var _templateObject$
|
|
3556
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3557
|
-
var BaseIconWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
3511
|
+
var _templateObject$e, _templateObject2$8, _templateObject3$4, _templateObject4$3, _templateObject5$2;
|
|
3512
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3513
|
+
var BaseIconWrapper = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n\n width: ", ";\n height: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (_ref) {
|
|
3558
3514
|
var size = _ref.size;
|
|
3559
3515
|
return size === 'small' ? 'var(--rotator-button-small-width)' : 'var(--rotator-button-width)';
|
|
3560
3516
|
}, function (_ref2) {
|
|
@@ -3567,7 +3523,7 @@ var BaseIconWrapper = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateOb
|
|
|
3567
3523
|
var size = _ref4.size;
|
|
3568
3524
|
return size === 'small' ? 'var(--rotator-button-small-icon-width)' : 'var(--rotator-button-icon-width)';
|
|
3569
3525
|
});
|
|
3570
|
-
var IconWrapper$1 = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject3$
|
|
3526
|
+
var IconWrapper$1 = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--rotator-button-bg-color);\n color: var(--rotator-button-color);\n\n svg path {\n fill: var(--rotator-button-color);\n }\n\n :hover {\n cursor: pointer;\n background-color: var(--rotator-button-hover-bg-color);\n\n && svg path {\n fill: var(--rotator-button-hover-color);\n }\n }\n"])));
|
|
3571
3527
|
var IconUnavailableWrapper = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-state-disabled);\n color: var(--color-primary-black);\n opacity: 0.2;\n\n svg path {\n fill: var(--color-primary-black);\n }\n\n @media ", " {\n pointer-events: none;\n }\n"])), devices.mobile);
|
|
3572
3528
|
var FullscreenIconWrapper = /*#__PURE__*/styled(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
|
|
3573
3529
|
|
|
@@ -3757,8 +3713,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3757
3713
|
}, renderFullscreenIcon())));
|
|
3758
3714
|
};
|
|
3759
3715
|
|
|
3760
|
-
var _templateObject$
|
|
3761
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$
|
|
3716
|
+
var _templateObject$f;
|
|
3717
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3762
3718
|
var fillColor = _ref.fillColor;
|
|
3763
3719
|
return fillColor;
|
|
3764
3720
|
});
|
|
@@ -3783,9 +3739,9 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3783
3739
|
})));
|
|
3784
3740
|
};
|
|
3785
3741
|
|
|
3786
|
-
var _templateObject$
|
|
3787
|
-
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
3788
|
-
var Splitter = /*#__PURE__*/styled.div(_templateObject2$
|
|
3742
|
+
var _templateObject$g, _templateObject2$9;
|
|
3743
|
+
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3744
|
+
var Splitter = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--color-base-light-grey);\n"])));
|
|
3789
3745
|
|
|
3790
3746
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
3791
3747
|
var _ref$fullWidth = _ref.fullWidth,
|
|
@@ -3806,8 +3762,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3806
3762
|
}, /*#__PURE__*/React__default.createElement(Splitter, null))));
|
|
3807
3763
|
};
|
|
3808
3764
|
|
|
3809
|
-
var _templateObject$
|
|
3810
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3765
|
+
var _templateObject$h;
|
|
3766
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-block;\n height: auto;\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n\n img {\n display: block;\n width: 100%;\n }\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n"])), devices.tablet, devices.mobile);
|
|
3811
3767
|
|
|
3812
3768
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3813
3769
|
var imageSource = _ref.imageSource,
|
|
@@ -3834,10 +3790,10 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3834
3790
|
}) : children));
|
|
3835
3791
|
};
|
|
3836
3792
|
|
|
3837
|
-
var _templateObject$
|
|
3838
|
-
var SponsorshipWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3839
|
-
var SponsorshipLinkText = /*#__PURE__*/styled.span(_templateObject2$
|
|
3840
|
-
var SponsorshipLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
3793
|
+
var _templateObject$i, _templateObject2$a, _templateObject3$5, _templateObject4$4;
|
|
3794
|
+
var SponsorshipWrapper = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n position: relative;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3795
|
+
var SponsorshipLinkText = /*#__PURE__*/styled.span(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n whitespace: nowrap;\n borderwidth: 0;\n"])));
|
|
3796
|
+
var SponsorshipLink = /*#__PURE__*/styled.a(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n inset: 0;\n width: 80px;\n height: 80px;\n z-index: 2;\n text-decoration: none;\n background: transparent;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3841
3797
|
var SponsorshipStyledIframe = /*#__PURE__*/styled.iframe(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: none;\n display: block;\n width: 80px;\n height: 80px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n\n @media ", " {\n transform: scale(0.5);\n transform-origin: top left;\n }\n"])), devices.mobileAndTablet);
|
|
3842
3798
|
|
|
3843
3799
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3872,8 +3828,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3872
3828
|
}));
|
|
3873
3829
|
};
|
|
3874
3830
|
|
|
3875
|
-
var _templateObject$
|
|
3876
|
-
var TabText = /*#__PURE__*/styled.a(_templateObject$
|
|
3831
|
+
var _templateObject$j, _templateObject2$b;
|
|
3832
|
+
var TabText = /*#__PURE__*/styled.a(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--harmonic-letter-spacing-navigation);\n text-decoration: none;\n margin-left: 5px;\n color: var(--color-primary-black);\n color: ", ";\n\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n ", "\n\n @media ", " {\n width: max-content;\n }\n"])), function (_ref) {
|
|
3877
3833
|
var color = _ref.color;
|
|
3878
3834
|
return color ? "var(--color-" + color + ")" : "var(--color-primary-black)";
|
|
3879
3835
|
}, function (props) {
|
|
@@ -3884,7 +3840,7 @@ var TabText = /*#__PURE__*/styled.a(_templateObject$k || (_templateObject$k = /*
|
|
|
3884
3840
|
}
|
|
3885
3841
|
return "";
|
|
3886
3842
|
}, devices.mobileAndTablet);
|
|
3887
|
-
var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3843
|
+
var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: fit-content;\n height: 100%;\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n & path {\n fill: var(--color-primary-black);\n }\n }\n\n ", "\n\n ", "\n\n @media ", " {\n svg {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n"])), function (props) {
|
|
3888
3844
|
if (props.withIcon === 'left') {
|
|
3889
3845
|
return "\n flex-direction: row-reverse;\n svg {\n margin-right: 6px;\n }";
|
|
3890
3846
|
}
|
|
@@ -3969,8 +3925,8 @@ var Tab = function Tab(_ref) {
|
|
|
3969
3925
|
}));
|
|
3970
3926
|
};
|
|
3971
3927
|
|
|
3972
|
-
var _templateObject$
|
|
3973
|
-
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
3928
|
+
var _templateObject$k, _templateObject2$c;
|
|
3929
|
+
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n\n && svg path {\n fill: ", ";\n }\n\n @media ", ", ", " {\n &:hover {\n color: var(--color-", ");\n border-bottom: 1px solid var(--color-", ");\n\n && svg path {\n fill: var(--color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3974
3930
|
var iconName = _ref.iconName;
|
|
3975
3931
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px) 0' : 'var(--harmonic-text-link-underline-offset) 0';
|
|
3976
3932
|
}, function (_ref2) {
|
|
@@ -3997,7 +3953,7 @@ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject
|
|
|
3997
3953
|
var hoverColor = _ref7.hoverColor;
|
|
3998
3954
|
return hoverColor;
|
|
3999
3955
|
});
|
|
4000
|
-
var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
3956
|
+
var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
|
|
4001
3957
|
|
|
4002
3958
|
var _excluded$9 = ["children", "iconName", "iconDirection", "color", "hoverColor", "className"];
|
|
4003
3959
|
var TabLink = function TabLink(_ref) {
|
|
@@ -4025,19 +3981,19 @@ var TabLink = function TabLink(_ref) {
|
|
|
4025
3981
|
}))) : null, children);
|
|
4026
3982
|
};
|
|
4027
3983
|
|
|
4028
|
-
var _templateObject$
|
|
4029
|
-
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3984
|
+
var _templateObject$l, _templateObject2$d, _templateObject3$6, _templateObject4$5;
|
|
3985
|
+
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
4030
3986
|
var width = _ref.width;
|
|
4031
3987
|
return width ? width + "px;" : '100%;';
|
|
4032
3988
|
}, function (_ref2) {
|
|
4033
3989
|
var height = _ref2.height;
|
|
4034
3990
|
return height + "px;";
|
|
4035
3991
|
});
|
|
4036
|
-
var TextAreaLabel = /*#__PURE__*/styled.div(_templateObject2$
|
|
3992
|
+
var TextAreaLabel = /*#__PURE__*/styled.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 0 15px;\n ", ";\n"])), function (_ref3) {
|
|
4037
3993
|
var darkMode = _ref3.darkMode;
|
|
4038
3994
|
return darkMode ? 'color: var(--base-color-white)' : '';
|
|
4039
3995
|
});
|
|
4040
|
-
var TextAreaBox = /*#__PURE__*/styled.textarea(_templateObject3$
|
|
3996
|
+
var TextAreaBox = /*#__PURE__*/styled.textarea(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n box-sizing: border-box;\n resize: none;\n padding: 20px;\n width: 100%;\n height: 100%;\n border: 1px solid ", ";\n\n ", ";\n\n :disabled {\n background-color: var(--base-color-light-grey);\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline-style: solid;\n outline-width: ", ";\n outline-color: ", ";\n }\n"])), function (_ref4) {
|
|
4041
3997
|
var error = _ref4.error;
|
|
4042
3998
|
return error ? 'var(--base-color-errorstate)' : 'var(--base-color-light-grey)';
|
|
4043
3999
|
}, function (_ref5) {
|
|
@@ -4148,14 +4104,14 @@ var TextArea = function TextArea(_ref) {
|
|
|
4148
4104
|
}, error)))));
|
|
4149
4105
|
};
|
|
4150
4106
|
|
|
4151
|
-
var _templateObject$
|
|
4152
|
-
var Container$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
4153
|
-
var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4107
|
+
var _templateObject$m, _templateObject2$e, _templateObject3$7, _templateObject4$6, _templateObject5$3, _templateObject6$1, _templateObject7;
|
|
4108
|
+
var Container$1 = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4109
|
+
var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
4154
4110
|
var width = _ref.width;
|
|
4155
4111
|
if (!width) return 'none';
|
|
4156
4112
|
return width + "px";
|
|
4157
4113
|
});
|
|
4158
|
-
var Input = /*#__PURE__*/styled.input(_templateObject3$
|
|
4114
|
+
var Input = /*#__PURE__*/styled.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--color-base-light-grey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n"])), function (_ref2) {
|
|
4159
4115
|
var isPasswordField = _ref2.isPasswordField;
|
|
4160
4116
|
if (isPasswordField) return "80px";
|
|
4161
4117
|
return "20px";
|
|
@@ -4282,9 +4238,9 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
|
|
|
4282
4238
|
};
|
|
4283
4239
|
var TextField = /*#__PURE__*/forwardRef(TextFieldComponent);
|
|
4284
4240
|
|
|
4285
|
-
var _templateObject$
|
|
4286
|
-
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4287
|
-
var textStyles = /*#__PURE__*/css(_templateObject2$
|
|
4241
|
+
var _templateObject$n, _templateObject2$f, _templateObject3$8, _templateObject4$7, _templateObject5$4;
|
|
4242
|
+
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4243
|
+
var textStyles = /*#__PURE__*/css(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
|
|
4288
4244
|
var theme = _ref.theme;
|
|
4289
4245
|
return theme.fonts.desktop.weights.body[1];
|
|
4290
4246
|
}, function (_ref2) {
|
|
@@ -4294,7 +4250,7 @@ var textStyles = /*#__PURE__*/css(_templateObject2$g || (_templateObject2$g = /*
|
|
|
4294
4250
|
var theme = _ref3.theme;
|
|
4295
4251
|
return theme.spacing[7];
|
|
4296
4252
|
});
|
|
4297
|
-
var Input$1 = /*#__PURE__*/styled.input(_templateObject3$
|
|
4253
|
+
var Input$1 = /*#__PURE__*/styled.input(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n width: ", ";\n height: 48px;\n padding: 0px 20px;\n\n border: 1px solid ", ";\n outline: none;\n\n ", "\n\n :disabled {\n background-color: ", ";\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline: ", "};\n }\n"])), textStyles, function (_ref4) {
|
|
4298
4254
|
var width = _ref4.width;
|
|
4299
4255
|
return width ? width + "px" : '196px';
|
|
4300
4256
|
}, function (_ref5) {
|
|
@@ -4359,15 +4315,15 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4359
4315
|
}, error)) : null);
|
|
4360
4316
|
};
|
|
4361
4317
|
|
|
4362
|
-
var _templateObject$
|
|
4363
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
4318
|
+
var _templateObject$o, _templateObject2$g;
|
|
4319
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n text-underline-offset: ", ";\n font-family: var(--font-family-sans);\n font-size: 19px;\n font-weight: 500;\n line-height: 17px;\n letter-spacing: 0.4px;\n color: var(--color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media ", " {\n font-size: 17px;\n }\n"])), function (_ref) {
|
|
4364
4320
|
var iconName = _ref.iconName;
|
|
4365
4321
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
|
|
4366
4322
|
}, function (_ref2) {
|
|
4367
4323
|
var color = _ref2.color;
|
|
4368
4324
|
return color;
|
|
4369
4325
|
}, devices.mobile);
|
|
4370
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
4326
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
4371
4327
|
|
|
4372
4328
|
var _excluded$d = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
4373
4329
|
var TextLink = function TextLink(_ref) {
|
|
@@ -4398,12 +4354,12 @@ var TextLogoProduct;
|
|
|
4398
4354
|
TextLogoProduct["Cinema"] = "CINEMA";
|
|
4399
4355
|
})(TextLogoProduct || (TextLogoProduct = {}));
|
|
4400
4356
|
|
|
4401
|
-
var _templateObject$
|
|
4402
|
-
var TickboxError = /*#__PURE__*/styled.div(_templateObject$
|
|
4357
|
+
var _templateObject$p, _templateObject2$h, _templateObject3$9, _templateObject4$8;
|
|
4358
|
+
var TickboxError = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4403
4359
|
var dark = _ref.dark;
|
|
4404
4360
|
return dark ? 'white' : 'errorstate';
|
|
4405
4361
|
});
|
|
4406
|
-
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$
|
|
4362
|
+
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(\n --base-color-", "\n );\n cursor: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n div {\n margin-left: -32px;\n }\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref2) {
|
|
4407
4363
|
var dark = _ref2.dark,
|
|
4408
4364
|
disabled = _ref2.disabled;
|
|
4409
4365
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -4412,7 +4368,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$i || (_templateO
|
|
|
4412
4368
|
var disabled = _ref3.disabled;
|
|
4413
4369
|
return disabled ? 'not-allowed' : 'pointer';
|
|
4414
4370
|
}, devices.mobileAndTablet);
|
|
4415
|
-
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$
|
|
4371
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n outline: ", ";\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref4) {
|
|
4416
4372
|
var dark = _ref4.dark,
|
|
4417
4373
|
disabled = _ref4.disabled,
|
|
4418
4374
|
error = _ref4.error;
|
|
@@ -4520,9 +4476,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
4520
4476
|
}, error))));
|
|
4521
4477
|
};
|
|
4522
4478
|
|
|
4523
|
-
var _templateObject$
|
|
4524
|
-
var Container$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
4525
|
-
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
4479
|
+
var _templateObject$q, _templateObject2$i, _templateObject3$a, _templateObject4$9, _templateObject5$5, _templateObject6$2;
|
|
4480
|
+
var Container$2 = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4481
|
+
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
4526
4482
|
var error = _ref.error,
|
|
4527
4483
|
darkMode = _ref.darkMode,
|
|
4528
4484
|
disabled = _ref.disabled;
|
|
@@ -4545,7 +4501,7 @@ var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$
|
|
|
4545
4501
|
if (blackBox) return 'var(--base-color-white)';
|
|
4546
4502
|
return ' var(--base-color-black)';
|
|
4547
4503
|
});
|
|
4548
|
-
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$
|
|
4504
|
+
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='checkbox'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Tickbox$1, function (_ref4) {
|
|
4549
4505
|
var blackBox = _ref4.blackBox,
|
|
4550
4506
|
darkMode = _ref4.darkMode;
|
|
4551
4507
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -4631,16 +4587,16 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
|
|
|
4631
4587
|
};
|
|
4632
4588
|
var Tickbox2 = /*#__PURE__*/forwardRef(Tickbox2Component);
|
|
4633
4589
|
|
|
4634
|
-
var _templateObject$
|
|
4635
|
-
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4590
|
+
var _templateObject$r, _templateObject2$j, _templateObject3$b, _templateObject4$a, _templateObject5$6, _templateObject6$3, _templateObject7$1, _templateObject8;
|
|
4591
|
+
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-", ");\n"])), function (_ref) {
|
|
4636
4592
|
var color = _ref.color;
|
|
4637
4593
|
return color;
|
|
4638
4594
|
});
|
|
4639
|
-
var Line = /*#__PURE__*/styled.div(_templateObject2$
|
|
4595
|
+
var Line = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
|
|
4640
4596
|
var color = _ref2.color;
|
|
4641
4597
|
return color;
|
|
4642
4598
|
}, devices.mobileAndTablet);
|
|
4643
|
-
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4599
|
+
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4644
4600
|
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
4645
4601
|
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
4646
4602
|
var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -4741,8 +4697,8 @@ var Timer = function Timer(_ref) {
|
|
|
4741
4697
|
}));
|
|
4742
4698
|
};
|
|
4743
4699
|
|
|
4744
|
-
var _templateObject$
|
|
4745
|
-
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$
|
|
4700
|
+
var _templateObject$s;
|
|
4701
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\u2013';\n margin: 0 0.5em;\n }\n\n li:first-child:before {\n display: none;\n }\n"])));
|
|
4746
4702
|
|
|
4747
4703
|
var TypeTags = function TypeTags(_ref) {
|
|
4748
4704
|
var list = _ref.list;
|
|
@@ -4755,10 +4711,10 @@ var TypeTags = function TypeTags(_ref) {
|
|
|
4755
4711
|
}));
|
|
4756
4712
|
};
|
|
4757
4713
|
|
|
4758
|
-
var _templateObject$
|
|
4759
|
-
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$
|
|
4760
|
-
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
4761
|
-
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4714
|
+
var _templateObject$t, _templateObject2$k, _templateObject3$c, _templateObject4$b, _templateObject5$7, _templateObject6$4, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject0;
|
|
4715
|
+
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n cursor: pointer;\n"])));
|
|
4716
|
+
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
|
|
4717
|
+
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
4762
4718
|
var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 40px 17px 30px;\n"])));
|
|
4763
4719
|
var LeftWrapper = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4764
4720
|
var VideoVolume = /*#__PURE__*/styled.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
@@ -4945,13 +4901,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4945
4901
|
}))));
|
|
4946
4902
|
};
|
|
4947
4903
|
|
|
4948
|
-
var _templateObject$
|
|
4949
|
-
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4950
|
-
var StepperError = /*#__PURE__*/styled.div(_templateObject2$
|
|
4904
|
+
var _templateObject$u, _templateObject2$l, _templateObject3$d, _templateObject4$c, _templateObject5$8;
|
|
4905
|
+
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
4906
|
+
var StepperError = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
4951
4907
|
var darkMode = _ref.darkMode;
|
|
4952
4908
|
return darkMode ? 'white' : 'errorstate';
|
|
4953
4909
|
});
|
|
4954
|
-
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$
|
|
4910
|
+
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 154px;\n height: 48px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n ", ";\n\n * {\n color: var(--base-color-", ");\n word-break: unset;\n user-select: none;\n }\n\n path {\n fill: var(--base-color-", ") !important;\n }\n\n & > * {\n width: 51px;\n }\n"])), function (_ref2) {
|
|
4955
4911
|
var darkMode = _ref2.darkMode,
|
|
4956
4912
|
disabled = _ref2.disabled,
|
|
4957
4913
|
error = _ref2.error;
|
|
@@ -5155,9 +5111,9 @@ var Component = function Component(_ref) {
|
|
|
5155
5111
|
}, error))));
|
|
5156
5112
|
};
|
|
5157
5113
|
|
|
5158
|
-
var _templateObject$
|
|
5159
|
-
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5160
|
-
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$
|
|
5114
|
+
var _templateObject$v, _templateObject2$m;
|
|
5115
|
+
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
|
|
5116
|
+
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n\n &:focus {\n outline: 2px solid var(--color-base-white);\n }\n"])));
|
|
5161
5117
|
|
|
5162
5118
|
var SocialLinks = function SocialLinks(_ref) {
|
|
5163
5119
|
var items = _ref.items;
|
|
@@ -5181,16 +5137,16 @@ var SocialLinks = function SocialLinks(_ref) {
|
|
|
5181
5137
|
}));
|
|
5182
5138
|
};
|
|
5183
5139
|
|
|
5184
|
-
var _templateObject$
|
|
5185
|
-
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5140
|
+
var _templateObject$w, _templateObject2$n, _templateObject3$e, _templateObject4$d, _templateObject5$9, _templateObject6$5, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
5141
|
+
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 4px;\n\n @media ", " {\n padding-top: 0px;\n }\n\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
5186
5142
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5187
5143
|
return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--color-base-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
5188
5144
|
});
|
|
5189
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5145
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: ", ";\n opacity: 0;\n animation: fadeIn 0.3s ease forwards;\n\n @media ", " {\n top: 230px;\n background-color: var(--color-base-black);\n }\n\n @keyframes fadeIn {\n to {\n opacity: 0.5;\n }\n }\n"])), function (_ref2) {
|
|
5190
5146
|
var isMobile = _ref2.isMobile;
|
|
5191
5147
|
return isMobile ? zIndexes.overlay : zIndexes.searchOverlay;
|
|
5192
5148
|
}, devices.mobileAndTablet);
|
|
5193
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
5149
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-white);\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n z-index: ", ";\n\n @media ", " {\n height: 60px;\n }\n"])), zIndexes.navigation, devices.mobileAndTablet);
|
|
5194
5150
|
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n opacity: ", ";\n transform: ", ";\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease;\n background-color: var(--color-base-white);\n height: 100px;\n border-top: 1px solid var(--color-base-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 86px;\n top: 144px;\n }\n"])), function (_ref3) {
|
|
5195
5151
|
var visible = _ref3.visible;
|
|
5196
5152
|
return visible ? 'visible' : 'hidden';
|
|
@@ -5225,11 +5181,11 @@ var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject11 || (_
|
|
|
5225
5181
|
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
5226
5182
|
var NavTopContainerMobile = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n width: fit-content;\n align-items: center;\n height: 10%;\n margin-left: 20px;\n padding-bottom: 36px;\n }\n"])), devices.mobileAndTablet);
|
|
5227
5183
|
|
|
5228
|
-
var _templateObject$
|
|
5229
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5184
|
+
var _templateObject$x;
|
|
5185
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 100%;\n\n @media ", " {\n column-gap: 20px;\n }\n"])), devices.mobile);
|
|
5230
5186
|
|
|
5231
|
-
var _templateObject$
|
|
5232
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5187
|
+
var _templateObject$y, _templateObject2$o, _templateObject3$f, _templateObject4$e, _templateObject5$a, _templateObject6$6;
|
|
5188
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding-top: 3px;\n padding-bottom: 3px;\n\n & svg path {\n fill: var(--color-primary-black);\n }\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--color-primary-red);\n padding-bottom: 2px;\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
5233
5189
|
var selected = _ref.selected;
|
|
5234
5190
|
if (selected) {
|
|
5235
5191
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
@@ -5242,8 +5198,8 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$z || (_templateObj
|
|
|
5242
5198
|
}
|
|
5243
5199
|
return '';
|
|
5244
5200
|
});
|
|
5245
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5246
|
-
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
5201
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5202
|
+
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n"])));
|
|
5247
5203
|
var BasketInfo = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n @media ", " {\n width: max-content;\n }\n"])), devices.mobileAndTablet);
|
|
5248
5204
|
var BasketNum = /*#__PURE__*/styled.span(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n font-size: 10px;\n font-family: var(--font-family-sans);\n"])));
|
|
5249
5205
|
var BasketText = /*#__PURE__*/styled.a(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n color: var(--color-primary-black);\n margin-left: 6px;\n text-decoration: none;\n"])));
|
|
@@ -5390,15 +5346,15 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5390
5346
|
}, expiryTime ? basketText : text)) : ''));
|
|
5391
5347
|
};
|
|
5392
5348
|
|
|
5393
|
-
var _templateObject$
|
|
5394
|
-
var SearchContainer = /*#__PURE__*/styled.button(_templateObject$
|
|
5349
|
+
var _templateObject$z, _templateObject2$p;
|
|
5350
|
+
var SearchContainer = /*#__PURE__*/styled.button(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid transparent;\n padding-top: 3px;\n padding-bottom: 3px;\n\n svg path {\n fill: var(--color-primary-black);\n }\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])), function (_ref) {
|
|
5395
5351
|
var selected = _ref.selected;
|
|
5396
5352
|
if (selected) {
|
|
5397
5353
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
5398
5354
|
}
|
|
5399
5355
|
return '';
|
|
5400
5356
|
});
|
|
5401
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
5357
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5402
5358
|
|
|
5403
5359
|
var Search$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
5404
5360
|
var _ref$selected = _ref.selected,
|
|
@@ -5658,15 +5614,15 @@ var NavTop = function NavTop(_ref) {
|
|
|
5658
5614
|
}));
|
|
5659
5615
|
};
|
|
5660
5616
|
|
|
5661
|
-
var _templateObject$
|
|
5662
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5663
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5617
|
+
var _templateObject$A, _templateObject2$q, _templateObject3$g, _templateObject4$f;
|
|
5618
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
5619
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
5664
5620
|
if (props.showMenu) {
|
|
5665
5621
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
5666
5622
|
}
|
|
5667
5623
|
return "display: none;";
|
|
5668
5624
|
});
|
|
5669
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
5625
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--color-primary-red);\n }\n }\n\n && svg path {\n fill: var(--color-primary-black);\n }\n\n :hover {\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5670
5626
|
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 0;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5671
5627
|
|
|
5672
5628
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
@@ -5793,10 +5749,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
5793
5749
|
}, "Menu"))))));
|
|
5794
5750
|
};
|
|
5795
5751
|
|
|
5796
|
-
var _templateObject$
|
|
5797
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5798
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
5799
|
-
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$
|
|
5752
|
+
var _templateObject$B, _templateObject2$r, _templateObject3$h, _templateObject5$b, _templateObject6$7, _templateObject7$4;
|
|
5753
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: transparent;\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
5754
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
5755
|
+
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])));
|
|
5800
5756
|
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-serif);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--color-base-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
5801
5757
|
var TextLinkWrapper$1 = /*#__PURE__*/styled(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
5802
5758
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-right: 8px;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
@@ -5937,19 +5893,19 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5937
5893
|
})));
|
|
5938
5894
|
};
|
|
5939
5895
|
|
|
5940
|
-
var _templateObject$
|
|
5941
|
-
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5896
|
+
var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject4$g, _templateObject5$c, _templateObject6$8, _templateObject7$5;
|
|
5897
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n border-top: 2px solid var(--color-base-light-grey);\n border-bottom: ", ";\n"])), function (_ref) {
|
|
5942
5898
|
var showLine = _ref.showLine;
|
|
5943
5899
|
return showLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5944
5900
|
});
|
|
5945
|
-
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5901
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n opacity: ", ";\n transition: opacity 0.2s ease;\n pointer-events: ", ";\n\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref2) {
|
|
5946
5902
|
var isVisible = _ref2.isVisible;
|
|
5947
5903
|
return isVisible ? 1 : 0;
|
|
5948
5904
|
}, function (_ref3) {
|
|
5949
5905
|
var isVisible = _ref3.isVisible;
|
|
5950
5906
|
return isVisible ? 'auto' : 'none';
|
|
5951
5907
|
}, devices.mobile);
|
|
5952
|
-
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
5908
|
+
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-top: 28px;\n padding-bottom: 28px;\n color: var(--color-primary-black);\n\n && svg {\n width: 24px;\n height: 24px;\n }\n\n :hover {\n cursor: ", ";\n pointer-events: ", ";\n }\n\n @media ", " {\n padding-top: 16px;\n padding-bottom: 16px;\n }\n"])), function (_ref4) {
|
|
5953
5909
|
var hasChildren = _ref4.hasChildren;
|
|
5954
5910
|
return hasChildren ? 'pointer' : 'default';
|
|
5955
5911
|
}, function (_ref5) {
|
|
@@ -5962,31 +5918,13 @@ var ContentContainer = /*#__PURE__*/styled(ExtendedBodyCopyHarmonic).withConfig(
|
|
|
5962
5918
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5963
5919
|
return prop !== 'textHeight';
|
|
5964
5920
|
}
|
|
5965
|
-
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n
|
|
5921
|
+
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref6) {
|
|
5966
5922
|
var textHeight = _ref6.textHeight;
|
|
5967
5923
|
return textHeight;
|
|
5968
|
-
}, function (_ref7) {
|
|
5969
|
-
var textHeight = _ref7.textHeight;
|
|
5970
|
-
return textHeight === '0px' ? 'hidden' : 'visible';
|
|
5971
|
-
}, function (_ref8) {
|
|
5972
|
-
var textHeight = _ref8.textHeight;
|
|
5973
|
-
return textHeight === '0px' ? '0px' : '12px';
|
|
5974
5924
|
}, devices.mobile);
|
|
5975
5925
|
var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
5976
5926
|
|
|
5977
5927
|
/* eslint-disable react/no-unstable-nested-components */
|
|
5978
|
-
/** In-flow height only so absolutely positioned UI (e.g. react-select menu) does not inflate scrollHeight. */
|
|
5979
|
-
function getPanelContentHeight(panel) {
|
|
5980
|
-
var inner = panel.firstElementChild;
|
|
5981
|
-
if (!inner || !(inner instanceof HTMLElement)) {
|
|
5982
|
-
return panel.scrollHeight;
|
|
5983
|
-
}
|
|
5984
|
-
var innerStyle = window.getComputedStyle(inner);
|
|
5985
|
-
var marginY = (parseFloat(innerStyle.marginTop) || 0) + (parseFloat(innerStyle.marginBottom) || 0);
|
|
5986
|
-
var panelStyle = window.getComputedStyle(panel);
|
|
5987
|
-
var paddingY = (parseFloat(panelStyle.paddingTop) || 0) + (parseFloat(panelStyle.paddingBottom) || 0);
|
|
5988
|
-
return inner.offsetHeight + marginY + paddingY;
|
|
5989
|
-
}
|
|
5990
5928
|
var Accordion = function Accordion(_ref) {
|
|
5991
5929
|
var _expandedStateIcon$ic, _collapsedStateIcon$i;
|
|
5992
5930
|
var _ref$title = _ref.title,
|
|
@@ -6023,69 +5961,21 @@ var Accordion = function Accordion(_ref) {
|
|
|
6023
5961
|
var content = useRef(null);
|
|
6024
5962
|
var timeoutRef = useRef(null);
|
|
6025
5963
|
var rafRef = useRef(null);
|
|
6026
|
-
var resizeObserverRef = useRef(null);
|
|
6027
|
-
var intervalRef = useRef(null);
|
|
6028
5964
|
useEffect(function () {
|
|
6029
|
-
if (content.current && initOpen) {
|
|
6030
|
-
setTextHeight(
|
|
5965
|
+
if (content != null && content.current && initOpen) {
|
|
5966
|
+
setTextHeight(content.current.scrollHeight + "px");
|
|
6031
5967
|
}
|
|
6032
|
-
}, [initOpen]);
|
|
5968
|
+
}, [content, initOpen]);
|
|
6033
5969
|
useEffect(function () {
|
|
6034
|
-
|
|
6035
|
-
|
|
6036
|
-
|
|
6037
|
-
|
|
6038
|
-
|
|
6039
|
-
if (!openAccordion) {
|
|
5970
|
+
if (openAccordion && content != null && content.current) {
|
|
5971
|
+
rafRef.current = window.requestAnimationFrame(function () {
|
|
5972
|
+
var _content$current$scro, _content$current;
|
|
5973
|
+
setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
|
|
5974
|
+
});
|
|
5975
|
+
} else if (!openAccordion) {
|
|
6040
5976
|
setTextHeight('0px');
|
|
6041
|
-
if (resizeObserverRef.current) {
|
|
6042
|
-
resizeObserverRef.current.disconnect();
|
|
6043
|
-
resizeObserverRef.current = null;
|
|
6044
|
-
}
|
|
6045
|
-
if (intervalRef.current) {
|
|
6046
|
-
window.clearInterval(intervalRef.current);
|
|
6047
|
-
intervalRef.current = null;
|
|
6048
|
-
}
|
|
6049
|
-
if (rafRef.current) {
|
|
6050
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6051
|
-
rafRef.current = null;
|
|
6052
|
-
}
|
|
6053
|
-
return cleanup;
|
|
6054
|
-
}
|
|
6055
|
-
var updateHeight = function updateHeight() {
|
|
6056
|
-
setTextHeight(getPanelContentHeight(el) + "px");
|
|
6057
|
-
};
|
|
6058
|
-
rafRef.current = window.requestAnimationFrame(updateHeight);
|
|
6059
|
-
if (typeof ResizeObserver !== 'undefined') {
|
|
6060
|
-
var ro = new ResizeObserver(updateHeight);
|
|
6061
|
-
ro.observe(el);
|
|
6062
|
-
resizeObserverRef.current = ro;
|
|
6063
|
-
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6064
|
-
return function () {
|
|
6065
|
-
ro.disconnect();
|
|
6066
|
-
resizeObserverRef.current = null;
|
|
6067
|
-
if (intervalRef.current) {
|
|
6068
|
-
window.clearInterval(intervalRef.current);
|
|
6069
|
-
intervalRef.current = null;
|
|
6070
|
-
}
|
|
6071
|
-
if (rafRef.current) {
|
|
6072
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6073
|
-
rafRef.current = null;
|
|
6074
|
-
}
|
|
6075
|
-
};
|
|
6076
5977
|
}
|
|
6077
|
-
|
|
6078
|
-
return function () {
|
|
6079
|
-
if (intervalRef.current) {
|
|
6080
|
-
window.clearInterval(intervalRef.current);
|
|
6081
|
-
intervalRef.current = null;
|
|
6082
|
-
}
|
|
6083
|
-
if (rafRef.current) {
|
|
6084
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6085
|
-
rafRef.current = null;
|
|
6086
|
-
}
|
|
6087
|
-
};
|
|
6088
|
-
}, [openAccordion, childrenVisibility, children]);
|
|
5978
|
+
}, [openAccordion, childrenVisibility, content]);
|
|
6089
5979
|
useEffect(function () {
|
|
6090
5980
|
return function () {
|
|
6091
5981
|
if (timeoutRef.current) {
|
|
@@ -6096,14 +5986,6 @@ var Accordion = function Accordion(_ref) {
|
|
|
6096
5986
|
window.cancelAnimationFrame(rafRef.current);
|
|
6097
5987
|
rafRef.current = null;
|
|
6098
5988
|
}
|
|
6099
|
-
if (resizeObserverRef.current) {
|
|
6100
|
-
resizeObserverRef.current.disconnect();
|
|
6101
|
-
resizeObserverRef.current = null;
|
|
6102
|
-
}
|
|
6103
|
-
if (intervalRef.current) {
|
|
6104
|
-
window.clearInterval(intervalRef.current);
|
|
6105
|
-
intervalRef.current = null;
|
|
6106
|
-
}
|
|
6107
5989
|
};
|
|
6108
5990
|
}, []);
|
|
6109
5991
|
var toggleAccordion = function toggleAccordion() {
|
|
@@ -6157,8 +6039,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6157
6039
|
}, children)));
|
|
6158
6040
|
};
|
|
6159
6041
|
|
|
6160
|
-
var _templateObject$
|
|
6161
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6042
|
+
var _templateObject$D;
|
|
6043
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6162
6044
|
|
|
6163
6045
|
var Accordions = function Accordions(_ref) {
|
|
6164
6046
|
var _ref$items = _ref.items,
|
|
@@ -6180,16 +6062,16 @@ var Accordions = function Accordions(_ref) {
|
|
|
6180
6062
|
}));
|
|
6181
6063
|
};
|
|
6182
6064
|
|
|
6183
|
-
var _templateObject$
|
|
6184
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6185
|
-
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
6065
|
+
var _templateObject$E, _templateObject2$t, _templateObject3$j, _templateObject4$h, _templateObject5$d;
|
|
6066
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: var(--announcement-banner-bg-color);\n color: var(--announcement-banner-color);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), devices.mobile);
|
|
6067
|
+
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n cursor: ", ";\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n\n path {\n fill: var(--announcement-banner-color);\n }\n }\n"])), function (_ref) {
|
|
6186
6068
|
var isClickable = _ref.isClickable;
|
|
6187
6069
|
return isClickable ? 'pointer' : 'default';
|
|
6188
6070
|
}, function (_ref2) {
|
|
6189
6071
|
var isClickable = _ref2.isClickable;
|
|
6190
6072
|
return isClickable && "\n :hover:not(:active) {\n && svg path {\n fill: var(--announcement-banner-hover-color);\n }\n }\n :active {\n && svg path {\n fill: var(--announcement-banner-pressed-color);\n }\n }\n ";
|
|
6191
6073
|
});
|
|
6192
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
6074
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-sans);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--announcement-banner-color);\n a {\n color: var(--announcement-banner-color);\n text-decoration: underline;\n }\n\n * {\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n margin-inline-end: 0;\n }\n"])));
|
|
6193
6075
|
var OverlineWrapper = /*#__PURE__*/styled(HarmonicOverline)(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
|
|
6194
6076
|
var BannerContentWrapper = /*#__PURE__*/styled(GridItem)(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n grid-column: 3 / span 10;\n }\n\n @media ", ", ", " {\n && {\n grid-column: 3 / span 12;\n }\n }\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.desktop, devices.largeDesktop, devices.mobile, function (_ref3) {
|
|
6195
6077
|
var variant = _ref3.variant;
|
|
@@ -6284,8 +6166,8 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
|
|
|
6284
6166
|
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
6285
6167
|
};
|
|
6286
6168
|
|
|
6287
|
-
var _templateObject$
|
|
6288
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$
|
|
6169
|
+
var _templateObject$F;
|
|
6170
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
|
|
6289
6171
|
|
|
6290
6172
|
var _excluded$f = ["children", "className"];
|
|
6291
6173
|
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
@@ -6298,22 +6180,22 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
6298
6180
|
}), children);
|
|
6299
6181
|
};
|
|
6300
6182
|
|
|
6301
|
-
var _templateObject$
|
|
6183
|
+
var _templateObject$G, _templateObject2$u, _templateObject3$k, _templateObject4$i, _templateObject5$e, _templateObject6$9, _templateObject7$6, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1;
|
|
6302
6184
|
var LENGTH_LARGE_TEXT = 28;
|
|
6303
6185
|
var LENGTH_SMALL_TEXT = 19;
|
|
6304
6186
|
var LENGTH_TEXT_TABLET = 10;
|
|
6305
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6187
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
6306
6188
|
var isCardClickable = _ref.isCardClickable;
|
|
6307
6189
|
return isCardClickable ? 'pointer' : 'default';
|
|
6308
6190
|
}, function (_ref2) {
|
|
6309
6191
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
6310
6192
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
6311
6193
|
});
|
|
6312
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6194
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n background-color: var(--button-bg-color);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
6313
6195
|
var lineColor = _ref3.lineColor;
|
|
6314
6196
|
return lineColor ? "var(--color-" + lineColor + ")" : 'var(--color-primary-background)';
|
|
6315
6197
|
}, zIndexes.contentOverlay);
|
|
6316
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
6198
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
|
|
6317
6199
|
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: 24px;\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref4) {
|
|
6318
6200
|
var fullWidth = _ref4.fullWidth;
|
|
6319
6201
|
return fullWidth ? '0' : '20px';
|
|
@@ -6594,9 +6476,9 @@ var Card = function Card(_ref) {
|
|
|
6594
6476
|
}, restSecondButton), tertiaryButtonTextTruncate)))));
|
|
6595
6477
|
};
|
|
6596
6478
|
|
|
6597
|
-
var _templateObject$
|
|
6598
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
6599
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
6479
|
+
var _templateObject$H, _templateObject2$v;
|
|
6480
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
6481
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
6600
6482
|
|
|
6601
6483
|
var Cards = function Cards(_ref) {
|
|
6602
6484
|
var cards = _ref.cards,
|
|
@@ -6638,10 +6520,10 @@ var Cards = function Cards(_ref) {
|
|
|
6638
6520
|
}));
|
|
6639
6521
|
};
|
|
6640
6522
|
|
|
6641
|
-
var _templateObject$
|
|
6642
|
-
var CastFiltersComponentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6643
|
-
var CastFiltersWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
6644
|
-
var HeadingTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
6523
|
+
var _templateObject$I, _templateObject2$w, _templateObject3$l, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
|
|
6524
|
+
var CastFiltersComponentWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n flex-direction: column-reverse;\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6525
|
+
var CastFiltersWrapper = /*#__PURE__*/styled.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6526
|
+
var HeadingTextWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
|
|
6645
6527
|
var RotatorButtonsWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6646
6528
|
var CastWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n @media ", " {\n flex-direction: column;\n gap: 10px;\n }\n"])), devices.mobile);
|
|
6647
6529
|
var ActionButtons = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n gap: 32px;\n\n .mobile-only {\n visibility: hidden;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n }\n\n @media ", " {\n .mobile-only {\n visibility: visible;\n padding-block: 24px;\n font-size: 17px;\n line-height: 24px;\n }\n\n flex-direction: row-reverse;\n gap: unset;\n justify-content: space-between;\n border-block-end: 2px solid var(--base-color-light-grey);\n\n :has(.mobile-only) {\n justify-content: left;\n }\n\n :not(:has(.mobile-only)) {\n padding-block: 12px;\n }\n\n a {\n width: fit-content;\n }\n }\n"])), devices.mobile);
|
|
@@ -6650,29 +6532,26 @@ var PersonToggle = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObjec
|
|
|
6650
6532
|
var isSelected = _ref.isSelected;
|
|
6651
6533
|
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
6652
6534
|
});
|
|
6653
|
-
var PersonImage = /*#__PURE__*/styled.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n
|
|
6654
|
-
var
|
|
6655
|
-
return greyscale ? 'grayscale(100%)' : 'none';
|
|
6656
|
-
}, function (_ref3) {
|
|
6657
|
-
var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
|
|
6535
|
+
var PersonImage = /*#__PURE__*/styled.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n\n // This is really specific to the SVG that we have been provided\n // as a fallback person image. I don't think there's a simpler and\n // more general way to handle this, so if we're given a new placeholder\n // image later, we may have to change the scale here\n ", "\n"])), function (_ref2) {
|
|
6536
|
+
var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
|
|
6658
6537
|
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6659
6538
|
});
|
|
6660
6539
|
var PersonName = /*#__PURE__*/styled.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n\n @media ", " {\n max-width: unset;\n text-align: left;\n font-size: 17px;\n line-height: 24px;\n }\n"])), devices.mobile);
|
|
6661
|
-
var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (
|
|
6662
|
-
var isSelected =
|
|
6540
|
+
var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (_ref3) {
|
|
6541
|
+
var isSelected = _ref3.isSelected;
|
|
6663
6542
|
return isSelected ? 'flex' : 'none';
|
|
6664
|
-
}, function (
|
|
6665
|
-
var isSelected =
|
|
6543
|
+
}, function (_ref4) {
|
|
6544
|
+
var isSelected = _ref4.isSelected;
|
|
6666
6545
|
return isSelected ? 'flex' : 'none';
|
|
6667
6546
|
});
|
|
6668
6547
|
var EmptySelectionTextSpacer = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
|
|
6669
6548
|
|
|
6670
6549
|
var defaultPlaceholderImage = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c9c9c9%3Bstroke%3A%23c9c9c9%3B%7D.cls-1%2C.cls-2%2C.cls-3%7Bstroke-miterlimit%3A10%3B%7D.cls-2%7Bfill-rule%3Aevenodd%3B%7D.cls-2%2C.cls-3%7Bfill%3A%2372767c%3Bstroke%3A%2372767c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M50.42%2C89.58c21.86%2C0%2C39.58-17.72%2C39.58-39.58S72.28%2C10.42%2C50.42%2C10.42%2C10.83%2C28.14%2C10.83%2C50s17.72%2C39.58%2C39.58%2C39.58Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M50.4%2C89.58c10.88%2C0%2C20.75-4.42%2C27.92-11.54-4.96-10.46-15.58-17.71-27.92-17.71s-22.96%2C7.25-27.92%2C17.71c7.17%2C7.12%2C17%2C11.54%2C27.92%2C11.54Z%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M50.4%2C55.67c8.05%2C0%2C14.58-6.53%2C14.58-14.58s-6.53-14.58-14.58-14.58-14.58%2C6.53-14.58%2C14.58%2C6.53%2C14.58%2C14.58%2C14.58Z%22%2F%3E%3C%2Fsvg%3E";
|
|
6671
6550
|
|
|
6672
|
-
var _templateObject$
|
|
6551
|
+
var _templateObject$J, _templateObject2$x;
|
|
6673
6552
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
6674
|
-
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6675
|
-
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$
|
|
6553
|
+
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
6554
|
+
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
6676
6555
|
var transitioning = _ref.transitioning;
|
|
6677
6556
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
6678
6557
|
}, function (_ref2) {
|
|
@@ -7071,8 +6950,6 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7071
6950
|
onSelect = _ref.onSelect,
|
|
7072
6951
|
onApply = _ref.onApply,
|
|
7073
6952
|
onClear = _ref.onClear,
|
|
7074
|
-
_ref$greyscale = _ref.greyscale,
|
|
7075
|
-
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
7076
6953
|
_ref$selectedIndices = _ref.selectedIndices,
|
|
7077
6954
|
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
7078
6955
|
var _useViewport = useViewport(),
|
|
@@ -7213,8 +7090,7 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7213
7090
|
src: personImage,
|
|
7214
7091
|
alt: image ? name : "Placeholder image for " + name,
|
|
7215
7092
|
draggable: false,
|
|
7216
|
-
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7217
|
-
greyscale: greyscale
|
|
7093
|
+
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7218
7094
|
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7219
7095
|
isSelected: isSelected
|
|
7220
7096
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -7273,10 +7149,10 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7273
7149
|
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7274
7150
|
};
|
|
7275
7151
|
|
|
7276
|
-
var _templateObject$
|
|
7277
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7278
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7279
|
-
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7152
|
+
var _templateObject$K, _templateObject2$y, _templateObject3$m, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
|
|
7153
|
+
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7154
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
|
|
7155
|
+
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7280
7156
|
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7281
7157
|
var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7282
7158
|
var DesktopSuffixWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
@@ -7331,12 +7207,12 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7331
7207
|
}, addressString)))))))));
|
|
7332
7208
|
};
|
|
7333
7209
|
|
|
7334
|
-
var _templateObject$
|
|
7335
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
7336
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
7210
|
+
var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$l, _templateObject5$h, _templateObject6$c;
|
|
7211
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7212
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7337
7213
|
return props.clickable ? 'pointer' : 'default';
|
|
7338
7214
|
}, devices.mobile);
|
|
7339
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7215
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7340
7216
|
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7341
7217
|
return props.showImage ? 2 : '1 / span 4';
|
|
7342
7218
|
}, devices.mobile);
|
|
@@ -7424,16 +7300,16 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7424
7300
|
}), link.text))));
|
|
7425
7301
|
};
|
|
7426
7302
|
|
|
7427
|
-
var _templateObject$
|
|
7428
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
7303
|
+
var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$m, _templateObject5$i;
|
|
7304
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7429
7305
|
var imageToLeft = _ref.imageToLeft;
|
|
7430
7306
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7431
7307
|
}, devices.mobile);
|
|
7432
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7308
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7433
7309
|
var imageToLeft = _ref2.imageToLeft;
|
|
7434
7310
|
return imageToLeft ? 'left' : 'right';
|
|
7435
7311
|
}, devices.mobile);
|
|
7436
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7312
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7437
7313
|
var imageToLeft = _ref3.imageToLeft;
|
|
7438
7314
|
return imageToLeft ? 'right' : 'left';
|
|
7439
7315
|
}, devices.mobile);
|
|
@@ -7477,10 +7353,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7477
7353
|
})))));
|
|
7478
7354
|
};
|
|
7479
7355
|
|
|
7480
|
-
var _templateObject$
|
|
7481
|
-
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7482
|
-
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7483
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$
|
|
7356
|
+
var _templateObject$N, _templateObject2$B, _templateObject3$p;
|
|
7357
|
+
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
7358
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
7359
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
|
|
7484
7360
|
|
|
7485
7361
|
var _excluded$j = ["text", "onClick"];
|
|
7486
7362
|
var HotFilters = function HotFilters(_ref) {
|
|
@@ -7544,10 +7420,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7544
7420
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7545
7421
|
};
|
|
7546
7422
|
|
|
7547
|
-
var _templateObject$
|
|
7548
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7549
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7550
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
7423
|
+
var _templateObject$O, _templateObject2$C, _templateObject3$q, _templateObject4$n;
|
|
7424
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
|
|
7425
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7426
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
|
|
7551
7427
|
var variant = _ref.variant,
|
|
7552
7428
|
theme = _ref.theme;
|
|
7553
7429
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7781,13 +7657,13 @@ var Information = function Information(_ref) {
|
|
|
7781
7657
|
})))));
|
|
7782
7658
|
};
|
|
7783
7659
|
|
|
7784
|
-
var _templateObject$
|
|
7785
|
-
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$
|
|
7660
|
+
var _templateObject$P, _templateObject2$D, _templateObject3$r, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
|
|
7661
|
+
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7786
7662
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7787
7663
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7788
7664
|
}, devices.mobile);
|
|
7789
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
7790
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7665
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
7666
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
7791
7667
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7792
7668
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7793
7669
|
});
|
|
@@ -7877,10 +7753,10 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7877
7753
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7878
7754
|
};
|
|
7879
7755
|
|
|
7880
|
-
var _templateObject$
|
|
7881
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7882
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7883
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
7756
|
+
var _templateObject$Q, _templateObject2$E, _templateObject3$s, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
|
|
7757
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
7758
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
7759
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7884
7760
|
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7885
7761
|
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7886
7762
|
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
@@ -7948,19 +7824,19 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7948
7824
|
}, "Scroll Down"))) : null);
|
|
7949
7825
|
};
|
|
7950
7826
|
|
|
7951
|
-
var _templateObject$
|
|
7952
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7827
|
+
var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$q, _templateObject5$l;
|
|
7828
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
7953
7829
|
var color = _ref.color;
|
|
7954
7830
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
7955
7831
|
}, devices.mobileAndTablet);
|
|
7956
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
7832
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
7957
7833
|
var hasImage = _ref2.hasImage;
|
|
7958
7834
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7959
7835
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7960
7836
|
var hasImage = _ref3.hasImage;
|
|
7961
7837
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7962
7838
|
});
|
|
7963
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
7839
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
7964
7840
|
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
7965
7841
|
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7966
7842
|
|
|
@@ -7992,10 +7868,10 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7992
7868
|
})))));
|
|
7993
7869
|
};
|
|
7994
7870
|
|
|
7995
|
-
var _templateObject$
|
|
7996
|
-
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$
|
|
7997
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7998
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7871
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
7872
|
+
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
7873
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
7874
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7999
7875
|
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
8000
7876
|
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
|
|
8001
7877
|
var theme = _ref.theme;
|
|
@@ -8206,7 +8082,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8206
8082
|
})))))))))));
|
|
8207
8083
|
};
|
|
8208
8084
|
|
|
8209
|
-
var _templateObject$
|
|
8085
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$s;
|
|
8210
8086
|
var GRID = {
|
|
8211
8087
|
desktop: {
|
|
8212
8088
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8219,18 +8095,18 @@ var GRID = {
|
|
|
8219
8095
|
right: '2 / 1 / 3 / 15'
|
|
8220
8096
|
}
|
|
8221
8097
|
};
|
|
8222
|
-
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8098
|
+
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8223
8099
|
var $background = _ref.$background;
|
|
8224
8100
|
return "var(--color-" + $background + ")";
|
|
8225
8101
|
});
|
|
8226
|
-
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8102
|
+
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8227
8103
|
var hasImage = _ref2.hasImage;
|
|
8228
8104
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8229
8105
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8230
8106
|
var hasImage = _ref3.hasImage;
|
|
8231
8107
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8232
8108
|
});
|
|
8233
|
-
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8109
|
+
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
8234
8110
|
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8235
8111
|
|
|
8236
8112
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
@@ -8254,10 +8130,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8254
8130
|
})))));
|
|
8255
8131
|
};
|
|
8256
8132
|
|
|
8257
|
-
var _templateObject$
|
|
8258
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
8259
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
8260
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8133
|
+
var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
|
|
8134
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8135
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
8136
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8261
8137
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
8262
8138
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8263
8139
|
var invert = _ref.invert,
|
|
@@ -8508,10 +8384,10 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8508
8384
|
}), linkText))))));
|
|
8509
8385
|
};
|
|
8510
8386
|
|
|
8511
|
-
var _templateObject$
|
|
8512
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8513
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8514
|
-
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8387
|
+
var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$d;
|
|
8388
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8389
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8390
|
+
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8515
8391
|
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8516
8392
|
var hasImages = _ref.hasImages;
|
|
8517
8393
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
@@ -8587,10 +8463,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8587
8463
|
}))))));
|
|
8588
8464
|
};
|
|
8589
8465
|
|
|
8590
|
-
var _templateObject$
|
|
8591
|
-
var linkButtonStyles = /*#__PURE__*/css(_templateObject$
|
|
8592
|
-
var PageNav = /*#__PURE__*/styled.a(_templateObject2$
|
|
8593
|
-
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
8466
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
|
|
8467
|
+
var linkButtonStyles = /*#__PURE__*/css(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
8468
|
+
var PageNav = /*#__PURE__*/styled.a(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8469
|
+
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8594
8470
|
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
8595
8471
|
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8596
8472
|
var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8746,19 +8622,16 @@ var Pagination = function Pagination(_ref) {
|
|
|
8746
8622
|
}))))));
|
|
8747
8623
|
};
|
|
8748
8624
|
|
|
8749
|
-
var _templateObject$
|
|
8750
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8751
|
-
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8752
|
-
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8753
|
-
});
|
|
8625
|
+
var _templateObject$X;
|
|
8626
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8754
8627
|
|
|
8755
|
-
var _templateObject$
|
|
8756
|
-
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
8757
|
-
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$
|
|
8628
|
+
var _templateObject$Y, _templateObject2$L;
|
|
8629
|
+
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8630
|
+
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8758
8631
|
|
|
8759
|
-
var _templateObject$
|
|
8760
|
-
var PersonLink = /*#__PURE__*/styled.a(_templateObject$
|
|
8761
|
-
var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$
|
|
8632
|
+
var _templateObject$Z, _templateObject2$M;
|
|
8633
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
|
|
8634
|
+
var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8762
8635
|
|
|
8763
8636
|
var Person = function Person(_ref) {
|
|
8764
8637
|
var person = _ref.person,
|
|
@@ -8797,17 +8670,13 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8797
8670
|
})));
|
|
8798
8671
|
};
|
|
8799
8672
|
|
|
8800
|
-
var _templateObject
|
|
8801
|
-
var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject
|
|
8802
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8803
|
-
var greyscale = _ref.greyscale;
|
|
8804
|
-
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8805
|
-
});
|
|
8673
|
+
var _templateObject$_, _templateObject2$N;
|
|
8674
|
+
var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8675
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
|
|
8806
8676
|
|
|
8807
8677
|
var PersonCard = function PersonCard(_ref) {
|
|
8808
8678
|
var role = _ref.role,
|
|
8809
|
-
className = _ref.className
|
|
8810
|
-
greyscale = _ref.greyscale;
|
|
8679
|
+
className = _ref.className;
|
|
8811
8680
|
var hasHeadshot = React__default.useMemo(function () {
|
|
8812
8681
|
var _role$people;
|
|
8813
8682
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
@@ -8815,9 +8684,7 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8815
8684
|
}, [role]);
|
|
8816
8685
|
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
8817
8686
|
className: className
|
|
8818
|
-
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
|
|
8819
|
-
greyscale: greyscale
|
|
8820
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
8687
|
+
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
|
|
8821
8688
|
src: role.people[0].headshot,
|
|
8822
8689
|
alt: role.people[0].name
|
|
8823
8690
|
})), /*#__PURE__*/React__default.createElement(PersonDetails, {
|
|
@@ -8831,30 +8698,25 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8831
8698
|
|
|
8832
8699
|
var PeopleListing = function PeopleListing(_ref) {
|
|
8833
8700
|
var roles = _ref.roles,
|
|
8834
|
-
className = _ref.className
|
|
8835
|
-
greyscale = _ref.greyscale,
|
|
8836
|
-
largeDesktopColumns = _ref.largeDesktopColumns;
|
|
8701
|
+
className = _ref.className;
|
|
8837
8702
|
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
|
|
8838
|
-
className: className
|
|
8839
|
-
"$largeDesktopColumns": largeDesktopColumns
|
|
8703
|
+
className: className
|
|
8840
8704
|
}, roles.map(function (role, index) {
|
|
8841
8705
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8842
8706
|
key: role.name + "-" + index
|
|
8843
8707
|
}, /*#__PURE__*/React__default.createElement(PersonCard, {
|
|
8844
|
-
role: role
|
|
8845
|
-
className: className,
|
|
8846
|
-
greyscale: greyscale
|
|
8708
|
+
role: role
|
|
8847
8709
|
}));
|
|
8848
8710
|
}));
|
|
8849
8711
|
};
|
|
8850
8712
|
|
|
8851
|
-
var _templateObject
|
|
8852
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8853
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
8713
|
+
var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$u;
|
|
8714
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8715
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8854
8716
|
var columnCount = _ref.columnCount;
|
|
8855
8717
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8856
8718
|
}, devices.mobile, devices.tablet);
|
|
8857
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8719
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
8858
8720
|
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8859
8721
|
|
|
8860
8722
|
// Get the total character length of a property in an array of objects
|
|
@@ -8982,8 +8844,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8982
8844
|
}, creditEntries);
|
|
8983
8845
|
};
|
|
8984
8846
|
|
|
8985
|
-
var _templateObject$
|
|
8986
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$
|
|
8847
|
+
var _templateObject$10;
|
|
8848
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
8987
8849
|
|
|
8988
8850
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
8989
8851
|
var items = _ref.items;
|
|
@@ -9001,14 +8863,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
9001
8863
|
}));
|
|
9002
8864
|
};
|
|
9003
8865
|
|
|
9004
|
-
var _templateObject$
|
|
8866
|
+
var _templateObject$11, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
9005
8867
|
var LENGTH_TEXT = 28;
|
|
9006
8868
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9007
8869
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9008
8870
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9009
8871
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9010
8872
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9011
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8873
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
9012
8874
|
var imageToLeft = _ref.imageToLeft;
|
|
9013
8875
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9014
8876
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9018,7 +8880,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templa
|
|
|
9018
8880
|
var asCard = _ref3.asCard;
|
|
9019
8881
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9020
8882
|
});
|
|
9021
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8883
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
9022
8884
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9023
8885
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9024
8886
|
}, function (_ref5) {
|
|
@@ -9273,21 +9135,21 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9273
9135
|
}))));
|
|
9274
9136
|
};
|
|
9275
9137
|
|
|
9276
|
-
var _templateObject$
|
|
9138
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
|
|
9277
9139
|
var LENGTH_TEXT$2 = 28;
|
|
9278
9140
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9279
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9141
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9280
9142
|
var imageToLeft = _ref.imageToLeft;
|
|
9281
9143
|
return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
|
|
9282
9144
|
}, devices.tablet, function (_ref2) {
|
|
9283
9145
|
var imageToLeft = _ref2.imageToLeft;
|
|
9284
9146
|
return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
|
|
9285
9147
|
}, devices.mobile);
|
|
9286
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9148
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9287
9149
|
var imageToLeft = _ref3.imageToLeft;
|
|
9288
9150
|
return imageToLeft ? 'left' : 'right';
|
|
9289
9151
|
}, devices.mobile);
|
|
9290
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9152
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
9291
9153
|
var imageToLeft = _ref4.imageToLeft;
|
|
9292
9154
|
return imageToLeft ? 'right' : 'left';
|
|
9293
9155
|
}, devices.mobile);
|
|
@@ -9316,8 +9178,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templat
|
|
|
9316
9178
|
return '';
|
|
9317
9179
|
});
|
|
9318
9180
|
|
|
9319
|
-
var _templateObject$
|
|
9320
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9181
|
+
var _templateObject$13;
|
|
9182
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
9321
9183
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9322
9184
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9323
9185
|
return aspectRatio;
|
|
@@ -9499,65 +9361,9 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9499
9361
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9500
9362
|
};
|
|
9501
9363
|
|
|
9502
|
-
var _templateObject$
|
|
9503
|
-
var
|
|
9504
|
-
|
|
9505
|
-
/**
|
|
9506
|
-
* DEPRECATED. Use RadioGroup2 instead
|
|
9507
|
-
*/
|
|
9508
|
-
var RadioGroup = function RadioGroup(_ref) {
|
|
9509
|
-
var radios = _ref.radios,
|
|
9510
|
-
_ref$columnStartDeskt = _ref.columnStartDesktop,
|
|
9511
|
-
columnStartDesktop = _ref$columnStartDeskt === void 0 ? 1 : _ref$columnStartDeskt,
|
|
9512
|
-
_ref$columnStartDevic = _ref.columnStartDevice,
|
|
9513
|
-
columnStartDevice = _ref$columnStartDevic === void 0 ? 1 : _ref$columnStartDevic,
|
|
9514
|
-
_ref$columnSpanDeskto = _ref.columnSpanDesktop,
|
|
9515
|
-
columnSpanDesktop = _ref$columnSpanDeskto === void 0 ? 16 : _ref$columnSpanDeskto,
|
|
9516
|
-
_ref$columnSpanDevice = _ref.columnSpanDevice,
|
|
9517
|
-
columnSpanDevice = _ref$columnSpanDevice === void 0 ? 14 : _ref$columnSpanDevice,
|
|
9518
|
-
columnStartSmallDevice = _ref.columnStartSmallDevice,
|
|
9519
|
-
columnSpanSmallDevice = _ref.columnSpanSmallDevice,
|
|
9520
|
-
onChange = _ref.onChange;
|
|
9521
|
-
var _useState = useState(radios != null ? radios : []),
|
|
9522
|
-
radioProps = _useState[0],
|
|
9523
|
-
setRadioProps = _useState[1];
|
|
9524
|
-
var _useState2 = useState(null),
|
|
9525
|
-
checkedIndex = _useState2[0],
|
|
9526
|
-
setCheckedIndex = _useState2[1];
|
|
9527
|
-
var handleChange = function handleChange(_value, index) {
|
|
9528
|
-
setCheckedIndex(index);
|
|
9529
|
-
var newRadioProps = radios == null ? void 0 : radios.map(function (radio, i) {
|
|
9530
|
-
return _extends({}, radio, {
|
|
9531
|
-
checked: i === index
|
|
9532
|
-
});
|
|
9533
|
-
});
|
|
9534
|
-
setRadioProps(newRadioProps != null ? newRadioProps : []);
|
|
9535
|
-
onChange == null || onChange(radios ? radios[index] : undefined);
|
|
9536
|
-
};
|
|
9537
|
-
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9538
|
-
columnStartDesktop: columnStartDesktop,
|
|
9539
|
-
columnSpanDesktop: columnSpanDesktop,
|
|
9540
|
-
columnStartDevice: columnStartDevice,
|
|
9541
|
-
columnSpanDevice: columnSpanDevice,
|
|
9542
|
-
columnStartSmallDevice: columnStartSmallDevice,
|
|
9543
|
-
columnSpanSmallDevice: columnSpanSmallDevice
|
|
9544
|
-
}, /*#__PURE__*/React__default.createElement(RadioGroupContainer, null, radioProps == null ? void 0 : radioProps.map(function (radio, i) {
|
|
9545
|
-
var _radio$label;
|
|
9546
|
-
return /*#__PURE__*/React__default.createElement(Radio, {
|
|
9547
|
-
key: ((_radio$label = radio.label) != null ? _radio$label : 'defaultRadioKey') + i,
|
|
9548
|
-
checked: i === checkedIndex,
|
|
9549
|
-
// error={radio.error} // TO DO: Add error state - design not yet available
|
|
9550
|
-
label: radio.label,
|
|
9551
|
-
onChange: function onChange(e) {
|
|
9552
|
-
return handleChange(e, i);
|
|
9553
|
-
}
|
|
9554
|
-
});
|
|
9555
|
-
})));
|
|
9556
|
-
};
|
|
9557
|
-
|
|
9558
|
-
var _templateObject$16, _templateObject2$R, _templateObject3$D;
|
|
9559
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9560
|
-
var RadioGroup$1 = /*#__PURE__*/styled.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) {
|
|
9364
|
+
var _templateObject$14, _templateObject2$Q, _templateObject3$C;
|
|
9365
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9366
|
+
var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9561
9367
|
var horizontalMode = _ref.horizontalMode;
|
|
9562
9368
|
if (horizontalMode) return 'row';
|
|
9563
9369
|
return 'column';
|
|
@@ -9565,7 +9371,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObjec
|
|
|
9565
9371
|
var gap = _ref2.gap;
|
|
9566
9372
|
return gap + "px";
|
|
9567
9373
|
});
|
|
9568
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9374
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9569
9375
|
var darkMode = _ref3.darkMode;
|
|
9570
9376
|
if (darkMode) return 'var(--base-color-white)';
|
|
9571
9377
|
return 'var(--base-color-errorstate)';
|
|
@@ -9620,7 +9426,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9620
9426
|
var changeHandler = function changeHandler(e) {
|
|
9621
9427
|
onChange == null || onChange(e.target.value);
|
|
9622
9428
|
};
|
|
9623
|
-
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup
|
|
9429
|
+
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup, {
|
|
9624
9430
|
gap: gap,
|
|
9625
9431
|
horizontalMode: horizontalMode
|
|
9626
9432
|
}, radios.map(function (radio, idx) {
|
|
@@ -9642,10 +9448,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9642
9448
|
}, error))));
|
|
9643
9449
|
};
|
|
9644
9450
|
|
|
9645
|
-
var _templateObject$
|
|
9646
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9647
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9648
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9451
|
+
var _templateObject$15, _templateObject2$R, _templateObject3$D;
|
|
9452
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9453
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9454
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9649
9455
|
|
|
9650
9456
|
/* eslint-disable react/no-danger */
|
|
9651
9457
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9701,8 +9507,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9701
9507
|
return null;
|
|
9702
9508
|
};
|
|
9703
9509
|
|
|
9704
|
-
var _templateObject$
|
|
9705
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9510
|
+
var _templateObject$16;
|
|
9511
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9706
9512
|
|
|
9707
9513
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9708
9514
|
var HarmonicSize = {
|
|
@@ -9744,418 +9550,37 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9744
9550
|
}, description)))));
|
|
9745
9551
|
};
|
|
9746
9552
|
|
|
9747
|
-
var _templateObject$
|
|
9748
|
-
var
|
|
9749
|
-
|
|
9750
|
-
return "3px solid " + theme.colors.lapisLazuli;
|
|
9751
|
-
}, function (_ref2) {
|
|
9752
|
-
var theme = _ref2.theme;
|
|
9753
|
-
return theme.colors.lightgrey;
|
|
9754
|
-
}, function (_ref3) {
|
|
9755
|
-
var theme = _ref3.theme;
|
|
9756
|
-
return theme.colors.lightgrey;
|
|
9757
|
-
});
|
|
9758
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9759
|
-
var theme = _ref4.theme;
|
|
9760
|
-
return theme.colors.darkgrey;
|
|
9761
|
-
});
|
|
9762
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9763
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9764
|
-
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9765
|
-
var theme = _ref5.theme;
|
|
9766
|
-
return {
|
|
9767
|
-
iconName: 'DropdownArrow',
|
|
9768
|
-
color: theme.colors.black,
|
|
9769
|
-
title: 'Select Arrow'
|
|
9770
|
-
};
|
|
9771
|
-
})(_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"])));
|
|
9772
|
-
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9773
|
-
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9774
|
-
var Options = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
9775
|
-
var Option = /*#__PURE__*/styled.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9776
|
-
var theme = _ref6.theme,
|
|
9777
|
-
hover = _ref6.hover;
|
|
9778
|
-
var _theme$colors = theme.colors,
|
|
9779
|
-
lightgrey = _theme$colors.lightgrey,
|
|
9780
|
-
midgrey = _theme$colors.midgrey;
|
|
9781
|
-
if (hover) return "background-color: " + midgrey;
|
|
9782
|
-
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
9783
|
-
});
|
|
9784
|
-
var selectStyles = function selectStyles(width, height) {
|
|
9785
|
-
return css(_templateObject0$7 || (_templateObject0$7 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
|
|
9786
|
-
};
|
|
9787
|
-
var SelectList = /*#__PURE__*/styled.ul(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
9788
|
-
var width = _ref7.width,
|
|
9789
|
-
height = _ref7.height;
|
|
9790
|
-
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
9791
|
-
}, stateStyles, noMarginAndPaddingStyles, listItemStyles, borderStyles, ArrowIcon);
|
|
9792
|
-
|
|
9793
|
-
var useKeyboardAccessibility = function useKeyboardAccessibility(_ref) {
|
|
9794
|
-
var selectRef = _ref.selectRef,
|
|
9795
|
-
optionsRef = _ref.optionsRef,
|
|
9796
|
-
shouldHighlightOption = _ref.shouldHighlightOption;
|
|
9797
|
-
var _useState = useState(-1),
|
|
9798
|
-
itemToHighlight = _useState[0],
|
|
9799
|
-
setItemToHighlight = _useState[1];
|
|
9800
|
-
var clampIndex = function clampIndex(index) {
|
|
9801
|
-
if (index < -1) return -1;
|
|
9802
|
-
if (index > optionsRef.current.length - 1) return optionsRef.current.length - 1;
|
|
9803
|
-
return index;
|
|
9804
|
-
};
|
|
9805
|
-
var highlightNextOption = function highlightNextOption() {
|
|
9806
|
-
return setItemToHighlight(function (prev) {
|
|
9807
|
-
return clampIndex(prev + 1);
|
|
9808
|
-
});
|
|
9809
|
-
};
|
|
9810
|
-
var highlightPrevOption = function highlightPrevOption() {
|
|
9811
|
-
return setItemToHighlight(function (prev) {
|
|
9812
|
-
return clampIndex(prev - 1);
|
|
9813
|
-
});
|
|
9814
|
-
};
|
|
9815
|
-
var reset = function reset() {
|
|
9816
|
-
var _selectRef$current;
|
|
9817
|
-
(_selectRef$current = selectRef.current) == null || _selectRef$current.blur();
|
|
9818
|
-
setItemToHighlight(-1);
|
|
9819
|
-
};
|
|
9820
|
-
var handleKeyUp = function handleKeyUp(event) {
|
|
9821
|
-
if (!shouldHighlightOption) return undefined;
|
|
9822
|
-
var shouldHighlightOptionNext = event.key === 'ArrowDown';
|
|
9823
|
-
var shouldHighlightOptionPrev = event.key === 'ArrowUp';
|
|
9824
|
-
if (shouldHighlightOptionNext) return highlightNextOption();
|
|
9825
|
-
if (shouldHighlightOptionPrev) return highlightPrevOption();
|
|
9826
|
-
return undefined;
|
|
9827
|
-
};
|
|
9828
|
-
var preventScrollingWhileNavigating = function preventScrollingWhileNavigating(event) {
|
|
9829
|
-
if (!shouldHighlightOption) return;
|
|
9830
|
-
if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return;
|
|
9831
|
-
event.preventDefault();
|
|
9832
|
-
};
|
|
9833
|
-
var handleHighlighted = function handleHighlighted(cb) {
|
|
9834
|
-
return function (event) {
|
|
9835
|
-
if (itemToHighlight === -1) return;
|
|
9836
|
-
if (event.key !== 'Enter') return;
|
|
9837
|
-
cb(itemToHighlight);
|
|
9838
|
-
reset();
|
|
9839
|
-
};
|
|
9840
|
-
};
|
|
9841
|
-
useEffect(function () {
|
|
9842
|
-
if (shouldHighlightOption) return;
|
|
9843
|
-
reset();
|
|
9844
|
-
}, [shouldHighlightOption]);
|
|
9845
|
-
return {
|
|
9846
|
-
handleKeyUp: handleKeyUp,
|
|
9847
|
-
preventScrollingWhileNavigating: preventScrollingWhileNavigating,
|
|
9848
|
-
handleHighlighted: handleHighlighted,
|
|
9849
|
-
itemToHighlight: itemToHighlight
|
|
9850
|
-
};
|
|
9851
|
-
};
|
|
9852
|
-
var useVisualAccessibility = function useVisualAccessibility(_ref2) {
|
|
9853
|
-
var selectRef = _ref2.selectRef,
|
|
9854
|
-
isSelectDisabled = _ref2.isSelectDisabled;
|
|
9855
|
-
var addFocusClass = function addFocusClass() {
|
|
9856
|
-
var _selectRef$current2;
|
|
9857
|
-
(_selectRef$current2 = selectRef.current) == null || _selectRef$current2.classList.add('focus');
|
|
9858
|
-
};
|
|
9859
|
-
var removeFocusClass = function removeFocusClass() {
|
|
9860
|
-
var _selectRef$current3;
|
|
9861
|
-
(_selectRef$current3 = selectRef.current) == null || _selectRef$current3.classList.remove('focus');
|
|
9862
|
-
};
|
|
9863
|
-
var toggleFocus = function toggleFocus() {
|
|
9864
|
-
var _selectRef$current4;
|
|
9865
|
-
if ((_selectRef$current4 = selectRef.current) != null && _selectRef$current4.classList.contains('focus')) removeFocusClass();else addFocusClass();
|
|
9866
|
-
};
|
|
9867
|
-
var withClickAwayHandler = function withClickAwayHandler(cb) {
|
|
9868
|
-
return function (event) {
|
|
9869
|
-
if (!selectRef.current) return;
|
|
9870
|
-
if (selectRef.current.contains(event.target)) return;
|
|
9871
|
-
removeFocusClass();
|
|
9872
|
-
cb();
|
|
9873
|
-
};
|
|
9874
|
-
};
|
|
9875
|
-
useEffect(function () {
|
|
9876
|
-
if (!selectRef.current) return;
|
|
9877
|
-
if (isSelectDisabled) {
|
|
9878
|
-
selectRef.current.classList.add('disabled');
|
|
9879
|
-
} else selectRef.current.classList.remove('disabled');
|
|
9880
|
-
}, [isSelectDisabled]);
|
|
9881
|
-
return {
|
|
9882
|
-
withClickAwayHandler: withClickAwayHandler,
|
|
9883
|
-
toggleFocus: toggleFocus,
|
|
9884
|
-
addFocusClass: addFocusClass,
|
|
9885
|
-
removeFocusClass: removeFocusClass
|
|
9886
|
-
};
|
|
9887
|
-
};
|
|
9888
|
-
var useAccessibility = function useAccessibility(props) {
|
|
9889
|
-
var selectRef = props.selectRef;
|
|
9890
|
-
var _useKeyboardAccessibi = useKeyboardAccessibility(props),
|
|
9891
|
-
handleKeyUp = _useKeyboardAccessibi.handleKeyUp,
|
|
9892
|
-
preventScrollingWhileNavigating = _useKeyboardAccessibi.preventScrollingWhileNavigating,
|
|
9893
|
-
handleHighlighted = _useKeyboardAccessibi.handleHighlighted,
|
|
9894
|
-
itemToHighlight = _useKeyboardAccessibi.itemToHighlight;
|
|
9895
|
-
var _useVisualAccessibili = useVisualAccessibility(props),
|
|
9896
|
-
addFocusClass = _useVisualAccessibili.addFocusClass,
|
|
9897
|
-
removeFocusClass = _useVisualAccessibili.removeFocusClass,
|
|
9898
|
-
toggleFocus = _useVisualAccessibili.toggleFocus,
|
|
9899
|
-
withClickAwayHandler = _useVisualAccessibili.withClickAwayHandler;
|
|
9900
|
-
useEffect(function () {
|
|
9901
|
-
if (!selectRef.current) return undefined;
|
|
9902
|
-
selectRef.current.addEventListener('keydown', preventScrollingWhileNavigating);
|
|
9903
|
-
selectRef.current.addEventListener('keyup', handleKeyUp);
|
|
9904
|
-
selectRef.current.addEventListener('click', toggleFocus);
|
|
9905
|
-
selectRef.current.addEventListener('focus', addFocusClass);
|
|
9906
|
-
selectRef.current.addEventListener('blur', removeFocusClass);
|
|
9907
|
-
return function () {
|
|
9908
|
-
var _selectRef$current5, _selectRef$current6, _selectRef$current7, _selectRef$current8, _selectRef$current9;
|
|
9909
|
-
(_selectRef$current5 = selectRef.current) == null || _selectRef$current5.removeEventListener('keydown', preventScrollingWhileNavigating);
|
|
9910
|
-
(_selectRef$current6 = selectRef.current) == null || _selectRef$current6.removeEventListener('keyup', handleKeyUp);
|
|
9911
|
-
(_selectRef$current7 = selectRef.current) == null || _selectRef$current7.removeEventListener('click', toggleFocus);
|
|
9912
|
-
(_selectRef$current8 = selectRef.current) == null || _selectRef$current8.removeEventListener('focus', addFocusClass);
|
|
9913
|
-
(_selectRef$current9 = selectRef.current) == null || _selectRef$current9.removeEventListener('blur', removeFocusClass);
|
|
9914
|
-
};
|
|
9915
|
-
});
|
|
9916
|
-
return {
|
|
9917
|
-
withClickAwayHandler: withClickAwayHandler,
|
|
9918
|
-
handleHighlighted: handleHighlighted,
|
|
9919
|
-
itemToHighlight: itemToHighlight
|
|
9920
|
-
};
|
|
9921
|
-
};
|
|
9922
|
-
/**
|
|
9923
|
-
* DEPRECATED. Use Select2 instead.
|
|
9924
|
-
* A select component, created using <ul> and <li> elements, with bespoke accessibility
|
|
9925
|
-
* logic.
|
|
9926
|
-
*
|
|
9927
|
-
* # Usage
|
|
9928
|
-
* ## Defining a component that uses a typical Select element
|
|
9929
|
-
* ```tsx
|
|
9930
|
-
* const MyComponent = () => {
|
|
9931
|
-
* const handleSelect = (value: number, text: string) => {
|
|
9932
|
-
* console.log("Selected", value);
|
|
9933
|
-
* };
|
|
9934
|
-
*
|
|
9935
|
-
* return <>
|
|
9936
|
-
* <Select
|
|
9937
|
-
* label="This is a label"
|
|
9938
|
-
* options={[
|
|
9939
|
-
* { text: "Option 1", value: 1 },
|
|
9940
|
-
* { text: "Option 2", value: 2 },
|
|
9941
|
-
* ]}
|
|
9942
|
-
* onSelect={handleSelect}
|
|
9943
|
-
* />
|
|
9944
|
-
* </>
|
|
9945
|
-
* }
|
|
9946
|
-
* ```
|
|
9947
|
-
*
|
|
9948
|
-
* ## Defining a component that uses a disabled Select element
|
|
9949
|
-
* ```tsx
|
|
9950
|
-
* const MyComponent = () => {
|
|
9951
|
-
* const handleSelect = (value: number, text: string) => {
|
|
9952
|
-
* console.log("Selected", value);
|
|
9953
|
-
* };
|
|
9954
|
-
*
|
|
9955
|
-
* return <>
|
|
9956
|
-
* <Select
|
|
9957
|
-
* disabled // Select component disabled explicitely
|
|
9958
|
-
* label="This is a label"
|
|
9959
|
-
* options={[
|
|
9960
|
-
* { text: "Option 1", value: 1 },
|
|
9961
|
-
* { text: "Option 2", value: 2 },
|
|
9962
|
-
* ]}
|
|
9963
|
-
* onSelect={handleSelect}
|
|
9964
|
-
* />
|
|
9965
|
-
* <Select
|
|
9966
|
-
* label="This is a label"
|
|
9967
|
-
* options={[]} // Select component disabled implicitely by passing an empty array of options
|
|
9968
|
-
* onSelect={handleSelect}
|
|
9969
|
-
* />
|
|
9970
|
-
* </>
|
|
9971
|
-
* }
|
|
9972
|
-
* ```
|
|
9973
|
-
*
|
|
9974
|
-
* ## Defining a component with a non-labelled Select element
|
|
9975
|
-
* ```tsx
|
|
9976
|
-
* const MyComponent = () => {
|
|
9977
|
-
* const handleSelect = (value: number, text: string) => {
|
|
9978
|
-
* console.log("Selected", value);
|
|
9979
|
-
* };
|
|
9980
|
-
*
|
|
9981
|
-
* return <>
|
|
9982
|
-
* <Select
|
|
9983
|
-
* label=""
|
|
9984
|
-
* options={[
|
|
9985
|
-
* { text: "Option 1", value: 1 },
|
|
9986
|
-
* { text: "Option 2", value: 2 },
|
|
9987
|
-
* ]}
|
|
9988
|
-
* onSelect={handleSelect}
|
|
9989
|
-
* />
|
|
9990
|
-
* </>
|
|
9991
|
-
* }
|
|
9992
|
-
* ```
|
|
9993
|
-
*
|
|
9994
|
-
* ## Changing the dimensions of a Select element (px)
|
|
9995
|
-
* ```tsx
|
|
9996
|
-
* const MyComponent = () => {
|
|
9997
|
-
* const handleSelect = (value: number, text: string) => {
|
|
9998
|
-
* console.log("Selected", value);
|
|
9999
|
-
* };
|
|
10000
|
-
*
|
|
10001
|
-
* const selectWidthPx = 100;
|
|
10002
|
-
* const selectHeightPx = 27;
|
|
10003
|
-
*
|
|
10004
|
-
* return <>
|
|
10005
|
-
* <Select
|
|
10006
|
-
* label="This is a label"
|
|
10007
|
-
* options={[
|
|
10008
|
-
* { text: "Option 1", value: 1 },
|
|
10009
|
-
* { text: "Option 2", value: 2 },
|
|
10010
|
-
* ]}
|
|
10011
|
-
* onSelect={handleSelect}
|
|
10012
|
-
* width={selectWidthPx}
|
|
10013
|
-
* height={selectHeightPx}
|
|
10014
|
-
* />
|
|
10015
|
-
* </>
|
|
10016
|
-
* }
|
|
10017
|
-
* ```
|
|
10018
|
-
*/
|
|
10019
|
-
function Select(_ref3) {
|
|
10020
|
-
var _ref4, _selectedValue$text, _options$;
|
|
10021
|
-
var label = _ref3.label,
|
|
10022
|
-
options = _ref3.options,
|
|
10023
|
-
onSelect = _ref3.onSelect,
|
|
10024
|
-
_ref3$disabled = _ref3.disabled,
|
|
10025
|
-
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
|
|
10026
|
-
_ref3$resetWhenOption = _ref3.resetWhenOptionsUpdate,
|
|
10027
|
-
resetWhenOptionsUpdate = _ref3$resetWhenOption === void 0 ? false : _ref3$resetWhenOption,
|
|
10028
|
-
_ref3$width = _ref3.width,
|
|
10029
|
-
width = _ref3$width === void 0 ? 'default' : _ref3$width,
|
|
10030
|
-
_ref3$height = _ref3.height,
|
|
10031
|
-
height = _ref3$height === void 0 ? 'default' : _ref3$height;
|
|
10032
|
-
var selectRef = useRef(null);
|
|
10033
|
-
var optionsRef = useRef([]);
|
|
10034
|
-
var _useState2 = useState(null),
|
|
10035
|
-
selectedValue = _useState2[0],
|
|
10036
|
-
setSelectedValue = _useState2[1];
|
|
10037
|
-
var _useState3 = useState(false),
|
|
10038
|
-
isOpen = _useState3[0],
|
|
10039
|
-
setIsOpen = _useState3[1];
|
|
10040
|
-
var isDisabled = disabled || options.length === 0;
|
|
10041
|
-
var _useAccessibility = useAccessibility({
|
|
10042
|
-
selectRef: selectRef,
|
|
10043
|
-
optionsRef: optionsRef,
|
|
10044
|
-
shouldHighlightOption: isOpen,
|
|
10045
|
-
isSelectDisabled: isDisabled
|
|
10046
|
-
}),
|
|
10047
|
-
withClickAwayHandler = _useAccessibility.withClickAwayHandler,
|
|
10048
|
-
handleHighlighted = _useAccessibility.handleHighlighted,
|
|
10049
|
-
itemToHighlight = _useAccessibility.itemToHighlight;
|
|
10050
|
-
var openSelect = function openSelect() {
|
|
10051
|
-
return setIsOpen(true);
|
|
10052
|
-
};
|
|
10053
|
-
var closeSelect = function closeSelect() {
|
|
10054
|
-
return setIsOpen(false);
|
|
10055
|
-
};
|
|
10056
|
-
var toggleSelect = function toggleSelect() {
|
|
10057
|
-
return setIsOpen(function (prev) {
|
|
10058
|
-
return !prev;
|
|
10059
|
-
});
|
|
10060
|
-
};
|
|
10061
|
-
var closeSelectOnBlur = withClickAwayHandler(closeSelect);
|
|
10062
|
-
var handleOptionSelection = function handleOptionSelection(index) {
|
|
10063
|
-
var option = options[index];
|
|
10064
|
-
setSelectedValue(option);
|
|
10065
|
-
onSelect(option.value, option.text);
|
|
10066
|
-
};
|
|
10067
|
-
useEffect(function () {
|
|
10068
|
-
document.addEventListener('click', closeSelectOnBlur, false);
|
|
10069
|
-
return function () {
|
|
10070
|
-
document.removeEventListener('click', closeSelectOnBlur, false);
|
|
10071
|
-
};
|
|
10072
|
-
}, []);
|
|
10073
|
-
useEffect(function () {
|
|
10074
|
-
if (!resetWhenOptionsUpdate) return;
|
|
10075
|
-
if (options.length === 0) {
|
|
10076
|
-
setSelectedValue(null);
|
|
10077
|
-
return;
|
|
10078
|
-
}
|
|
10079
|
-
setSelectedValue(options[0]);
|
|
10080
|
-
}, [options, resetWhenOptionsUpdate]);
|
|
10081
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
10082
|
-
level: 1,
|
|
10083
|
-
tag: "p",
|
|
10084
|
-
"data-testid": "select-label"
|
|
10085
|
-
}, label)), /*#__PURE__*/React__default.createElement(SelectList, {
|
|
10086
|
-
id: "select",
|
|
10087
|
-
ref: selectRef,
|
|
10088
|
-
onClick: toggleSelect,
|
|
10089
|
-
onFocus: openSelect,
|
|
10090
|
-
onBlur: closeSelect,
|
|
10091
|
-
onMouseDown: function onMouseDown(e) {
|
|
10092
|
-
return e.preventDefault();
|
|
10093
|
-
},
|
|
10094
|
-
onKeyUp: handleHighlighted(handleOptionSelection),
|
|
10095
|
-
width: width,
|
|
10096
|
-
height: height,
|
|
10097
|
-
role: "listbox",
|
|
10098
|
-
tabIndex: 0,
|
|
10099
|
-
"aria-labelledby": label,
|
|
10100
|
-
"aria-disabled": isDisabled,
|
|
10101
|
-
"data-testid": "select"
|
|
10102
|
-
}, /*#__PURE__*/React__default.createElement(SelectWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10103
|
-
level: 1,
|
|
10104
|
-
tag: "p",
|
|
10105
|
-
"data-testid": "selected-value"
|
|
10106
|
-
}, (_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, {
|
|
10107
|
-
"data-testid": "options"
|
|
10108
|
-
}, options.map(function (option, index) {
|
|
10109
|
-
return /*#__PURE__*/React__default.createElement(Option, {
|
|
10110
|
-
ref: function ref(element) {
|
|
10111
|
-
if (!element || optionsRef.current.length === options.length) return;
|
|
10112
|
-
optionsRef.current.push(element);
|
|
10113
|
-
},
|
|
10114
|
-
role: "option",
|
|
10115
|
-
tabIndex: index + 1,
|
|
10116
|
-
hover: index === itemToHighlight,
|
|
10117
|
-
key: option.text,
|
|
10118
|
-
onClick: function onClick() {
|
|
10119
|
-
return handleOptionSelection(index);
|
|
10120
|
-
}
|
|
10121
|
-
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10122
|
-
level: 1,
|
|
10123
|
-
tag: "p"
|
|
10124
|
-
}, option.text));
|
|
10125
|
-
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10126
|
-
}
|
|
10127
|
-
|
|
10128
|
-
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
|
|
10129
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10130
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.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) {
|
|
9553
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E, _templateObject4$x;
|
|
9554
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9555
|
+
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
10131
9556
|
var width = _ref.width;
|
|
10132
9557
|
if (!width) return 'none';
|
|
10133
9558
|
return width + "px";
|
|
10134
9559
|
}, function (_ref2) {
|
|
10135
9560
|
var error = _ref2.error;
|
|
10136
|
-
if (error !== undefined) return "1px solid var(--color-
|
|
10137
|
-
return "1px solid var(--color-
|
|
9561
|
+
if (error !== undefined) return "1px solid var(--base-color-errorstate)";
|
|
9562
|
+
return "1px solid var(--base-color-dark-grey)";
|
|
10138
9563
|
}, function (_ref3) {
|
|
10139
9564
|
var error = _ref3.error;
|
|
10140
|
-
if (error !== undefined) return "var(--color-
|
|
10141
|
-
return "var(--color-
|
|
9565
|
+
if (error !== undefined) return "var(--base-color-errorstate)";
|
|
9566
|
+
return "var(--base-color-dark-grey)";
|
|
10142
9567
|
}, function (_ref4) {
|
|
10143
9568
|
var darkMode = _ref4.darkMode;
|
|
10144
|
-
if (darkMode) return "0 0 0
|
|
9569
|
+
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
10145
9570
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10146
|
-
}
|
|
10147
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9571
|
+
});
|
|
9572
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
10148
9573
|
var darkMode = _ref5.darkMode;
|
|
10149
|
-
if (darkMode) return "var(--color-
|
|
10150
|
-
return "var(--color-
|
|
10151
|
-
}
|
|
10152
|
-
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
9574
|
+
if (darkMode) return "var(--base-color-white)";
|
|
9575
|
+
return "var(--base-color-black)";
|
|
9576
|
+
});
|
|
9577
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
10153
9578
|
var darkMode = _ref6.darkMode;
|
|
10154
|
-
if (darkMode) return "var(--color-
|
|
10155
|
-
return "var(--color-
|
|
9579
|
+
if (darkMode) return "var(--base-color-white)";
|
|
9580
|
+
return "var(--base-color-errorstate)";
|
|
10156
9581
|
});
|
|
10157
9582
|
|
|
10158
|
-
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"
|
|
9583
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10159
9584
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10160
9585
|
return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10161
9586
|
iconName: "DropdownArrow"
|
|
@@ -10166,24 +9591,21 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
10166
9591
|
error = _ref.error,
|
|
10167
9592
|
width = _ref.width,
|
|
10168
9593
|
darkMode = _ref.darkMode,
|
|
10169
|
-
children = _ref.children
|
|
10170
|
-
|
|
10171
|
-
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
10172
|
-
className: className
|
|
10173
|
-
}, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9594
|
+
children = _ref.children;
|
|
9595
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
10174
9596
|
darkMode: darkMode,
|
|
10175
9597
|
"data-testid": "select2-text-label"
|
|
10176
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10177
|
-
|
|
10178
|
-
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper
|
|
9598
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9599
|
+
level: 6
|
|
9600
|
+
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper, {
|
|
10179
9601
|
width: width,
|
|
10180
9602
|
error: error,
|
|
10181
9603
|
darkMode: darkMode
|
|
10182
9604
|
}, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
10183
9605
|
darkMode: darkMode,
|
|
10184
9606
|
"data-testid": "select2-error-label"
|
|
10185
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10186
|
-
|
|
9607
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9608
|
+
level: 6
|
|
10187
9609
|
}, error))));
|
|
10188
9610
|
};
|
|
10189
9611
|
/**
|
|
@@ -10209,15 +9631,13 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10209
9631
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10210
9632
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10211
9633
|
components = _ref2.components,
|
|
10212
|
-
className = _ref2.className,
|
|
10213
9634
|
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
10214
9635
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10215
9636
|
label: label,
|
|
10216
9637
|
error: error,
|
|
10217
9638
|
width: width,
|
|
10218
|
-
darkMode: darkMode
|
|
10219
|
-
|
|
10220
|
-
}, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, selectProps, {
|
|
9639
|
+
darkMode: darkMode
|
|
9640
|
+
}, /*#__PURE__*/React__default.createElement(Select, Object.assign({}, selectProps, {
|
|
10221
9641
|
components: _extends({
|
|
10222
9642
|
DropdownIndicator: DropdownIndicator,
|
|
10223
9643
|
LoadingIndicator: undefined,
|
|
@@ -10257,7 +9677,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10257
9677
|
error: error,
|
|
10258
9678
|
width: width,
|
|
10259
9679
|
darkMode: darkMode
|
|
10260
|
-
}, /*#__PURE__*/React__default.createElement(Select$
|
|
9680
|
+
}, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, selectProps, {
|
|
10261
9681
|
components: _extends({
|
|
10262
9682
|
DropdownIndicator: DropdownIndicator,
|
|
10263
9683
|
LoadingIndicator: undefined,
|
|
@@ -10268,24 +9688,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10268
9688
|
})));
|
|
10269
9689
|
};
|
|
10270
9690
|
|
|
10271
|
-
var _templateObject$
|
|
10272
|
-
var Wrapper$
|
|
10273
|
-
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$
|
|
10274
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
9691
|
+
var _templateObject$18, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
|
|
9692
|
+
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
9693
|
+
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
9694
|
+
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
10275
9695
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10276
9696
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10277
9697
|
}, function (_ref2) {
|
|
10278
9698
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
10279
9699
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
10280
9700
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
10281
|
-
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
9701
|
+
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
|
|
10282
9702
|
var singleChild = _ref3.singleChild;
|
|
10283
9703
|
return singleChild ? '0' : '10px';
|
|
10284
9704
|
});
|
|
10285
|
-
var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$
|
|
10286
|
-
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$
|
|
10287
|
-
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$
|
|
10288
|
-
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$
|
|
9705
|
+
var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
9706
|
+
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
9707
|
+
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
|
|
9708
|
+
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
|
|
10289
9709
|
|
|
10290
9710
|
// Set max. character length
|
|
10291
9711
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -10338,7 +9758,7 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10338
9758
|
var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
|
|
10339
9759
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
10340
9760
|
theme: theme
|
|
10341
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9761
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$5, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabel, {
|
|
10342
9762
|
tag: "div",
|
|
10343
9763
|
size: "small"
|
|
10344
9764
|
}, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
|
|
@@ -10374,8 +9794,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10374
9794
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10375
9795
|
};
|
|
10376
9796
|
|
|
10377
|
-
var _templateObject$
|
|
10378
|
-
var Wrapper$
|
|
9797
|
+
var _templateObject$19, _templateObject2$T, _templateObject3$G;
|
|
9798
|
+
var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
10379
9799
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10380
9800
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10381
9801
|
return aspectRatio;
|
|
@@ -10385,8 +9805,8 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1c || (_templateObjec
|
|
|
10385
9805
|
height = _ref2.height;
|
|
10386
9806
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10387
9807
|
});
|
|
10388
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
10389
|
-
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$
|
|
9808
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
9809
|
+
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
10390
9810
|
|
|
10391
9811
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10392
9812
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -10399,7 +9819,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10399
9819
|
aspectRatio = _ref.aspectRatio,
|
|
10400
9820
|
className = _ref.className,
|
|
10401
9821
|
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
|
10402
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9822
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$6, Object.assign({
|
|
10403
9823
|
aspectRatio: aspectRatio,
|
|
10404
9824
|
className: className
|
|
10405
9825
|
}, restProps), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
@@ -10419,13 +9839,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10419
9839
|
}, caption))));
|
|
10420
9840
|
};
|
|
10421
9841
|
|
|
10422
|
-
var _templateObject$
|
|
10423
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10424
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10425
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
10426
|
-
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10427
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10428
|
-
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$
|
|
9842
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m;
|
|
9843
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
9844
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
9845
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
9846
|
+
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
9847
|
+
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
9848
|
+
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
10429
9849
|
|
|
10430
9850
|
var MiniCard = function MiniCard(_ref) {
|
|
10431
9851
|
var _ref$title = _ref.title,
|
|
@@ -10463,18 +9883,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10463
9883
|
}, title)))));
|
|
10464
9884
|
};
|
|
10465
9885
|
|
|
10466
|
-
var _templateObject$
|
|
10467
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10468
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10469
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
9886
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$I, _templateObject4$A, _templateObject5$u;
|
|
9887
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
9888
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
9889
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10470
9890
|
var isVisible = _ref.isVisible;
|
|
10471
9891
|
return isVisible ? 'visible' : 'hidden';
|
|
10472
9892
|
});
|
|
10473
|
-
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
9893
|
+
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10474
9894
|
var isVisible = _ref2.isVisible;
|
|
10475
9895
|
return isVisible ? 'visible' : 'hidden';
|
|
10476
9896
|
});
|
|
10477
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
9897
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
10478
9898
|
|
|
10479
9899
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10480
9900
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10555,15 +9975,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10555
9975
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10556
9976
|
};
|
|
10557
9977
|
|
|
10558
|
-
var _templateObject$
|
|
10559
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
10560
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
10561
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
10562
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
9978
|
+
var _templateObject$1c, _templateObject2$W, _templateObject3$J, _templateObject4$B, _templateObject5$v;
|
|
9979
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
9980
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
|
|
9981
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
9982
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
10563
9983
|
var isActive = _ref.isActive;
|
|
10564
9984
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10565
9985
|
}, Colors.MidGrey);
|
|
10566
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
9986
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10567
9987
|
var isOpen = _ref2.isOpen;
|
|
10568
9988
|
return isOpen ? 'block' : 'none';
|
|
10569
9989
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -10719,19 +10139,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10719
10139
|
});
|
|
10720
10140
|
};
|
|
10721
10141
|
|
|
10722
|
-
var _templateObject$
|
|
10723
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10724
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
10725
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
10142
|
+
var _templateObject$1d, _templateObject2$X, _templateObject3$K, _templateObject4$C, _templateObject5$w, _templateObject6$n;
|
|
10143
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10144
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10145
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10726
10146
|
var color = _ref.color;
|
|
10727
10147
|
return "var(--base-color-" + color + ")";
|
|
10728
10148
|
});
|
|
10729
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
10730
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$
|
|
10149
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10150
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10731
10151
|
var color = _ref2.color;
|
|
10732
10152
|
return "var(--base-color-" + color + ")";
|
|
10733
10153
|
});
|
|
10734
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$
|
|
10154
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10735
10155
|
var color = _ref3.color;
|
|
10736
10156
|
return "var(--base-color-" + color + ")";
|
|
10737
10157
|
});
|
|
@@ -10813,19 +10233,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10813
10233
|
}, strengthLabel))));
|
|
10814
10234
|
};
|
|
10815
10235
|
|
|
10816
|
-
var _templateObject$
|
|
10817
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
10818
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10819
|
-
var Wrapper$
|
|
10820
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
10236
|
+
var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
|
|
10237
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10238
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10239
|
+
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10240
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10821
10241
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10822
10242
|
}, devices.tablet, devices.mobile);
|
|
10823
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
10243
|
+
var TableCell = /*#__PURE__*/styled.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
10824
10244
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10825
10245
|
}, devices.mobile);
|
|
10826
|
-
var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$
|
|
10827
|
-
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$
|
|
10828
|
-
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$
|
|
10246
|
+
var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
|
|
10247
|
+
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
|
|
10248
|
+
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10829
10249
|
|
|
10830
10250
|
/* eslint-disable react/no-danger */
|
|
10831
10251
|
var Content = function Content(_ref) {
|
|
@@ -10998,7 +10418,7 @@ var Table = function Table(_ref) {
|
|
|
10998
10418
|
} else {
|
|
10999
10419
|
visibleRows = totalRows;
|
|
11000
10420
|
}
|
|
11001
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10421
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, {
|
|
11002
10422
|
className: className
|
|
11003
10423
|
}, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
11004
10424
|
onClickPrev: handlePrev,
|
|
@@ -11028,24 +10448,24 @@ var Table = function Table(_ref) {
|
|
|
11028
10448
|
}))));
|
|
11029
10449
|
};
|
|
11030
10450
|
|
|
11031
|
-
var _templateObject$
|
|
11032
|
-
var Wrapper$
|
|
10451
|
+
var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
10452
|
+
var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11033
10453
|
var theme = _ref.theme;
|
|
11034
10454
|
return "var(--color-" + theme + ")";
|
|
11035
10455
|
}, function (_ref2) {
|
|
11036
10456
|
var theme = _ref2.theme;
|
|
11037
10457
|
return "var(--color-" + theme + ")";
|
|
11038
10458
|
});
|
|
11039
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2
|
|
11040
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
11041
|
-
var Error = /*#__PURE__*/styled.div(_templateObject4$
|
|
11042
|
-
var Form = /*#__PURE__*/styled.form(_templateObject5$
|
|
11043
|
-
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
11044
|
-
var ServerError = /*#__PURE__*/styled.div(_templateObject7$
|
|
11045
|
-
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$
|
|
11046
|
-
var ButtonWrapper$3 = /*#__PURE__*/styled.div(_templateObject9$
|
|
11047
|
-
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
11048
|
-
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$
|
|
10459
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
10460
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
10461
|
+
var Error = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10462
|
+
var Form = /*#__PURE__*/styled.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
10463
|
+
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
10464
|
+
var ServerError = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
10465
|
+
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
10466
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
10467
|
+
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
10468
|
+
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
11049
10469
|
var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
11050
10470
|
var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
|
|
11051
10471
|
var _ref3$isOpen = _ref3.isOpen,
|
|
@@ -11071,9 +10491,7 @@ var themeToColor = function themeToColor(theme) {
|
|
|
11071
10491
|
var SignUpTitle = function SignUpTitle(_ref) {
|
|
11072
10492
|
var title = _ref.title,
|
|
11073
10493
|
_ref$isMobile = _ref.isMobile,
|
|
11074
|
-
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile
|
|
11075
|
-
_ref$titleFontFamily = _ref.titleFontFamily,
|
|
11076
|
-
titleFontFamily = _ref$titleFontFamily === void 0 ? false : _ref$titleFontFamily;
|
|
10494
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
|
|
11077
10495
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
11078
10496
|
columnStartDesktop: 3,
|
|
11079
10497
|
columnSpanDesktop: 10,
|
|
@@ -11082,7 +10500,7 @@ var SignUpTitle = function SignUpTitle(_ref) {
|
|
|
11082
10500
|
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
11083
10501
|
color: "black",
|
|
11084
10502
|
hierarchy: "h3",
|
|
11085
|
-
serif:
|
|
10503
|
+
serif: true,
|
|
11086
10504
|
size: isMobile ? 'small' : 'medium'
|
|
11087
10505
|
}, title)));
|
|
11088
10506
|
};
|
|
@@ -11390,7 +10808,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11390
10808
|
useEffect(function () {
|
|
11391
10809
|
setDropdownOpen(isOpened);
|
|
11392
10810
|
}, [isOpened]);
|
|
11393
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10811
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
11394
10812
|
theme: themeToColor(theme),
|
|
11395
10813
|
className: className
|
|
11396
10814
|
}, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
|
|
@@ -11455,13 +10873,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11455
10873
|
}))))));
|
|
11456
10874
|
};
|
|
11457
10875
|
|
|
11458
|
-
var _templateObject$
|
|
11459
|
-
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
10876
|
+
var _templateObject$1g, _templateObject2$_, _templateObject4$F, _templateObject5$z;
|
|
10877
|
+
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
11460
10878
|
var withShadow = _ref.withShadow;
|
|
11461
|
-
return withShadow && css(_templateObject2$
|
|
10879
|
+
return withShadow && css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11462
10880
|
}, devices.mobile);
|
|
11463
|
-
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$
|
|
11464
|
-
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$
|
|
10881
|
+
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
10882
|
+
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11465
10883
|
|
|
11466
10884
|
var defaultGrid = {
|
|
11467
10885
|
columnStartDesktop: 2,
|
|
@@ -11519,12 +10937,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11519
10937
|
return null;
|
|
11520
10938
|
};
|
|
11521
10939
|
|
|
11522
|
-
var _templateObject$
|
|
11523
|
-
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$
|
|
10940
|
+
var _templateObject$1h, _templateObject2$$;
|
|
10941
|
+
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
11524
10942
|
var hide = _ref.hide;
|
|
11525
10943
|
return hide && "display: none;";
|
|
11526
10944
|
}, devices.mobileAndTablet);
|
|
11527
|
-
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2
|
|
10945
|
+
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
11528
10946
|
|
|
11529
10947
|
/**
|
|
11530
10948
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11616,8 +11034,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11616
11034
|
}));
|
|
11617
11035
|
};
|
|
11618
11036
|
|
|
11619
|
-
var _templateObject$
|
|
11620
|
-
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
11037
|
+
var _templateObject$1i;
|
|
11038
|
+
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
|
|
11621
11039
|
|
|
11622
11040
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11623
11041
|
return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
|
|
@@ -11677,27 +11095,27 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11677
11095
|
}, gridItemOrContent);
|
|
11678
11096
|
};
|
|
11679
11097
|
|
|
11680
|
-
var _templateObject$
|
|
11098
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
|
|
11681
11099
|
var color = 'primary-black';
|
|
11682
11100
|
var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
|
|
11683
11101
|
borderColor: color,
|
|
11684
11102
|
hoveredColor: color,
|
|
11685
11103
|
pressedColor: color,
|
|
11686
11104
|
textColor: color
|
|
11687
|
-
})(_templateObject$
|
|
11688
|
-
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11689
|
-
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$
|
|
11105
|
+
})(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11106
|
+
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11107
|
+
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11690
11108
|
var Heading = /*#__PURE__*/styled(HarmonicHeader).attrs({
|
|
11691
11109
|
serif: true,
|
|
11692
11110
|
size: 'medium'
|
|
11693
|
-
})(_templateObject4$
|
|
11111
|
+
})(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11694
11112
|
var Intro = /*#__PURE__*/styled(HarmonicSubtitle).attrs({
|
|
11695
11113
|
size: 'large'
|
|
11696
|
-
})(_templateObject5$
|
|
11697
|
-
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$
|
|
11114
|
+
})(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11115
|
+
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11698
11116
|
var SignInPrompt = /*#__PURE__*/styled(BodyCopyHarmonic).attrs({
|
|
11699
11117
|
size: 'large'
|
|
11700
|
-
})(_templateObject7$
|
|
11118
|
+
})(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11701
11119
|
|
|
11702
11120
|
var Paywall = function Paywall(_ref) {
|
|
11703
11121
|
var className = _ref.className,
|
|
@@ -11890,14 +11308,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11890
11308
|
})))))));
|
|
11891
11309
|
};
|
|
11892
11310
|
|
|
11893
|
-
var _templateObject$
|
|
11894
|
-
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11895
|
-
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
11896
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$
|
|
11897
|
-
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11898
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
11899
|
-
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$
|
|
11900
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$
|
|
11311
|
+
var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11312
|
+
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
11313
|
+
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
11314
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
11315
|
+
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11316
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11317
|
+
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11318
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
11901
11319
|
|
|
11902
11320
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11903
11321
|
var Footer = function Footer(_ref) {
|
|
@@ -11955,18 +11373,18 @@ var Footer = function Footer(_ref) {
|
|
|
11955
11373
|
}, additionalInfo))));
|
|
11956
11374
|
};
|
|
11957
11375
|
|
|
11958
|
-
var _templateObject$
|
|
11376
|
+
var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$I, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
|
|
11959
11377
|
var LIST_ITEM_GAP = 32;
|
|
11960
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
11378
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
|
|
11961
11379
|
var bottomBorder = _ref.bottomBorder;
|
|
11962
11380
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11963
11381
|
}, zIndexes.anchor, function (_ref2) {
|
|
11964
11382
|
var withShadow = _ref2.withShadow;
|
|
11965
|
-
return withShadow && css(_templateObject2$
|
|
11383
|
+
return withShadow && css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11966
11384
|
});
|
|
11967
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
11968
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11969
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
11385
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
11386
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11387
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11970
11388
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11971
11389
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
11972
11390
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -11977,11 +11395,11 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject5$D || (_templateObject5$D
|
|
|
11977
11395
|
hasTwoArrows = _ref5.hasTwoArrows;
|
|
11978
11396
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
11979
11397
|
});
|
|
11980
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject8$
|
|
11398
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
|
|
11981
11399
|
var withShadow = _ref7.withShadow;
|
|
11982
|
-
return withShadow && css(_templateObject9$
|
|
11400
|
+
return withShadow && css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11983
11401
|
});
|
|
11984
|
-
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
11402
|
+
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
11985
11403
|
var disabled = _ref8.disabled;
|
|
11986
11404
|
return disabled ? 'not-allowed' : 'pointer';
|
|
11987
11405
|
}, function (_ref9) {
|
|
@@ -12236,20 +11654,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12236
11654
|
})))) : null))));
|
|
12237
11655
|
};
|
|
12238
11656
|
|
|
12239
|
-
var _templateObject$
|
|
12240
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
11657
|
+
var _templateObject$1m, _templateObject2$13, _templateObject3$Q, _templateObject4$J, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11658
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12241
11659
|
var sticky = _ref.sticky;
|
|
12242
11660
|
return sticky ? 'sticky' : 'initial';
|
|
12243
11661
|
}, zIndexes.anchor);
|
|
12244
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
12245
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
11662
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
11663
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
12246
11664
|
var title = _ref2.title;
|
|
12247
11665
|
return title ? 'row' : 'row-reverse';
|
|
12248
11666
|
}, devices.tablet, devices.mobile);
|
|
12249
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$
|
|
12250
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
12251
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12252
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$
|
|
11667
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
11668
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
11669
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
11670
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
12253
11671
|
var theme = _ref3.theme;
|
|
12254
11672
|
return theme.colors.primaryButtonReverseBg;
|
|
12255
11673
|
}, function (_ref4) {
|
|
@@ -12262,8 +11680,8 @@ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$g
|
|
|
12262
11680
|
var theme = _ref6.theme;
|
|
12263
11681
|
return theme.colors.primaryButtonReverse;
|
|
12264
11682
|
});
|
|
12265
|
-
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
12266
|
-
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject0$
|
|
11683
|
+
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
11684
|
+
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
12267
11685
|
|
|
12268
11686
|
var _excluded$s = ["text"],
|
|
12269
11687
|
_excluded2$4 = ["text"];
|
|
@@ -12296,18 +11714,18 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12296
11714
|
}, message))));
|
|
12297
11715
|
};
|
|
12298
11716
|
|
|
12299
|
-
var _templateObject$
|
|
12300
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
12301
|
-
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$
|
|
12302
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12303
|
-
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$
|
|
11717
|
+
var _templateObject$1n, _templateObject2$14, _templateObject3$R, _templateObject4$K;
|
|
11718
|
+
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
|
|
11719
|
+
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
|
|
11720
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
11721
|
+
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
12304
11722
|
|
|
12305
|
-
var _templateObject$
|
|
12306
|
-
var Wrapper$
|
|
11723
|
+
var _templateObject$1o;
|
|
11724
|
+
var Wrapper$9 = /*#__PURE__*/styled.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
|
|
12307
11725
|
|
|
12308
11726
|
var UpsellCards = function UpsellCards(_ref) {
|
|
12309
11727
|
var upsellCards = _ref.upsellCards;
|
|
12310
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11728
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$9, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
|
|
12311
11729
|
return /*#__PURE__*/React__default.createElement(UpsellCard, {
|
|
12312
11730
|
key: "card-" + index,
|
|
12313
11731
|
title: card.title,
|
|
@@ -12332,15 +11750,13 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12332
11750
|
upsellCards = _ref.upsellCards,
|
|
12333
11751
|
_ref$theme = _ref.theme,
|
|
12334
11752
|
theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme,
|
|
12335
|
-
className = _ref.className
|
|
12336
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
11753
|
+
className = _ref.className;
|
|
12337
11754
|
var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
|
|
12338
11755
|
return _extends({}, card, {
|
|
12339
11756
|
theme: card.theme || theme,
|
|
12340
11757
|
secondaryTheme: card.secondaryTheme || card.theme || theme
|
|
12341
11758
|
});
|
|
12342
11759
|
}) : [];
|
|
12343
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12344
11760
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
12345
11761
|
theme: theme
|
|
12346
11762
|
}, /*#__PURE__*/React__default.createElement(Grid, {
|
|
@@ -12353,7 +11769,7 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12353
11769
|
columnStartSmallDevice: 1,
|
|
12354
11770
|
columnSpanSmallDevice: 14
|
|
12355
11771
|
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
|
|
12356
|
-
serif:
|
|
11772
|
+
serif: true
|
|
12357
11773
|
}, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
|
|
12358
11774
|
text: richText != null ? richText : '',
|
|
12359
11775
|
columnStartDesktop: 1,
|
|
@@ -12367,9 +11783,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12367
11783
|
})))));
|
|
12368
11784
|
};
|
|
12369
11785
|
|
|
12370
|
-
var _templateObject$
|
|
12371
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12372
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
11786
|
+
var _templateObject$1p, _templateObject2$15;
|
|
11787
|
+
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
11788
|
+
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
12373
11789
|
var bottomBorder = _ref.bottomBorder;
|
|
12374
11790
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12375
11791
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12400,11 +11816,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12400
11816
|
}, children)));
|
|
12401
11817
|
};
|
|
12402
11818
|
|
|
12403
|
-
var _templateObject$
|
|
12404
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
12405
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
12406
|
-
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12407
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
11819
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$S, _templateObject4$L;
|
|
11820
|
+
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
11821
|
+
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
11822
|
+
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11823
|
+
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
12408
11824
|
|
|
12409
11825
|
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12410
11826
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -12608,29 +12024,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12608
12024
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12609
12025
|
};
|
|
12610
12026
|
|
|
12611
|
-
var _templateObject$
|
|
12612
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12027
|
+
var _templateObject$1r, _templateObject2$17, _templateObject3$T, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
|
|
12028
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
12613
12029
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12614
12030
|
return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n\n > div {\n height: " + imagesHeightDesktop + "px;\n }\n }\n }\n }";
|
|
12615
12031
|
}, devices.mobile, function (_ref2) {
|
|
12616
12032
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12617
12033
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12618
12034
|
});
|
|
12619
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12035
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12620
12036
|
var type = _ref3.type,
|
|
12621
12037
|
isActive = _ref3.isActive;
|
|
12622
12038
|
return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n " + getCardSlideTabletStyles(type) + "\n }\n }\n }\n\n @media " + devices.mobile + " {\n && {\n .swipe-slide {\n " + getCardSlideMobileStyles(type) + "\n }\n }\n }\n ";
|
|
12623
12039
|
});
|
|
12624
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
12625
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12626
|
-
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
12040
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
12041
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12042
|
+
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12627
12043
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12628
12044
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12629
12045
|
});
|
|
12630
|
-
var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$
|
|
12631
|
-
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12632
|
-
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$
|
|
12633
|
-
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$
|
|
12046
|
+
var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
|
|
12047
|
+
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
12048
|
+
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12049
|
+
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12634
12050
|
var active = _ref5.active;
|
|
12635
12051
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
12636
12052
|
}, devices.tablet, function (_ref6) {
|
|
@@ -12660,8 +12076,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12660
12076
|
_ref$infinite = _ref.infinite,
|
|
12661
12077
|
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
12662
12078
|
_ref$useOffset = _ref.useOffset,
|
|
12663
|
-
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset
|
|
12664
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
12079
|
+
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
|
|
12665
12080
|
var _useState = useState(false),
|
|
12666
12081
|
isFullscreen = _useState[0],
|
|
12667
12082
|
setIsFullscreen = _useState[1];
|
|
@@ -12811,7 +12226,6 @@ var Carousel = function Carousel(_ref) {
|
|
|
12811
12226
|
var carouselTitleId = "carousel-title-" + title;
|
|
12812
12227
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
12813
12228
|
var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
12814
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12815
12229
|
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
12816
12230
|
className: className,
|
|
12817
12231
|
type: type,
|
|
@@ -12835,7 +12249,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12835
12249
|
isDescriptionPresent: !!description
|
|
12836
12250
|
}, /*#__PURE__*/React__default.createElement(TitleText$1, {
|
|
12837
12251
|
size: "medium",
|
|
12838
|
-
serif:
|
|
12252
|
+
serif: true,
|
|
12839
12253
|
hierarchy: titleSemanticLevelValue
|
|
12840
12254
|
}, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12841
12255
|
size: "large"
|
|
@@ -12875,18 +12289,18 @@ var Carousel = function Carousel(_ref) {
|
|
|
12875
12289
|
}, children))));
|
|
12876
12290
|
};
|
|
12877
12291
|
|
|
12878
|
-
var _templateObject$
|
|
12879
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
12880
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12881
|
-
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
12882
|
-
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
12883
|
-
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
12884
|
-
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
12885
|
-
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12886
|
-
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
12887
|
-
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
12888
|
-
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled.div(_templateObject0$
|
|
12889
|
-
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$
|
|
12292
|
+
var _templateObject$1s, _templateObject2$18, _templateObject3$U, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
12293
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
12294
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12295
|
+
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12296
|
+
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12297
|
+
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12298
|
+
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12299
|
+
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12300
|
+
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
12301
|
+
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12302
|
+
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12303
|
+
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12890
12304
|
var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
12891
12305
|
var FirstButtonComponentWrapper = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
12892
12306
|
var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -13056,10 +12470,7 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
|
|
|
13056
12470
|
isCurrentSlide: index === currentSlide
|
|
13057
12471
|
})) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
|
|
13058
12472
|
alt: mediaContent.alt
|
|
13059
|
-
}, mediaContent
|
|
13060
|
-
fetchPriority: index === currentSlide ? 'high' : 'auto',
|
|
13061
|
-
loading: index === currentSlide ? 'eager' : 'lazy'
|
|
13062
|
-
})))));
|
|
12473
|
+
}, mediaContent)))));
|
|
13063
12474
|
}));
|
|
13064
12475
|
};
|
|
13065
12476
|
|
|
@@ -13068,8 +12479,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13068
12479
|
carouselTitle = _ref.carouselTitle,
|
|
13069
12480
|
slides = _ref.slides,
|
|
13070
12481
|
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
13071
|
-
className = _ref.className
|
|
13072
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
12482
|
+
className = _ref.className;
|
|
13073
12483
|
var slidesMedia = useMemo(function () {
|
|
13074
12484
|
return slides.map(function (_ref2) {
|
|
13075
12485
|
var mediaContent = _ref2.mediaContent;
|
|
@@ -13100,7 +12510,6 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13100
12510
|
var handleClickInside = function handleClickInside(e) {
|
|
13101
12511
|
e.stopPropagation();
|
|
13102
12512
|
};
|
|
13103
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
13104
12513
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid$1, {
|
|
13105
12514
|
role: "region",
|
|
13106
12515
|
"aria-labelledby": carouselTitleId,
|
|
@@ -13113,7 +12522,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13113
12522
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
13114
12523
|
className: TYPOGRAPHY_CLASS_NAME,
|
|
13115
12524
|
size: "medium",
|
|
13116
|
-
serif:
|
|
12525
|
+
serif: true,
|
|
13117
12526
|
hierarchy: titleSemanticLevelValue
|
|
13118
12527
|
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
13119
12528
|
onClickNext: onNext,
|
|
@@ -13205,9 +12614,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13205
12614
|
})));
|
|
13206
12615
|
};
|
|
13207
12616
|
|
|
13208
|
-
var _templateObject$
|
|
13209
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
13210
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12617
|
+
var _templateObject$1t, _templateObject3$V;
|
|
12618
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
12619
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13211
12620
|
|
|
13212
12621
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13213
12622
|
var children = _ref.children;
|
|
@@ -13802,8 +13211,8 @@ var Theme = function Theme(_ref) {
|
|
|
13802
13211
|
}, children);
|
|
13803
13212
|
};
|
|
13804
13213
|
|
|
13805
|
-
var _templateObject$
|
|
13806
|
-
var GlobalStyles = /*#__PURE__*/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) {
|
|
13214
|
+
var _templateObject$1u;
|
|
13215
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13807
13216
|
var theme = _ref.theme;
|
|
13808
13217
|
return theme.colors.primary;
|
|
13809
13218
|
}, function (_ref2) {
|
|
@@ -14750,10 +14159,10 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1x || (_templa
|
|
|
14750
14159
|
return theme.footer.tablet.paddingBottom;
|
|
14751
14160
|
}, devices.desktop, devices.largeDesktop);
|
|
14752
14161
|
|
|
14753
|
-
var _templateObject$
|
|
14754
|
-
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$
|
|
14755
|
-
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$
|
|
14756
|
-
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$
|
|
14162
|
+
var _templateObject$1v, _templateObject2$19, _templateObject3$W;
|
|
14163
|
+
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14164
|
+
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14165
|
+
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
14757
14166
|
|
|
14758
14167
|
/* eslint-disable react/no-danger */
|
|
14759
14168
|
var Quote = function Quote(_ref) {
|
|
@@ -14783,5 +14192,5 @@ var Quote = function Quote(_ref) {
|
|
|
14783
14192
|
}, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
|
|
14784
14193
|
};
|
|
14785
14194
|
|
|
14786
|
-
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote,
|
|
14195
|
+
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio2, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
|
|
14787
14196
|
//# sourceMappingURL=harmonic.esm.js.map
|