@royaloperahouse/harmonic 0.19.0 → 0.19.1-a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +907 -0
- package/README.md +267 -43
- package/dist/components/atoms/Buttons/Auxiliary/AuxiliaryButton.style.d.ts +1 -9
- package/dist/components/atoms/Buttons/Button.d.ts +3 -10
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.d.ts +3 -17
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.style.d.ts +1 -9
- package/dist/components/atoms/Buttons/Secondary/SecondaryButton.style.d.ts +1 -9
- package/dist/components/atoms/index.d.ts +1 -2
- package/dist/components/index.d.ts +3 -3
- package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +0 -1
- package/dist/components/molecules/HotFilters/HotFilters.style.d.ts +1 -16
- package/dist/components/molecules/PageHeading/Compact/Compact.style.d.ts +1 -16
- package/dist/components/molecules/PageHeading/Impact/Impact.style.d.ts +9 -302
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +0 -2
- package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +1 -3
- package/dist/components/molecules/PersonCard/PersonCard.style.d.ts +1 -3
- package/dist/components/molecules/Select2/Select2.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +1 -3
- package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +1 -3
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +1 -3
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +1 -16
- package/dist/harmonic.cjs.development.js +552 -1335
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +551 -1331
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/card.d.ts +0 -2
- package/dist/types/impactHeader.d.ts +32 -14
- package/dist/types/signUpForm.d.ts +0 -1
- package/dist/types/types.d.ts +0 -14
- package/dist/types/upsell.d.ts +0 -2
- package/package.json +6 -24
- package/README.GIT +0 -293
- package/dist/components/atoms/Radio/Radio.d.ts +0 -7
- package/dist/components/atoms/Radio/Radio.style.d.ts +0 -4
- package/dist/components/atoms/Radio/index.d.ts +0 -2
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.d.ts +0 -4
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.style.d.ts +0 -5
- package/dist/components/atoms/VideoControlsImpact/index.d.ts +0 -2
- package/dist/components/molecules/RadioGroup/RadioGroup.d.ts +0 -7
- package/dist/components/molecules/RadioGroup/RadioGroup.style.d.ts +0 -1
- package/dist/components/molecules/RadioGroup/index.d.ts +0 -2
- package/dist/components/molecules/Select/Select.d.ts +0 -101
- package/dist/components/molecules/Select/Select.style.d.ts +0 -13
- package/dist/components/molecules/Select/index.d.ts +0 -2
|
@@ -10,9 +10,9 @@ var styled = require('styled-components');
|
|
|
10
10
|
var styled__default = _interopDefault(styled);
|
|
11
11
|
var moment = _interopDefault(require('moment'));
|
|
12
12
|
var server = require('react-dom/server');
|
|
13
|
-
var Select
|
|
14
|
-
var
|
|
15
|
-
var Select$
|
|
13
|
+
var Select = require('react-select');
|
|
14
|
+
var Select__default = _interopDefault(Select);
|
|
15
|
+
var Select$1 = _interopDefault(require('react-select/async'));
|
|
16
16
|
var Modal = _interopDefault(require('react-modal'));
|
|
17
17
|
var ScrollLock = _interopDefault(require('react-scrolllock'));
|
|
18
18
|
|
|
@@ -217,8 +217,7 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
|
217
217
|
em = _ref2.em,
|
|
218
218
|
_ref2$color = _ref2.color,
|
|
219
219
|
color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
|
|
220
|
-
|
|
221
|
-
serif = _ref2$serif === void 0 ? false : _ref2$serif,
|
|
220
|
+
serif = _ref2.serif,
|
|
222
221
|
hierarchy = _ref2.hierarchy,
|
|
223
222
|
tag = _ref2.tag,
|
|
224
223
|
className = _ref2.className,
|
|
@@ -2627,7 +2626,7 @@ var Icon = /*#__PURE__*/React.memo(function (props) {
|
|
|
2627
2626
|
Icon.displayName = 'Icon';
|
|
2628
2627
|
|
|
2629
2628
|
var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
|
|
2630
|
-
var Button =
|
|
2629
|
+
var Button = function Button(_ref) {
|
|
2631
2630
|
var children = _ref.children,
|
|
2632
2631
|
iconName = _ref.iconName,
|
|
2633
2632
|
iconDirection = _ref.iconDirection,
|
|
@@ -2637,7 +2636,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2637
2636
|
href = _ref.href,
|
|
2638
2637
|
onClick = _ref.onClick,
|
|
2639
2638
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
2640
|
-
var truncatedString = children
|
|
2639
|
+
var truncatedString = children.substring(0, 30);
|
|
2641
2640
|
var handleClick = React.useCallback(function (e) {
|
|
2642
2641
|
if (!href) e.preventDefault();
|
|
2643
2642
|
onClick == null || onClick(e);
|
|
@@ -2649,8 +2648,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2649
2648
|
href: href != null ? href : '#',
|
|
2650
2649
|
onClick: handleClick,
|
|
2651
2650
|
iconName: iconName,
|
|
2652
|
-
className: className
|
|
2653
|
-
ref: ref
|
|
2651
|
+
className: className
|
|
2654
2652
|
}), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
|
|
2655
2653
|
"data-testid": "button-icon",
|
|
2656
2654
|
className: iconClassName
|
|
@@ -2661,8 +2659,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2661
2659
|
}))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
|
|
2662
2660
|
color: "inherit"
|
|
2663
2661
|
}, truncatedString));
|
|
2664
|
-
}
|
|
2665
|
-
Button.displayName = 'Button';
|
|
2662
|
+
};
|
|
2666
2663
|
|
|
2667
2664
|
var getPointerEvents = function getPointerEvents(_ref) {
|
|
2668
2665
|
var disabled = _ref.disabled;
|
|
@@ -2727,7 +2724,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
|
2727
2724
|
var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
2728
2725
|
|
|
2729
2726
|
var _excluded$3 = ["children", "disabled", "className"];
|
|
2730
|
-
var PrimaryButton =
|
|
2727
|
+
var PrimaryButton = function PrimaryButton(_ref) {
|
|
2731
2728
|
var children = _ref.children,
|
|
2732
2729
|
disabled = _ref.disabled,
|
|
2733
2730
|
className = _ref.className,
|
|
@@ -2742,7 +2739,6 @@ var PrimaryButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2742
2739
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
|
|
2743
2740
|
id: disabledButtonDescriptionId
|
|
2744
2741
|
}, disabledButtonDescription), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2745
|
-
ref: ref,
|
|
2746
2742
|
disabled: true,
|
|
2747
2743
|
"aria-disabled": "true",
|
|
2748
2744
|
role: "button",
|
|
@@ -2752,13 +2748,10 @@ var PrimaryButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2752
2748
|
onClick: handleClick
|
|
2753
2749
|
}), children));
|
|
2754
2750
|
}
|
|
2755
|
-
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2756
|
-
ref: ref
|
|
2757
|
-
}, props, {
|
|
2751
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({}, props, {
|
|
2758
2752
|
className: className
|
|
2759
2753
|
}), children);
|
|
2760
|
-
}
|
|
2761
|
-
PrimaryButton.displayName = 'PrimaryButton';
|
|
2754
|
+
};
|
|
2762
2755
|
|
|
2763
2756
|
var COLORS$1 = {
|
|
2764
2757
|
disabled: 'var(--color-state-disabled)',
|
|
@@ -3267,10 +3260,56 @@ var Progress = function Progress(_ref) {
|
|
|
3267
3260
|
}, renderSteps()));
|
|
3268
3261
|
};
|
|
3269
3262
|
|
|
3270
|
-
var _templateObject$c, _templateObject2$7, _templateObject3$3;
|
|
3271
|
-
var
|
|
3272
|
-
var
|
|
3273
|
-
var
|
|
3263
|
+
var _templateObject$c, _templateObject2$7, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3264
|
+
var Container = /*#__PURE__*/styled__default.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3265
|
+
var Radio = /*#__PURE__*/styled__default.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3266
|
+
var error = _ref.error,
|
|
3267
|
+
darkMode = _ref.darkMode,
|
|
3268
|
+
disabled = _ref.disabled;
|
|
3269
|
+
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3270
|
+
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3271
|
+
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3272
|
+
return '1px solid var(--base-color-black)';
|
|
3273
|
+
}, function (_ref2) {
|
|
3274
|
+
var disabled = _ref2.disabled,
|
|
3275
|
+
darkMode = _ref2.darkMode;
|
|
3276
|
+
if (disabled) return 'var(--base-color-light-grey)';
|
|
3277
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3278
|
+
return ' var(--base-color-white)';
|
|
3279
|
+
}, function (_ref3) {
|
|
3280
|
+
var disabled = _ref3.disabled,
|
|
3281
|
+
blackBox = _ref3.blackBox,
|
|
3282
|
+
darkMode = _ref3.darkMode;
|
|
3283
|
+
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3284
|
+
if (darkMode) return 'var(--base-color-black)';
|
|
3285
|
+
if (blackBox) return 'var(--base-color-white)';
|
|
3286
|
+
return ' var(--base-color-black)';
|
|
3287
|
+
});
|
|
3288
|
+
var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='radio'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Radio, function (_ref4) {
|
|
3289
|
+
var blackBox = _ref4.blackBox,
|
|
3290
|
+
darkMode = _ref4.darkMode;
|
|
3291
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3292
|
+
if (blackBox) return 'var(--base-color-black)';
|
|
3293
|
+
return ' var(--base-color-white)';
|
|
3294
|
+
}, Radio, function (_ref5) {
|
|
3295
|
+
var darkMode = _ref5.darkMode;
|
|
3296
|
+
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3297
|
+
return '3px solid var(--base-color-lapislazuli)';
|
|
3298
|
+
});
|
|
3299
|
+
var RadioIcon = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: currentColor;\n input[type='radio']:checked + ", " & {\n display: block;\n }\n"])), Radio);
|
|
3300
|
+
var TextLabel = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3301
|
+
var darkMode = _ref6.darkMode,
|
|
3302
|
+
disabled = _ref6.disabled;
|
|
3303
|
+
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3304
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3305
|
+
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3306
|
+
return 'var(--base-color-black)';
|
|
3307
|
+
});
|
|
3308
|
+
var ErrorLabel = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3309
|
+
var darkMode = _ref7.darkMode;
|
|
3310
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3311
|
+
return 'var(--base-color-errorstate)';
|
|
3312
|
+
});
|
|
3274
3313
|
|
|
3275
3314
|
var _templateObject$d;
|
|
3276
3315
|
var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n margin: var(--margin-", "-", ");\n"])), function (_ref) {
|
|
@@ -3387,95 +3426,6 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
3387
3426
|
}, children);
|
|
3388
3427
|
};
|
|
3389
3428
|
|
|
3390
|
-
/**
|
|
3391
|
-
* DEPRECATED. Use Radio2 instead
|
|
3392
|
-
*/
|
|
3393
|
-
var Radio = function Radio(_ref) {
|
|
3394
|
-
var _ref$checked = _ref.checked,
|
|
3395
|
-
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
3396
|
-
error = _ref.error,
|
|
3397
|
-
label = _ref.label,
|
|
3398
|
-
onChange = _ref.onChange;
|
|
3399
|
-
var _useState = React.useState(checked),
|
|
3400
|
-
isChecked = _useState[0],
|
|
3401
|
-
setChecked = _useState[1];
|
|
3402
|
-
var handleRadioChange = function handleRadioChange() {
|
|
3403
|
-
setChecked(!isChecked);
|
|
3404
|
-
onChange == null || onChange(label != null ? label : '');
|
|
3405
|
-
};
|
|
3406
|
-
var handleKeyPress = function handleKeyPress(event) {
|
|
3407
|
-
if (event.key === 'Space' || event.key === ' ') handleRadioChange();
|
|
3408
|
-
};
|
|
3409
|
-
React.useEffect(function () {
|
|
3410
|
-
setChecked(checked);
|
|
3411
|
-
}, [onChange]);
|
|
3412
|
-
return /*#__PURE__*/React__default.createElement(RadioContainer, null, /*#__PURE__*/React__default.createElement(RadioLine, {
|
|
3413
|
-
role: "radio",
|
|
3414
|
-
tabIndex: 0,
|
|
3415
|
-
onClick: handleRadioChange,
|
|
3416
|
-
onKeyPress: handleKeyPress
|
|
3417
|
-
}, /*#__PURE__*/React__default.createElement("input", {
|
|
3418
|
-
type: "radio",
|
|
3419
|
-
checked: isChecked,
|
|
3420
|
-
readOnly: true
|
|
3421
|
-
}), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3422
|
-
level: 1
|
|
3423
|
-
}, label)), error && (/*#__PURE__*/React__default.createElement(RadioError, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3424
|
-
level: 1
|
|
3425
|
-
}, error))));
|
|
3426
|
-
};
|
|
3427
|
-
|
|
3428
|
-
var _templateObject$e, _templateObject2$8, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3429
|
-
var Container = /*#__PURE__*/styled__default.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3430
|
-
var Radio$1 = /*#__PURE__*/styled__default.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3431
|
-
var error = _ref.error,
|
|
3432
|
-
darkMode = _ref.darkMode,
|
|
3433
|
-
disabled = _ref.disabled;
|
|
3434
|
-
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3435
|
-
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3436
|
-
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3437
|
-
return '1px solid var(--base-color-black)';
|
|
3438
|
-
}, function (_ref2) {
|
|
3439
|
-
var disabled = _ref2.disabled,
|
|
3440
|
-
darkMode = _ref2.darkMode;
|
|
3441
|
-
if (disabled) return 'var(--base-color-light-grey)';
|
|
3442
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3443
|
-
return ' var(--base-color-white)';
|
|
3444
|
-
}, function (_ref3) {
|
|
3445
|
-
var disabled = _ref3.disabled,
|
|
3446
|
-
blackBox = _ref3.blackBox,
|
|
3447
|
-
darkMode = _ref3.darkMode;
|
|
3448
|
-
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3449
|
-
if (darkMode) return 'var(--base-color-black)';
|
|
3450
|
-
if (blackBox) return 'var(--base-color-white)';
|
|
3451
|
-
return ' var(--base-color-black)';
|
|
3452
|
-
});
|
|
3453
|
-
var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='radio'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Radio$1, function (_ref4) {
|
|
3454
|
-
var blackBox = _ref4.blackBox,
|
|
3455
|
-
darkMode = _ref4.darkMode;
|
|
3456
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3457
|
-
if (blackBox) return 'var(--base-color-black)';
|
|
3458
|
-
return ' var(--base-color-white)';
|
|
3459
|
-
}, Radio$1, function (_ref5) {
|
|
3460
|
-
var darkMode = _ref5.darkMode;
|
|
3461
|
-
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3462
|
-
return '3px solid var(--base-color-lapislazuli)';
|
|
3463
|
-
});
|
|
3464
|
-
var RadioIcon = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: currentColor;\n input[type='radio']:checked + ", " & {\n display: block;\n }\n"])), Radio$1);
|
|
3465
|
-
var TextLabel = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3466
|
-
var darkMode = _ref6.darkMode,
|
|
3467
|
-
disabled = _ref6.disabled;
|
|
3468
|
-
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3469
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3470
|
-
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3471
|
-
return 'var(--base-color-black)';
|
|
3472
|
-
});
|
|
3473
|
-
var ErrorLabel = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3474
|
-
var darkMode = _ref7.darkMode;
|
|
3475
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3476
|
-
return 'var(--base-color-errorstate)';
|
|
3477
|
-
});
|
|
3478
|
-
|
|
3479
3429
|
var _excluded$7 = ["children", "disabled", "error", "darkMode", "blackBox"];
|
|
3480
3430
|
/**
|
|
3481
3431
|
* A Radio component, that wraps around the native `<input type="radio"/>` element
|
|
@@ -3514,7 +3464,7 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3514
3464
|
type: "radio",
|
|
3515
3465
|
ref: ref,
|
|
3516
3466
|
"data-testid": "radio-input"
|
|
3517
|
-
})), /*#__PURE__*/React__default.createElement(Radio
|
|
3467
|
+
})), /*#__PURE__*/React__default.createElement(Radio, {
|
|
3518
3468
|
error: error,
|
|
3519
3469
|
darkMode: darkMode,
|
|
3520
3470
|
disabled: disabled,
|
|
@@ -3534,9 +3484,9 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3534
3484
|
};
|
|
3535
3485
|
var Radio2 = /*#__PURE__*/React.forwardRef(Radio2Component);
|
|
3536
3486
|
|
|
3537
|
-
var _templateObject$
|
|
3538
|
-
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3539
|
-
var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3487
|
+
var _templateObject$e, _templateObject2$8, _templateObject3$4, _templateObject4$3, _templateObject5$2;
|
|
3488
|
+
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3489
|
+
var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n\n width: ", ";\n height: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (_ref) {
|
|
3540
3490
|
var size = _ref.size;
|
|
3541
3491
|
return size === 'small' ? 'var(--rotator-button-small-width)' : 'var(--rotator-button-width)';
|
|
3542
3492
|
}, function (_ref2) {
|
|
@@ -3549,7 +3499,7 @@ var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_t
|
|
|
3549
3499
|
var size = _ref4.size;
|
|
3550
3500
|
return size === 'small' ? 'var(--rotator-button-small-icon-width)' : 'var(--rotator-button-icon-width)';
|
|
3551
3501
|
});
|
|
3552
|
-
var IconWrapper$1 = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject3$
|
|
3502
|
+
var IconWrapper$1 = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--rotator-button-bg-color);\n color: var(--rotator-button-color);\n\n svg path {\n fill: var(--rotator-button-color);\n }\n\n :hover {\n cursor: pointer;\n background-color: var(--rotator-button-hover-bg-color);\n\n && svg path {\n fill: var(--rotator-button-hover-color);\n }\n }\n"])));
|
|
3553
3503
|
var IconUnavailableWrapper = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-state-disabled);\n color: var(--color-primary-black);\n opacity: 0.2;\n\n svg path {\n fill: var(--color-primary-black);\n }\n\n @media ", " {\n pointer-events: none;\n }\n"])), devices.mobile);
|
|
3554
3504
|
var FullscreenIconWrapper = /*#__PURE__*/styled__default(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
|
|
3555
3505
|
|
|
@@ -3739,8 +3689,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3739
3689
|
}, renderFullscreenIcon())));
|
|
3740
3690
|
};
|
|
3741
3691
|
|
|
3742
|
-
var _templateObject$
|
|
3743
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$
|
|
3692
|
+
var _templateObject$f;
|
|
3693
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3744
3694
|
var fillColor = _ref.fillColor;
|
|
3745
3695
|
return fillColor;
|
|
3746
3696
|
});
|
|
@@ -3765,9 +3715,9 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3765
3715
|
})));
|
|
3766
3716
|
};
|
|
3767
3717
|
|
|
3768
|
-
var _templateObject$
|
|
3769
|
-
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
3770
|
-
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3718
|
+
var _templateObject$g, _templateObject2$9;
|
|
3719
|
+
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3720
|
+
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--color-base-light-grey);\n"])));
|
|
3771
3721
|
|
|
3772
3722
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
3773
3723
|
var _ref$fullWidth = _ref.fullWidth,
|
|
@@ -3788,8 +3738,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3788
3738
|
}, /*#__PURE__*/React__default.createElement(Splitter, null))));
|
|
3789
3739
|
};
|
|
3790
3740
|
|
|
3791
|
-
var _templateObject$
|
|
3792
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3741
|
+
var _templateObject$h;
|
|
3742
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-block;\n height: auto;\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n\n img {\n display: block;\n width: 100%;\n }\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n"])), devices.tablet, devices.mobile);
|
|
3793
3743
|
|
|
3794
3744
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3795
3745
|
var imageSource = _ref.imageSource,
|
|
@@ -3816,10 +3766,10 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3816
3766
|
}) : children));
|
|
3817
3767
|
};
|
|
3818
3768
|
|
|
3819
|
-
var _templateObject$
|
|
3820
|
-
var SponsorshipWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3821
|
-
var SponsorshipLinkText = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3822
|
-
var SponsorshipLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
3769
|
+
var _templateObject$i, _templateObject2$a, _templateObject3$5, _templateObject4$4;
|
|
3770
|
+
var SponsorshipWrapper = /*#__PURE__*/styled__default.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n position: relative;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3771
|
+
var SponsorshipLinkText = /*#__PURE__*/styled__default.span(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n whitespace: nowrap;\n borderwidth: 0;\n"])));
|
|
3772
|
+
var SponsorshipLink = /*#__PURE__*/styled__default.a(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n inset: 0;\n width: 80px;\n height: 80px;\n z-index: 2;\n text-decoration: none;\n background: transparent;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3823
3773
|
var SponsorshipStyledIframe = /*#__PURE__*/styled__default.iframe(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: none;\n display: block;\n width: 80px;\n height: 80px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n\n @media ", " {\n transform: scale(0.5);\n transform-origin: top left;\n }\n"])), devices.mobileAndTablet);
|
|
3824
3774
|
|
|
3825
3775
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3854,8 +3804,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3854
3804
|
}));
|
|
3855
3805
|
};
|
|
3856
3806
|
|
|
3857
|
-
var _templateObject$
|
|
3858
|
-
var TabText = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3807
|
+
var _templateObject$j, _templateObject2$b;
|
|
3808
|
+
var TabText = /*#__PURE__*/styled__default.a(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--harmonic-letter-spacing-navigation);\n text-decoration: none;\n margin-left: 5px;\n color: var(--color-primary-black);\n color: ", ";\n\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n ", "\n\n @media ", " {\n width: max-content;\n }\n"])), function (_ref) {
|
|
3859
3809
|
var color = _ref.color;
|
|
3860
3810
|
return color ? "var(--color-" + color + ")" : "var(--color-primary-black)";
|
|
3861
3811
|
}, function (props) {
|
|
@@ -3866,7 +3816,7 @@ var TabText = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObje
|
|
|
3866
3816
|
}
|
|
3867
3817
|
return "";
|
|
3868
3818
|
}, devices.mobileAndTablet);
|
|
3869
|
-
var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3819
|
+
var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: fit-content;\n height: 100%;\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n & path {\n fill: var(--color-primary-black);\n }\n }\n\n ", "\n\n ", "\n\n @media ", " {\n svg {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n"])), function (props) {
|
|
3870
3820
|
if (props.withIcon === 'left') {
|
|
3871
3821
|
return "\n flex-direction: row-reverse;\n svg {\n margin-right: 6px;\n }";
|
|
3872
3822
|
}
|
|
@@ -3951,8 +3901,8 @@ var Tab = function Tab(_ref) {
|
|
|
3951
3901
|
}));
|
|
3952
3902
|
};
|
|
3953
3903
|
|
|
3954
|
-
var _templateObject$
|
|
3955
|
-
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3904
|
+
var _templateObject$k, _templateObject2$c;
|
|
3905
|
+
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n\n && svg path {\n fill: ", ";\n }\n\n @media ", ", ", " {\n &:hover {\n color: var(--color-", ");\n border-bottom: 1px solid var(--color-", ");\n\n && svg path {\n fill: var(--color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3956
3906
|
var iconName = _ref.iconName;
|
|
3957
3907
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px) 0' : 'var(--harmonic-text-link-underline-offset) 0';
|
|
3958
3908
|
}, function (_ref2) {
|
|
@@ -3979,7 +3929,7 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templ
|
|
|
3979
3929
|
var hoverColor = _ref7.hoverColor;
|
|
3980
3930
|
return hoverColor;
|
|
3981
3931
|
});
|
|
3982
|
-
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3932
|
+
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
|
|
3983
3933
|
|
|
3984
3934
|
var _excluded$9 = ["children", "iconName", "iconDirection", "color", "hoverColor", "className"];
|
|
3985
3935
|
var TabLink = function TabLink(_ref) {
|
|
@@ -4007,19 +3957,19 @@ var TabLink = function TabLink(_ref) {
|
|
|
4007
3957
|
}))) : null, children);
|
|
4008
3958
|
};
|
|
4009
3959
|
|
|
4010
|
-
var _templateObject$
|
|
4011
|
-
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3960
|
+
var _templateObject$l, _templateObject2$d, _templateObject3$6, _templateObject4$5;
|
|
3961
|
+
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
4012
3962
|
var width = _ref.width;
|
|
4013
3963
|
return width ? width + "px;" : '100%;';
|
|
4014
3964
|
}, function (_ref2) {
|
|
4015
3965
|
var height = _ref2.height;
|
|
4016
3966
|
return height + "px;";
|
|
4017
3967
|
});
|
|
4018
|
-
var TextAreaLabel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3968
|
+
var TextAreaLabel = /*#__PURE__*/styled__default.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 0 15px;\n ", ";\n"])), function (_ref3) {
|
|
4019
3969
|
var darkMode = _ref3.darkMode;
|
|
4020
3970
|
return darkMode ? 'color: var(--base-color-white)' : '';
|
|
4021
3971
|
});
|
|
4022
|
-
var TextAreaBox = /*#__PURE__*/styled__default.textarea(_templateObject3$
|
|
3972
|
+
var TextAreaBox = /*#__PURE__*/styled__default.textarea(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n box-sizing: border-box;\n resize: none;\n padding: 20px;\n width: 100%;\n height: 100%;\n border: 1px solid ", ";\n\n ", ";\n\n :disabled {\n background-color: var(--base-color-light-grey);\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline-style: solid;\n outline-width: ", ";\n outline-color: ", ";\n }\n"])), function (_ref4) {
|
|
4023
3973
|
var error = _ref4.error;
|
|
4024
3974
|
return error ? 'var(--base-color-errorstate)' : 'var(--base-color-light-grey)';
|
|
4025
3975
|
}, function (_ref5) {
|
|
@@ -4130,14 +4080,14 @@ var TextArea = function TextArea(_ref) {
|
|
|
4130
4080
|
}, error)))));
|
|
4131
4081
|
};
|
|
4132
4082
|
|
|
4133
|
-
var _templateObject$
|
|
4134
|
-
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4135
|
-
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4083
|
+
var _templateObject$m, _templateObject2$e, _templateObject3$7, _templateObject4$6, _templateObject5$3, _templateObject6$1, _templateObject7;
|
|
4084
|
+
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4085
|
+
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
4136
4086
|
var width = _ref.width;
|
|
4137
4087
|
if (!width) return 'none';
|
|
4138
4088
|
return width + "px";
|
|
4139
4089
|
});
|
|
4140
|
-
var Input = /*#__PURE__*/styled__default.input(_templateObject3$
|
|
4090
|
+
var Input = /*#__PURE__*/styled__default.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--color-base-light-grey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n"])), function (_ref2) {
|
|
4141
4091
|
var isPasswordField = _ref2.isPasswordField;
|
|
4142
4092
|
if (isPasswordField) return "80px";
|
|
4143
4093
|
return "20px";
|
|
@@ -4264,9 +4214,9 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
|
|
|
4264
4214
|
};
|
|
4265
4215
|
var TextField = /*#__PURE__*/React.forwardRef(TextFieldComponent);
|
|
4266
4216
|
|
|
4267
|
-
var _templateObject$
|
|
4268
|
-
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4269
|
-
var textStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
4217
|
+
var _templateObject$n, _templateObject2$f, _templateObject3$8, _templateObject4$7, _templateObject5$4;
|
|
4218
|
+
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4219
|
+
var textStyles = /*#__PURE__*/styled.css(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
|
|
4270
4220
|
var theme = _ref.theme;
|
|
4271
4221
|
return theme.fonts.desktop.weights.body[1];
|
|
4272
4222
|
}, function (_ref2) {
|
|
@@ -4276,7 +4226,7 @@ var textStyles = /*#__PURE__*/styled.css(_templateObject2$g || (_templateObject2
|
|
|
4276
4226
|
var theme = _ref3.theme;
|
|
4277
4227
|
return theme.spacing[7];
|
|
4278
4228
|
});
|
|
4279
|
-
var Input$1 = /*#__PURE__*/styled__default.input(_templateObject3$
|
|
4229
|
+
var Input$1 = /*#__PURE__*/styled__default.input(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n width: ", ";\n height: 48px;\n padding: 0px 20px;\n\n border: 1px solid ", ";\n outline: none;\n\n ", "\n\n :disabled {\n background-color: ", ";\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline: ", "};\n }\n"])), textStyles, function (_ref4) {
|
|
4280
4230
|
var width = _ref4.width;
|
|
4281
4231
|
return width ? width + "px" : '196px';
|
|
4282
4232
|
}, function (_ref5) {
|
|
@@ -4341,15 +4291,15 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4341
4291
|
}, error)) : null);
|
|
4342
4292
|
};
|
|
4343
4293
|
|
|
4344
|
-
var _templateObject$
|
|
4345
|
-
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
4294
|
+
var _templateObject$o, _templateObject2$g;
|
|
4295
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n text-underline-offset: ", ";\n font-family: var(--font-family-sans);\n font-size: 19px;\n font-weight: 500;\n line-height: 17px;\n letter-spacing: 0.4px;\n color: var(--color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media ", " {\n font-size: 17px;\n }\n"])), function (_ref) {
|
|
4346
4296
|
var iconName = _ref.iconName;
|
|
4347
4297
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
|
|
4348
4298
|
}, function (_ref2) {
|
|
4349
4299
|
var color = _ref2.color;
|
|
4350
4300
|
return color;
|
|
4351
4301
|
}, devices.mobile);
|
|
4352
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
4302
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
4353
4303
|
|
|
4354
4304
|
var _excluded$d = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
4355
4305
|
var TextLink = function TextLink(_ref) {
|
|
@@ -4380,12 +4330,12 @@ var TextLogoProduct;
|
|
|
4380
4330
|
TextLogoProduct["Cinema"] = "CINEMA";
|
|
4381
4331
|
})(TextLogoProduct || (TextLogoProduct = {}));
|
|
4382
4332
|
|
|
4383
|
-
var _templateObject$
|
|
4384
|
-
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4333
|
+
var _templateObject$p, _templateObject2$h, _templateObject3$9, _templateObject4$8;
|
|
4334
|
+
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4385
4335
|
var dark = _ref.dark;
|
|
4386
4336
|
return dark ? 'white' : 'errorstate';
|
|
4387
4337
|
});
|
|
4388
|
-
var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$
|
|
4338
|
+
var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(\n --base-color-", "\n );\n cursor: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n div {\n margin-left: -32px;\n }\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref2) {
|
|
4389
4339
|
var dark = _ref2.dark,
|
|
4390
4340
|
disabled = _ref2.disabled;
|
|
4391
4341
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -4394,7 +4344,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$i || (_
|
|
|
4394
4344
|
var disabled = _ref3.disabled;
|
|
4395
4345
|
return disabled ? 'not-allowed' : 'pointer';
|
|
4396
4346
|
}, devices.mobileAndTablet);
|
|
4397
|
-
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$
|
|
4347
|
+
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n outline: ", ";\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref4) {
|
|
4398
4348
|
var dark = _ref4.dark,
|
|
4399
4349
|
disabled = _ref4.disabled,
|
|
4400
4350
|
error = _ref4.error;
|
|
@@ -4501,9 +4451,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
4501
4451
|
}, error))));
|
|
4502
4452
|
};
|
|
4503
4453
|
|
|
4504
|
-
var _templateObject$
|
|
4505
|
-
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4506
|
-
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4454
|
+
var _templateObject$q, _templateObject2$i, _templateObject3$a, _templateObject4$9, _templateObject5$5, _templateObject6$2;
|
|
4455
|
+
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4456
|
+
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
4507
4457
|
var error = _ref.error,
|
|
4508
4458
|
darkMode = _ref.darkMode,
|
|
4509
4459
|
disabled = _ref.disabled;
|
|
@@ -4526,7 +4476,7 @@ var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templat
|
|
|
4526
4476
|
if (blackBox) return 'var(--base-color-white)';
|
|
4527
4477
|
return ' var(--base-color-black)';
|
|
4528
4478
|
});
|
|
4529
|
-
var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$
|
|
4479
|
+
var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='checkbox'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Tickbox$1, function (_ref4) {
|
|
4530
4480
|
var blackBox = _ref4.blackBox,
|
|
4531
4481
|
darkMode = _ref4.darkMode;
|
|
4532
4482
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -4612,16 +4562,16 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
|
|
|
4612
4562
|
};
|
|
4613
4563
|
var Tickbox2 = /*#__PURE__*/React.forwardRef(Tickbox2Component);
|
|
4614
4564
|
|
|
4615
|
-
var _templateObject$
|
|
4616
|
-
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4565
|
+
var _templateObject$r, _templateObject2$j, _templateObject3$b, _templateObject4$a, _templateObject5$6, _templateObject6$3, _templateObject7$1, _templateObject8;
|
|
4566
|
+
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-", ");\n"])), function (_ref) {
|
|
4617
4567
|
var color = _ref.color;
|
|
4618
4568
|
return color;
|
|
4619
4569
|
});
|
|
4620
|
-
var Line = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4570
|
+
var Line = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
|
|
4621
4571
|
var color = _ref2.color;
|
|
4622
4572
|
return color;
|
|
4623
4573
|
}, devices.mobileAndTablet);
|
|
4624
|
-
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4574
|
+
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4625
4575
|
var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
4626
4576
|
var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
4627
4577
|
var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -4722,8 +4672,8 @@ var Timer = function Timer(_ref) {
|
|
|
4722
4672
|
}));
|
|
4723
4673
|
};
|
|
4724
4674
|
|
|
4725
|
-
var _templateObject$
|
|
4726
|
-
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
4675
|
+
var _templateObject$s;
|
|
4676
|
+
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\u2013';\n margin: 0 0.5em;\n }\n\n li:first-child:before {\n display: none;\n }\n"])));
|
|
4727
4677
|
|
|
4728
4678
|
var TypeTags = function TypeTags(_ref) {
|
|
4729
4679
|
var list = _ref.list;
|
|
@@ -4736,10 +4686,10 @@ var TypeTags = function TypeTags(_ref) {
|
|
|
4736
4686
|
}));
|
|
4737
4687
|
};
|
|
4738
4688
|
|
|
4739
|
-
var _templateObject$
|
|
4740
|
-
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$
|
|
4741
|
-
var VideoFullscreenButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
4742
|
-
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4689
|
+
var _templateObject$t, _templateObject2$k, _templateObject3$c, _templateObject4$b, _templateObject5$7, _templateObject6$4, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject0;
|
|
4690
|
+
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n cursor: pointer;\n"])));
|
|
4691
|
+
var VideoFullscreenButton = /*#__PURE__*/styled__default.button(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
|
|
4692
|
+
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
4743
4693
|
var VideoControlsInnerWrapper = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 40px 17px 30px;\n"])));
|
|
4744
4694
|
var LeftWrapper = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4745
4695
|
var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
@@ -4926,13 +4876,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4926
4876
|
}))));
|
|
4927
4877
|
};
|
|
4928
4878
|
|
|
4929
|
-
var _templateObject$
|
|
4930
|
-
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4931
|
-
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4879
|
+
var _templateObject$u, _templateObject2$l, _templateObject3$d, _templateObject4$c, _templateObject5$8;
|
|
4880
|
+
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
4881
|
+
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
4932
4882
|
var darkMode = _ref.darkMode;
|
|
4933
4883
|
return darkMode ? 'white' : 'errorstate';
|
|
4934
4884
|
});
|
|
4935
|
-
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4885
|
+
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 154px;\n height: 48px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n ", ";\n\n * {\n color: var(--base-color-", ");\n word-break: unset;\n user-select: none;\n }\n\n path {\n fill: var(--base-color-", ") !important;\n }\n\n & > * {\n width: 51px;\n }\n"])), function (_ref2) {
|
|
4936
4886
|
var darkMode = _ref2.darkMode,
|
|
4937
4887
|
disabled = _ref2.disabled,
|
|
4938
4888
|
error = _ref2.error;
|
|
@@ -5136,9 +5086,9 @@ var Component = function Component(_ref) {
|
|
|
5136
5086
|
}, error))));
|
|
5137
5087
|
};
|
|
5138
5088
|
|
|
5139
|
-
var _templateObject$
|
|
5140
|
-
var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5141
|
-
var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
5089
|
+
var _templateObject$v, _templateObject2$m;
|
|
5090
|
+
var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
|
|
5091
|
+
var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n\n &:focus {\n outline: 2px solid var(--color-base-white);\n }\n"])));
|
|
5142
5092
|
|
|
5143
5093
|
var SocialLinks = function SocialLinks(_ref) {
|
|
5144
5094
|
var items = _ref.items;
|
|
@@ -5162,16 +5112,16 @@ var SocialLinks = function SocialLinks(_ref) {
|
|
|
5162
5112
|
}));
|
|
5163
5113
|
};
|
|
5164
5114
|
|
|
5165
|
-
var _templateObject$
|
|
5166
|
-
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5115
|
+
var _templateObject$w, _templateObject2$n, _templateObject3$e, _templateObject4$d, _templateObject5$9, _templateObject6$5, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
5116
|
+
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 4px;\n\n @media ", " {\n padding-top: 0px;\n }\n\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
5167
5117
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5168
5118
|
return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--color-base-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
5169
5119
|
});
|
|
5170
|
-
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5120
|
+
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: ", ";\n opacity: 0;\n animation: fadeIn 0.3s ease forwards;\n\n @media ", " {\n top: 230px;\n background-color: var(--color-base-black);\n }\n\n @keyframes fadeIn {\n to {\n opacity: 0.5;\n }\n }\n"])), function (_ref2) {
|
|
5171
5121
|
var isMobile = _ref2.isMobile;
|
|
5172
5122
|
return isMobile ? zIndexes.overlay : zIndexes.searchOverlay;
|
|
5173
5123
|
}, devices.mobileAndTablet);
|
|
5174
|
-
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
5124
|
+
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-white);\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n z-index: ", ";\n\n @media ", " {\n height: 60px;\n }\n"])), zIndexes.navigation, devices.mobileAndTablet);
|
|
5175
5125
|
var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n opacity: ", ";\n transform: ", ";\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease;\n background-color: var(--color-base-white);\n height: 100px;\n border-top: 1px solid var(--color-base-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 86px;\n top: 144px;\n }\n"])), function (_ref3) {
|
|
5176
5126
|
var visible = _ref3.visible;
|
|
5177
5127
|
return visible ? 'visible' : 'hidden';
|
|
@@ -5206,11 +5156,11 @@ var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObjec
|
|
|
5206
5156
|
var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
5207
5157
|
var NavTopContainerMobile = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n width: fit-content;\n align-items: center;\n height: 10%;\n margin-left: 20px;\n padding-bottom: 36px;\n }\n"])), devices.mobileAndTablet);
|
|
5208
5158
|
|
|
5209
|
-
var _templateObject$
|
|
5210
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5159
|
+
var _templateObject$x;
|
|
5160
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 100%;\n\n @media ", " {\n column-gap: 20px;\n }\n"])), devices.mobile);
|
|
5211
5161
|
|
|
5212
|
-
var _templateObject$
|
|
5213
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5162
|
+
var _templateObject$y, _templateObject2$o, _templateObject3$f, _templateObject4$e, _templateObject5$a, _templateObject6$6;
|
|
5163
|
+
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding-top: 3px;\n padding-bottom: 3px;\n\n & svg path {\n fill: var(--color-primary-black);\n }\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--color-primary-red);\n padding-bottom: 2px;\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
5214
5164
|
var selected = _ref.selected;
|
|
5215
5165
|
if (selected) {
|
|
5216
5166
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
@@ -5223,8 +5173,8 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$z || (_te
|
|
|
5223
5173
|
}
|
|
5224
5174
|
return '';
|
|
5225
5175
|
});
|
|
5226
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5227
|
-
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5176
|
+
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5177
|
+
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n"])));
|
|
5228
5178
|
var BasketInfo = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n @media ", " {\n width: max-content;\n }\n"])), devices.mobileAndTablet);
|
|
5229
5179
|
var BasketNum = /*#__PURE__*/styled__default.span(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n font-size: 10px;\n font-family: var(--font-family-sans);\n"])));
|
|
5230
5180
|
var BasketText = /*#__PURE__*/styled__default.a(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n color: var(--color-primary-black);\n margin-left: 6px;\n text-decoration: none;\n"])));
|
|
@@ -5371,15 +5321,15 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5371
5321
|
}, expiryTime ? basketText : text)) : ''));
|
|
5372
5322
|
};
|
|
5373
5323
|
|
|
5374
|
-
var _templateObject$
|
|
5375
|
-
var SearchContainer = /*#__PURE__*/styled__default.button(_templateObject$
|
|
5324
|
+
var _templateObject$z, _templateObject2$p;
|
|
5325
|
+
var SearchContainer = /*#__PURE__*/styled__default.button(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid transparent;\n padding-top: 3px;\n padding-bottom: 3px;\n\n svg path {\n fill: var(--color-primary-black);\n }\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])), function (_ref) {
|
|
5376
5326
|
var selected = _ref.selected;
|
|
5377
5327
|
if (selected) {
|
|
5378
5328
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
5379
5329
|
}
|
|
5380
5330
|
return '';
|
|
5381
5331
|
});
|
|
5382
|
-
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5332
|
+
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5383
5333
|
|
|
5384
5334
|
var Search$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
5385
5335
|
var _ref$selected = _ref.selected,
|
|
@@ -5639,15 +5589,15 @@ var NavTop = function NavTop(_ref) {
|
|
|
5639
5589
|
}));
|
|
5640
5590
|
};
|
|
5641
5591
|
|
|
5642
|
-
var _templateObject$
|
|
5643
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5644
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5592
|
+
var _templateObject$A, _templateObject2$q, _templateObject3$g, _templateObject4$f;
|
|
5593
|
+
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
5594
|
+
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
5645
5595
|
if (props.showMenu) {
|
|
5646
5596
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
5647
5597
|
}
|
|
5648
5598
|
return "display: none;";
|
|
5649
5599
|
});
|
|
5650
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5600
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--color-primary-red);\n }\n }\n\n && svg path {\n fill: var(--color-primary-black);\n }\n\n :hover {\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5651
5601
|
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 0;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5652
5602
|
|
|
5653
5603
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
@@ -5774,10 +5724,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
5774
5724
|
}, "Menu"))))));
|
|
5775
5725
|
};
|
|
5776
5726
|
|
|
5777
|
-
var _templateObject$
|
|
5778
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5779
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5780
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
5727
|
+
var _templateObject$B, _templateObject2$r, _templateObject3$h, _templateObject5$b, _templateObject6$7, _templateObject7$4;
|
|
5728
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: transparent;\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
5729
|
+
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
5730
|
+
var SvgContainerClose = /*#__PURE__*/styled__default.button(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])));
|
|
5781
5731
|
var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-serif);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--color-base-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
5782
5732
|
var TextLinkWrapper$1 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
5783
5733
|
var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-right: 8px;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
@@ -5918,19 +5868,19 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5918
5868
|
})));
|
|
5919
5869
|
};
|
|
5920
5870
|
|
|
5921
|
-
var _templateObject$
|
|
5922
|
-
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5871
|
+
var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject4$g, _templateObject5$c, _templateObject6$8, _templateObject7$5;
|
|
5872
|
+
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n border-top: 2px solid var(--color-base-light-grey);\n border-bottom: ", ";\n"])), function (_ref) {
|
|
5923
5873
|
var showLine = _ref.showLine;
|
|
5924
5874
|
return showLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5925
5875
|
});
|
|
5926
|
-
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5876
|
+
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n opacity: ", ";\n transition: opacity 0.2s ease;\n pointer-events: ", ";\n\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref2) {
|
|
5927
5877
|
var isVisible = _ref2.isVisible;
|
|
5928
5878
|
return isVisible ? 1 : 0;
|
|
5929
5879
|
}, function (_ref3) {
|
|
5930
5880
|
var isVisible = _ref3.isVisible;
|
|
5931
5881
|
return isVisible ? 'auto' : 'none';
|
|
5932
5882
|
}, devices.mobile);
|
|
5933
|
-
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5883
|
+
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-top: 28px;\n padding-bottom: 28px;\n color: var(--color-primary-black);\n\n && svg {\n width: 24px;\n height: 24px;\n }\n\n :hover {\n cursor: ", ";\n pointer-events: ", ";\n }\n\n @media ", " {\n padding-top: 16px;\n padding-bottom: 16px;\n }\n"])), function (_ref4) {
|
|
5934
5884
|
var hasChildren = _ref4.hasChildren;
|
|
5935
5885
|
return hasChildren ? 'pointer' : 'default';
|
|
5936
5886
|
}, function (_ref5) {
|
|
@@ -5943,31 +5893,13 @@ var ContentContainer = /*#__PURE__*/styled__default(ExtendedBodyCopyHarmonic).wi
|
|
|
5943
5893
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5944
5894
|
return prop !== 'textHeight';
|
|
5945
5895
|
}
|
|
5946
|
-
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n
|
|
5896
|
+
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref6) {
|
|
5947
5897
|
var textHeight = _ref6.textHeight;
|
|
5948
5898
|
return textHeight;
|
|
5949
|
-
}, function (_ref7) {
|
|
5950
|
-
var textHeight = _ref7.textHeight;
|
|
5951
|
-
return textHeight === '0px' ? 'hidden' : 'visible';
|
|
5952
|
-
}, function (_ref8) {
|
|
5953
|
-
var textHeight = _ref8.textHeight;
|
|
5954
|
-
return textHeight === '0px' ? '0px' : '12px';
|
|
5955
5899
|
}, devices.mobile);
|
|
5956
5900
|
var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
5957
5901
|
|
|
5958
5902
|
/* eslint-disable react/no-unstable-nested-components */
|
|
5959
|
-
/** In-flow height only so absolutely positioned UI (e.g. react-select menu) does not inflate scrollHeight. */
|
|
5960
|
-
function getPanelContentHeight(panel) {
|
|
5961
|
-
var inner = panel.firstElementChild;
|
|
5962
|
-
if (!inner || !(inner instanceof HTMLElement)) {
|
|
5963
|
-
return panel.scrollHeight;
|
|
5964
|
-
}
|
|
5965
|
-
var innerStyle = window.getComputedStyle(inner);
|
|
5966
|
-
var marginY = (parseFloat(innerStyle.marginTop) || 0) + (parseFloat(innerStyle.marginBottom) || 0);
|
|
5967
|
-
var panelStyle = window.getComputedStyle(panel);
|
|
5968
|
-
var paddingY = (parseFloat(panelStyle.paddingTop) || 0) + (parseFloat(panelStyle.paddingBottom) || 0);
|
|
5969
|
-
return inner.offsetHeight + marginY + paddingY;
|
|
5970
|
-
}
|
|
5971
5903
|
var Accordion = function Accordion(_ref) {
|
|
5972
5904
|
var _expandedStateIcon$ic, _collapsedStateIcon$i;
|
|
5973
5905
|
var _ref$title = _ref.title,
|
|
@@ -6004,69 +5936,21 @@ var Accordion = function Accordion(_ref) {
|
|
|
6004
5936
|
var content = React.useRef(null);
|
|
6005
5937
|
var timeoutRef = React.useRef(null);
|
|
6006
5938
|
var rafRef = React.useRef(null);
|
|
6007
|
-
var resizeObserverRef = React.useRef(null);
|
|
6008
|
-
var intervalRef = React.useRef(null);
|
|
6009
5939
|
React.useEffect(function () {
|
|
6010
|
-
if (content.current && initOpen) {
|
|
6011
|
-
setTextHeight(
|
|
5940
|
+
if (content != null && content.current && initOpen) {
|
|
5941
|
+
setTextHeight(content.current.scrollHeight + "px");
|
|
6012
5942
|
}
|
|
6013
|
-
}, [initOpen]);
|
|
5943
|
+
}, [content, initOpen]);
|
|
6014
5944
|
React.useEffect(function () {
|
|
6015
|
-
|
|
6016
|
-
|
|
6017
|
-
|
|
6018
|
-
|
|
6019
|
-
|
|
6020
|
-
if (!openAccordion) {
|
|
5945
|
+
if (openAccordion && content != null && content.current) {
|
|
5946
|
+
rafRef.current = window.requestAnimationFrame(function () {
|
|
5947
|
+
var _content$current$scro, _content$current;
|
|
5948
|
+
setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
|
|
5949
|
+
});
|
|
5950
|
+
} else if (!openAccordion) {
|
|
6021
5951
|
setTextHeight('0px');
|
|
6022
|
-
if (resizeObserverRef.current) {
|
|
6023
|
-
resizeObserverRef.current.disconnect();
|
|
6024
|
-
resizeObserverRef.current = null;
|
|
6025
|
-
}
|
|
6026
|
-
if (intervalRef.current) {
|
|
6027
|
-
window.clearInterval(intervalRef.current);
|
|
6028
|
-
intervalRef.current = null;
|
|
6029
|
-
}
|
|
6030
|
-
if (rafRef.current) {
|
|
6031
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6032
|
-
rafRef.current = null;
|
|
6033
|
-
}
|
|
6034
|
-
return cleanup;
|
|
6035
5952
|
}
|
|
6036
|
-
|
|
6037
|
-
setTextHeight(getPanelContentHeight(el) + "px");
|
|
6038
|
-
};
|
|
6039
|
-
rafRef.current = window.requestAnimationFrame(updateHeight);
|
|
6040
|
-
if (typeof ResizeObserver !== 'undefined') {
|
|
6041
|
-
var ro = new ResizeObserver(updateHeight);
|
|
6042
|
-
ro.observe(el);
|
|
6043
|
-
resizeObserverRef.current = ro;
|
|
6044
|
-
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6045
|
-
return function () {
|
|
6046
|
-
ro.disconnect();
|
|
6047
|
-
resizeObserverRef.current = null;
|
|
6048
|
-
if (intervalRef.current) {
|
|
6049
|
-
window.clearInterval(intervalRef.current);
|
|
6050
|
-
intervalRef.current = null;
|
|
6051
|
-
}
|
|
6052
|
-
if (rafRef.current) {
|
|
6053
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6054
|
-
rafRef.current = null;
|
|
6055
|
-
}
|
|
6056
|
-
};
|
|
6057
|
-
}
|
|
6058
|
-
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6059
|
-
return function () {
|
|
6060
|
-
if (intervalRef.current) {
|
|
6061
|
-
window.clearInterval(intervalRef.current);
|
|
6062
|
-
intervalRef.current = null;
|
|
6063
|
-
}
|
|
6064
|
-
if (rafRef.current) {
|
|
6065
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
6066
|
-
rafRef.current = null;
|
|
6067
|
-
}
|
|
6068
|
-
};
|
|
6069
|
-
}, [openAccordion, childrenVisibility, children]);
|
|
5953
|
+
}, [openAccordion, childrenVisibility, content]);
|
|
6070
5954
|
React.useEffect(function () {
|
|
6071
5955
|
return function () {
|
|
6072
5956
|
if (timeoutRef.current) {
|
|
@@ -6077,14 +5961,6 @@ var Accordion = function Accordion(_ref) {
|
|
|
6077
5961
|
window.cancelAnimationFrame(rafRef.current);
|
|
6078
5962
|
rafRef.current = null;
|
|
6079
5963
|
}
|
|
6080
|
-
if (resizeObserverRef.current) {
|
|
6081
|
-
resizeObserverRef.current.disconnect();
|
|
6082
|
-
resizeObserverRef.current = null;
|
|
6083
|
-
}
|
|
6084
|
-
if (intervalRef.current) {
|
|
6085
|
-
window.clearInterval(intervalRef.current);
|
|
6086
|
-
intervalRef.current = null;
|
|
6087
|
-
}
|
|
6088
5964
|
};
|
|
6089
5965
|
}, []);
|
|
6090
5966
|
var toggleAccordion = function toggleAccordion() {
|
|
@@ -6138,8 +6014,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6138
6014
|
}, children)));
|
|
6139
6015
|
};
|
|
6140
6016
|
|
|
6141
|
-
var _templateObject$
|
|
6142
|
-
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6017
|
+
var _templateObject$D;
|
|
6018
|
+
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6143
6019
|
|
|
6144
6020
|
var Accordions = function Accordions(_ref) {
|
|
6145
6021
|
var _ref$items = _ref.items,
|
|
@@ -6161,16 +6037,16 @@ var Accordions = function Accordions(_ref) {
|
|
|
6161
6037
|
}));
|
|
6162
6038
|
};
|
|
6163
6039
|
|
|
6164
|
-
var _templateObject$
|
|
6165
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6166
|
-
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6040
|
+
var _templateObject$E, _templateObject2$t, _templateObject3$j, _templateObject4$h, _templateObject5$d;
|
|
6041
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: var(--announcement-banner-bg-color);\n color: var(--announcement-banner-color);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), devices.mobile);
|
|
6042
|
+
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n cursor: ", ";\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n\n path {\n fill: var(--announcement-banner-color);\n }\n }\n"])), function (_ref) {
|
|
6167
6043
|
var isClickable = _ref.isClickable;
|
|
6168
6044
|
return isClickable ? 'pointer' : 'default';
|
|
6169
6045
|
}, function (_ref2) {
|
|
6170
6046
|
var isClickable = _ref2.isClickable;
|
|
6171
6047
|
return isClickable && "\n :hover:not(:active) {\n && svg path {\n fill: var(--announcement-banner-hover-color);\n }\n }\n :active {\n && svg path {\n fill: var(--announcement-banner-pressed-color);\n }\n }\n ";
|
|
6172
6048
|
});
|
|
6173
|
-
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6049
|
+
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-sans);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--announcement-banner-color);\n a {\n color: var(--announcement-banner-color);\n text-decoration: underline;\n }\n\n * {\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n margin-inline-end: 0;\n }\n"])));
|
|
6174
6050
|
var OverlineWrapper = /*#__PURE__*/styled__default(HarmonicOverline)(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
|
|
6175
6051
|
var BannerContentWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n grid-column: 3 / span 10;\n }\n\n @media ", ", ", " {\n && {\n grid-column: 3 / span 12;\n }\n }\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.desktop, devices.largeDesktop, devices.mobile, function (_ref3) {
|
|
6176
6052
|
var variant = _ref3.variant;
|
|
@@ -6264,8 +6140,8 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
|
|
|
6264
6140
|
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
6265
6141
|
};
|
|
6266
6142
|
|
|
6267
|
-
var _templateObject$
|
|
6268
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
6143
|
+
var _templateObject$F;
|
|
6144
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
|
|
6269
6145
|
|
|
6270
6146
|
var _excluded$f = ["children", "className"];
|
|
6271
6147
|
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
@@ -6278,22 +6154,22 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
6278
6154
|
}), children);
|
|
6279
6155
|
};
|
|
6280
6156
|
|
|
6281
|
-
var _templateObject$
|
|
6157
|
+
var _templateObject$G, _templateObject2$u, _templateObject3$k, _templateObject4$i, _templateObject5$e, _templateObject6$9, _templateObject7$6, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1;
|
|
6282
6158
|
var LENGTH_LARGE_TEXT = 28;
|
|
6283
6159
|
var LENGTH_SMALL_TEXT = 19;
|
|
6284
6160
|
var LENGTH_TEXT_TABLET = 10;
|
|
6285
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6161
|
+
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
6286
6162
|
var isCardClickable = _ref.isCardClickable;
|
|
6287
6163
|
return isCardClickable ? 'pointer' : 'default';
|
|
6288
6164
|
}, function (_ref2) {
|
|
6289
6165
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
6290
6166
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
6291
6167
|
});
|
|
6292
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6168
|
+
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n background-color: var(--button-bg-color);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
6293
6169
|
var lineColor = _ref3.lineColor;
|
|
6294
6170
|
return lineColor ? "var(--color-" + lineColor + ")" : 'var(--color-primary-background)';
|
|
6295
6171
|
}, zIndexes.contentOverlay);
|
|
6296
|
-
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6172
|
+
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
|
|
6297
6173
|
var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: 24px;\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref4) {
|
|
6298
6174
|
var fullWidth = _ref4.fullWidth;
|
|
6299
6175
|
return fullWidth ? '0' : '20px';
|
|
@@ -6574,9 +6450,9 @@ var Card = function Card(_ref) {
|
|
|
6574
6450
|
}, restSecondButton), tertiaryButtonTextTruncate)))));
|
|
6575
6451
|
};
|
|
6576
6452
|
|
|
6577
|
-
var _templateObject$
|
|
6578
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
6579
|
-
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
6453
|
+
var _templateObject$H, _templateObject2$v;
|
|
6454
|
+
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
6455
|
+
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
6580
6456
|
|
|
6581
6457
|
var Cards = function Cards(_ref) {
|
|
6582
6458
|
var cards = _ref.cards,
|
|
@@ -6618,10 +6494,10 @@ var Cards = function Cards(_ref) {
|
|
|
6618
6494
|
}));
|
|
6619
6495
|
};
|
|
6620
6496
|
|
|
6621
|
-
var _templateObject$
|
|
6622
|
-
var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6623
|
-
var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6624
|
-
var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6497
|
+
var _templateObject$I, _templateObject2$w, _templateObject3$l, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
|
|
6498
|
+
var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n flex-direction: column-reverse;\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6499
|
+
var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6500
|
+
var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
|
|
6625
6501
|
var RotatorButtonsWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6626
6502
|
var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n @media ", " {\n flex-direction: column;\n gap: 10px;\n }\n"])), devices.mobile);
|
|
6627
6503
|
var ActionButtons = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n gap: 32px;\n\n .mobile-only {\n visibility: hidden;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n }\n\n @media ", " {\n .mobile-only {\n visibility: visible;\n padding-block: 24px;\n font-size: 17px;\n line-height: 24px;\n }\n\n flex-direction: row-reverse;\n gap: unset;\n justify-content: space-between;\n border-block-end: 2px solid var(--base-color-light-grey);\n\n :has(.mobile-only) {\n justify-content: left;\n }\n\n :not(:has(.mobile-only)) {\n padding-block: 12px;\n }\n\n a {\n width: fit-content;\n }\n }\n"])), devices.mobile);
|
|
@@ -6630,29 +6506,26 @@ var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_temp
|
|
|
6630
6506
|
var isSelected = _ref.isSelected;
|
|
6631
6507
|
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
6632
6508
|
});
|
|
6633
|
-
var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n
|
|
6634
|
-
var
|
|
6635
|
-
return greyscale ? 'grayscale(100%)' : 'none';
|
|
6636
|
-
}, function (_ref3) {
|
|
6637
|
-
var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
|
|
6509
|
+
var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n\n // This is really specific to the SVG that we have been provided\n // as a fallback person image. I don't think there's a simpler and\n // more general way to handle this, so if we're given a new placeholder\n // image later, we may have to change the scale here\n ", "\n"])), function (_ref2) {
|
|
6510
|
+
var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
|
|
6638
6511
|
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6639
6512
|
});
|
|
6640
6513
|
var PersonName = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n\n @media ", " {\n max-width: unset;\n text-align: left;\n font-size: 17px;\n line-height: 24px;\n }\n"])), devices.mobile);
|
|
6641
|
-
var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (
|
|
6642
|
-
var isSelected =
|
|
6514
|
+
var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (_ref3) {
|
|
6515
|
+
var isSelected = _ref3.isSelected;
|
|
6643
6516
|
return isSelected ? 'flex' : 'none';
|
|
6644
|
-
}, function (
|
|
6645
|
-
var isSelected =
|
|
6517
|
+
}, function (_ref4) {
|
|
6518
|
+
var isSelected = _ref4.isSelected;
|
|
6646
6519
|
return isSelected ? 'flex' : 'none';
|
|
6647
6520
|
});
|
|
6648
6521
|
var EmptySelectionTextSpacer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
|
|
6649
6522
|
|
|
6650
6523
|
var defaultPlaceholderImage = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c9c9c9%3Bstroke%3A%23c9c9c9%3B%7D.cls-1%2C.cls-2%2C.cls-3%7Bstroke-miterlimit%3A10%3B%7D.cls-2%7Bfill-rule%3Aevenodd%3B%7D.cls-2%2C.cls-3%7Bfill%3A%2372767c%3Bstroke%3A%2372767c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M50.42%2C89.58c21.86%2C0%2C39.58-17.72%2C39.58-39.58S72.28%2C10.42%2C50.42%2C10.42%2C10.83%2C28.14%2C10.83%2C50s17.72%2C39.58%2C39.58%2C39.58Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M50.4%2C89.58c10.88%2C0%2C20.75-4.42%2C27.92-11.54-4.96-10.46-15.58-17.71-27.92-17.71s-22.96%2C7.25-27.92%2C17.71c7.17%2C7.12%2C17%2C11.54%2C27.92%2C11.54Z%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M50.4%2C55.67c8.05%2C0%2C14.58-6.53%2C14.58-14.58s-6.53-14.58-14.58-14.58-14.58%2C6.53-14.58%2C14.58%2C6.53%2C14.58%2C14.58%2C14.58Z%22%2F%3E%3C%2Fsvg%3E";
|
|
6651
6524
|
|
|
6652
|
-
var _templateObject$
|
|
6525
|
+
var _templateObject$J, _templateObject2$x;
|
|
6653
6526
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
6654
|
-
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6655
|
-
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6527
|
+
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
6528
|
+
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
6656
6529
|
var transitioning = _ref.transitioning;
|
|
6657
6530
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
6658
6531
|
}, function (_ref2) {
|
|
@@ -7051,8 +6924,6 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7051
6924
|
onSelect = _ref.onSelect,
|
|
7052
6925
|
onApply = _ref.onApply,
|
|
7053
6926
|
onClear = _ref.onClear,
|
|
7054
|
-
_ref$greyscale = _ref.greyscale,
|
|
7055
|
-
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
7056
6927
|
_ref$selectedIndices = _ref.selectedIndices,
|
|
7057
6928
|
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
7058
6929
|
var _useViewport = useViewport(),
|
|
@@ -7193,8 +7064,7 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7193
7064
|
src: personImage,
|
|
7194
7065
|
alt: image ? name : "Placeholder image for " + name,
|
|
7195
7066
|
draggable: false,
|
|
7196
|
-
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7197
|
-
greyscale: greyscale
|
|
7067
|
+
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7198
7068
|
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7199
7069
|
isSelected: isSelected
|
|
7200
7070
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -7253,10 +7123,10 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7253
7123
|
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7254
7124
|
};
|
|
7255
7125
|
|
|
7256
|
-
var _templateObject$
|
|
7257
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7258
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7259
|
-
var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7126
|
+
var _templateObject$K, _templateObject2$y, _templateObject3$m, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
|
|
7127
|
+
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7128
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
|
|
7129
|
+
var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7260
7130
|
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7261
7131
|
var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7262
7132
|
var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
@@ -7311,12 +7181,12 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7311
7181
|
}, addressString)))))))));
|
|
7312
7182
|
};
|
|
7313
7183
|
|
|
7314
|
-
var _templateObject$
|
|
7315
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
7316
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$
|
|
7184
|
+
var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$l, _templateObject5$h, _templateObject6$c;
|
|
7185
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7186
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7317
7187
|
return props.clickable ? 'pointer' : 'default';
|
|
7318
7188
|
}, devices.mobile);
|
|
7319
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7189
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7320
7190
|
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7321
7191
|
return props.showImage ? 2 : '1 / span 4';
|
|
7322
7192
|
}, devices.mobile);
|
|
@@ -7403,16 +7273,16 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7403
7273
|
}), link.text))));
|
|
7404
7274
|
};
|
|
7405
7275
|
|
|
7406
|
-
var _templateObject$
|
|
7407
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7276
|
+
var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$m, _templateObject5$i;
|
|
7277
|
+
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7408
7278
|
var imageToLeft = _ref.imageToLeft;
|
|
7409
7279
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7410
7280
|
}, devices.mobile);
|
|
7411
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7281
|
+
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7412
7282
|
var imageToLeft = _ref2.imageToLeft;
|
|
7413
7283
|
return imageToLeft ? 'left' : 'right';
|
|
7414
7284
|
}, devices.mobile);
|
|
7415
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7285
|
+
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7416
7286
|
var imageToLeft = _ref3.imageToLeft;
|
|
7417
7287
|
return imageToLeft ? 'right' : 'left';
|
|
7418
7288
|
}, devices.mobile);
|
|
@@ -7456,10 +7326,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7456
7326
|
})))));
|
|
7457
7327
|
};
|
|
7458
7328
|
|
|
7459
|
-
var _templateObject$
|
|
7460
|
-
var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7461
|
-
var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7462
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$
|
|
7329
|
+
var _templateObject$N, _templateObject2$B, _templateObject3$p;
|
|
7330
|
+
var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
7331
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
7332
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
|
|
7463
7333
|
|
|
7464
7334
|
var _excluded$j = ["text", "onClick"];
|
|
7465
7335
|
var HotFilters = function HotFilters(_ref) {
|
|
@@ -7523,10 +7393,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7523
7393
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7524
7394
|
};
|
|
7525
7395
|
|
|
7526
|
-
var _templateObject$
|
|
7527
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7528
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
7529
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
7396
|
+
var _templateObject$O, _templateObject2$C, _templateObject3$q, _templateObject4$n;
|
|
7397
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
|
|
7398
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7399
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
|
|
7530
7400
|
var variant = _ref.variant,
|
|
7531
7401
|
theme = _ref.theme;
|
|
7532
7402
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7749,13 +7619,13 @@ var Information = function Information(_ref) {
|
|
|
7749
7619
|
})))));
|
|
7750
7620
|
};
|
|
7751
7621
|
|
|
7752
|
-
var _templateObject$
|
|
7753
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
7622
|
+
var _templateObject$P, _templateObject2$D, _templateObject3$r, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
|
|
7623
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7754
7624
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7755
7625
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7756
7626
|
}, devices.mobile);
|
|
7757
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
7758
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7627
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
7628
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
7759
7629
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7760
7630
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7761
7631
|
});
|
|
@@ -7845,275 +7715,92 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7845
7715
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7846
7716
|
};
|
|
7847
7717
|
|
|
7848
|
-
var _templateObject$
|
|
7849
|
-
var
|
|
7850
|
-
var
|
|
7851
|
-
|
|
7852
|
-
|
|
7853
|
-
|
|
7854
|
-
|
|
7855
|
-
|
|
7856
|
-
|
|
7857
|
-
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7858
|
-
});
|
|
7859
|
-
var TitleButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7860
|
-
var sponsorWidth = _ref3.sponsorWidth;
|
|
7861
|
-
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7862
|
-
});
|
|
7863
|
-
var TitleButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n position: static;\n margin-right: 0;\n }\n"])), devices.mobile);
|
|
7864
|
-
var MobileButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 0 20px 16px 20px;\n"])));
|
|
7865
|
-
var ImpactTitle = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n align-self: center;\n grid-column: ", ";\n min-width: 0;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 2;\n max-height: calc(48px * 2);\n text-align: center;\n padding-bottom: 2px;\n\n @media ", " {\n grid-column: 1;\n -webkit-line-clamp: 4;\n max-height: calc(34px * 4);\n text-align: left;\n }\n"])), function (_ref4) {
|
|
7866
|
-
var hasColumns = _ref4.hasColumns;
|
|
7867
|
-
return hasColumns ? '3' : '1';
|
|
7868
|
-
}, devices.mobile);
|
|
7869
|
-
var ImpactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n aspect-ratio: 21 / 9;\n height: auto;\n &::before {\n content: '';\n display: block;\n padding-top: calc(9 / 21 * 100%);\n }\n\n > picture,\n img,\n video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n img {\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: cover;\n }\n }\n @media ", " {\n aspect-ratio: 1 / 1;\n &::before {\n padding-top: 100%;\n }\n max-height: 100vh;\n img {\n object-fit: cover;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
7870
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 5;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n z-index: ", ";\n min-width: ", ";\n\n @media ", " {\n grid-column: 3;\n justify-content: flex-start;\n min-width: unset;\n }\n"])), zIndexes.sponsorship, function (_ref5) {
|
|
7871
|
-
var buttonWidth = _ref5.buttonWidth;
|
|
7872
|
-
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7873
|
-
}, devices.mobile);
|
|
7874
|
-
|
|
7875
|
-
var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q;
|
|
7876
|
-
var VideoPlayButton$1 = /*#__PURE__*/styled__default.button(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n background-color: var(--color-base-transparent);\n border: none;\n cursor: pointer;\n\n @media ", " {\n width: 60px;\n height: 60px;\n }\n"])), devices.mobile);
|
|
7877
|
-
var VideoControlsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
7878
|
-
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 20px;\n\n @media ", " {\n margin: 20px 4px;\n }\n"])), devices.mobile);
|
|
7879
|
-
var LeftWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7880
|
-
|
|
7881
|
-
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
7882
|
-
var videoElementId = _ref.videoElementId,
|
|
7883
|
-
_ref$loop = _ref.loop,
|
|
7884
|
-
loop = _ref$loop === void 0 ? false : _ref$loop;
|
|
7885
|
-
var _React$useState = React__default.useState(false),
|
|
7886
|
-
playing = _React$useState[0],
|
|
7887
|
-
setPlaying = _React$useState[1];
|
|
7888
|
-
var getVideoElement = function getVideoElement() {
|
|
7889
|
-
return document.querySelector("#" + videoElementId);
|
|
7890
|
-
};
|
|
7891
|
-
React__default.useEffect(function () {
|
|
7892
|
-
var video = getVideoElement();
|
|
7893
|
-
if (video) {
|
|
7894
|
-
video.loop = loop;
|
|
7895
|
-
}
|
|
7896
|
-
}, [loop]);
|
|
7897
|
-
var handlePlay = React__default.useCallback(function () {
|
|
7898
|
-
var video = getVideoElement();
|
|
7899
|
-
if (!video) return;
|
|
7900
|
-
if (playing) {
|
|
7901
|
-
video.pause();
|
|
7902
|
-
setPlaying(false);
|
|
7903
|
-
} else {
|
|
7904
|
-
video == null || video.play();
|
|
7905
|
-
setPlaying(true);
|
|
7906
|
-
}
|
|
7907
|
-
}, [playing]);
|
|
7908
|
-
return /*#__PURE__*/React__default.createElement(VideoControlsWrapper$1, {
|
|
7909
|
-
className: "video-controls-container"
|
|
7910
|
-
}, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper$1, null, /*#__PURE__*/React__default.createElement(LeftWrapper$1, null, /*#__PURE__*/React__default.createElement(VideoPlayButton$1, {
|
|
7911
|
-
id: "play",
|
|
7912
|
-
onClick: handlePlay,
|
|
7913
|
-
className: "video-play-button",
|
|
7914
|
-
"data-testid": "video-play-button",
|
|
7915
|
-
"aria-label": !playing ? 'Play' : 'Pause'
|
|
7916
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7917
|
-
iconName: !playing ? 'Play' : 'Pause',
|
|
7918
|
-
color: "white"
|
|
7919
|
-
})))));
|
|
7920
|
-
};
|
|
7718
|
+
var _templateObject$Q, _templateObject2$E, _templateObject3$s, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
|
|
7719
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
7720
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
7721
|
+
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7722
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7723
|
+
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7724
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7725
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
7726
|
+
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7921
7727
|
|
|
7922
7728
|
var _excluded$k = ["text"];
|
|
7923
|
-
var
|
|
7924
|
-
var
|
|
7925
|
-
|
|
7926
|
-
|
|
7927
|
-
|
|
7928
|
-
|
|
7929
|
-
|
|
7930
|
-
|
|
7931
|
-
|
|
7932
|
-
|
|
7933
|
-
|
|
7934
|
-
|
|
7935
|
-
|
|
7936
|
-
|
|
7937
|
-
|
|
7938
|
-
|
|
7939
|
-
|
|
7940
|
-
|
|
7941
|
-
|
|
7942
|
-
|
|
7943
|
-
|
|
7944
|
-
|
|
7945
|
-
|
|
7946
|
-
|
|
7947
|
-
|
|
7948
|
-
|
|
7949
|
-
|
|
7950
|
-
videoUrl = _useResponsiveVideo.videoUrl;
|
|
7951
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
|
|
7952
|
-
id: video.elementId,
|
|
7953
|
-
width: "100%",
|
|
7954
|
-
height: "100%",
|
|
7955
|
-
poster: posterUrl,
|
|
7956
|
-
src: videoUrl,
|
|
7957
|
-
"data-testid": "impact-video",
|
|
7958
|
-
playsInline: true
|
|
7959
|
-
}, /*#__PURE__*/React__default.createElement("source", {
|
|
7960
|
-
src: videoUrl
|
|
7961
|
-
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7962
|
-
src: posterUrl,
|
|
7963
|
-
alt: poster.alt,
|
|
7964
|
-
"data-testid": "impact-image"
|
|
7965
|
-
})), /*#__PURE__*/React__default.createElement(VideoControlsImpact, {
|
|
7966
|
-
loop: true,
|
|
7967
|
-
videoElementId: video.elementId
|
|
7968
|
-
}));
|
|
7969
|
-
};
|
|
7970
|
-
var ImpactHeaderImage = function ImpactHeaderImage(_ref2) {
|
|
7971
|
-
var mobile = _ref2.mobile,
|
|
7972
|
-
desktop = _ref2.desktop,
|
|
7973
|
-
alt = _ref2.alt;
|
|
7974
|
-
return /*#__PURE__*/React__default.createElement("picture", {
|
|
7729
|
+
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
7730
|
+
var children = _ref.children,
|
|
7731
|
+
text = _ref.text,
|
|
7732
|
+
link = _ref.link,
|
|
7733
|
+
_ref$sponsor = _ref.sponsor,
|
|
7734
|
+
sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
|
|
7735
|
+
customSponsorImage = _ref.customSponsorImage,
|
|
7736
|
+
scrollHref = _ref.scrollHref,
|
|
7737
|
+
bgUrlDesktop = _ref.bgUrlDesktop,
|
|
7738
|
+
bgUrlDevice = _ref.bgUrlDevice,
|
|
7739
|
+
_ref$bgImageAltText = _ref.bgImageAltText,
|
|
7740
|
+
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
|
|
7741
|
+
_ref$semanticLevel = _ref.semanticLevel,
|
|
7742
|
+
semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
|
|
7743
|
+
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
7744
|
+
var _ref2 = link || {},
|
|
7745
|
+
linkText = _ref2.text,
|
|
7746
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
|
|
7747
|
+
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
7748
|
+
bgUrlDesktop: bgUrlDesktop,
|
|
7749
|
+
bgUrlDevice: bgUrlDevice,
|
|
7750
|
+
"data-testid": "impact-wrapper"
|
|
7751
|
+
}, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
7752
|
+
"data-testid": "impact-sponsor"
|
|
7753
|
+
}, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
7754
|
+
"data-testid": "impact-custom-sponsor"
|
|
7755
|
+
}, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderImageWrapper, null, /*#__PURE__*/React__default.createElement("picture", {
|
|
7975
7756
|
"data-testid": "impact-picture"
|
|
7976
|
-
},
|
|
7977
|
-
srcSet:
|
|
7757
|
+
}, bgUrlDevice && (/*#__PURE__*/React__default.createElement("source", {
|
|
7758
|
+
srcSet: bgUrlDevice,
|
|
7978
7759
|
media: "" + devices.mobile,
|
|
7979
7760
|
"data-testid": "impact-mobile-image-source"
|
|
7980
|
-
}), /*#__PURE__*/React__default.createElement("source", {
|
|
7981
|
-
srcSet:
|
|
7761
|
+
})), /*#__PURE__*/React__default.createElement("source", {
|
|
7762
|
+
srcSet: bgUrlDesktop,
|
|
7982
7763
|
media: "" + devices.desktop,
|
|
7983
7764
|
"data-testid": "impact-desktop-image-source"
|
|
7984
7765
|
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7985
|
-
src:
|
|
7986
|
-
alt:
|
|
7766
|
+
src: bgUrlDesktop,
|
|
7767
|
+
alt: bgImageAltText,
|
|
7987
7768
|
"data-testid": "impact-image"
|
|
7988
|
-
}))
|
|
7989
|
-
|
|
7990
|
-
|
|
7991
|
-
|
|
7992
|
-
|
|
7993
|
-
|
|
7994
|
-
|
|
7995
|
-
}
|
|
7996
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
7997
|
-
video: video,
|
|
7998
|
-
poster: poster
|
|
7999
|
-
});
|
|
8000
|
-
};
|
|
8001
|
-
var useElementWidth = function useElementWidth() {
|
|
8002
|
-
var _React$useState = React__default.useState(undefined),
|
|
8003
|
-
width = _React$useState[0],
|
|
8004
|
-
setWidth = _React$useState[1];
|
|
8005
|
-
var observerRef = React__default.useRef(null);
|
|
8006
|
-
var ref = React__default.useCallback(function (node) {
|
|
8007
|
-
if (observerRef.current) {
|
|
8008
|
-
observerRef.current.disconnect();
|
|
8009
|
-
observerRef.current = null;
|
|
8010
|
-
}
|
|
8011
|
-
if (!node) return;
|
|
8012
|
-
observerRef.current = new ResizeObserver(function () {
|
|
8013
|
-
setWidth(node.offsetWidth);
|
|
8014
|
-
});
|
|
8015
|
-
observerRef.current.observe(node);
|
|
8016
|
-
}, []);
|
|
8017
|
-
return [ref, width];
|
|
8018
|
-
};
|
|
8019
|
-
var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
8020
|
-
var text = _ref4.text,
|
|
8021
|
-
link = _ref4.link,
|
|
8022
|
-
_ref4$sponsor = _ref4.sponsor,
|
|
8023
|
-
sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
|
|
8024
|
-
customSponsorImage = _ref4.customSponsorImage,
|
|
8025
|
-
bgUrlDesktop = _ref4.bgUrlDesktop,
|
|
8026
|
-
bgUrlDevice = _ref4.bgUrlDevice,
|
|
8027
|
-
_ref4$bgImageAltText = _ref4.bgImageAltText,
|
|
8028
|
-
bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
|
|
8029
|
-
videoUrlDesktop = _ref4.videoUrlDesktop,
|
|
8030
|
-
videoUrlMobile = _ref4.videoUrlMobile,
|
|
8031
|
-
className = _ref4.className;
|
|
8032
|
-
var _useViewport = useViewport(),
|
|
8033
|
-
isMobile = _useViewport.isMobile,
|
|
8034
|
-
hydrated = _useViewport.hydrated;
|
|
8035
|
-
var _useElementWidth = useElementWidth(),
|
|
8036
|
-
buttonRef = _useElementWidth[0],
|
|
8037
|
-
buttonWidth = _useElementWidth[1];
|
|
8038
|
-
var _useElementWidth2 = useElementWidth(),
|
|
8039
|
-
sponsorRef = _useElementWidth2[0],
|
|
8040
|
-
sponsorWidth = _useElementWidth2[1];
|
|
8041
|
-
var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
|
|
8042
|
-
var _ref5 = link || {},
|
|
8043
|
-
linkText = _ref5.text,
|
|
8044
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
|
|
8045
|
-
var video = {
|
|
8046
|
-
elementId: 'impact-header-video',
|
|
8047
|
-
desktop: videoUrlDesktop,
|
|
8048
|
-
mobile: videoUrlMobile
|
|
8049
|
-
};
|
|
8050
|
-
var poster = {
|
|
8051
|
-
desktop: bgUrlDesktop,
|
|
8052
|
-
mobile: bgUrlDevice,
|
|
8053
|
-
alt: bgImageAltText
|
|
8054
|
-
};
|
|
8055
|
-
var sponsorContent = sponsor ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
8056
|
-
"data-testid": customSponsorImage ? 'impact-custom-sponsor' : undefined
|
|
8057
|
-
}, customSponsorImage != null ? customSponsorImage : {}))) : null;
|
|
8058
|
-
var hasButton = !isMobile && !!(link && linkText);
|
|
8059
|
-
var showSideColumns = hasButton || !!sponsor;
|
|
8060
|
-
var showTitleBar = !!(text || hasButton || sponsor);
|
|
8061
|
-
var renderSponsor = function renderSponsor() {
|
|
8062
|
-
if (isMobile) {
|
|
8063
|
-
if (!sponsorContent) return null;
|
|
8064
|
-
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8065
|
-
"data-testid": "impact-sponsor"
|
|
8066
|
-
}, sponsorContent);
|
|
8067
|
-
}
|
|
8068
|
-
if (!showSideColumns) return null;
|
|
8069
|
-
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8070
|
-
ref: sponsorRef,
|
|
8071
|
-
buttonWidth: buttonWidth,
|
|
8072
|
-
"data-testid": "impact-sponsor"
|
|
8073
|
-
}, sponsorContent);
|
|
8074
|
-
};
|
|
8075
|
-
if (!hydrated) return null;
|
|
8076
|
-
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
8077
|
-
theme: exports.ThemeType.Cinema
|
|
8078
|
-
}, showTitleBar ? (/*#__PURE__*/React__default.createElement(ImpactHeaderWrapper, {
|
|
8079
|
-
className: className
|
|
8080
|
-
}, /*#__PURE__*/React__default.createElement(ImpactTitleWrapper, {
|
|
8081
|
-
"data-testid": "impact-title-wrapper",
|
|
8082
|
-
sponsorPresent: !!sponsor,
|
|
8083
|
-
hasButton: hasButton
|
|
8084
|
-
}, !isMobile && showSideColumns ? (/*#__PURE__*/React__default.createElement(TitleButtonWrapper, {
|
|
8085
|
-
sponsorWidth: sponsorWidth
|
|
8086
|
-
}, hasButton ? (/*#__PURE__*/React__default.createElement(TitleButton, Object.assign({
|
|
8087
|
-
ref: buttonRef
|
|
8088
|
-
}, restLink, {
|
|
7769
|
+
}))), /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
|
|
7770
|
+
"data-testid": "impact-logo"
|
|
7771
|
+
}, children) : null, text ? (/*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
7772
|
+
"data-testid": "impact-text"
|
|
7773
|
+
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
7774
|
+
level: 3,
|
|
7775
|
+
semanticLevel: semanticLevel
|
|
7776
|
+
}, truncatedText))) : null, link ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
|
|
8089
7777
|
"data-testid": "impact-link"
|
|
8090
|
-
}), linkText)) : null)
|
|
8091
|
-
|
|
8092
|
-
|
|
8093
|
-
|
|
8094
|
-
|
|
8095
|
-
|
|
8096
|
-
|
|
8097
|
-
|
|
8098
|
-
|
|
8099
|
-
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
7778
|
+
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null), scrollHref ? (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
7779
|
+
"data-testid": "impact-scroll-link"
|
|
7780
|
+
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
7781
|
+
iconName: "Arrow",
|
|
7782
|
+
iconDirection: "down",
|
|
7783
|
+
href: scrollHref,
|
|
7784
|
+
color: ThemeColor['base-white'],
|
|
7785
|
+
hoverColor: ThemeColor['base-white']
|
|
7786
|
+
}, "Scroll Down"))) : null);
|
|
8100
7787
|
};
|
|
8101
7788
|
|
|
8102
|
-
var _templateObject$
|
|
8103
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7789
|
+
var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$q, _templateObject5$l;
|
|
7790
|
+
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
8104
7791
|
var color = _ref.color;
|
|
8105
7792
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
8106
7793
|
}, devices.mobileAndTablet);
|
|
8107
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7794
|
+
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8108
7795
|
var hasImage = _ref2.hasImage;
|
|
8109
7796
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8110
7797
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8111
7798
|
var hasImage = _ref3.hasImage;
|
|
8112
7799
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8113
7800
|
});
|
|
8114
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8115
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8116
|
-
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7801
|
+
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
7802
|
+
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
7803
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
8117
7804
|
|
|
8118
7805
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
8119
7806
|
var _image$src, _image$alt;
|
|
@@ -8127,7 +7814,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8127
7814
|
"data-testid": "wrapper"
|
|
8128
7815
|
}, /*#__PURE__*/React__default.createElement(LeftPanel, {
|
|
8129
7816
|
hasImage: hasImage
|
|
8130
|
-
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
7817
|
+
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
|
|
8131
7818
|
"data-testid": "scroll-link"
|
|
8132
7819
|
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
8133
7820
|
iconName: "Arrow",
|
|
@@ -8143,11 +7830,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8143
7830
|
})))));
|
|
8144
7831
|
};
|
|
8145
7832
|
|
|
8146
|
-
var _templateObject$
|
|
8147
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$
|
|
8148
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8149
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8150
|
-
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7833
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
7834
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
7835
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
7836
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7837
|
+
var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
8151
7838
|
var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
|
|
8152
7839
|
var theme = _ref.theme;
|
|
8153
7840
|
return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
@@ -8357,7 +8044,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8357
8044
|
})))))))))));
|
|
8358
8045
|
};
|
|
8359
8046
|
|
|
8360
|
-
var _templateObject$
|
|
8047
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$s;
|
|
8361
8048
|
var GRID = {
|
|
8362
8049
|
desktop: {
|
|
8363
8050
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8370,19 +8057,19 @@ var GRID = {
|
|
|
8370
8057
|
right: '2 / 1 / 3 / 15'
|
|
8371
8058
|
}
|
|
8372
8059
|
};
|
|
8373
|
-
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8060
|
+
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8374
8061
|
var $background = _ref.$background;
|
|
8375
8062
|
return "var(--color-" + $background + ")";
|
|
8376
8063
|
});
|
|
8377
|
-
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8064
|
+
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8378
8065
|
var hasImage = _ref2.hasImage;
|
|
8379
8066
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8380
8067
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8381
8068
|
var hasImage = _ref3.hasImage;
|
|
8382
8069
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8383
8070
|
});
|
|
8384
|
-
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8385
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8071
|
+
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
8072
|
+
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8386
8073
|
|
|
8387
8074
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
8388
8075
|
var _image$src, _image$alt;
|
|
@@ -8405,10 +8092,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8405
8092
|
})))));
|
|
8406
8093
|
};
|
|
8407
8094
|
|
|
8408
|
-
var _templateObject$
|
|
8409
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8410
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8411
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8095
|
+
var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
|
|
8096
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8097
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
8098
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8412
8099
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
8413
8100
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8414
8101
|
var invert = _ref.invert,
|
|
@@ -8519,7 +8206,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8519
8206
|
};
|
|
8520
8207
|
|
|
8521
8208
|
var _excluded$l = ["text"];
|
|
8522
|
-
var useResponsiveVideo
|
|
8209
|
+
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
8523
8210
|
var mobileVideo = video.mobile || video.desktop;
|
|
8524
8211
|
var desktopVideo = video.desktop || video.mobile;
|
|
8525
8212
|
var mobilePoster = poster.mobile || poster.desktop;
|
|
@@ -8540,10 +8227,10 @@ var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
|
|
|
8540
8227
|
videoUrl: videoUrl
|
|
8541
8228
|
};
|
|
8542
8229
|
};
|
|
8543
|
-
var VideoWithControls
|
|
8230
|
+
var VideoWithControls = function VideoWithControls(_ref) {
|
|
8544
8231
|
var video = _ref.video,
|
|
8545
8232
|
poster = _ref.poster;
|
|
8546
|
-
var _useResponsiveVideo = useResponsiveVideo
|
|
8233
|
+
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
8547
8234
|
posterUrl = _useResponsiveVideo.posterUrl,
|
|
8548
8235
|
videoUrl = _useResponsiveVideo.videoUrl;
|
|
8549
8236
|
var isIOS = useIOS();
|
|
@@ -8596,7 +8283,7 @@ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
|
|
|
8596
8283
|
if (!video.desktop && !video.mobile) {
|
|
8597
8284
|
return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
|
|
8598
8285
|
}
|
|
8599
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls
|
|
8286
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8600
8287
|
video: video,
|
|
8601
8288
|
poster: poster
|
|
8602
8289
|
});
|
|
@@ -8659,11 +8346,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8659
8346
|
}), linkText))))));
|
|
8660
8347
|
};
|
|
8661
8348
|
|
|
8662
|
-
var _templateObject$
|
|
8663
|
-
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8664
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8665
|
-
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8666
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8349
|
+
var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$d;
|
|
8350
|
+
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8351
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8352
|
+
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8353
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8667
8354
|
var hasImages = _ref.hasImages;
|
|
8668
8355
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8669
8356
|
}, devices.mobile, function (_ref2) {
|
|
@@ -8738,10 +8425,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8738
8425
|
}))))));
|
|
8739
8426
|
};
|
|
8740
8427
|
|
|
8741
|
-
var _templateObject$
|
|
8742
|
-
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8743
|
-
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
8744
|
-
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8428
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
|
|
8429
|
+
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
8430
|
+
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8431
|
+
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8745
8432
|
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
8746
8433
|
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8747
8434
|
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8897,19 +8584,16 @@ var Pagination = function Pagination(_ref) {
|
|
|
8897
8584
|
}))))));
|
|
8898
8585
|
};
|
|
8899
8586
|
|
|
8900
|
-
var _templateObject$
|
|
8901
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8902
|
-
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8903
|
-
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8904
|
-
});
|
|
8587
|
+
var _templateObject$X;
|
|
8588
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8905
8589
|
|
|
8906
|
-
var _templateObject$
|
|
8907
|
-
var TextWrapper$
|
|
8908
|
-
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$
|
|
8590
|
+
var _templateObject$Y, _templateObject2$L;
|
|
8591
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8592
|
+
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8909
8593
|
|
|
8910
|
-
var _templateObject
|
|
8911
|
-
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject
|
|
8912
|
-
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
8594
|
+
var _templateObject$Z, _templateObject2$M;
|
|
8595
|
+
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
|
|
8596
|
+
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8913
8597
|
|
|
8914
8598
|
var Person = function Person(_ref) {
|
|
8915
8599
|
var person = _ref.person,
|
|
@@ -8932,7 +8616,7 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8932
8616
|
var _role$people;
|
|
8933
8617
|
var role = _ref.role,
|
|
8934
8618
|
className = _ref.className;
|
|
8935
|
-
return /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
8619
|
+
return /*#__PURE__*/React__default.createElement(TextWrapper$2, {
|
|
8936
8620
|
className: className
|
|
8937
8621
|
}, /*#__PURE__*/React__default.createElement(RoleContent, {
|
|
8938
8622
|
title: "role",
|
|
@@ -8948,17 +8632,13 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8948
8632
|
})));
|
|
8949
8633
|
};
|
|
8950
8634
|
|
|
8951
|
-
var _templateObject$
|
|
8952
|
-
var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8953
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8954
|
-
var greyscale = _ref.greyscale;
|
|
8955
|
-
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8956
|
-
});
|
|
8635
|
+
var _templateObject$_, _templateObject2$N;
|
|
8636
|
+
var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8637
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
|
|
8957
8638
|
|
|
8958
8639
|
var PersonCard = function PersonCard(_ref) {
|
|
8959
8640
|
var role = _ref.role,
|
|
8960
|
-
className = _ref.className
|
|
8961
|
-
greyscale = _ref.greyscale;
|
|
8641
|
+
className = _ref.className;
|
|
8962
8642
|
var hasHeadshot = React__default.useMemo(function () {
|
|
8963
8643
|
var _role$people;
|
|
8964
8644
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
@@ -8966,9 +8646,7 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8966
8646
|
}, [role]);
|
|
8967
8647
|
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
8968
8648
|
className: className
|
|
8969
|
-
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
|
|
8970
|
-
greyscale: greyscale
|
|
8971
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
8649
|
+
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
|
|
8972
8650
|
src: role.people[0].headshot,
|
|
8973
8651
|
alt: role.people[0].name
|
|
8974
8652
|
})), /*#__PURE__*/React__default.createElement(PersonDetails, {
|
|
@@ -8982,31 +8660,26 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8982
8660
|
|
|
8983
8661
|
var PeopleListing = function PeopleListing(_ref) {
|
|
8984
8662
|
var roles = _ref.roles,
|
|
8985
|
-
className = _ref.className
|
|
8986
|
-
greyscale = _ref.greyscale,
|
|
8987
|
-
largeDesktopColumns = _ref.largeDesktopColumns;
|
|
8663
|
+
className = _ref.className;
|
|
8988
8664
|
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
|
|
8989
|
-
className: className
|
|
8990
|
-
"$largeDesktopColumns": largeDesktopColumns
|
|
8665
|
+
className: className
|
|
8991
8666
|
}, roles.map(function (role, index) {
|
|
8992
8667
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8993
8668
|
key: role.name + "-" + index
|
|
8994
8669
|
}, /*#__PURE__*/React__default.createElement(PersonCard, {
|
|
8995
|
-
role: role
|
|
8996
|
-
className: className,
|
|
8997
|
-
greyscale: greyscale
|
|
8670
|
+
role: role
|
|
8998
8671
|
}));
|
|
8999
8672
|
}));
|
|
9000
8673
|
};
|
|
9001
8674
|
|
|
9002
|
-
var _templateObject
|
|
9003
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
9004
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
8675
|
+
var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$u;
|
|
8676
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8677
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
9005
8678
|
var columnCount = _ref.columnCount;
|
|
9006
8679
|
return "repeat(" + columnCount + ", 1fr)";
|
|
9007
8680
|
}, devices.mobile, devices.tablet);
|
|
9008
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9009
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8681
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
8682
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
9010
8683
|
|
|
9011
8684
|
// Get the total character length of a property in an array of objects
|
|
9012
8685
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -9095,7 +8768,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9095
8768
|
columnSpanSmallDevice: 1,
|
|
9096
8769
|
key: "credit-entry-" + name + "-" + index,
|
|
9097
8770
|
"data-testid": "credit-entry"
|
|
9098
|
-
}, /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
8771
|
+
}, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
9099
8772
|
title: "role",
|
|
9100
8773
|
"data-roh": dataROH
|
|
9101
8774
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
@@ -9133,8 +8806,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9133
8806
|
}, creditEntries);
|
|
9134
8807
|
};
|
|
9135
8808
|
|
|
9136
|
-
var _templateObject$
|
|
9137
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$
|
|
8809
|
+
var _templateObject$10;
|
|
8810
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
9138
8811
|
|
|
9139
8812
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
9140
8813
|
var items = _ref.items;
|
|
@@ -9152,14 +8825,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
9152
8825
|
}));
|
|
9153
8826
|
};
|
|
9154
8827
|
|
|
9155
|
-
var _templateObject$
|
|
8828
|
+
var _templateObject$11, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
9156
8829
|
var LENGTH_TEXT = 28;
|
|
9157
8830
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9158
8831
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9159
8832
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9160
8833
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9161
8834
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9162
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8835
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
9163
8836
|
var imageToLeft = _ref.imageToLeft;
|
|
9164
8837
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9165
8838
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9169,7 +8842,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 ||
|
|
|
9169
8842
|
var asCard = _ref3.asCard;
|
|
9170
8843
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9171
8844
|
});
|
|
9172
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8845
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
9173
8846
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9174
8847
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9175
8848
|
}, function (_ref5) {
|
|
@@ -9193,7 +8866,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$C ||
|
|
|
9193
8866
|
}
|
|
9194
8867
|
return '';
|
|
9195
8868
|
});
|
|
9196
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8869
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
9197
8870
|
var marginBottom = _ref7.marginBottom;
|
|
9198
8871
|
return marginBottom + "px";
|
|
9199
8872
|
}, function (_ref8) {
|
|
@@ -9424,25 +9097,25 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9424
9097
|
}))));
|
|
9425
9098
|
};
|
|
9426
9099
|
|
|
9427
|
-
var _templateObject$
|
|
9100
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
|
|
9428
9101
|
var LENGTH_TEXT$2 = 28;
|
|
9429
9102
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9430
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9103
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9431
9104
|
var imageToLeft = _ref.imageToLeft;
|
|
9432
9105
|
return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
|
|
9433
9106
|
}, devices.tablet, function (_ref2) {
|
|
9434
9107
|
var imageToLeft = _ref2.imageToLeft;
|
|
9435
9108
|
return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
|
|
9436
9109
|
}, devices.mobile);
|
|
9437
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9110
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9438
9111
|
var imageToLeft = _ref3.imageToLeft;
|
|
9439
9112
|
return imageToLeft ? 'left' : 'right';
|
|
9440
9113
|
}, devices.mobile);
|
|
9441
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9114
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
9442
9115
|
var imageToLeft = _ref4.imageToLeft;
|
|
9443
9116
|
return imageToLeft ? 'right' : 'left';
|
|
9444
9117
|
}, devices.mobile);
|
|
9445
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$
|
|
9118
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9446
9119
|
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9447
9120
|
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9448
9121
|
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
|
|
@@ -9467,8 +9140,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
|
|
|
9467
9140
|
return '';
|
|
9468
9141
|
});
|
|
9469
9142
|
|
|
9470
|
-
var _templateObject$
|
|
9471
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9143
|
+
var _templateObject$13;
|
|
9144
|
+
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
9472
9145
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9473
9146
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9474
9147
|
return aspectRatio;
|
|
@@ -9499,7 +9172,7 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
9499
9172
|
return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
|
|
9500
9173
|
};
|
|
9501
9174
|
|
|
9502
|
-
var VideoWithControls$
|
|
9175
|
+
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
9503
9176
|
var video = _ref.video,
|
|
9504
9177
|
settings = _ref.settings;
|
|
9505
9178
|
var videoRef = React.useRef(null);
|
|
@@ -9574,7 +9247,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9574
9247
|
}, isImage && (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
9575
9248
|
aspectRatio: exports.AspectRatio['4:3'],
|
|
9576
9249
|
"data-testid": "AspectRatioWrapper"
|
|
9577
|
-
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
9250
|
+
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
|
|
9578
9251
|
video: children,
|
|
9579
9252
|
settings: videoSettings
|
|
9580
9253
|
}));
|
|
@@ -9637,7 +9310,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9637
9310
|
size: titleSize,
|
|
9638
9311
|
hierarchy: titleHierarchy
|
|
9639
9312
|
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
|
|
9640
|
-
size: "
|
|
9313
|
+
size: "medium"
|
|
9641
9314
|
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
|
|
9642
9315
|
size: "large",
|
|
9643
9316
|
dangerouslySetInnerHTML: {
|
|
@@ -9650,65 +9323,9 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9650
9323
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9651
9324
|
};
|
|
9652
9325
|
|
|
9653
|
-
var _templateObject$
|
|
9654
|
-
var
|
|
9655
|
-
|
|
9656
|
-
/**
|
|
9657
|
-
* DEPRECATED. Use RadioGroup2 instead
|
|
9658
|
-
*/
|
|
9659
|
-
var RadioGroup = function RadioGroup(_ref) {
|
|
9660
|
-
var radios = _ref.radios,
|
|
9661
|
-
_ref$columnStartDeskt = _ref.columnStartDesktop,
|
|
9662
|
-
columnStartDesktop = _ref$columnStartDeskt === void 0 ? 1 : _ref$columnStartDeskt,
|
|
9663
|
-
_ref$columnStartDevic = _ref.columnStartDevice,
|
|
9664
|
-
columnStartDevice = _ref$columnStartDevic === void 0 ? 1 : _ref$columnStartDevic,
|
|
9665
|
-
_ref$columnSpanDeskto = _ref.columnSpanDesktop,
|
|
9666
|
-
columnSpanDesktop = _ref$columnSpanDeskto === void 0 ? 16 : _ref$columnSpanDeskto,
|
|
9667
|
-
_ref$columnSpanDevice = _ref.columnSpanDevice,
|
|
9668
|
-
columnSpanDevice = _ref$columnSpanDevice === void 0 ? 14 : _ref$columnSpanDevice,
|
|
9669
|
-
columnStartSmallDevice = _ref.columnStartSmallDevice,
|
|
9670
|
-
columnSpanSmallDevice = _ref.columnSpanSmallDevice,
|
|
9671
|
-
onChange = _ref.onChange;
|
|
9672
|
-
var _useState = React.useState(radios != null ? radios : []),
|
|
9673
|
-
radioProps = _useState[0],
|
|
9674
|
-
setRadioProps = _useState[1];
|
|
9675
|
-
var _useState2 = React.useState(null),
|
|
9676
|
-
checkedIndex = _useState2[0],
|
|
9677
|
-
setCheckedIndex = _useState2[1];
|
|
9678
|
-
var handleChange = function handleChange(_value, index) {
|
|
9679
|
-
setCheckedIndex(index);
|
|
9680
|
-
var newRadioProps = radios == null ? void 0 : radios.map(function (radio, i) {
|
|
9681
|
-
return _extends({}, radio, {
|
|
9682
|
-
checked: i === index
|
|
9683
|
-
});
|
|
9684
|
-
});
|
|
9685
|
-
setRadioProps(newRadioProps != null ? newRadioProps : []);
|
|
9686
|
-
onChange == null || onChange(radios ? radios[index] : undefined);
|
|
9687
|
-
};
|
|
9688
|
-
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9689
|
-
columnStartDesktop: columnStartDesktop,
|
|
9690
|
-
columnSpanDesktop: columnSpanDesktop,
|
|
9691
|
-
columnStartDevice: columnStartDevice,
|
|
9692
|
-
columnSpanDevice: columnSpanDevice,
|
|
9693
|
-
columnStartSmallDevice: columnStartSmallDevice,
|
|
9694
|
-
columnSpanSmallDevice: columnSpanSmallDevice
|
|
9695
|
-
}, /*#__PURE__*/React__default.createElement(RadioGroupContainer, null, radioProps == null ? void 0 : radioProps.map(function (radio, i) {
|
|
9696
|
-
var _radio$label;
|
|
9697
|
-
return /*#__PURE__*/React__default.createElement(Radio, {
|
|
9698
|
-
key: ((_radio$label = radio.label) != null ? _radio$label : 'defaultRadioKey') + i,
|
|
9699
|
-
checked: i === checkedIndex,
|
|
9700
|
-
// error={radio.error} // TO DO: Add error state - design not yet available
|
|
9701
|
-
label: radio.label,
|
|
9702
|
-
onChange: function onChange(e) {
|
|
9703
|
-
return handleChange(e, i);
|
|
9704
|
-
}
|
|
9705
|
-
});
|
|
9706
|
-
})));
|
|
9707
|
-
};
|
|
9708
|
-
|
|
9709
|
-
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
9710
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9711
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9326
|
+
var _templateObject$14, _templateObject2$Q, _templateObject3$C;
|
|
9327
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9328
|
+
var RadioGroup = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9712
9329
|
var horizontalMode = _ref.horizontalMode;
|
|
9713
9330
|
if (horizontalMode) return 'row';
|
|
9714
9331
|
return 'column';
|
|
@@ -9716,7 +9333,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_temp
|
|
|
9716
9333
|
var gap = _ref2.gap;
|
|
9717
9334
|
return gap + "px";
|
|
9718
9335
|
});
|
|
9719
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9336
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9720
9337
|
var darkMode = _ref3.darkMode;
|
|
9721
9338
|
if (darkMode) return 'var(--base-color-white)';
|
|
9722
9339
|
return 'var(--base-color-errorstate)';
|
|
@@ -9771,7 +9388,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9771
9388
|
var changeHandler = function changeHandler(e) {
|
|
9772
9389
|
onChange == null || onChange(e.target.value);
|
|
9773
9390
|
};
|
|
9774
|
-
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup
|
|
9391
|
+
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup, {
|
|
9775
9392
|
gap: gap,
|
|
9776
9393
|
horizontalMode: horizontalMode
|
|
9777
9394
|
}, radios.map(function (radio, idx) {
|
|
@@ -9793,10 +9410,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9793
9410
|
}, error))));
|
|
9794
9411
|
};
|
|
9795
9412
|
|
|
9796
|
-
var _templateObject$
|
|
9797
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9798
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9799
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9413
|
+
var _templateObject$15, _templateObject2$R, _templateObject3$D;
|
|
9414
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9415
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9416
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9800
9417
|
|
|
9801
9418
|
/* eslint-disable react/no-danger */
|
|
9802
9419
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9852,8 +9469,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9852
9469
|
return null;
|
|
9853
9470
|
};
|
|
9854
9471
|
|
|
9855
|
-
var _templateObject$
|
|
9856
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9472
|
+
var _templateObject$16;
|
|
9473
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9857
9474
|
|
|
9858
9475
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9859
9476
|
var HarmonicSize = {
|
|
@@ -9895,420 +9512,39 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9895
9512
|
}, description)))));
|
|
9896
9513
|
};
|
|
9897
9514
|
|
|
9898
|
-
var _templateObject$
|
|
9899
|
-
var
|
|
9900
|
-
|
|
9901
|
-
return "3px solid " + theme.colors.lapisLazuli;
|
|
9902
|
-
}, function (_ref2) {
|
|
9903
|
-
var theme = _ref2.theme;
|
|
9904
|
-
return theme.colors.lightgrey;
|
|
9905
|
-
}, function (_ref3) {
|
|
9906
|
-
var theme = _ref3.theme;
|
|
9907
|
-
return theme.colors.lightgrey;
|
|
9908
|
-
});
|
|
9909
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9910
|
-
var theme = _ref4.theme;
|
|
9911
|
-
return theme.colors.darkgrey;
|
|
9912
|
-
});
|
|
9913
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9914
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9915
|
-
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
9916
|
-
var theme = _ref5.theme;
|
|
9917
|
-
return {
|
|
9918
|
-
iconName: 'DropdownArrow',
|
|
9919
|
-
color: theme.colors.black,
|
|
9920
|
-
title: 'Select Arrow'
|
|
9921
|
-
};
|
|
9922
|
-
})(_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"])));
|
|
9923
|
-
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9924
|
-
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9925
|
-
var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
9926
|
-
var Option = /*#__PURE__*/styled__default.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9927
|
-
var theme = _ref6.theme,
|
|
9928
|
-
hover = _ref6.hover;
|
|
9929
|
-
var _theme$colors = theme.colors,
|
|
9930
|
-
lightgrey = _theme$colors.lightgrey,
|
|
9931
|
-
midgrey = _theme$colors.midgrey;
|
|
9932
|
-
if (hover) return "background-color: " + midgrey;
|
|
9933
|
-
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
9934
|
-
});
|
|
9935
|
-
var selectStyles = function selectStyles(width, height) {
|
|
9936
|
-
return styled.css(_templateObject0$7 || (_templateObject0$7 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
|
|
9937
|
-
};
|
|
9938
|
-
var SelectList = /*#__PURE__*/styled__default.ul(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
9939
|
-
var width = _ref7.width,
|
|
9940
|
-
height = _ref7.height;
|
|
9941
|
-
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
9942
|
-
}, stateStyles, noMarginAndPaddingStyles, listItemStyles, borderStyles, ArrowIcon);
|
|
9943
|
-
|
|
9944
|
-
var useKeyboardAccessibility = function useKeyboardAccessibility(_ref) {
|
|
9945
|
-
var selectRef = _ref.selectRef,
|
|
9946
|
-
optionsRef = _ref.optionsRef,
|
|
9947
|
-
shouldHighlightOption = _ref.shouldHighlightOption;
|
|
9948
|
-
var _useState = React.useState(-1),
|
|
9949
|
-
itemToHighlight = _useState[0],
|
|
9950
|
-
setItemToHighlight = _useState[1];
|
|
9951
|
-
var clampIndex = function clampIndex(index) {
|
|
9952
|
-
if (index < -1) return -1;
|
|
9953
|
-
if (index > optionsRef.current.length - 1) return optionsRef.current.length - 1;
|
|
9954
|
-
return index;
|
|
9955
|
-
};
|
|
9956
|
-
var highlightNextOption = function highlightNextOption() {
|
|
9957
|
-
return setItemToHighlight(function (prev) {
|
|
9958
|
-
return clampIndex(prev + 1);
|
|
9959
|
-
});
|
|
9960
|
-
};
|
|
9961
|
-
var highlightPrevOption = function highlightPrevOption() {
|
|
9962
|
-
return setItemToHighlight(function (prev) {
|
|
9963
|
-
return clampIndex(prev - 1);
|
|
9964
|
-
});
|
|
9965
|
-
};
|
|
9966
|
-
var reset = function reset() {
|
|
9967
|
-
var _selectRef$current;
|
|
9968
|
-
(_selectRef$current = selectRef.current) == null || _selectRef$current.blur();
|
|
9969
|
-
setItemToHighlight(-1);
|
|
9970
|
-
};
|
|
9971
|
-
var handleKeyUp = function handleKeyUp(event) {
|
|
9972
|
-
if (!shouldHighlightOption) return undefined;
|
|
9973
|
-
var shouldHighlightOptionNext = event.key === 'ArrowDown';
|
|
9974
|
-
var shouldHighlightOptionPrev = event.key === 'ArrowUp';
|
|
9975
|
-
if (shouldHighlightOptionNext) return highlightNextOption();
|
|
9976
|
-
if (shouldHighlightOptionPrev) return highlightPrevOption();
|
|
9977
|
-
return undefined;
|
|
9978
|
-
};
|
|
9979
|
-
var preventScrollingWhileNavigating = function preventScrollingWhileNavigating(event) {
|
|
9980
|
-
if (!shouldHighlightOption) return;
|
|
9981
|
-
if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return;
|
|
9982
|
-
event.preventDefault();
|
|
9983
|
-
};
|
|
9984
|
-
var handleHighlighted = function handleHighlighted(cb) {
|
|
9985
|
-
return function (event) {
|
|
9986
|
-
if (itemToHighlight === -1) return;
|
|
9987
|
-
if (event.key !== 'Enter') return;
|
|
9988
|
-
cb(itemToHighlight);
|
|
9989
|
-
reset();
|
|
9990
|
-
};
|
|
9991
|
-
};
|
|
9992
|
-
React.useEffect(function () {
|
|
9993
|
-
if (shouldHighlightOption) return;
|
|
9994
|
-
reset();
|
|
9995
|
-
}, [shouldHighlightOption]);
|
|
9996
|
-
return {
|
|
9997
|
-
handleKeyUp: handleKeyUp,
|
|
9998
|
-
preventScrollingWhileNavigating: preventScrollingWhileNavigating,
|
|
9999
|
-
handleHighlighted: handleHighlighted,
|
|
10000
|
-
itemToHighlight: itemToHighlight
|
|
10001
|
-
};
|
|
10002
|
-
};
|
|
10003
|
-
var useVisualAccessibility = function useVisualAccessibility(_ref2) {
|
|
10004
|
-
var selectRef = _ref2.selectRef,
|
|
10005
|
-
isSelectDisabled = _ref2.isSelectDisabled;
|
|
10006
|
-
var addFocusClass = function addFocusClass() {
|
|
10007
|
-
var _selectRef$current2;
|
|
10008
|
-
(_selectRef$current2 = selectRef.current) == null || _selectRef$current2.classList.add('focus');
|
|
10009
|
-
};
|
|
10010
|
-
var removeFocusClass = function removeFocusClass() {
|
|
10011
|
-
var _selectRef$current3;
|
|
10012
|
-
(_selectRef$current3 = selectRef.current) == null || _selectRef$current3.classList.remove('focus');
|
|
10013
|
-
};
|
|
10014
|
-
var toggleFocus = function toggleFocus() {
|
|
10015
|
-
var _selectRef$current4;
|
|
10016
|
-
if ((_selectRef$current4 = selectRef.current) != null && _selectRef$current4.classList.contains('focus')) removeFocusClass();else addFocusClass();
|
|
10017
|
-
};
|
|
10018
|
-
var withClickAwayHandler = function withClickAwayHandler(cb) {
|
|
10019
|
-
return function (event) {
|
|
10020
|
-
if (!selectRef.current) return;
|
|
10021
|
-
if (selectRef.current.contains(event.target)) return;
|
|
10022
|
-
removeFocusClass();
|
|
10023
|
-
cb();
|
|
10024
|
-
};
|
|
10025
|
-
};
|
|
10026
|
-
React.useEffect(function () {
|
|
10027
|
-
if (!selectRef.current) return;
|
|
10028
|
-
if (isSelectDisabled) {
|
|
10029
|
-
selectRef.current.classList.add('disabled');
|
|
10030
|
-
} else selectRef.current.classList.remove('disabled');
|
|
10031
|
-
}, [isSelectDisabled]);
|
|
10032
|
-
return {
|
|
10033
|
-
withClickAwayHandler: withClickAwayHandler,
|
|
10034
|
-
toggleFocus: toggleFocus,
|
|
10035
|
-
addFocusClass: addFocusClass,
|
|
10036
|
-
removeFocusClass: removeFocusClass
|
|
10037
|
-
};
|
|
10038
|
-
};
|
|
10039
|
-
var useAccessibility = function useAccessibility(props) {
|
|
10040
|
-
var selectRef = props.selectRef;
|
|
10041
|
-
var _useKeyboardAccessibi = useKeyboardAccessibility(props),
|
|
10042
|
-
handleKeyUp = _useKeyboardAccessibi.handleKeyUp,
|
|
10043
|
-
preventScrollingWhileNavigating = _useKeyboardAccessibi.preventScrollingWhileNavigating,
|
|
10044
|
-
handleHighlighted = _useKeyboardAccessibi.handleHighlighted,
|
|
10045
|
-
itemToHighlight = _useKeyboardAccessibi.itemToHighlight;
|
|
10046
|
-
var _useVisualAccessibili = useVisualAccessibility(props),
|
|
10047
|
-
addFocusClass = _useVisualAccessibili.addFocusClass,
|
|
10048
|
-
removeFocusClass = _useVisualAccessibili.removeFocusClass,
|
|
10049
|
-
toggleFocus = _useVisualAccessibili.toggleFocus,
|
|
10050
|
-
withClickAwayHandler = _useVisualAccessibili.withClickAwayHandler;
|
|
10051
|
-
React.useEffect(function () {
|
|
10052
|
-
if (!selectRef.current) return undefined;
|
|
10053
|
-
selectRef.current.addEventListener('keydown', preventScrollingWhileNavigating);
|
|
10054
|
-
selectRef.current.addEventListener('keyup', handleKeyUp);
|
|
10055
|
-
selectRef.current.addEventListener('click', toggleFocus);
|
|
10056
|
-
selectRef.current.addEventListener('focus', addFocusClass);
|
|
10057
|
-
selectRef.current.addEventListener('blur', removeFocusClass);
|
|
10058
|
-
return function () {
|
|
10059
|
-
var _selectRef$current5, _selectRef$current6, _selectRef$current7, _selectRef$current8, _selectRef$current9;
|
|
10060
|
-
(_selectRef$current5 = selectRef.current) == null || _selectRef$current5.removeEventListener('keydown', preventScrollingWhileNavigating);
|
|
10061
|
-
(_selectRef$current6 = selectRef.current) == null || _selectRef$current6.removeEventListener('keyup', handleKeyUp);
|
|
10062
|
-
(_selectRef$current7 = selectRef.current) == null || _selectRef$current7.removeEventListener('click', toggleFocus);
|
|
10063
|
-
(_selectRef$current8 = selectRef.current) == null || _selectRef$current8.removeEventListener('focus', addFocusClass);
|
|
10064
|
-
(_selectRef$current9 = selectRef.current) == null || _selectRef$current9.removeEventListener('blur', removeFocusClass);
|
|
10065
|
-
};
|
|
10066
|
-
});
|
|
10067
|
-
return {
|
|
10068
|
-
withClickAwayHandler: withClickAwayHandler,
|
|
10069
|
-
handleHighlighted: handleHighlighted,
|
|
10070
|
-
itemToHighlight: itemToHighlight
|
|
10071
|
-
};
|
|
10072
|
-
};
|
|
10073
|
-
/**
|
|
10074
|
-
* DEPRECATED. Use Select2 instead.
|
|
10075
|
-
* A select component, created using <ul> and <li> elements, with bespoke accessibility
|
|
10076
|
-
* logic.
|
|
10077
|
-
*
|
|
10078
|
-
* # Usage
|
|
10079
|
-
* ## Defining a component that uses a typical Select element
|
|
10080
|
-
* ```tsx
|
|
10081
|
-
* const MyComponent = () => {
|
|
10082
|
-
* const handleSelect = (value: number, text: string) => {
|
|
10083
|
-
* console.log("Selected", value);
|
|
10084
|
-
* };
|
|
10085
|
-
*
|
|
10086
|
-
* return <>
|
|
10087
|
-
* <Select
|
|
10088
|
-
* label="This is a label"
|
|
10089
|
-
* options={[
|
|
10090
|
-
* { text: "Option 1", value: 1 },
|
|
10091
|
-
* { text: "Option 2", value: 2 },
|
|
10092
|
-
* ]}
|
|
10093
|
-
* onSelect={handleSelect}
|
|
10094
|
-
* />
|
|
10095
|
-
* </>
|
|
10096
|
-
* }
|
|
10097
|
-
* ```
|
|
10098
|
-
*
|
|
10099
|
-
* ## Defining a component that uses a disabled Select element
|
|
10100
|
-
* ```tsx
|
|
10101
|
-
* const MyComponent = () => {
|
|
10102
|
-
* const handleSelect = (value: number, text: string) => {
|
|
10103
|
-
* console.log("Selected", value);
|
|
10104
|
-
* };
|
|
10105
|
-
*
|
|
10106
|
-
* return <>
|
|
10107
|
-
* <Select
|
|
10108
|
-
* disabled // Select component disabled explicitely
|
|
10109
|
-
* label="This is a label"
|
|
10110
|
-
* options={[
|
|
10111
|
-
* { text: "Option 1", value: 1 },
|
|
10112
|
-
* { text: "Option 2", value: 2 },
|
|
10113
|
-
* ]}
|
|
10114
|
-
* onSelect={handleSelect}
|
|
10115
|
-
* />
|
|
10116
|
-
* <Select
|
|
10117
|
-
* label="This is a label"
|
|
10118
|
-
* options={[]} // Select component disabled implicitely by passing an empty array of options
|
|
10119
|
-
* onSelect={handleSelect}
|
|
10120
|
-
* />
|
|
10121
|
-
* </>
|
|
10122
|
-
* }
|
|
10123
|
-
* ```
|
|
10124
|
-
*
|
|
10125
|
-
* ## Defining a component with a non-labelled Select element
|
|
10126
|
-
* ```tsx
|
|
10127
|
-
* const MyComponent = () => {
|
|
10128
|
-
* const handleSelect = (value: number, text: string) => {
|
|
10129
|
-
* console.log("Selected", value);
|
|
10130
|
-
* };
|
|
10131
|
-
*
|
|
10132
|
-
* return <>
|
|
10133
|
-
* <Select
|
|
10134
|
-
* label=""
|
|
10135
|
-
* options={[
|
|
10136
|
-
* { text: "Option 1", value: 1 },
|
|
10137
|
-
* { text: "Option 2", value: 2 },
|
|
10138
|
-
* ]}
|
|
10139
|
-
* onSelect={handleSelect}
|
|
10140
|
-
* />
|
|
10141
|
-
* </>
|
|
10142
|
-
* }
|
|
10143
|
-
* ```
|
|
10144
|
-
*
|
|
10145
|
-
* ## Changing the dimensions of a Select element (px)
|
|
10146
|
-
* ```tsx
|
|
10147
|
-
* const MyComponent = () => {
|
|
10148
|
-
* const handleSelect = (value: number, text: string) => {
|
|
10149
|
-
* console.log("Selected", value);
|
|
10150
|
-
* };
|
|
10151
|
-
*
|
|
10152
|
-
* const selectWidthPx = 100;
|
|
10153
|
-
* const selectHeightPx = 27;
|
|
10154
|
-
*
|
|
10155
|
-
* return <>
|
|
10156
|
-
* <Select
|
|
10157
|
-
* label="This is a label"
|
|
10158
|
-
* options={[
|
|
10159
|
-
* { text: "Option 1", value: 1 },
|
|
10160
|
-
* { text: "Option 2", value: 2 },
|
|
10161
|
-
* ]}
|
|
10162
|
-
* onSelect={handleSelect}
|
|
10163
|
-
* width={selectWidthPx}
|
|
10164
|
-
* height={selectHeightPx}
|
|
10165
|
-
* />
|
|
10166
|
-
* </>
|
|
10167
|
-
* }
|
|
10168
|
-
* ```
|
|
10169
|
-
*/
|
|
10170
|
-
function Select(_ref3) {
|
|
10171
|
-
var _ref4, _selectedValue$text, _options$;
|
|
10172
|
-
var label = _ref3.label,
|
|
10173
|
-
options = _ref3.options,
|
|
10174
|
-
onSelect = _ref3.onSelect,
|
|
10175
|
-
_ref3$disabled = _ref3.disabled,
|
|
10176
|
-
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
|
|
10177
|
-
_ref3$resetWhenOption = _ref3.resetWhenOptionsUpdate,
|
|
10178
|
-
resetWhenOptionsUpdate = _ref3$resetWhenOption === void 0 ? false : _ref3$resetWhenOption,
|
|
10179
|
-
_ref3$width = _ref3.width,
|
|
10180
|
-
width = _ref3$width === void 0 ? 'default' : _ref3$width,
|
|
10181
|
-
_ref3$height = _ref3.height,
|
|
10182
|
-
height = _ref3$height === void 0 ? 'default' : _ref3$height;
|
|
10183
|
-
var selectRef = React.useRef(null);
|
|
10184
|
-
var optionsRef = React.useRef([]);
|
|
10185
|
-
var _useState2 = React.useState(null),
|
|
10186
|
-
selectedValue = _useState2[0],
|
|
10187
|
-
setSelectedValue = _useState2[1];
|
|
10188
|
-
var _useState3 = React.useState(false),
|
|
10189
|
-
isOpen = _useState3[0],
|
|
10190
|
-
setIsOpen = _useState3[1];
|
|
10191
|
-
var isDisabled = disabled || options.length === 0;
|
|
10192
|
-
var _useAccessibility = useAccessibility({
|
|
10193
|
-
selectRef: selectRef,
|
|
10194
|
-
optionsRef: optionsRef,
|
|
10195
|
-
shouldHighlightOption: isOpen,
|
|
10196
|
-
isSelectDisabled: isDisabled
|
|
10197
|
-
}),
|
|
10198
|
-
withClickAwayHandler = _useAccessibility.withClickAwayHandler,
|
|
10199
|
-
handleHighlighted = _useAccessibility.handleHighlighted,
|
|
10200
|
-
itemToHighlight = _useAccessibility.itemToHighlight;
|
|
10201
|
-
var openSelect = function openSelect() {
|
|
10202
|
-
return setIsOpen(true);
|
|
10203
|
-
};
|
|
10204
|
-
var closeSelect = function closeSelect() {
|
|
10205
|
-
return setIsOpen(false);
|
|
10206
|
-
};
|
|
10207
|
-
var toggleSelect = function toggleSelect() {
|
|
10208
|
-
return setIsOpen(function (prev) {
|
|
10209
|
-
return !prev;
|
|
10210
|
-
});
|
|
10211
|
-
};
|
|
10212
|
-
var closeSelectOnBlur = withClickAwayHandler(closeSelect);
|
|
10213
|
-
var handleOptionSelection = function handleOptionSelection(index) {
|
|
10214
|
-
var option = options[index];
|
|
10215
|
-
setSelectedValue(option);
|
|
10216
|
-
onSelect(option.value, option.text);
|
|
10217
|
-
};
|
|
10218
|
-
React.useEffect(function () {
|
|
10219
|
-
document.addEventListener('click', closeSelectOnBlur, false);
|
|
10220
|
-
return function () {
|
|
10221
|
-
document.removeEventListener('click', closeSelectOnBlur, false);
|
|
10222
|
-
};
|
|
10223
|
-
}, []);
|
|
10224
|
-
React.useEffect(function () {
|
|
10225
|
-
if (!resetWhenOptionsUpdate) return;
|
|
10226
|
-
if (options.length === 0) {
|
|
10227
|
-
setSelectedValue(null);
|
|
10228
|
-
return;
|
|
10229
|
-
}
|
|
10230
|
-
setSelectedValue(options[0]);
|
|
10231
|
-
}, [options, resetWhenOptionsUpdate]);
|
|
10232
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
10233
|
-
level: 1,
|
|
10234
|
-
tag: "p",
|
|
10235
|
-
"data-testid": "select-label"
|
|
10236
|
-
}, label)), /*#__PURE__*/React__default.createElement(SelectList, {
|
|
10237
|
-
id: "select",
|
|
10238
|
-
ref: selectRef,
|
|
10239
|
-
onClick: toggleSelect,
|
|
10240
|
-
onFocus: openSelect,
|
|
10241
|
-
onBlur: closeSelect,
|
|
10242
|
-
onMouseDown: function onMouseDown(e) {
|
|
10243
|
-
return e.preventDefault();
|
|
10244
|
-
},
|
|
10245
|
-
onKeyUp: handleHighlighted(handleOptionSelection),
|
|
10246
|
-
width: width,
|
|
10247
|
-
height: height,
|
|
10248
|
-
role: "listbox",
|
|
10249
|
-
tabIndex: 0,
|
|
10250
|
-
"aria-labelledby": label,
|
|
10251
|
-
"aria-disabled": isDisabled,
|
|
10252
|
-
"data-testid": "select"
|
|
10253
|
-
}, /*#__PURE__*/React__default.createElement(SelectWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10254
|
-
level: 1,
|
|
10255
|
-
tag: "p",
|
|
10256
|
-
"data-testid": "selected-value"
|
|
10257
|
-
}, (_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, {
|
|
10258
|
-
"data-testid": "options"
|
|
10259
|
-
}, options.map(function (option, index) {
|
|
10260
|
-
return /*#__PURE__*/React__default.createElement(Option, {
|
|
10261
|
-
ref: function ref(element) {
|
|
10262
|
-
if (!element || optionsRef.current.length === options.length) return;
|
|
10263
|
-
optionsRef.current.push(element);
|
|
10264
|
-
},
|
|
10265
|
-
role: "option",
|
|
10266
|
-
tabIndex: index + 1,
|
|
10267
|
-
hover: index === itemToHighlight,
|
|
10268
|
-
key: option.text,
|
|
10269
|
-
onClick: function onClick() {
|
|
10270
|
-
return handleOptionSelection(index);
|
|
10271
|
-
}
|
|
10272
|
-
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10273
|
-
level: 1,
|
|
10274
|
-
tag: "p"
|
|
10275
|
-
}, option.text));
|
|
10276
|
-
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10277
|
-
}
|
|
10278
|
-
|
|
10279
|
-
var _templateObject$1b, _templateObject2$V, _templateObject3$H, _templateObject4$z;
|
|
10280
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10281
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n\n .harmonic-select__control--is-focused {\n border-color: var(--color-base-dark-grey);\n box-shadow: ", ";\n }\n\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--color-primary-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n\n @media ", " {\n font-size: 17px;\n }\n }\n\n .harmonic-select__placeholder {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__single-value {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--color-base-light-grey);\n background: var(--color-base-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--color-base-dark-grey);\n }\n }\n\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--color-base-mid-grey);\n }\n\n .harmonic-select__menu-list {\n padding: 10px 0;\n }\n\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-primary-black);\n\n @media ", " {\n font-size: 17px;\n }\n\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--color-base-light-grey);\n }\n }\n\n .harmonic-select__option--is-selected {\n color: var(--color-primary-black);\n background: none;\n }\n\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n color: var(--color-primary-black);\n }\n\n .harmonic-select__menu-notice {\n color: var(--color-primary-black);\n padding: 20px 20px;\n text-align: left;\n }\n\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9515
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E, _templateObject4$x;
|
|
9516
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9517
|
+
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
10282
9518
|
var width = _ref.width;
|
|
10283
9519
|
if (!width) return 'none';
|
|
10284
9520
|
return width + "px";
|
|
10285
9521
|
}, function (_ref2) {
|
|
10286
9522
|
var error = _ref2.error;
|
|
10287
|
-
if (error !== undefined) return "1px solid var(--color-
|
|
10288
|
-
return "1px solid var(--color-
|
|
9523
|
+
if (error !== undefined) return "1px solid var(--base-color-errorstate)";
|
|
9524
|
+
return "1px solid var(--base-color-dark-grey)";
|
|
10289
9525
|
}, function (_ref3) {
|
|
10290
9526
|
var error = _ref3.error;
|
|
10291
|
-
if (error !== undefined) return "var(--color-
|
|
10292
|
-
return "var(--color-
|
|
9527
|
+
if (error !== undefined) return "var(--base-color-errorstate)";
|
|
9528
|
+
return "var(--base-color-dark-grey)";
|
|
10293
9529
|
}, function (_ref4) {
|
|
10294
9530
|
var darkMode = _ref4.darkMode;
|
|
10295
|
-
if (darkMode) return "0 0 0
|
|
9531
|
+
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
10296
9532
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10297
|
-
}
|
|
10298
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9533
|
+
});
|
|
9534
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
10299
9535
|
var darkMode = _ref5.darkMode;
|
|
10300
|
-
if (darkMode) return "var(--color-
|
|
10301
|
-
return "var(--color-
|
|
10302
|
-
}
|
|
10303
|
-
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9536
|
+
if (darkMode) return "var(--base-color-white)";
|
|
9537
|
+
return "var(--base-color-black)";
|
|
9538
|
+
});
|
|
9539
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
10304
9540
|
var darkMode = _ref6.darkMode;
|
|
10305
|
-
if (darkMode) return "var(--color-
|
|
10306
|
-
return "var(--color-
|
|
9541
|
+
if (darkMode) return "var(--base-color-white)";
|
|
9542
|
+
return "var(--base-color-errorstate)";
|
|
10307
9543
|
});
|
|
10308
9544
|
|
|
10309
|
-
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"
|
|
9545
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10310
9546
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10311
|
-
return /*#__PURE__*/React__default.createElement(Select
|
|
9547
|
+
return /*#__PURE__*/React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10312
9548
|
iconName: "DropdownArrow"
|
|
10313
9549
|
}));
|
|
10314
9550
|
};
|
|
@@ -10317,24 +9553,21 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
10317
9553
|
error = _ref.error,
|
|
10318
9554
|
width = _ref.width,
|
|
10319
9555
|
darkMode = _ref.darkMode,
|
|
10320
|
-
children = _ref.children
|
|
10321
|
-
|
|
10322
|
-
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
10323
|
-
className: className
|
|
10324
|
-
}, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9556
|
+
children = _ref.children;
|
|
9557
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
10325
9558
|
darkMode: darkMode,
|
|
10326
9559
|
"data-testid": "select2-text-label"
|
|
10327
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10328
|
-
|
|
10329
|
-
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper
|
|
9560
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9561
|
+
level: 6
|
|
9562
|
+
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper, {
|
|
10330
9563
|
width: width,
|
|
10331
9564
|
error: error,
|
|
10332
9565
|
darkMode: darkMode
|
|
10333
9566
|
}, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
10334
9567
|
darkMode: darkMode,
|
|
10335
9568
|
"data-testid": "select2-error-label"
|
|
10336
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10337
|
-
|
|
9569
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
9570
|
+
level: 6
|
|
10338
9571
|
}, error))));
|
|
10339
9572
|
};
|
|
10340
9573
|
/**
|
|
@@ -10360,15 +9593,13 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10360
9593
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10361
9594
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10362
9595
|
components = _ref2.components,
|
|
10363
|
-
className = _ref2.className,
|
|
10364
9596
|
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
10365
9597
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10366
9598
|
label: label,
|
|
10367
9599
|
error: error,
|
|
10368
9600
|
width: width,
|
|
10369
|
-
darkMode: darkMode
|
|
10370
|
-
|
|
10371
|
-
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
|
|
9601
|
+
darkMode: darkMode
|
|
9602
|
+
}, /*#__PURE__*/React__default.createElement(Select__default, Object.assign({}, selectProps, {
|
|
10372
9603
|
components: _extends({
|
|
10373
9604
|
DropdownIndicator: DropdownIndicator,
|
|
10374
9605
|
LoadingIndicator: undefined,
|
|
@@ -10408,7 +9639,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10408
9639
|
error: error,
|
|
10409
9640
|
width: width,
|
|
10410
9641
|
darkMode: darkMode
|
|
10411
|
-
}, /*#__PURE__*/React__default.createElement(Select$
|
|
9642
|
+
}, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, selectProps, {
|
|
10412
9643
|
components: _extends({
|
|
10413
9644
|
DropdownIndicator: DropdownIndicator,
|
|
10414
9645
|
LoadingIndicator: undefined,
|
|
@@ -10419,24 +9650,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10419
9650
|
})));
|
|
10420
9651
|
};
|
|
10421
9652
|
|
|
10422
|
-
var _templateObject$
|
|
10423
|
-
var Wrapper$
|
|
10424
|
-
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$
|
|
10425
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9653
|
+
var _templateObject$18, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
|
|
9654
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
9655
|
+
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
9656
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
10426
9657
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10427
9658
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10428
9659
|
}, function (_ref2) {
|
|
10429
9660
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
10430
9661
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
10431
9662
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
10432
|
-
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9663
|
+
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
|
|
10433
9664
|
var singleChild = _ref3.singleChild;
|
|
10434
9665
|
return singleChild ? '0' : '10px';
|
|
10435
9666
|
});
|
|
10436
|
-
var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$
|
|
10437
|
-
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10438
|
-
var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$
|
|
10439
|
-
var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$
|
|
9667
|
+
var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
9668
|
+
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
9669
|
+
var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
|
|
9670
|
+
var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
|
|
10440
9671
|
|
|
10441
9672
|
// Set max. character length
|
|
10442
9673
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -10489,7 +9720,7 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10489
9720
|
var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
|
|
10490
9721
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
10491
9722
|
theme: theme
|
|
10492
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9723
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$5, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabel, {
|
|
10493
9724
|
tag: "div",
|
|
10494
9725
|
size: "small"
|
|
10495
9726
|
}, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
|
|
@@ -10525,8 +9756,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10525
9756
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10526
9757
|
};
|
|
10527
9758
|
|
|
10528
|
-
var _templateObject$
|
|
10529
|
-
var Wrapper$
|
|
9759
|
+
var _templateObject$19, _templateObject2$T, _templateObject3$G;
|
|
9760
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
10530
9761
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10531
9762
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10532
9763
|
return aspectRatio;
|
|
@@ -10536,8 +9767,8 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1d || (_temp
|
|
|
10536
9767
|
height = _ref2.height;
|
|
10537
9768
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10538
9769
|
});
|
|
10539
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
10540
|
-
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$
|
|
9770
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
9771
|
+
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
10541
9772
|
|
|
10542
9773
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10543
9774
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -10550,7 +9781,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10550
9781
|
aspectRatio = _ref.aspectRatio,
|
|
10551
9782
|
className = _ref.className,
|
|
10552
9783
|
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
|
10553
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9784
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$6, Object.assign({
|
|
10554
9785
|
aspectRatio: aspectRatio,
|
|
10555
9786
|
className: className
|
|
10556
9787
|
}, restProps), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
@@ -10570,13 +9801,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10570
9801
|
}, caption))));
|
|
10571
9802
|
};
|
|
10572
9803
|
|
|
10573
|
-
var _templateObject$
|
|
10574
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10575
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10576
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
10577
|
-
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10578
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10579
|
-
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
9804
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m;
|
|
9805
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
9806
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
9807
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
9808
|
+
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
9809
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
9810
|
+
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
10580
9811
|
|
|
10581
9812
|
var MiniCard = function MiniCard(_ref) {
|
|
10582
9813
|
var _ref$title = _ref.title,
|
|
@@ -10614,18 +9845,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10614
9845
|
}, title)))));
|
|
10615
9846
|
};
|
|
10616
9847
|
|
|
10617
|
-
var _templateObject$
|
|
10618
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10619
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10620
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9848
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$I, _templateObject4$A, _templateObject5$u;
|
|
9849
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
9850
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
9851
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10621
9852
|
var isVisible = _ref.isVisible;
|
|
10622
9853
|
return isVisible ? 'visible' : 'hidden';
|
|
10623
9854
|
});
|
|
10624
|
-
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9855
|
+
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10625
9856
|
var isVisible = _ref2.isVisible;
|
|
10626
9857
|
return isVisible ? 'visible' : 'hidden';
|
|
10627
9858
|
});
|
|
10628
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9859
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
10629
9860
|
|
|
10630
9861
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10631
9862
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10706,15 +9937,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10706
9937
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10707
9938
|
};
|
|
10708
9939
|
|
|
10709
|
-
var _templateObject$
|
|
10710
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$
|
|
10711
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
10712
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
10713
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
9940
|
+
var _templateObject$1c, _templateObject2$W, _templateObject3$J, _templateObject4$B, _templateObject5$v;
|
|
9941
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
9942
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
|
|
9943
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
9944
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
|
|
10714
9945
|
var isActive = _ref.isActive;
|
|
10715
9946
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10716
9947
|
}, exports.Colors.MidGrey);
|
|
10717
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
9948
|
+
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10718
9949
|
var isOpen = _ref2.isOpen;
|
|
10719
9950
|
return isOpen ? 'block' : 'none';
|
|
10720
9951
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -10870,19 +10101,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10870
10101
|
});
|
|
10871
10102
|
};
|
|
10872
10103
|
|
|
10873
|
-
var _templateObject$
|
|
10874
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10875
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10876
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10104
|
+
var _templateObject$1d, _templateObject2$X, _templateObject3$K, _templateObject4$C, _templateObject5$w, _templateObject6$n;
|
|
10105
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10106
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10107
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10877
10108
|
var color = _ref.color;
|
|
10878
10109
|
return "var(--base-color-" + color + ")";
|
|
10879
10110
|
});
|
|
10880
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10881
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10111
|
+
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10112
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10882
10113
|
var color = _ref2.color;
|
|
10883
10114
|
return "var(--base-color-" + color + ")";
|
|
10884
10115
|
});
|
|
10885
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
10116
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10886
10117
|
var color = _ref3.color;
|
|
10887
10118
|
return "var(--base-color-" + color + ")";
|
|
10888
10119
|
});
|
|
@@ -10964,19 +10195,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10964
10195
|
}, strengthLabel))));
|
|
10965
10196
|
};
|
|
10966
10197
|
|
|
10967
|
-
var _templateObject$
|
|
10968
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$
|
|
10969
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2
|
|
10970
|
-
var Wrapper$
|
|
10971
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$
|
|
10198
|
+
var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
|
|
10199
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10200
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10201
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10202
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10972
10203
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10973
10204
|
}, devices.tablet, devices.mobile);
|
|
10974
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
10205
|
+
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
10975
10206
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10976
10207
|
}, devices.mobile);
|
|
10977
|
-
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$
|
|
10978
|
-
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10979
|
-
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$
|
|
10208
|
+
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
|
|
10209
|
+
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
|
|
10210
|
+
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10980
10211
|
|
|
10981
10212
|
/* eslint-disable react/no-danger */
|
|
10982
10213
|
var Content = function Content(_ref) {
|
|
@@ -11149,7 +10380,7 @@ var Table = function Table(_ref) {
|
|
|
11149
10380
|
} else {
|
|
11150
10381
|
visibleRows = totalRows;
|
|
11151
10382
|
}
|
|
11152
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10383
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, {
|
|
11153
10384
|
className: className
|
|
11154
10385
|
}, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
11155
10386
|
onClickPrev: handlePrev,
|
|
@@ -11179,24 +10410,24 @@ var Table = function Table(_ref) {
|
|
|
11179
10410
|
}))));
|
|
11180
10411
|
};
|
|
11181
10412
|
|
|
11182
|
-
var _templateObject$
|
|
11183
|
-
var Wrapper$
|
|
10413
|
+
var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
10414
|
+
var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11184
10415
|
var theme = _ref.theme;
|
|
11185
10416
|
return "var(--color-" + theme + ")";
|
|
11186
10417
|
}, function (_ref2) {
|
|
11187
10418
|
var theme = _ref2.theme;
|
|
11188
10419
|
return "var(--color-" + theme + ")";
|
|
11189
10420
|
});
|
|
11190
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11191
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
11192
|
-
var Error = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11193
|
-
var Form = /*#__PURE__*/styled__default.form(_templateObject5$
|
|
11194
|
-
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11195
|
-
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
11196
|
-
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$
|
|
11197
|
-
var ButtonWrapper$
|
|
11198
|
-
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11199
|
-
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$
|
|
10421
|
+
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
10422
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
10423
|
+
var Error = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10424
|
+
var Form = /*#__PURE__*/styled__default.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
10425
|
+
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
10426
|
+
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
10427
|
+
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
10428
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
10429
|
+
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
10430
|
+
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
11200
10431
|
var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
11201
10432
|
var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
|
|
11202
10433
|
var _ref3$isOpen = _ref3.isOpen,
|
|
@@ -11222,9 +10453,7 @@ var themeToColor = function themeToColor(theme) {
|
|
|
11222
10453
|
var SignUpTitle = function SignUpTitle(_ref) {
|
|
11223
10454
|
var title = _ref.title,
|
|
11224
10455
|
_ref$isMobile = _ref.isMobile,
|
|
11225
|
-
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile
|
|
11226
|
-
_ref$titleFontFamily = _ref.titleFontFamily,
|
|
11227
|
-
titleFontFamily = _ref$titleFontFamily === void 0 ? false : _ref$titleFontFamily;
|
|
10456
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
|
|
11228
10457
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
11229
10458
|
columnStartDesktop: 3,
|
|
11230
10459
|
columnSpanDesktop: 10,
|
|
@@ -11233,7 +10462,7 @@ var SignUpTitle = function SignUpTitle(_ref) {
|
|
|
11233
10462
|
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
11234
10463
|
color: "black",
|
|
11235
10464
|
hierarchy: "h3",
|
|
11236
|
-
serif:
|
|
10465
|
+
serif: true,
|
|
11237
10466
|
size: isMobile ? 'small' : 'medium'
|
|
11238
10467
|
}, title)));
|
|
11239
10468
|
};
|
|
@@ -11486,10 +10715,10 @@ var SignUpForm = function SignUpForm(_ref) {
|
|
|
11486
10715
|
tabIndex: 0
|
|
11487
10716
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11488
10717
|
size: "small"
|
|
11489
|
-
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
10718
|
+
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
11490
10719
|
onClick: handleFormSubmit,
|
|
11491
10720
|
theme: theme
|
|
11492
|
-
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
10721
|
+
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
11493
10722
|
onClick: handleFormSubmit,
|
|
11494
10723
|
theme: theme
|
|
11495
10724
|
})), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
|
|
@@ -11541,7 +10770,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11541
10770
|
React.useEffect(function () {
|
|
11542
10771
|
setDropdownOpen(isOpened);
|
|
11543
10772
|
}, [isOpened]);
|
|
11544
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10773
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
11545
10774
|
theme: themeToColor(theme),
|
|
11546
10775
|
className: className
|
|
11547
10776
|
}, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
|
|
@@ -11606,13 +10835,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11606
10835
|
}))))));
|
|
11607
10836
|
};
|
|
11608
10837
|
|
|
11609
|
-
var _templateObject$
|
|
11610
|
-
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
10838
|
+
var _templateObject$1g, _templateObject2$_, _templateObject4$F, _templateObject5$z;
|
|
10839
|
+
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
11611
10840
|
var withShadow = _ref.withShadow;
|
|
11612
|
-
return withShadow && styled.css(_templateObject2$
|
|
10841
|
+
return withShadow && styled.css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11613
10842
|
}, devices.mobile);
|
|
11614
|
-
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
11615
|
-
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$
|
|
10843
|
+
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
10844
|
+
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11616
10845
|
|
|
11617
10846
|
var defaultGrid = {
|
|
11618
10847
|
columnStartDesktop: 2,
|
|
@@ -11670,12 +10899,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11670
10899
|
return null;
|
|
11671
10900
|
};
|
|
11672
10901
|
|
|
11673
|
-
var _templateObject$
|
|
11674
|
-
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$
|
|
10902
|
+
var _templateObject$1h, _templateObject2$$;
|
|
10903
|
+
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
11675
10904
|
var hide = _ref.hide;
|
|
11676
10905
|
return hide && "display: none;";
|
|
11677
10906
|
}, devices.mobileAndTablet);
|
|
11678
|
-
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2
|
|
10907
|
+
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
11679
10908
|
|
|
11680
10909
|
/**
|
|
11681
10910
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11767,8 +10996,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11767
10996
|
}));
|
|
11768
10997
|
};
|
|
11769
10998
|
|
|
11770
|
-
var _templateObject$
|
|
11771
|
-
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
10999
|
+
var _templateObject$1i;
|
|
11000
|
+
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
|
|
11772
11001
|
|
|
11773
11002
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11774
11003
|
return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
|
|
@@ -11828,27 +11057,27 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11828
11057
|
}, gridItemOrContent);
|
|
11829
11058
|
};
|
|
11830
11059
|
|
|
11831
|
-
var _templateObject$
|
|
11060
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
|
|
11832
11061
|
var color = 'primary-black';
|
|
11833
11062
|
var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
11834
11063
|
borderColor: color,
|
|
11835
11064
|
hoveredColor: color,
|
|
11836
11065
|
pressedColor: color,
|
|
11837
11066
|
textColor: color
|
|
11838
|
-
})(_templateObject$
|
|
11839
|
-
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11840
|
-
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$
|
|
11067
|
+
})(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11068
|
+
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11069
|
+
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11841
11070
|
var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
|
|
11842
11071
|
serif: true,
|
|
11843
11072
|
size: 'medium'
|
|
11844
|
-
})(_templateObject4$
|
|
11073
|
+
})(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11845
11074
|
var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
|
|
11846
11075
|
size: 'large'
|
|
11847
|
-
})(_templateObject5$
|
|
11848
|
-
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$
|
|
11076
|
+
})(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11077
|
+
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11849
11078
|
var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
|
|
11850
11079
|
size: 'large'
|
|
11851
|
-
})(_templateObject7$
|
|
11080
|
+
})(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11852
11081
|
|
|
11853
11082
|
var Paywall = function Paywall(_ref) {
|
|
11854
11083
|
var className = _ref.className,
|
|
@@ -12041,14 +11270,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
12041
11270
|
})))))));
|
|
12042
11271
|
};
|
|
12043
11272
|
|
|
12044
|
-
var _templateObject$
|
|
12045
|
-
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
12046
|
-
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
12047
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$
|
|
12048
|
-
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12049
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
12050
|
-
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12051
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$
|
|
11273
|
+
var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11274
|
+
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
11275
|
+
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
11276
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
11277
|
+
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11278
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11279
|
+
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11280
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
12052
11281
|
|
|
12053
11282
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
12054
11283
|
var Footer = function Footer(_ref) {
|
|
@@ -12106,18 +11335,18 @@ var Footer = function Footer(_ref) {
|
|
|
12106
11335
|
}, additionalInfo))));
|
|
12107
11336
|
};
|
|
12108
11337
|
|
|
12109
|
-
var _templateObject$
|
|
11338
|
+
var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$I, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
|
|
12110
11339
|
var LIST_ITEM_GAP = 32;
|
|
12111
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11340
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
|
|
12112
11341
|
var bottomBorder = _ref.bottomBorder;
|
|
12113
11342
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
12114
11343
|
}, zIndexes.anchor, function (_ref2) {
|
|
12115
11344
|
var withShadow = _ref2.withShadow;
|
|
12116
|
-
return withShadow && styled.css(_templateObject2$
|
|
11345
|
+
return withShadow && styled.css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
12117
11346
|
});
|
|
12118
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
12119
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12120
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
11347
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
11348
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11349
|
+
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
12121
11350
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
12122
11351
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
12123
11352
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -12128,11 +11357,11 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateO
|
|
|
12128
11357
|
hasTwoArrows = _ref5.hasTwoArrows;
|
|
12129
11358
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
12130
11359
|
});
|
|
12131
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
11360
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
|
|
12132
11361
|
var withShadow = _ref7.withShadow;
|
|
12133
|
-
return withShadow && styled.css(_templateObject9$
|
|
11362
|
+
return withShadow && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
12134
11363
|
});
|
|
12135
|
-
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11364
|
+
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
12136
11365
|
var disabled = _ref8.disabled;
|
|
12137
11366
|
return disabled ? 'not-allowed' : 'pointer';
|
|
12138
11367
|
}, function (_ref9) {
|
|
@@ -12387,20 +11616,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12387
11616
|
})))) : null))));
|
|
12388
11617
|
};
|
|
12389
11618
|
|
|
12390
|
-
var _templateObject$
|
|
12391
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11619
|
+
var _templateObject$1m, _templateObject2$13, _templateObject3$Q, _templateObject4$J, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11620
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12392
11621
|
var sticky = _ref.sticky;
|
|
12393
11622
|
return sticky ? 'sticky' : 'initial';
|
|
12394
11623
|
}, zIndexes.anchor);
|
|
12395
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
12396
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11624
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
11625
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
12397
11626
|
var title = _ref2.title;
|
|
12398
11627
|
return title ? 'row' : 'row-reverse';
|
|
12399
11628
|
}, devices.tablet, devices.mobile);
|
|
12400
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12401
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12402
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12403
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$
|
|
11629
|
+
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
11630
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
11631
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
11632
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
12404
11633
|
var theme = _ref3.theme;
|
|
12405
11634
|
return theme.colors.primaryButtonReverseBg;
|
|
12406
11635
|
}, function (_ref4) {
|
|
@@ -12413,8 +11642,8 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
12413
11642
|
var theme = _ref6.theme;
|
|
12414
11643
|
return theme.colors.primaryButtonReverse;
|
|
12415
11644
|
});
|
|
12416
|
-
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
12417
|
-
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
11645
|
+
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
11646
|
+
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
12418
11647
|
|
|
12419
11648
|
var _excluded$s = ["text"],
|
|
12420
11649
|
_excluded2$4 = ["text"];
|
|
@@ -12447,18 +11676,18 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12447
11676
|
}, message))));
|
|
12448
11677
|
};
|
|
12449
11678
|
|
|
12450
|
-
var _templateObject$
|
|
12451
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12452
|
-
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$
|
|
12453
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12454
|
-
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$
|
|
11679
|
+
var _templateObject$1n, _templateObject2$14, _templateObject3$R, _templateObject4$K;
|
|
11680
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
|
|
11681
|
+
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
|
|
11682
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
11683
|
+
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
12455
11684
|
|
|
12456
|
-
var _templateObject$
|
|
12457
|
-
var Wrapper$
|
|
11685
|
+
var _templateObject$1o;
|
|
11686
|
+
var Wrapper$9 = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
|
|
12458
11687
|
|
|
12459
11688
|
var UpsellCards = function UpsellCards(_ref) {
|
|
12460
11689
|
var upsellCards = _ref.upsellCards;
|
|
12461
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11690
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$9, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
|
|
12462
11691
|
return /*#__PURE__*/React__default.createElement(UpsellCard, {
|
|
12463
11692
|
key: "card-" + index,
|
|
12464
11693
|
title: card.title,
|
|
@@ -12483,15 +11712,13 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12483
11712
|
upsellCards = _ref.upsellCards,
|
|
12484
11713
|
_ref$theme = _ref.theme,
|
|
12485
11714
|
theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme,
|
|
12486
|
-
className = _ref.className
|
|
12487
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
11715
|
+
className = _ref.className;
|
|
12488
11716
|
var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
|
|
12489
11717
|
return _extends({}, card, {
|
|
12490
11718
|
theme: card.theme || theme,
|
|
12491
11719
|
secondaryTheme: card.secondaryTheme || card.theme || theme
|
|
12492
11720
|
});
|
|
12493
11721
|
}) : [];
|
|
12494
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12495
11722
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
12496
11723
|
theme: theme
|
|
12497
11724
|
}, /*#__PURE__*/React__default.createElement(Grid, {
|
|
@@ -12504,7 +11731,7 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12504
11731
|
columnStartSmallDevice: 1,
|
|
12505
11732
|
columnSpanSmallDevice: 14
|
|
12506
11733
|
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
|
|
12507
|
-
serif:
|
|
11734
|
+
serif: true
|
|
12508
11735
|
}, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
|
|
12509
11736
|
text: richText != null ? richText : '',
|
|
12510
11737
|
columnStartDesktop: 1,
|
|
@@ -12518,9 +11745,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12518
11745
|
})))));
|
|
12519
11746
|
};
|
|
12520
11747
|
|
|
12521
|
-
var _templateObject$
|
|
12522
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12523
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11748
|
+
var _templateObject$1p, _templateObject2$15;
|
|
11749
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
11750
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
12524
11751
|
var bottomBorder = _ref.bottomBorder;
|
|
12525
11752
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12526
11753
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12551,11 +11778,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12551
11778
|
}, children)));
|
|
12552
11779
|
};
|
|
12553
11780
|
|
|
12554
|
-
var _templateObject$
|
|
12555
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12556
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
12557
|
-
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12558
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
11781
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$S, _templateObject4$L;
|
|
11782
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
11783
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
11784
|
+
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11785
|
+
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
12559
11786
|
|
|
12560
11787
|
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12561
11788
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -12759,29 +11986,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12759
11986
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12760
11987
|
};
|
|
12761
11988
|
|
|
12762
|
-
var _templateObject$
|
|
12763
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11989
|
+
var _templateObject$1r, _templateObject2$17, _templateObject3$T, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
|
|
11990
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
12764
11991
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12765
11992
|
return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n\n > div {\n height: " + imagesHeightDesktop + "px;\n }\n }\n }\n }";
|
|
12766
11993
|
}, devices.mobile, function (_ref2) {
|
|
12767
11994
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12768
11995
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12769
11996
|
});
|
|
12770
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11997
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12771
11998
|
var type = _ref3.type,
|
|
12772
11999
|
isActive = _ref3.isActive;
|
|
12773
12000
|
return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n " + getCardSlideTabletStyles(type) + "\n }\n }\n }\n\n @media " + devices.mobile + " {\n && {\n .swipe-slide {\n " + getCardSlideMobileStyles(type) + "\n }\n }\n }\n ";
|
|
12774
12001
|
});
|
|
12775
|
-
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
12776
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12777
|
-
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12002
|
+
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
12003
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12004
|
+
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12778
12005
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12779
12006
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12780
12007
|
});
|
|
12781
|
-
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$
|
|
12782
|
-
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12783
|
-
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$
|
|
12784
|
-
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$
|
|
12008
|
+
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
|
|
12009
|
+
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
12010
|
+
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12011
|
+
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12785
12012
|
var active = _ref5.active;
|
|
12786
12013
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
12787
12014
|
}, devices.tablet, function (_ref6) {
|
|
@@ -12811,8 +12038,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12811
12038
|
_ref$infinite = _ref.infinite,
|
|
12812
12039
|
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
12813
12040
|
_ref$useOffset = _ref.useOffset,
|
|
12814
|
-
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset
|
|
12815
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
12041
|
+
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
|
|
12816
12042
|
var _useState = React.useState(false),
|
|
12817
12043
|
isFullscreen = _useState[0],
|
|
12818
12044
|
setIsFullscreen = _useState[1];
|
|
@@ -12962,7 +12188,6 @@ var Carousel = function Carousel(_ref) {
|
|
|
12962
12188
|
var carouselTitleId = "carousel-title-" + title;
|
|
12963
12189
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
12964
12190
|
var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
12965
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12966
12191
|
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
12967
12192
|
className: className,
|
|
12968
12193
|
type: type,
|
|
@@ -12986,7 +12211,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12986
12211
|
isDescriptionPresent: !!description
|
|
12987
12212
|
}, /*#__PURE__*/React__default.createElement(TitleText$1, {
|
|
12988
12213
|
size: "medium",
|
|
12989
|
-
serif:
|
|
12214
|
+
serif: true,
|
|
12990
12215
|
hierarchy: titleSemanticLevelValue
|
|
12991
12216
|
}, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12992
12217
|
size: "large"
|
|
@@ -13026,18 +12251,18 @@ var Carousel = function Carousel(_ref) {
|
|
|
13026
12251
|
}, children))));
|
|
13027
12252
|
};
|
|
13028
12253
|
|
|
13029
|
-
var _templateObject$
|
|
13030
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
13031
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
13032
|
-
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
13033
|
-
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
13034
|
-
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
13035
|
-
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
13036
|
-
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
13037
|
-
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
13038
|
-
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
13039
|
-
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$
|
|
13040
|
-
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$
|
|
12254
|
+
var _templateObject$1s, _templateObject2$18, _templateObject3$U, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
12255
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
12256
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12257
|
+
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12258
|
+
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12259
|
+
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12260
|
+
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12261
|
+
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12262
|
+
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
12263
|
+
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12264
|
+
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12265
|
+
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13041
12266
|
var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
13042
12267
|
var FirstButtonComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
13043
12268
|
var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -13176,7 +12401,7 @@ var VideoSlide = function VideoSlide(_ref) {
|
|
|
13176
12401
|
});
|
|
13177
12402
|
return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
|
|
13178
12403
|
isCurrentSlide: isCurrentSlide
|
|
13179
|
-
}, /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
12404
|
+
}, /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
|
|
13180
12405
|
video: video,
|
|
13181
12406
|
settings: settings
|
|
13182
12407
|
}));
|
|
@@ -13207,10 +12432,7 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
|
|
|
13207
12432
|
isCurrentSlide: index === currentSlide
|
|
13208
12433
|
})) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
|
|
13209
12434
|
alt: mediaContent.alt
|
|
13210
|
-
}, mediaContent
|
|
13211
|
-
fetchPriority: index === currentSlide ? 'high' : 'auto',
|
|
13212
|
-
loading: index === currentSlide ? 'eager' : 'lazy'
|
|
13213
|
-
})))));
|
|
12435
|
+
}, mediaContent)))));
|
|
13214
12436
|
}));
|
|
13215
12437
|
};
|
|
13216
12438
|
|
|
@@ -13219,8 +12441,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13219
12441
|
carouselTitle = _ref.carouselTitle,
|
|
13220
12442
|
slides = _ref.slides,
|
|
13221
12443
|
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
13222
|
-
className = _ref.className
|
|
13223
|
-
titleFontFamily = _ref.titleFontFamily;
|
|
12444
|
+
className = _ref.className;
|
|
13224
12445
|
var slidesMedia = React.useMemo(function () {
|
|
13225
12446
|
return slides.map(function (_ref2) {
|
|
13226
12447
|
var mediaContent = _ref2.mediaContent;
|
|
@@ -13251,7 +12472,6 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13251
12472
|
var handleClickInside = function handleClickInside(e) {
|
|
13252
12473
|
e.stopPropagation();
|
|
13253
12474
|
};
|
|
13254
|
-
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
13255
12475
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid$1, {
|
|
13256
12476
|
role: "region",
|
|
13257
12477
|
"aria-labelledby": carouselTitleId,
|
|
@@ -13264,7 +12484,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13264
12484
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
13265
12485
|
className: TYPOGRAPHY_CLASS_NAME,
|
|
13266
12486
|
size: "medium",
|
|
13267
|
-
serif:
|
|
12487
|
+
serif: true,
|
|
13268
12488
|
hierarchy: titleSemanticLevelValue
|
|
13269
12489
|
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
13270
12490
|
onClickNext: onNext,
|
|
@@ -13356,9 +12576,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13356
12576
|
})));
|
|
13357
12577
|
};
|
|
13358
12578
|
|
|
13359
|
-
var _templateObject$
|
|
13360
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
13361
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12579
|
+
var _templateObject$1t, _templateObject3$V;
|
|
12580
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
12581
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13362
12582
|
|
|
13363
12583
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13364
12584
|
var children = _ref.children;
|
|
@@ -13953,8 +13173,8 @@ var Theme = function Theme(_ref) {
|
|
|
13953
13173
|
}, children);
|
|
13954
13174
|
};
|
|
13955
13175
|
|
|
13956
|
-
var _templateObject$
|
|
13957
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13176
|
+
var _templateObject$1u;
|
|
13177
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13958
13178
|
var theme = _ref.theme;
|
|
13959
13179
|
return theme.colors.primary;
|
|
13960
13180
|
}, function (_ref2) {
|
|
@@ -14901,10 +14121,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1y || (
|
|
|
14901
14121
|
return theme.footer.tablet.paddingBottom;
|
|
14902
14122
|
}, devices.desktop, devices.largeDesktop);
|
|
14903
14123
|
|
|
14904
|
-
var _templateObject$
|
|
14905
|
-
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
14906
|
-
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$
|
|
14907
|
-
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$
|
|
14124
|
+
var _templateObject$1v, _templateObject2$19, _templateObject3$W;
|
|
14125
|
+
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14126
|
+
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14127
|
+
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
14908
14128
|
|
|
14909
14129
|
/* eslint-disable react/no-danger */
|
|
14910
14130
|
var Quote = function Quote(_ref) {
|
|
@@ -14999,9 +14219,7 @@ exports.Progress = Progress;
|
|
|
14999
14219
|
exports.PromoWithTags = PromoWithTags;
|
|
15000
14220
|
exports.PromoWithTitle = PromoWithTitle;
|
|
15001
14221
|
exports.Quote = Quote;
|
|
15002
|
-
exports.Radio = Radio;
|
|
15003
14222
|
exports.Radio2 = Radio2;
|
|
15004
|
-
exports.RadioGroup = RadioGroup;
|
|
15005
14223
|
exports.RadioGroup2 = RadioGroup2;
|
|
15006
14224
|
exports.ReadMore = ReadMore;
|
|
15007
14225
|
exports.RotatorButtons = RotatorButtons;
|
|
@@ -15010,7 +14228,6 @@ exports.SecondaryButton = SecondaryButton;
|
|
|
15010
14228
|
exports.SecondaryLogo = SecondaryLogo;
|
|
15011
14229
|
exports.SectionSplitter = SectionSplitter;
|
|
15012
14230
|
exports.SectionTitle = SectionTitle;
|
|
15013
|
-
exports.Select = Select;
|
|
15014
14231
|
exports.Select2 = SelectComponent;
|
|
15015
14232
|
exports.Select2Async = SelectComponent$1;
|
|
15016
14233
|
exports.SignUpForm = SignUpFormComponent;
|
|
@@ -15039,7 +14256,7 @@ exports.TypeTags = TypeTags;
|
|
|
15039
14256
|
exports.UpsellCard = UpsellCard;
|
|
15040
14257
|
exports.UpsellSection = UpsellSection;
|
|
15041
14258
|
exports.VideoControls = VideoControls;
|
|
15042
|
-
exports.VideoWithControls = VideoWithControls$
|
|
14259
|
+
exports.VideoWithControls = VideoWithControls$1;
|
|
15043
14260
|
exports.breakpoints = breakpoints;
|
|
15044
14261
|
exports.devices = devices;
|
|
15045
14262
|
exports.useHarmonicTheme = useHarmonicTheme;
|