@royaloperahouse/harmonic 0.19.1-a → 0.19.1-c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Buttons/Auxiliary/AuxiliaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Buttons/Button.d.ts +10 -3
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.d.ts +17 -3
- package/dist/components/atoms/Buttons/Primary/PrimaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Buttons/Secondary/SecondaryButton.style.d.ts +9 -1
- package/dist/components/atoms/Radio/Radio.d.ts +7 -0
- package/dist/components/atoms/Radio/Radio.style.d.ts +4 -0
- package/dist/components/atoms/Radio/index.d.ts +2 -0
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.d.ts +4 -0
- package/dist/components/atoms/VideoControlsImpact/VideoControlsImpact.style.d.ts +5 -0
- package/dist/components/atoms/VideoControlsImpact/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts +2 -1
- package/dist/components/index.d.ts +3 -3
- package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +1 -0
- package/dist/components/molecules/HotFilters/HotFilters.style.d.ts +16 -1
- package/dist/components/molecules/PageHeading/Compact/Compact.style.d.ts +16 -1
- package/dist/components/molecules/PageHeading/Impact/Impact.style.d.ts +302 -9
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +2 -0
- package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +3 -1
- package/dist/components/molecules/PersonCard/PersonCard.style.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/RadioGroup.d.ts +7 -0
- package/dist/components/molecules/RadioGroup/RadioGroup.style.d.ts +1 -0
- package/dist/components/molecules/RadioGroup/index.d.ts +2 -0
- package/dist/components/molecules/Select/Select.d.ts +101 -0
- package/dist/components/molecules/Select/Select.style.d.ts +13 -0
- package/dist/components/molecules/Select/index.d.ts +2 -0
- package/dist/components/molecules/Select2/Select2.d.ts +1 -1
- package/dist/components/molecules/Swipe/Swipe.d.ts +1 -0
- package/dist/components/molecules/index.d.ts +3 -1
- package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +3 -1
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +3 -1
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +16 -1
- package/dist/harmonic.cjs.development.js +1401 -589
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +1417 -608
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/card.d.ts +2 -0
- package/dist/types/impactHeader.d.ts +14 -32
- package/dist/types/signUpForm.d.ts +1 -0
- package/dist/types/types.d.ts +14 -0
- package/dist/types/upsell.d.ts +2 -0
- package/package.json +1 -1
package/dist/harmonic.esm.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React__default, { createElement, memo, useCallback, useRef, useImperativeHandle, useMemo, useEffect,
|
|
1
|
+
import React__default, { createElement, memo, forwardRef, useCallback, useRef, useImperativeHandle, useMemo, useEffect, useState, cloneElement, useLayoutEffect } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import { renderToString } from 'react-dom/server';
|
|
5
|
-
import Select, { components } from 'react-select';
|
|
6
|
-
import Select$
|
|
5
|
+
import Select$1, { components } from 'react-select';
|
|
6
|
+
import Select$2 from 'react-select/async';
|
|
7
7
|
import Modal from 'react-modal';
|
|
8
8
|
import ScrollLock from 'react-scrolllock';
|
|
9
9
|
|
|
@@ -237,7 +237,8 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
|
237
237
|
em = _ref2.em,
|
|
238
238
|
_ref2$color = _ref2.color,
|
|
239
239
|
color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
|
|
240
|
-
serif = _ref2.serif,
|
|
240
|
+
_ref2$serif = _ref2.serif,
|
|
241
|
+
serif = _ref2$serif === void 0 ? false : _ref2$serif,
|
|
241
242
|
hierarchy = _ref2.hierarchy,
|
|
242
243
|
tag = _ref2.tag,
|
|
243
244
|
className = _ref2.className,
|
|
@@ -2649,7 +2650,7 @@ var Icon = /*#__PURE__*/memo(function (props) {
|
|
|
2649
2650
|
Icon.displayName = 'Icon';
|
|
2650
2651
|
|
|
2651
2652
|
var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
|
|
2652
|
-
var Button = function
|
|
2653
|
+
var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
2653
2654
|
var children = _ref.children,
|
|
2654
2655
|
iconName = _ref.iconName,
|
|
2655
2656
|
iconDirection = _ref.iconDirection,
|
|
@@ -2659,7 +2660,7 @@ var Button = function Button(_ref) {
|
|
|
2659
2660
|
href = _ref.href,
|
|
2660
2661
|
onClick = _ref.onClick,
|
|
2661
2662
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
2662
|
-
var truncatedString = children.substring(0, 30);
|
|
2663
|
+
var truncatedString = children == null ? void 0 : children.substring(0, 30);
|
|
2663
2664
|
var handleClick = useCallback(function (e) {
|
|
2664
2665
|
if (!href) e.preventDefault();
|
|
2665
2666
|
onClick == null || onClick(e);
|
|
@@ -2671,7 +2672,8 @@ var Button = function Button(_ref) {
|
|
|
2671
2672
|
href: href != null ? href : '#',
|
|
2672
2673
|
onClick: handleClick,
|
|
2673
2674
|
iconName: iconName,
|
|
2674
|
-
className: className
|
|
2675
|
+
className: className,
|
|
2676
|
+
ref: ref
|
|
2675
2677
|
}), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
|
|
2676
2678
|
"data-testid": "button-icon",
|
|
2677
2679
|
className: iconClassName
|
|
@@ -2682,7 +2684,8 @@ var Button = function Button(_ref) {
|
|
|
2682
2684
|
}))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
|
|
2683
2685
|
color: "inherit"
|
|
2684
2686
|
}, truncatedString));
|
|
2685
|
-
};
|
|
2687
|
+
});
|
|
2688
|
+
Button.displayName = 'Button';
|
|
2686
2689
|
|
|
2687
2690
|
var getPointerEvents = function getPointerEvents(_ref) {
|
|
2688
2691
|
var disabled = _ref.disabled;
|
|
@@ -2747,7 +2750,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$3 || (_te
|
|
|
2747
2750
|
var AriaDescription = /*#__PURE__*/styled.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
2748
2751
|
|
|
2749
2752
|
var _excluded$3 = ["children", "disabled", "className"];
|
|
2750
|
-
var PrimaryButton = function
|
|
2753
|
+
var PrimaryButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
2751
2754
|
var children = _ref.children,
|
|
2752
2755
|
disabled = _ref.disabled,
|
|
2753
2756
|
className = _ref.className,
|
|
@@ -2762,6 +2765,7 @@ var PrimaryButton = function PrimaryButton(_ref) {
|
|
|
2762
2765
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
|
|
2763
2766
|
id: disabledButtonDescriptionId
|
|
2764
2767
|
}, disabledButtonDescription), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2768
|
+
ref: ref,
|
|
2765
2769
|
disabled: true,
|
|
2766
2770
|
"aria-disabled": "true",
|
|
2767
2771
|
role: "button",
|
|
@@ -2771,10 +2775,13 @@ var PrimaryButton = function PrimaryButton(_ref) {
|
|
|
2771
2775
|
onClick: handleClick
|
|
2772
2776
|
}), children));
|
|
2773
2777
|
}
|
|
2774
|
-
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2778
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2779
|
+
ref: ref
|
|
2780
|
+
}, props, {
|
|
2775
2781
|
className: className
|
|
2776
2782
|
}), children);
|
|
2777
|
-
};
|
|
2783
|
+
});
|
|
2784
|
+
PrimaryButton.displayName = 'PrimaryButton';
|
|
2778
2785
|
|
|
2779
2786
|
var COLORS$1 = {
|
|
2780
2787
|
disabled: 'var(--color-state-disabled)',
|
|
@@ -3284,56 +3291,10 @@ var Progress = function Progress(_ref) {
|
|
|
3284
3291
|
}, renderSteps()));
|
|
3285
3292
|
};
|
|
3286
3293
|
|
|
3287
|
-
var _templateObject$c, _templateObject2$7, _templateObject3$3
|
|
3288
|
-
var
|
|
3289
|
-
var
|
|
3290
|
-
|
|
3291
|
-
darkMode = _ref.darkMode,
|
|
3292
|
-
disabled = _ref.disabled;
|
|
3293
|
-
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3294
|
-
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3295
|
-
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3296
|
-
return '1px solid var(--base-color-black)';
|
|
3297
|
-
}, function (_ref2) {
|
|
3298
|
-
var disabled = _ref2.disabled,
|
|
3299
|
-
darkMode = _ref2.darkMode;
|
|
3300
|
-
if (disabled) return 'var(--base-color-light-grey)';
|
|
3301
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3302
|
-
return ' var(--base-color-white)';
|
|
3303
|
-
}, function (_ref3) {
|
|
3304
|
-
var disabled = _ref3.disabled,
|
|
3305
|
-
blackBox = _ref3.blackBox,
|
|
3306
|
-
darkMode = _ref3.darkMode;
|
|
3307
|
-
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3308
|
-
if (darkMode) return 'var(--base-color-black)';
|
|
3309
|
-
if (blackBox) return 'var(--base-color-white)';
|
|
3310
|
-
return ' var(--base-color-black)';
|
|
3311
|
-
});
|
|
3312
|
-
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='radio'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Radio, function (_ref4) {
|
|
3313
|
-
var blackBox = _ref4.blackBox,
|
|
3314
|
-
darkMode = _ref4.darkMode;
|
|
3315
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3316
|
-
if (blackBox) return 'var(--base-color-black)';
|
|
3317
|
-
return ' var(--base-color-white)';
|
|
3318
|
-
}, Radio, function (_ref5) {
|
|
3319
|
-
var darkMode = _ref5.darkMode;
|
|
3320
|
-
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3321
|
-
return '3px solid var(--base-color-lapislazuli)';
|
|
3322
|
-
});
|
|
3323
|
-
var RadioIcon = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: currentColor;\n input[type='radio']:checked + ", " & {\n display: block;\n }\n"])), Radio);
|
|
3324
|
-
var TextLabel = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3325
|
-
var darkMode = _ref6.darkMode,
|
|
3326
|
-
disabled = _ref6.disabled;
|
|
3327
|
-
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3328
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3329
|
-
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3330
|
-
return 'var(--base-color-black)';
|
|
3331
|
-
});
|
|
3332
|
-
var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3333
|
-
var darkMode = _ref7.darkMode;
|
|
3334
|
-
if (darkMode) return 'var(--base-color-white)';
|
|
3335
|
-
return 'var(--base-color-errorstate)';
|
|
3336
|
-
});
|
|
3294
|
+
var _templateObject$c, _templateObject2$7, _templateObject3$3;
|
|
3295
|
+
var RadioContainer = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
|
|
3296
|
+
var RadioLine = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 20px;\n grid-template-columns: 1.15em 1fr;\n user-select: none;\n cursor: pointer;\n color: black;\n\n &:focus {\n outline: none;\n }\n\n input[type='radio'] {\n cursor: pointer;\n appearance: none;\n background-color: #ffffff00;\n margin: 0;\n color: black;\n width: 20px;\n height: 20px;\n border: 1px solid black;\n border-radius: 50%;\n position: relative;\n place-content: center;\n display: block;\n }\n\n input[type='radio']::before {\n content: '';\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #ffffff00;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n input[type='radio']:checked::before {\n background-color: black;\n }\n"])));
|
|
3297
|
+
var RadioError = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
|
|
3337
3298
|
|
|
3338
3299
|
var _templateObject$d;
|
|
3339
3300
|
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n margin: var(--margin-", "-", ");\n"])), function (_ref) {
|
|
@@ -3450,6 +3411,95 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
3450
3411
|
}, children);
|
|
3451
3412
|
};
|
|
3452
3413
|
|
|
3414
|
+
/**
|
|
3415
|
+
* DEPRECATED. Use Radio2 instead
|
|
3416
|
+
*/
|
|
3417
|
+
var Radio = function Radio(_ref) {
|
|
3418
|
+
var _ref$checked = _ref.checked,
|
|
3419
|
+
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
3420
|
+
error = _ref.error,
|
|
3421
|
+
label = _ref.label,
|
|
3422
|
+
onChange = _ref.onChange;
|
|
3423
|
+
var _useState = useState(checked),
|
|
3424
|
+
isChecked = _useState[0],
|
|
3425
|
+
setChecked = _useState[1];
|
|
3426
|
+
var handleRadioChange = function handleRadioChange() {
|
|
3427
|
+
setChecked(!isChecked);
|
|
3428
|
+
onChange == null || onChange(label != null ? label : '');
|
|
3429
|
+
};
|
|
3430
|
+
var handleKeyPress = function handleKeyPress(event) {
|
|
3431
|
+
if (event.key === 'Space' || event.key === ' ') handleRadioChange();
|
|
3432
|
+
};
|
|
3433
|
+
useEffect(function () {
|
|
3434
|
+
setChecked(checked);
|
|
3435
|
+
}, [onChange]);
|
|
3436
|
+
return /*#__PURE__*/React__default.createElement(RadioContainer, null, /*#__PURE__*/React__default.createElement(RadioLine, {
|
|
3437
|
+
role: "radio",
|
|
3438
|
+
tabIndex: 0,
|
|
3439
|
+
onClick: handleRadioChange,
|
|
3440
|
+
onKeyPress: handleKeyPress
|
|
3441
|
+
}, /*#__PURE__*/React__default.createElement("input", {
|
|
3442
|
+
type: "radio",
|
|
3443
|
+
checked: isChecked,
|
|
3444
|
+
readOnly: true
|
|
3445
|
+
}), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3446
|
+
level: 1
|
|
3447
|
+
}, label)), error && (/*#__PURE__*/React__default.createElement(RadioError, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3448
|
+
level: 1
|
|
3449
|
+
}, error))));
|
|
3450
|
+
};
|
|
3451
|
+
|
|
3452
|
+
var _templateObject$e, _templateObject2$8, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3453
|
+
var Container = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3454
|
+
var Radio$1 = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3455
|
+
var error = _ref.error,
|
|
3456
|
+
darkMode = _ref.darkMode,
|
|
3457
|
+
disabled = _ref.disabled;
|
|
3458
|
+
if (error !== undefined) return '1px solid var(--base-color-errorstate)';
|
|
3459
|
+
if (disabled) return '1px solid var(--base-color-mid-grey)';
|
|
3460
|
+
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3461
|
+
return '1px solid var(--base-color-black)';
|
|
3462
|
+
}, function (_ref2) {
|
|
3463
|
+
var disabled = _ref2.disabled,
|
|
3464
|
+
darkMode = _ref2.darkMode;
|
|
3465
|
+
if (disabled) return 'var(--base-color-light-grey)';
|
|
3466
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3467
|
+
return ' var(--base-color-white)';
|
|
3468
|
+
}, function (_ref3) {
|
|
3469
|
+
var disabled = _ref3.disabled,
|
|
3470
|
+
blackBox = _ref3.blackBox,
|
|
3471
|
+
darkMode = _ref3.darkMode;
|
|
3472
|
+
if (disabled) return 'var(--base-color-mid-grey)';
|
|
3473
|
+
if (darkMode) return 'var(--base-color-black)';
|
|
3474
|
+
if (blackBox) return 'var(--base-color-white)';
|
|
3475
|
+
return ' var(--base-color-black)';
|
|
3476
|
+
});
|
|
3477
|
+
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='radio'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Radio$1, function (_ref4) {
|
|
3478
|
+
var blackBox = _ref4.blackBox,
|
|
3479
|
+
darkMode = _ref4.darkMode;
|
|
3480
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3481
|
+
if (blackBox) return 'var(--base-color-black)';
|
|
3482
|
+
return ' var(--base-color-white)';
|
|
3483
|
+
}, Radio$1, function (_ref5) {
|
|
3484
|
+
var darkMode = _ref5.darkMode;
|
|
3485
|
+
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3486
|
+
return '3px solid var(--base-color-lapislazuli)';
|
|
3487
|
+
});
|
|
3488
|
+
var RadioIcon = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: currentColor;\n input[type='radio']:checked + ", " & {\n display: block;\n }\n"])), Radio$1);
|
|
3489
|
+
var TextLabel = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3490
|
+
var darkMode = _ref6.darkMode,
|
|
3491
|
+
disabled = _ref6.disabled;
|
|
3492
|
+
if (darkMode && disabled) return 'var(--base-color-light-grey)';
|
|
3493
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3494
|
+
if (disabled) return 'var(--base-color-dark-grey)';
|
|
3495
|
+
return 'var(--base-color-black)';
|
|
3496
|
+
});
|
|
3497
|
+
var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3498
|
+
var darkMode = _ref7.darkMode;
|
|
3499
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3500
|
+
return 'var(--base-color-errorstate)';
|
|
3501
|
+
});
|
|
3502
|
+
|
|
3453
3503
|
var _excluded$7 = ["children", "disabled", "error", "darkMode", "blackBox"];
|
|
3454
3504
|
/**
|
|
3455
3505
|
* A Radio component, that wraps around the native `<input type="radio"/>` element
|
|
@@ -3488,7 +3538,7 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3488
3538
|
type: "radio",
|
|
3489
3539
|
ref: ref,
|
|
3490
3540
|
"data-testid": "radio-input"
|
|
3491
|
-
})), /*#__PURE__*/React__default.createElement(Radio, {
|
|
3541
|
+
})), /*#__PURE__*/React__default.createElement(Radio$1, {
|
|
3492
3542
|
error: error,
|
|
3493
3543
|
darkMode: darkMode,
|
|
3494
3544
|
disabled: disabled,
|
|
@@ -3508,9 +3558,9 @@ var Radio2Component = function Radio2Component(_ref, ref) {
|
|
|
3508
3558
|
};
|
|
3509
3559
|
var Radio2 = /*#__PURE__*/forwardRef(Radio2Component);
|
|
3510
3560
|
|
|
3511
|
-
var _templateObject$
|
|
3512
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3513
|
-
var BaseIconWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
3561
|
+
var _templateObject$f, _templateObject2$9, _templateObject3$5, _templateObject4$3, _templateObject5$2;
|
|
3562
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3563
|
+
var BaseIconWrapper = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n\n width: ", ";\n height: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (_ref) {
|
|
3514
3564
|
var size = _ref.size;
|
|
3515
3565
|
return size === 'small' ? 'var(--rotator-button-small-width)' : 'var(--rotator-button-width)';
|
|
3516
3566
|
}, function (_ref2) {
|
|
@@ -3523,7 +3573,7 @@ var BaseIconWrapper = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateOb
|
|
|
3523
3573
|
var size = _ref4.size;
|
|
3524
3574
|
return size === 'small' ? 'var(--rotator-button-small-icon-width)' : 'var(--rotator-button-icon-width)';
|
|
3525
3575
|
});
|
|
3526
|
-
var IconWrapper$1 = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject3$
|
|
3576
|
+
var IconWrapper$1 = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--rotator-button-bg-color);\n color: var(--rotator-button-color);\n\n svg path {\n fill: var(--rotator-button-color);\n }\n\n :hover {\n cursor: pointer;\n background-color: var(--rotator-button-hover-bg-color);\n\n && svg path {\n fill: var(--rotator-button-hover-color);\n }\n }\n"])));
|
|
3527
3577
|
var IconUnavailableWrapper = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-state-disabled);\n color: var(--color-primary-black);\n opacity: 0.2;\n\n svg path {\n fill: var(--color-primary-black);\n }\n\n @media ", " {\n pointer-events: none;\n }\n"])), devices.mobile);
|
|
3528
3578
|
var FullscreenIconWrapper = /*#__PURE__*/styled(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
|
|
3529
3579
|
|
|
@@ -3627,6 +3677,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3627
3677
|
isTablet = _useViewport.isTablet,
|
|
3628
3678
|
hydrated = _useViewport.hydrated;
|
|
3629
3679
|
if (!hydrated) return null;
|
|
3680
|
+
var preventMouseFocus = function preventMouseFocus(e) {
|
|
3681
|
+
e.preventDefault();
|
|
3682
|
+
};
|
|
3630
3683
|
var onClickLeftHandler = function onClickLeftHandler() {
|
|
3631
3684
|
if (onClickPrev) {
|
|
3632
3685
|
onClickPrev();
|
|
@@ -3679,6 +3732,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3679
3732
|
className: className
|
|
3680
3733
|
}, availablePrev ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
3681
3734
|
size: size,
|
|
3735
|
+
onMouseDown: preventMouseFocus,
|
|
3682
3736
|
onClick: onClickLeftHandler,
|
|
3683
3737
|
onKeyDown: onPrevKeyDownHandler,
|
|
3684
3738
|
tabIndex: 0,
|
|
@@ -3688,9 +3742,12 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3688
3742
|
role: "button"
|
|
3689
3743
|
}, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
3690
3744
|
size: size,
|
|
3691
|
-
|
|
3745
|
+
onMouseDown: preventMouseFocus,
|
|
3746
|
+
"data-testid": "iconprevnoavailable",
|
|
3747
|
+
"aria-hidden": "true"
|
|
3692
3748
|
}, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
3693
3749
|
size: size,
|
|
3750
|
+
onMouseDown: preventMouseFocus,
|
|
3694
3751
|
onClick: onClickRightHandler,
|
|
3695
3752
|
onKeyDown: onNextKeyDownHandler,
|
|
3696
3753
|
tabIndex: 0,
|
|
@@ -3700,9 +3757,12 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3700
3757
|
role: "button"
|
|
3701
3758
|
}, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
3702
3759
|
size: size,
|
|
3703
|
-
|
|
3760
|
+
onMouseDown: preventMouseFocus,
|
|
3761
|
+
"data-testid": "iconnextnoavailable",
|
|
3762
|
+
"aria-hidden": "true"
|
|
3704
3763
|
}, renderNextIcon())), showFullscreen && !isMobile && !isTablet && (/*#__PURE__*/React__default.createElement(FullscreenIconWrapper, {
|
|
3705
3764
|
size: size,
|
|
3765
|
+
onMouseDown: preventMouseFocus,
|
|
3706
3766
|
onClick: onClickFullscreenHandler,
|
|
3707
3767
|
onKeyDown: onFullscreenKeyDownHandler,
|
|
3708
3768
|
tabIndex: 0,
|
|
@@ -3713,8 +3773,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3713
3773
|
}, renderFullscreenIcon())));
|
|
3714
3774
|
};
|
|
3715
3775
|
|
|
3716
|
-
var _templateObject$
|
|
3717
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$
|
|
3776
|
+
var _templateObject$g;
|
|
3777
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3718
3778
|
var fillColor = _ref.fillColor;
|
|
3719
3779
|
return fillColor;
|
|
3720
3780
|
});
|
|
@@ -3739,9 +3799,9 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3739
3799
|
})));
|
|
3740
3800
|
};
|
|
3741
3801
|
|
|
3742
|
-
var _templateObject$
|
|
3743
|
-
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
3744
|
-
var Splitter = /*#__PURE__*/styled.div(_templateObject2$
|
|
3802
|
+
var _templateObject$h, _templateObject2$a;
|
|
3803
|
+
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3804
|
+
var Splitter = /*#__PURE__*/styled.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--color-base-light-grey);\n"])));
|
|
3745
3805
|
|
|
3746
3806
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
3747
3807
|
var _ref$fullWidth = _ref.fullWidth,
|
|
@@ -3762,8 +3822,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3762
3822
|
}, /*#__PURE__*/React__default.createElement(Splitter, null))));
|
|
3763
3823
|
};
|
|
3764
3824
|
|
|
3765
|
-
var _templateObject$
|
|
3766
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3825
|
+
var _templateObject$i;
|
|
3826
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-block;\n height: auto;\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n\n img {\n display: block;\n width: 100%;\n }\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n"])), devices.tablet, devices.mobile);
|
|
3767
3827
|
|
|
3768
3828
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3769
3829
|
var imageSource = _ref.imageSource,
|
|
@@ -3790,10 +3850,10 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3790
3850
|
}) : children));
|
|
3791
3851
|
};
|
|
3792
3852
|
|
|
3793
|
-
var _templateObject$
|
|
3794
|
-
var SponsorshipWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3795
|
-
var SponsorshipLinkText = /*#__PURE__*/styled.span(_templateObject2$
|
|
3796
|
-
var SponsorshipLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
3853
|
+
var _templateObject$j, _templateObject2$b, _templateObject3$6, _templateObject4$4;
|
|
3854
|
+
var SponsorshipWrapper = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n position: relative;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3855
|
+
var SponsorshipLinkText = /*#__PURE__*/styled.span(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n whitespace: nowrap;\n borderwidth: 0;\n"])));
|
|
3856
|
+
var SponsorshipLink = /*#__PURE__*/styled.a(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n inset: 0;\n width: 80px;\n height: 80px;\n z-index: 2;\n text-decoration: none;\n background: transparent;\n\n @media ", " {\n width: 40px;\n height: 40px;\n }\n"])), devices.mobileAndTablet);
|
|
3797
3857
|
var SponsorshipStyledIframe = /*#__PURE__*/styled.iframe(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: none;\n display: block;\n width: 80px;\n height: 80px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n\n @media ", " {\n transform: scale(0.5);\n transform-origin: top left;\n }\n"])), devices.mobileAndTablet);
|
|
3798
3858
|
|
|
3799
3859
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3828,8 +3888,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3828
3888
|
}));
|
|
3829
3889
|
};
|
|
3830
3890
|
|
|
3831
|
-
var _templateObject$
|
|
3832
|
-
var TabText = /*#__PURE__*/styled.a(_templateObject$
|
|
3891
|
+
var _templateObject$k, _templateObject2$c;
|
|
3892
|
+
var TabText = /*#__PURE__*/styled.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--harmonic-letter-spacing-navigation);\n text-decoration: none;\n margin-left: 5px;\n color: var(--color-primary-black);\n color: ", ";\n\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n ", "\n\n @media ", " {\n width: max-content;\n }\n"])), function (_ref) {
|
|
3833
3893
|
var color = _ref.color;
|
|
3834
3894
|
return color ? "var(--color-" + color + ")" : "var(--color-primary-black)";
|
|
3835
3895
|
}, function (props) {
|
|
@@ -3840,7 +3900,7 @@ var TabText = /*#__PURE__*/styled.a(_templateObject$j || (_templateObject$j = /*
|
|
|
3840
3900
|
}
|
|
3841
3901
|
return "";
|
|
3842
3902
|
}, devices.mobileAndTablet);
|
|
3843
|
-
var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3903
|
+
var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: fit-content;\n height: 100%;\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n & path {\n fill: var(--color-primary-black);\n }\n }\n\n ", "\n\n ", "\n\n @media ", " {\n svg {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n"])), function (props) {
|
|
3844
3904
|
if (props.withIcon === 'left') {
|
|
3845
3905
|
return "\n flex-direction: row-reverse;\n svg {\n margin-right: 6px;\n }";
|
|
3846
3906
|
}
|
|
@@ -3925,8 +3985,8 @@ var Tab = function Tab(_ref) {
|
|
|
3925
3985
|
}));
|
|
3926
3986
|
};
|
|
3927
3987
|
|
|
3928
|
-
var _templateObject$
|
|
3929
|
-
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
3988
|
+
var _templateObject$l, _templateObject2$d;
|
|
3989
|
+
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n\n && svg path {\n fill: ", ";\n }\n\n @media ", ", ", " {\n &:hover {\n color: var(--color-", ");\n border-bottom: 1px solid var(--color-", ");\n\n && svg path {\n fill: var(--color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3930
3990
|
var iconName = _ref.iconName;
|
|
3931
3991
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px) 0' : 'var(--harmonic-text-link-underline-offset) 0';
|
|
3932
3992
|
}, function (_ref2) {
|
|
@@ -3953,7 +4013,7 @@ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$k || (_templateObject
|
|
|
3953
4013
|
var hoverColor = _ref7.hoverColor;
|
|
3954
4014
|
return hoverColor;
|
|
3955
4015
|
});
|
|
3956
|
-
var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
4016
|
+
var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
|
|
3957
4017
|
|
|
3958
4018
|
var _excluded$9 = ["children", "iconName", "iconDirection", "color", "hoverColor", "className"];
|
|
3959
4019
|
var TabLink = function TabLink(_ref) {
|
|
@@ -3981,19 +4041,19 @@ var TabLink = function TabLink(_ref) {
|
|
|
3981
4041
|
}))) : null, children);
|
|
3982
4042
|
};
|
|
3983
4043
|
|
|
3984
|
-
var _templateObject$
|
|
3985
|
-
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4044
|
+
var _templateObject$m, _templateObject2$e, _templateObject3$7, _templateObject4$5;
|
|
4045
|
+
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3986
4046
|
var width = _ref.width;
|
|
3987
4047
|
return width ? width + "px;" : '100%;';
|
|
3988
4048
|
}, function (_ref2) {
|
|
3989
4049
|
var height = _ref2.height;
|
|
3990
4050
|
return height + "px;";
|
|
3991
4051
|
});
|
|
3992
|
-
var TextAreaLabel = /*#__PURE__*/styled.div(_templateObject2$
|
|
4052
|
+
var TextAreaLabel = /*#__PURE__*/styled.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 0 15px;\n ", ";\n"])), function (_ref3) {
|
|
3993
4053
|
var darkMode = _ref3.darkMode;
|
|
3994
4054
|
return darkMode ? 'color: var(--base-color-white)' : '';
|
|
3995
4055
|
});
|
|
3996
|
-
var TextAreaBox = /*#__PURE__*/styled.textarea(_templateObject3$
|
|
4056
|
+
var TextAreaBox = /*#__PURE__*/styled.textarea(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n box-sizing: border-box;\n resize: none;\n padding: 20px;\n width: 100%;\n height: 100%;\n border: 1px solid ", ";\n\n ", ";\n\n :disabled {\n background-color: var(--base-color-light-grey);\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline-style: solid;\n outline-width: ", ";\n outline-color: ", ";\n }\n"])), function (_ref4) {
|
|
3997
4057
|
var error = _ref4.error;
|
|
3998
4058
|
return error ? 'var(--base-color-errorstate)' : 'var(--base-color-light-grey)';
|
|
3999
4059
|
}, function (_ref5) {
|
|
@@ -4104,14 +4164,14 @@ var TextArea = function TextArea(_ref) {
|
|
|
4104
4164
|
}, error)))));
|
|
4105
4165
|
};
|
|
4106
4166
|
|
|
4107
|
-
var _templateObject$
|
|
4108
|
-
var Container$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
4109
|
-
var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
4167
|
+
var _templateObject$n, _templateObject2$f, _templateObject3$8, _templateObject4$6, _templateObject5$3, _templateObject6$1, _templateObject7;
|
|
4168
|
+
var Container$1 = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4169
|
+
var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
4110
4170
|
var width = _ref.width;
|
|
4111
4171
|
if (!width) return 'none';
|
|
4112
4172
|
return width + "px";
|
|
4113
4173
|
});
|
|
4114
|
-
var Input = /*#__PURE__*/styled.input(_templateObject3$
|
|
4174
|
+
var Input = /*#__PURE__*/styled.input(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--color-base-light-grey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n"])), function (_ref2) {
|
|
4115
4175
|
var isPasswordField = _ref2.isPasswordField;
|
|
4116
4176
|
if (isPasswordField) return "80px";
|
|
4117
4177
|
return "20px";
|
|
@@ -4238,9 +4298,9 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
|
|
|
4238
4298
|
};
|
|
4239
4299
|
var TextField = /*#__PURE__*/forwardRef(TextFieldComponent);
|
|
4240
4300
|
|
|
4241
|
-
var _templateObject$
|
|
4242
|
-
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4243
|
-
var textStyles = /*#__PURE__*/css(_templateObject2$
|
|
4301
|
+
var _templateObject$o, _templateObject2$g, _templateObject3$9, _templateObject4$7, _templateObject5$4;
|
|
4302
|
+
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4303
|
+
var textStyles = /*#__PURE__*/css(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
|
|
4244
4304
|
var theme = _ref.theme;
|
|
4245
4305
|
return theme.fonts.desktop.weights.body[1];
|
|
4246
4306
|
}, function (_ref2) {
|
|
@@ -4250,7 +4310,7 @@ var textStyles = /*#__PURE__*/css(_templateObject2$f || (_templateObject2$f = /*
|
|
|
4250
4310
|
var theme = _ref3.theme;
|
|
4251
4311
|
return theme.spacing[7];
|
|
4252
4312
|
});
|
|
4253
|
-
var Input$1 = /*#__PURE__*/styled.input(_templateObject3$
|
|
4313
|
+
var Input$1 = /*#__PURE__*/styled.input(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n width: ", ";\n height: 48px;\n padding: 0px 20px;\n\n border: 1px solid ", ";\n outline: none;\n\n ", "\n\n :disabled {\n background-color: ", ";\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline: ", "};\n }\n"])), textStyles, function (_ref4) {
|
|
4254
4314
|
var width = _ref4.width;
|
|
4255
4315
|
return width ? width + "px" : '196px';
|
|
4256
4316
|
}, function (_ref5) {
|
|
@@ -4315,15 +4375,15 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4315
4375
|
}, error)) : null);
|
|
4316
4376
|
};
|
|
4317
4377
|
|
|
4318
|
-
var _templateObject$
|
|
4319
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
4378
|
+
var _templateObject$p, _templateObject2$h;
|
|
4379
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n text-underline-offset: ", ";\n font-family: var(--font-family-sans);\n font-size: 19px;\n font-weight: 500;\n line-height: 17px;\n letter-spacing: 0.4px;\n color: var(--color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media ", " {\n font-size: 17px;\n }\n"])), function (_ref) {
|
|
4320
4380
|
var iconName = _ref.iconName;
|
|
4321
4381
|
return iconName ? 'calc(var(--harmonic-text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
|
|
4322
4382
|
}, function (_ref2) {
|
|
4323
4383
|
var color = _ref2.color;
|
|
4324
4384
|
return color;
|
|
4325
4385
|
}, devices.mobile);
|
|
4326
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
4386
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
4327
4387
|
|
|
4328
4388
|
var _excluded$d = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
4329
4389
|
var TextLink = function TextLink(_ref) {
|
|
@@ -4354,12 +4414,12 @@ var TextLogoProduct;
|
|
|
4354
4414
|
TextLogoProduct["Cinema"] = "CINEMA";
|
|
4355
4415
|
})(TextLogoProduct || (TextLogoProduct = {}));
|
|
4356
4416
|
|
|
4357
|
-
var _templateObject$
|
|
4358
|
-
var TickboxError = /*#__PURE__*/styled.div(_templateObject$
|
|
4417
|
+
var _templateObject$q, _templateObject2$i, _templateObject3$a, _templateObject4$8;
|
|
4418
|
+
var TickboxError = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4359
4419
|
var dark = _ref.dark;
|
|
4360
4420
|
return dark ? 'white' : 'errorstate';
|
|
4361
4421
|
});
|
|
4362
|
-
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$
|
|
4422
|
+
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(\n --base-color-", "\n );\n cursor: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n div {\n margin-left: -32px;\n }\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref2) {
|
|
4363
4423
|
var dark = _ref2.dark,
|
|
4364
4424
|
disabled = _ref2.disabled;
|
|
4365
4425
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -4368,7 +4428,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$h || (_templateO
|
|
|
4368
4428
|
var disabled = _ref3.disabled;
|
|
4369
4429
|
return disabled ? 'not-allowed' : 'pointer';
|
|
4370
4430
|
}, devices.mobileAndTablet);
|
|
4371
|
-
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$
|
|
4431
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n outline: ", ";\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref4) {
|
|
4372
4432
|
var dark = _ref4.dark,
|
|
4373
4433
|
disabled = _ref4.disabled,
|
|
4374
4434
|
error = _ref4.error;
|
|
@@ -4476,9 +4536,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
4476
4536
|
}, error))));
|
|
4477
4537
|
};
|
|
4478
4538
|
|
|
4479
|
-
var _templateObject$
|
|
4480
|
-
var Container$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
4481
|
-
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
4539
|
+
var _templateObject$r, _templateObject2$j, _templateObject3$b, _templateObject4$9, _templateObject5$5, _templateObject6$2;
|
|
4540
|
+
var Container$2 = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4541
|
+
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
4482
4542
|
var error = _ref.error,
|
|
4483
4543
|
darkMode = _ref.darkMode,
|
|
4484
4544
|
disabled = _ref.disabled;
|
|
@@ -4501,7 +4561,7 @@ var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$i || (_templateObject2$
|
|
|
4501
4561
|
if (blackBox) return 'var(--base-color-white)';
|
|
4502
4562
|
return ' var(--base-color-black)';
|
|
4503
4563
|
});
|
|
4504
|
-
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$
|
|
4564
|
+
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='checkbox'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Tickbox$1, function (_ref4) {
|
|
4505
4565
|
var blackBox = _ref4.blackBox,
|
|
4506
4566
|
darkMode = _ref4.darkMode;
|
|
4507
4567
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -4587,16 +4647,16 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
|
|
|
4587
4647
|
};
|
|
4588
4648
|
var Tickbox2 = /*#__PURE__*/forwardRef(Tickbox2Component);
|
|
4589
4649
|
|
|
4590
|
-
var _templateObject$
|
|
4591
|
-
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4650
|
+
var _templateObject$s, _templateObject2$k, _templateObject3$c, _templateObject4$a, _templateObject5$6, _templateObject6$3, _templateObject7$1, _templateObject8;
|
|
4651
|
+
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-", ");\n"])), function (_ref) {
|
|
4592
4652
|
var color = _ref.color;
|
|
4593
4653
|
return color;
|
|
4594
4654
|
});
|
|
4595
|
-
var Line = /*#__PURE__*/styled.div(_templateObject2$
|
|
4655
|
+
var Line = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
|
|
4596
4656
|
var color = _ref2.color;
|
|
4597
4657
|
return color;
|
|
4598
4658
|
}, devices.mobileAndTablet);
|
|
4599
|
-
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4659
|
+
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4600
4660
|
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
4601
4661
|
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
4602
4662
|
var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -4697,8 +4757,8 @@ var Timer = function Timer(_ref) {
|
|
|
4697
4757
|
}));
|
|
4698
4758
|
};
|
|
4699
4759
|
|
|
4700
|
-
var _templateObject$
|
|
4701
|
-
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$
|
|
4760
|
+
var _templateObject$t;
|
|
4761
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\u2013';\n margin: 0 0.5em;\n }\n\n li:first-child:before {\n display: none;\n }\n"])));
|
|
4702
4762
|
|
|
4703
4763
|
var TypeTags = function TypeTags(_ref) {
|
|
4704
4764
|
var list = _ref.list;
|
|
@@ -4711,10 +4771,10 @@ var TypeTags = function TypeTags(_ref) {
|
|
|
4711
4771
|
}));
|
|
4712
4772
|
};
|
|
4713
4773
|
|
|
4714
|
-
var _templateObject$
|
|
4715
|
-
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$
|
|
4716
|
-
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
4717
|
-
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4774
|
+
var _templateObject$u, _templateObject2$l, _templateObject3$d, _templateObject4$b, _templateObject5$7, _templateObject6$4, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject0;
|
|
4775
|
+
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n cursor: pointer;\n"])));
|
|
4776
|
+
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
|
|
4777
|
+
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
4718
4778
|
var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 40px 17px 30px;\n"])));
|
|
4719
4779
|
var LeftWrapper = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4720
4780
|
var VideoVolume = /*#__PURE__*/styled.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
@@ -4901,13 +4961,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4901
4961
|
}))));
|
|
4902
4962
|
};
|
|
4903
4963
|
|
|
4904
|
-
var _templateObject$
|
|
4905
|
-
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4906
|
-
var StepperError = /*#__PURE__*/styled.div(_templateObject2$
|
|
4964
|
+
var _templateObject$v, _templateObject2$m, _templateObject3$e, _templateObject4$c, _templateObject5$8;
|
|
4965
|
+
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
4966
|
+
var StepperError = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
4907
4967
|
var darkMode = _ref.darkMode;
|
|
4908
4968
|
return darkMode ? 'white' : 'errorstate';
|
|
4909
4969
|
});
|
|
4910
|
-
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$
|
|
4970
|
+
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 154px;\n height: 48px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n ", ";\n\n * {\n color: var(--base-color-", ");\n word-break: unset;\n user-select: none;\n }\n\n path {\n fill: var(--base-color-", ") !important;\n }\n\n & > * {\n width: 51px;\n }\n"])), function (_ref2) {
|
|
4911
4971
|
var darkMode = _ref2.darkMode,
|
|
4912
4972
|
disabled = _ref2.disabled,
|
|
4913
4973
|
error = _ref2.error;
|
|
@@ -5111,9 +5171,9 @@ var Component = function Component(_ref) {
|
|
|
5111
5171
|
}, error))));
|
|
5112
5172
|
};
|
|
5113
5173
|
|
|
5114
|
-
var _templateObject$
|
|
5115
|
-
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5116
|
-
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$
|
|
5174
|
+
var _templateObject$w, _templateObject2$n;
|
|
5175
|
+
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
|
|
5176
|
+
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n\n &:focus {\n outline: 2px solid var(--color-base-white);\n }\n"])));
|
|
5117
5177
|
|
|
5118
5178
|
var SocialLinks = function SocialLinks(_ref) {
|
|
5119
5179
|
var items = _ref.items;
|
|
@@ -5137,16 +5197,16 @@ var SocialLinks = function SocialLinks(_ref) {
|
|
|
5137
5197
|
}));
|
|
5138
5198
|
};
|
|
5139
5199
|
|
|
5140
|
-
var _templateObject$
|
|
5141
|
-
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5200
|
+
var _templateObject$x, _templateObject2$o, _templateObject3$f, _templateObject4$d, _templateObject5$9, _templateObject6$5, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
5201
|
+
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 4px;\n\n @media ", " {\n padding-top: 0px;\n }\n\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
5142
5202
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5143
5203
|
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 ";
|
|
5144
5204
|
});
|
|
5145
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5205
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: ", ";\n opacity: 0;\n animation: fadeIn 0.3s ease forwards;\n\n @media ", " {\n top: 230px;\n background-color: var(--color-base-black);\n }\n\n @keyframes fadeIn {\n to {\n opacity: 0.5;\n }\n }\n"])), function (_ref2) {
|
|
5146
5206
|
var isMobile = _ref2.isMobile;
|
|
5147
5207
|
return isMobile ? zIndexes.overlay : zIndexes.searchOverlay;
|
|
5148
5208
|
}, devices.mobileAndTablet);
|
|
5149
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
5209
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-white);\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n z-index: ", ";\n\n @media ", " {\n height: 60px;\n }\n"])), zIndexes.navigation, devices.mobileAndTablet);
|
|
5150
5210
|
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n opacity: ", ";\n transform: ", ";\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease;\n background-color: var(--color-base-white);\n height: 100px;\n border-top: 1px solid var(--color-base-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 86px;\n top: 144px;\n }\n"])), function (_ref3) {
|
|
5151
5211
|
var visible = _ref3.visible;
|
|
5152
5212
|
return visible ? 'visible' : 'hidden';
|
|
@@ -5181,11 +5241,11 @@ var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject11 || (_
|
|
|
5181
5241
|
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
5182
5242
|
var NavTopContainerMobile = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n width: fit-content;\n align-items: center;\n height: 10%;\n margin-left: 20px;\n padding-bottom: 36px;\n }\n"])), devices.mobileAndTablet);
|
|
5183
5243
|
|
|
5184
|
-
var _templateObject$
|
|
5185
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5244
|
+
var _templateObject$y;
|
|
5245
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 100%;\n\n @media ", " {\n column-gap: 20px;\n }\n"])), devices.mobile);
|
|
5186
5246
|
|
|
5187
|
-
var _templateObject$
|
|
5188
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5247
|
+
var _templateObject$z, _templateObject2$p, _templateObject3$g, _templateObject4$e, _templateObject5$a, _templateObject6$6;
|
|
5248
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding-top: 3px;\n padding-bottom: 3px;\n\n & svg path {\n fill: var(--color-primary-black);\n }\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--color-primary-red);\n padding-bottom: 2px;\n && a {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
5189
5249
|
var selected = _ref.selected;
|
|
5190
5250
|
if (selected) {
|
|
5191
5251
|
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 ";
|
|
@@ -5198,8 +5258,8 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$y || (_templateObj
|
|
|
5198
5258
|
}
|
|
5199
5259
|
return '';
|
|
5200
5260
|
});
|
|
5201
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5202
|
-
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
5261
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5262
|
+
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n"])));
|
|
5203
5263
|
var BasketInfo = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n @media ", " {\n width: max-content;\n }\n"])), devices.mobileAndTablet);
|
|
5204
5264
|
var BasketNum = /*#__PURE__*/styled.span(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n font-size: 10px;\n font-family: var(--font-family-sans);\n"])));
|
|
5205
5265
|
var BasketText = /*#__PURE__*/styled.a(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n color: var(--color-primary-black);\n margin-left: 6px;\n text-decoration: none;\n"])));
|
|
@@ -5346,15 +5406,15 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5346
5406
|
}, expiryTime ? basketText : text)) : ''));
|
|
5347
5407
|
};
|
|
5348
5408
|
|
|
5349
|
-
var _templateObject$
|
|
5350
|
-
var SearchContainer = /*#__PURE__*/styled.button(_templateObject$
|
|
5409
|
+
var _templateObject$A, _templateObject2$q;
|
|
5410
|
+
var SearchContainer = /*#__PURE__*/styled.button(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid transparent;\n padding-top: 3px;\n padding-bottom: 3px;\n\n svg path {\n fill: var(--color-primary-black);\n }\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])), function (_ref) {
|
|
5351
5411
|
var selected = _ref.selected;
|
|
5352
5412
|
if (selected) {
|
|
5353
5413
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
5354
5414
|
}
|
|
5355
5415
|
return '';
|
|
5356
5416
|
});
|
|
5357
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
5417
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5358
5418
|
|
|
5359
5419
|
var Search$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
5360
5420
|
var _ref$selected = _ref.selected,
|
|
@@ -5614,15 +5674,15 @@ var NavTop = function NavTop(_ref) {
|
|
|
5614
5674
|
}));
|
|
5615
5675
|
};
|
|
5616
5676
|
|
|
5617
|
-
var _templateObject$
|
|
5618
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5619
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5677
|
+
var _templateObject$B, _templateObject2$r, _templateObject3$h, _templateObject4$f;
|
|
5678
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
5679
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
5620
5680
|
if (props.showMenu) {
|
|
5621
5681
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
5622
5682
|
}
|
|
5623
5683
|
return "display: none;";
|
|
5624
5684
|
});
|
|
5625
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
5685
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--color-primary-red);\n }\n }\n\n && svg path {\n fill: var(--color-primary-black);\n }\n\n :hover {\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5626
5686
|
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 0;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5627
5687
|
|
|
5628
5688
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
@@ -5749,10 +5809,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
5749
5809
|
}, "Menu"))))));
|
|
5750
5810
|
};
|
|
5751
5811
|
|
|
5752
|
-
var _templateObject$
|
|
5753
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5754
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
5755
|
-
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$
|
|
5812
|
+
var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject5$b, _templateObject6$7, _templateObject7$4;
|
|
5813
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: transparent;\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
5814
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
5815
|
+
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])));
|
|
5756
5816
|
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-serif);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--color-base-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
5757
5817
|
var TextLinkWrapper$1 = /*#__PURE__*/styled(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
5758
5818
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-right: 8px;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
@@ -5893,19 +5953,19 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5893
5953
|
})));
|
|
5894
5954
|
};
|
|
5895
5955
|
|
|
5896
|
-
var _templateObject$
|
|
5897
|
-
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5956
|
+
var _templateObject$D, _templateObject2$t, _templateObject3$j, _templateObject4$g, _templateObject5$c, _templateObject6$8, _templateObject7$5;
|
|
5957
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n border-top: 2px solid var(--color-base-light-grey);\n border-bottom: ", ";\n"])), function (_ref) {
|
|
5898
5958
|
var showLine = _ref.showLine;
|
|
5899
5959
|
return showLine ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
5900
5960
|
});
|
|
5901
|
-
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5961
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n opacity: ", ";\n transition: opacity 0.2s ease;\n pointer-events: ", ";\n\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref2) {
|
|
5902
5962
|
var isVisible = _ref2.isVisible;
|
|
5903
5963
|
return isVisible ? 1 : 0;
|
|
5904
5964
|
}, function (_ref3) {
|
|
5905
5965
|
var isVisible = _ref3.isVisible;
|
|
5906
5966
|
return isVisible ? 'auto' : 'none';
|
|
5907
5967
|
}, devices.mobile);
|
|
5908
|
-
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
5968
|
+
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-top: 28px;\n padding-bottom: 28px;\n color: var(--color-primary-black);\n\n && svg {\n width: 24px;\n height: 24px;\n }\n\n :hover {\n cursor: ", ";\n pointer-events: ", ";\n }\n\n @media ", " {\n padding-top: 16px;\n padding-bottom: 16px;\n }\n"])), function (_ref4) {
|
|
5909
5969
|
var hasChildren = _ref4.hasChildren;
|
|
5910
5970
|
return hasChildren ? 'pointer' : 'default';
|
|
5911
5971
|
}, function (_ref5) {
|
|
@@ -5918,13 +5978,31 @@ var ContentContainer = /*#__PURE__*/styled(ExtendedBodyCopyHarmonic).withConfig(
|
|
|
5918
5978
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5919
5979
|
return prop !== 'textHeight';
|
|
5920
5980
|
}
|
|
5921
|
-
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref6) {
|
|
5981
|
+
})(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n overflow: ", ";\n margin-bottom: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref6) {
|
|
5922
5982
|
var textHeight = _ref6.textHeight;
|
|
5923
5983
|
return textHeight;
|
|
5984
|
+
}, function (_ref7) {
|
|
5985
|
+
var textHeight = _ref7.textHeight;
|
|
5986
|
+
return textHeight === '0px' ? 'hidden' : 'visible';
|
|
5987
|
+
}, function (_ref8) {
|
|
5988
|
+
var textHeight = _ref8.textHeight;
|
|
5989
|
+
return textHeight === '0px' ? '0px' : '12px';
|
|
5924
5990
|
}, devices.mobile);
|
|
5925
5991
|
var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
|
|
5926
5992
|
|
|
5927
5993
|
/* eslint-disable react/no-unstable-nested-components */
|
|
5994
|
+
/** In-flow height only so absolutely positioned UI (e.g. react-select menu) does not inflate scrollHeight. */
|
|
5995
|
+
function getPanelContentHeight(panel) {
|
|
5996
|
+
var inner = panel.firstElementChild;
|
|
5997
|
+
if (!inner || !(inner instanceof HTMLElement)) {
|
|
5998
|
+
return panel.scrollHeight;
|
|
5999
|
+
}
|
|
6000
|
+
var innerStyle = window.getComputedStyle(inner);
|
|
6001
|
+
var marginY = (parseFloat(innerStyle.marginTop) || 0) + (parseFloat(innerStyle.marginBottom) || 0);
|
|
6002
|
+
var panelStyle = window.getComputedStyle(panel);
|
|
6003
|
+
var paddingY = (parseFloat(panelStyle.paddingTop) || 0) + (parseFloat(panelStyle.paddingBottom) || 0);
|
|
6004
|
+
return inner.offsetHeight + marginY + paddingY;
|
|
6005
|
+
}
|
|
5928
6006
|
var Accordion = function Accordion(_ref) {
|
|
5929
6007
|
var _expandedStateIcon$ic, _collapsedStateIcon$i;
|
|
5930
6008
|
var _ref$title = _ref.title,
|
|
@@ -5961,21 +6039,69 @@ var Accordion = function Accordion(_ref) {
|
|
|
5961
6039
|
var content = useRef(null);
|
|
5962
6040
|
var timeoutRef = useRef(null);
|
|
5963
6041
|
var rafRef = useRef(null);
|
|
6042
|
+
var resizeObserverRef = useRef(null);
|
|
6043
|
+
var intervalRef = useRef(null);
|
|
5964
6044
|
useEffect(function () {
|
|
5965
|
-
if (content
|
|
5966
|
-
setTextHeight(content.current
|
|
6045
|
+
if (content.current && initOpen) {
|
|
6046
|
+
setTextHeight(getPanelContentHeight(content.current) + "px");
|
|
5967
6047
|
}
|
|
5968
|
-
}, [
|
|
6048
|
+
}, [initOpen]);
|
|
5969
6049
|
useEffect(function () {
|
|
5970
|
-
|
|
5971
|
-
|
|
5972
|
-
|
|
5973
|
-
|
|
5974
|
-
|
|
5975
|
-
|
|
6050
|
+
var cleanup = function cleanup() {
|
|
6051
|
+
return undefined;
|
|
6052
|
+
};
|
|
6053
|
+
var el = content.current;
|
|
6054
|
+
if (!el) return cleanup;
|
|
6055
|
+
if (!openAccordion) {
|
|
5976
6056
|
setTextHeight('0px');
|
|
6057
|
+
if (resizeObserverRef.current) {
|
|
6058
|
+
resizeObserverRef.current.disconnect();
|
|
6059
|
+
resizeObserverRef.current = null;
|
|
6060
|
+
}
|
|
6061
|
+
if (intervalRef.current) {
|
|
6062
|
+
window.clearInterval(intervalRef.current);
|
|
6063
|
+
intervalRef.current = null;
|
|
6064
|
+
}
|
|
6065
|
+
if (rafRef.current) {
|
|
6066
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6067
|
+
rafRef.current = null;
|
|
6068
|
+
}
|
|
6069
|
+
return cleanup;
|
|
6070
|
+
}
|
|
6071
|
+
var updateHeight = function updateHeight() {
|
|
6072
|
+
setTextHeight(getPanelContentHeight(el) + "px");
|
|
6073
|
+
};
|
|
6074
|
+
rafRef.current = window.requestAnimationFrame(updateHeight);
|
|
6075
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
6076
|
+
var ro = new ResizeObserver(updateHeight);
|
|
6077
|
+
ro.observe(el);
|
|
6078
|
+
resizeObserverRef.current = ro;
|
|
6079
|
+
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6080
|
+
return function () {
|
|
6081
|
+
ro.disconnect();
|
|
6082
|
+
resizeObserverRef.current = null;
|
|
6083
|
+
if (intervalRef.current) {
|
|
6084
|
+
window.clearInterval(intervalRef.current);
|
|
6085
|
+
intervalRef.current = null;
|
|
6086
|
+
}
|
|
6087
|
+
if (rafRef.current) {
|
|
6088
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6089
|
+
rafRef.current = null;
|
|
6090
|
+
}
|
|
6091
|
+
};
|
|
5977
6092
|
}
|
|
5978
|
-
|
|
6093
|
+
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6094
|
+
return function () {
|
|
6095
|
+
if (intervalRef.current) {
|
|
6096
|
+
window.clearInterval(intervalRef.current);
|
|
6097
|
+
intervalRef.current = null;
|
|
6098
|
+
}
|
|
6099
|
+
if (rafRef.current) {
|
|
6100
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6101
|
+
rafRef.current = null;
|
|
6102
|
+
}
|
|
6103
|
+
};
|
|
6104
|
+
}, [openAccordion, childrenVisibility, children]);
|
|
5979
6105
|
useEffect(function () {
|
|
5980
6106
|
return function () {
|
|
5981
6107
|
if (timeoutRef.current) {
|
|
@@ -5986,6 +6112,14 @@ var Accordion = function Accordion(_ref) {
|
|
|
5986
6112
|
window.cancelAnimationFrame(rafRef.current);
|
|
5987
6113
|
rafRef.current = null;
|
|
5988
6114
|
}
|
|
6115
|
+
if (resizeObserverRef.current) {
|
|
6116
|
+
resizeObserverRef.current.disconnect();
|
|
6117
|
+
resizeObserverRef.current = null;
|
|
6118
|
+
}
|
|
6119
|
+
if (intervalRef.current) {
|
|
6120
|
+
window.clearInterval(intervalRef.current);
|
|
6121
|
+
intervalRef.current = null;
|
|
6122
|
+
}
|
|
5989
6123
|
};
|
|
5990
6124
|
}, []);
|
|
5991
6125
|
var toggleAccordion = function toggleAccordion() {
|
|
@@ -6039,8 +6173,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6039
6173
|
}, children)));
|
|
6040
6174
|
};
|
|
6041
6175
|
|
|
6042
|
-
var _templateObject$
|
|
6043
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6176
|
+
var _templateObject$E;
|
|
6177
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6044
6178
|
|
|
6045
6179
|
var Accordions = function Accordions(_ref) {
|
|
6046
6180
|
var _ref$items = _ref.items,
|
|
@@ -6062,16 +6196,16 @@ var Accordions = function Accordions(_ref) {
|
|
|
6062
6196
|
}));
|
|
6063
6197
|
};
|
|
6064
6198
|
|
|
6065
|
-
var _templateObject$
|
|
6066
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6067
|
-
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
6199
|
+
var _templateObject$F, _templateObject2$u, _templateObject3$k, _templateObject4$h, _templateObject5$d;
|
|
6200
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: var(--announcement-banner-bg-color);\n color: var(--announcement-banner-color);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), devices.mobile);
|
|
6201
|
+
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n cursor: ", ";\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n\n path {\n fill: var(--announcement-banner-color);\n }\n }\n"])), function (_ref) {
|
|
6068
6202
|
var isClickable = _ref.isClickable;
|
|
6069
6203
|
return isClickable ? 'pointer' : 'default';
|
|
6070
6204
|
}, function (_ref2) {
|
|
6071
6205
|
var isClickable = _ref2.isClickable;
|
|
6072
6206
|
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 ";
|
|
6073
6207
|
});
|
|
6074
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
6208
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-sans);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--announcement-banner-color);\n a {\n color: var(--announcement-banner-color);\n text-decoration: underline;\n }\n\n * {\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n margin-inline-end: 0;\n }\n"])));
|
|
6075
6209
|
var OverlineWrapper = /*#__PURE__*/styled(HarmonicOverline)(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
|
|
6076
6210
|
var BannerContentWrapper = /*#__PURE__*/styled(GridItem)(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n grid-column: 3 / span 10;\n }\n\n @media ", ", ", " {\n && {\n grid-column: 3 / span 12;\n }\n }\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.desktop, devices.largeDesktop, devices.mobile, function (_ref3) {
|
|
6077
6211
|
var variant = _ref3.variant;
|
|
@@ -6166,8 +6300,8 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
|
|
|
6166
6300
|
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
6167
6301
|
};
|
|
6168
6302
|
|
|
6169
|
-
var _templateObject$
|
|
6170
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$
|
|
6303
|
+
var _templateObject$G;
|
|
6304
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
|
|
6171
6305
|
|
|
6172
6306
|
var _excluded$f = ["children", "className"];
|
|
6173
6307
|
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
@@ -6180,22 +6314,22 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
6180
6314
|
}), children);
|
|
6181
6315
|
};
|
|
6182
6316
|
|
|
6183
|
-
var _templateObject$
|
|
6317
|
+
var _templateObject$H, _templateObject2$v, _templateObject3$l, _templateObject4$i, _templateObject5$e, _templateObject6$9, _templateObject7$6, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1;
|
|
6184
6318
|
var LENGTH_LARGE_TEXT = 28;
|
|
6185
6319
|
var LENGTH_SMALL_TEXT = 19;
|
|
6186
6320
|
var LENGTH_TEXT_TABLET = 10;
|
|
6187
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6321
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
6188
6322
|
var isCardClickable = _ref.isCardClickable;
|
|
6189
6323
|
return isCardClickable ? 'pointer' : 'default';
|
|
6190
6324
|
}, function (_ref2) {
|
|
6191
6325
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
6192
6326
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
6193
6327
|
});
|
|
6194
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6328
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n background-color: var(--button-bg-color);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
6195
6329
|
var lineColor = _ref3.lineColor;
|
|
6196
6330
|
return lineColor ? "var(--color-" + lineColor + ")" : 'var(--color-primary-background)';
|
|
6197
6331
|
}, zIndexes.contentOverlay);
|
|
6198
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
6332
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
|
|
6199
6333
|
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: 24px;\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref4) {
|
|
6200
6334
|
var fullWidth = _ref4.fullWidth;
|
|
6201
6335
|
return fullWidth ? '0' : '20px';
|
|
@@ -6476,9 +6610,9 @@ var Card = function Card(_ref) {
|
|
|
6476
6610
|
}, restSecondButton), tertiaryButtonTextTruncate)))));
|
|
6477
6611
|
};
|
|
6478
6612
|
|
|
6479
|
-
var _templateObject$
|
|
6480
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
6481
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
6613
|
+
var _templateObject$I, _templateObject2$w;
|
|
6614
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
6615
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
6482
6616
|
|
|
6483
6617
|
var Cards = function Cards(_ref) {
|
|
6484
6618
|
var cards = _ref.cards,
|
|
@@ -6520,38 +6654,41 @@ var Cards = function Cards(_ref) {
|
|
|
6520
6654
|
}));
|
|
6521
6655
|
};
|
|
6522
6656
|
|
|
6523
|
-
var _templateObject$
|
|
6524
|
-
var CastFiltersComponentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6525
|
-
var CastFiltersWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
6526
|
-
var HeadingTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
6657
|
+
var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
|
|
6658
|
+
var CastFiltersComponentWrapper = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n flex-direction: column-reverse;\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6659
|
+
var CastFiltersWrapper = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6660
|
+
var HeadingTextWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
|
|
6527
6661
|
var RotatorButtonsWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6528
|
-
var CastWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x:
|
|
6662
|
+
var CastWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: hidden;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n @media ", " {\n flex-direction: column;\n gap: 10px;\n overflow-x: scroll;\n }\n"])), devices.mobile);
|
|
6529
6663
|
var ActionButtons = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n gap: 32px;\n\n .mobile-only {\n visibility: hidden;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n }\n\n @media ", " {\n .mobile-only {\n visibility: visible;\n padding-block: 24px;\n font-size: 17px;\n line-height: 24px;\n }\n\n flex-direction: row-reverse;\n gap: unset;\n justify-content: space-between;\n border-block-end: 2px solid var(--base-color-light-grey);\n\n :has(.mobile-only) {\n justify-content: left;\n }\n\n :not(:has(.mobile-only)) {\n padding-block: 12px;\n }\n\n a {\n width: fit-content;\n }\n }\n"])), devices.mobile);
|
|
6530
6664
|
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n margin-block-start: 2px;\n margin-inline: 2px;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n\n :focus-visible {\n outline: none;\n\n & > div:first-child {\n outline: 2px solid var(--color-base-black);\n }\n }\n\n @media ", " {\n flex-direction: row;\n gap: 20px;\n margin-block-end: 2px;\n margin-inline-end: unset;\n\n p {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
6531
6665
|
var PersonToggle = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n width: 86px;\n height: 86px;\n min-width: 86px;\n border: 4px solid;\n border-color: ", ";\n border-radius: 50%;\n background: var(--color-base-white);\n position: relative;\n box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
|
|
6532
6666
|
var isSelected = _ref.isSelected;
|
|
6533
6667
|
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
6534
6668
|
});
|
|
6535
|
-
var PersonImage = /*#__PURE__*/styled.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n\n // This is really specific to the SVG that we have been provided\n // as a fallback person image. I don't think there's a simpler and\n // more general way to handle this, so if we're given a new placeholder\n // image later, we may have to change the scale here\n ", "\n"])), function (_ref2) {
|
|
6536
|
-
var
|
|
6669
|
+
var PersonImage = /*#__PURE__*/styled.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n filter: ", ";\n\n // This is really specific to the SVG that we have been provided\n // as a fallback person image. I don't think there's a simpler and\n // more general way to handle this, so if we're given a new placeholder\n // image later, we may have to change the scale here\n ", "\n"])), function (_ref2) {
|
|
6670
|
+
var greyscale = _ref2.greyscale;
|
|
6671
|
+
return greyscale ? 'grayscale(100%)' : 'none';
|
|
6672
|
+
}, function (_ref3) {
|
|
6673
|
+
var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
|
|
6537
6674
|
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6538
6675
|
});
|
|
6539
6676
|
var PersonName = /*#__PURE__*/styled.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n\n @media ", " {\n max-width: unset;\n text-align: left;\n font-size: 17px;\n line-height: 24px;\n }\n"])), devices.mobile);
|
|
6540
|
-
var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (
|
|
6541
|
-
var isSelected = _ref3.isSelected;
|
|
6542
|
-
return isSelected ? 'flex' : 'none';
|
|
6543
|
-
}, function (_ref4) {
|
|
6677
|
+
var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (_ref4) {
|
|
6544
6678
|
var isSelected = _ref4.isSelected;
|
|
6545
6679
|
return isSelected ? 'flex' : 'none';
|
|
6680
|
+
}, function (_ref5) {
|
|
6681
|
+
var isSelected = _ref5.isSelected;
|
|
6682
|
+
return isSelected ? 'flex' : 'none';
|
|
6546
6683
|
});
|
|
6547
6684
|
var EmptySelectionTextSpacer = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
|
|
6548
6685
|
|
|
6549
6686
|
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";
|
|
6550
6687
|
|
|
6551
|
-
var _templateObject$
|
|
6688
|
+
var _templateObject$K, _templateObject2$y;
|
|
6552
6689
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
6553
|
-
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6554
|
-
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$
|
|
6690
|
+
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
6691
|
+
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
6555
6692
|
var transitioning = _ref.transitioning;
|
|
6556
6693
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
6557
6694
|
}, function (_ref2) {
|
|
@@ -6612,7 +6749,7 @@ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
|
|
|
6612
6749
|
return movedSlides;
|
|
6613
6750
|
};
|
|
6614
6751
|
|
|
6615
|
-
var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
|
|
6752
|
+
var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange", "limitDragToNavigableRange"];
|
|
6616
6753
|
var MAX_CLONES_NUMBER = 6;
|
|
6617
6754
|
var CLICK_DRAG_THRESHOLD = 10;
|
|
6618
6755
|
var getClonesCount = function getClonesCount(infinite, childrenLength) {
|
|
@@ -6637,6 +6774,8 @@ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
6637
6774
|
slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
|
|
6638
6775
|
onActiveChange = _ref.onActiveChange,
|
|
6639
6776
|
onOverflowChange = _ref.onOverflowChange,
|
|
6777
|
+
_ref$limitDragToNavig = _ref.limitDragToNavigableRange,
|
|
6778
|
+
limitDragToNavigableRange = _ref$limitDragToNavig === void 0 ? false : _ref$limitDragToNavig,
|
|
6640
6779
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
6641
6780
|
var containerRef = useRef(null);
|
|
6642
6781
|
var childRefs = useRef([]);
|
|
@@ -6742,6 +6881,39 @@ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
6742
6881
|
}, 0);
|
|
6743
6882
|
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
6744
6883
|
};
|
|
6884
|
+
var canScrollRightFromIndex = function canScrollRightFromIndex(index) {
|
|
6885
|
+
if (infinite) return true;
|
|
6886
|
+
if (slideWidths.length === 0 || containerWidth === 0) return false;
|
|
6887
|
+
var totalContentWidth = slideWidths.reduce(function (sum, width) {
|
|
6888
|
+
return sum + width;
|
|
6889
|
+
}, 0);
|
|
6890
|
+
var widthBeforeCurrent = slideWidths.slice(0, index).reduce(function (sum, width) {
|
|
6891
|
+
return sum + width;
|
|
6892
|
+
}, 0);
|
|
6893
|
+
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
6894
|
+
var remainingToRight = totalContentWidth - widthBeforeCurrent - visibleSpace;
|
|
6895
|
+
var visible = getVisibleIndexes(index, slideWidths, containerWidth, slides.length);
|
|
6896
|
+
var lastVisibleIndex = visible.length ? visible[visible.length - 1] : index;
|
|
6897
|
+
var nextIndex = lastVisibleIndex + 1;
|
|
6898
|
+
if (nextIndex >= slideWidths.length) return false;
|
|
6899
|
+
var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
|
|
6900
|
+
if (nextSlideWidth === 0) return false;
|
|
6901
|
+
var EPS = 1; // pixel tolerance
|
|
6902
|
+
// full next slide fits
|
|
6903
|
+
if (remainingToRight + EPS >= nextSlideWidth) return true;
|
|
6904
|
+
return remainingToRight > 0;
|
|
6905
|
+
};
|
|
6906
|
+
var canMoveNext = function canMoveNext() {
|
|
6907
|
+
return canScrollRightFromIndex(currentIndex);
|
|
6908
|
+
};
|
|
6909
|
+
var getMaxNavigableIndex = function getMaxNavigableIndex() {
|
|
6910
|
+
if (infinite) return slides.length - 1;
|
|
6911
|
+
var index = 0;
|
|
6912
|
+
while (index < slides.length - 1 && canScrollRightFromIndex(index)) {
|
|
6913
|
+
index += 1;
|
|
6914
|
+
}
|
|
6915
|
+
return index;
|
|
6916
|
+
};
|
|
6745
6917
|
var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
|
|
6746
6918
|
var delta = currentTranslate.current - getTranslateX();
|
|
6747
6919
|
var direction = delta > 0 ? -1 : 1;
|
|
@@ -6749,7 +6921,8 @@ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
6749
6921
|
if (Math.abs(delta) > 20) {
|
|
6750
6922
|
movedSlides = Math.max(1, movedSlides);
|
|
6751
6923
|
var targetIndex = currentIndex + direction * movedSlides;
|
|
6752
|
-
var
|
|
6924
|
+
var maxNavigableIndex = limitDragToNavigableRange ? getMaxNavigableIndex() : slides.length - 1;
|
|
6925
|
+
var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(maxNavigableIndex, targetIndex));
|
|
6753
6926
|
if (!infinite) {
|
|
6754
6927
|
currentTranslate.current = getTranslateForIndex(finalIndex);
|
|
6755
6928
|
setDragTranslateX(null);
|
|
@@ -6764,28 +6937,6 @@ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
6764
6937
|
}
|
|
6765
6938
|
setDragTranslateX(null);
|
|
6766
6939
|
};
|
|
6767
|
-
var canMoveNext = function canMoveNext() {
|
|
6768
|
-
if (infinite) return true;
|
|
6769
|
-
if (slideWidths.length === 0 || containerWidth === 0) return false;
|
|
6770
|
-
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
6771
|
-
return acc + w;
|
|
6772
|
-
}, 0);
|
|
6773
|
-
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
|
|
6774
|
-
return acc + w;
|
|
6775
|
-
}, 0);
|
|
6776
|
-
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
6777
|
-
var remainingToRight = totalWidth - widthsBefore - visibleSpace;
|
|
6778
|
-
var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
6779
|
-
var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
|
|
6780
|
-
var nextIndex = lastVisibleIndex + 1;
|
|
6781
|
-
if (nextIndex >= slideWidths.length) return false;
|
|
6782
|
-
var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
|
|
6783
|
-
if (nextSlideWidth === 0) return false;
|
|
6784
|
-
var EPS = 1; // pixel tolerance
|
|
6785
|
-
// full next slide fits
|
|
6786
|
-
if (remainingToRight + EPS >= nextSlideWidth) return true;
|
|
6787
|
-
return remainingToRight > 0;
|
|
6788
|
-
};
|
|
6789
6940
|
var handleTransitionEnd = function handleTransitionEnd() {
|
|
6790
6941
|
setTransitioning(false);
|
|
6791
6942
|
if (!infinite) return;
|
|
@@ -6950,6 +7101,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6950
7101
|
onSelect = _ref.onSelect,
|
|
6951
7102
|
onApply = _ref.onApply,
|
|
6952
7103
|
onClear = _ref.onClear,
|
|
7104
|
+
_ref$greyscale = _ref.greyscale,
|
|
7105
|
+
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
6953
7106
|
_ref$selectedIndices = _ref.selectedIndices,
|
|
6954
7107
|
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
6955
7108
|
var _useViewport = useViewport(),
|
|
@@ -6995,11 +7148,13 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6995
7148
|
};
|
|
6996
7149
|
var onNext = function onNext() {
|
|
6997
7150
|
var _swipeRef$current4;
|
|
6998
|
-
|
|
7151
|
+
if (!availableNext) return;
|
|
7152
|
+
(_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.nextSlide();
|
|
6999
7153
|
};
|
|
7000
7154
|
var onPrev = function onPrev() {
|
|
7001
7155
|
var _swipeRef$current5;
|
|
7002
|
-
|
|
7156
|
+
if (!availablePrev) return;
|
|
7157
|
+
(_swipeRef$current5 = swipeRef.current) == null || _swipeRef$current5.prevSlide();
|
|
7003
7158
|
};
|
|
7004
7159
|
useEffect(function () {
|
|
7005
7160
|
var el = castWrapperRef.current;
|
|
@@ -7022,15 +7177,15 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7022
7177
|
};
|
|
7023
7178
|
}, []);
|
|
7024
7179
|
var handleMouseDown = useCallback(function (e) {
|
|
7025
|
-
if (!castWrapperRef.current) return;
|
|
7180
|
+
if (!isMobile || !castWrapperRef.current) return;
|
|
7026
7181
|
isDraggingRef.current = true;
|
|
7027
7182
|
hasDraggedRef.current = false;
|
|
7028
7183
|
startXRef.current = e.clientX;
|
|
7029
7184
|
scrollStartRef.current = castWrapperRef.current.scrollLeft;
|
|
7030
7185
|
if (e.target === castWrapperRef.current) e.preventDefault();
|
|
7031
|
-
}, []);
|
|
7186
|
+
}, [isMobile]);
|
|
7032
7187
|
var handleMouseMove = useCallback(function (e) {
|
|
7033
|
-
if (!isDraggingRef.current || !castWrapperRef.current) return;
|
|
7188
|
+
if (!isMobile || !isDraggingRef.current || !castWrapperRef.current) return;
|
|
7034
7189
|
var deltaX = e.clientX - startXRef.current;
|
|
7035
7190
|
var threshold = 5;
|
|
7036
7191
|
if (Math.abs(deltaX) > threshold) {
|
|
@@ -7038,17 +7193,19 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7038
7193
|
e.preventDefault();
|
|
7039
7194
|
castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
|
|
7040
7195
|
}
|
|
7041
|
-
}, []);
|
|
7196
|
+
}, [isMobile]);
|
|
7042
7197
|
var handleMouseUp = useCallback(function () {
|
|
7198
|
+
if (!isMobile) return;
|
|
7043
7199
|
isDraggingRef.current = false;
|
|
7044
7200
|
setTimeout(function () {
|
|
7045
7201
|
hasDraggedRef.current = false;
|
|
7046
7202
|
}, 0);
|
|
7047
|
-
}, []);
|
|
7203
|
+
}, [isMobile]);
|
|
7048
7204
|
var handleMouseLeave = useCallback(function () {
|
|
7205
|
+
if (!isMobile) return;
|
|
7049
7206
|
isDraggingRef.current = false;
|
|
7050
7207
|
hasDraggedRef.current = false;
|
|
7051
|
-
}, []);
|
|
7208
|
+
}, [isMobile]);
|
|
7052
7209
|
var handleClick = React__default.useCallback(function (index, onClick) {
|
|
7053
7210
|
if (hasDraggedRef.current) return;
|
|
7054
7211
|
if (onSelect) onSelect(index);
|
|
@@ -7090,7 +7247,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7090
7247
|
src: personImage,
|
|
7091
7248
|
alt: image ? name : "Placeholder image for " + name,
|
|
7092
7249
|
draggable: false,
|
|
7093
|
-
isDefaultPlaceholder: !(!!image || !!placeholderImage)
|
|
7250
|
+
isDefaultPlaceholder: !(!!image || !!placeholderImage),
|
|
7251
|
+
greyscale: greyscale
|
|
7094
7252
|
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7095
7253
|
isSelected: isSelected
|
|
7096
7254
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -7133,7 +7291,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7133
7291
|
onIndexChange: onIndexChangeHandler,
|
|
7134
7292
|
"data-testid": "cast-filter-swipe",
|
|
7135
7293
|
ref: swipeRef,
|
|
7136
|
-
onOverflowChange: handleOverflowChange
|
|
7294
|
+
onOverflowChange: handleOverflowChange,
|
|
7295
|
+
limitDragToNavigableRange: true
|
|
7137
7296
|
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7138
7297
|
size: "medium",
|
|
7139
7298
|
className: "mobile-only"
|
|
@@ -7149,10 +7308,10 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7149
7308
|
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7150
7309
|
};
|
|
7151
7310
|
|
|
7152
|
-
var _templateObject$
|
|
7153
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7154
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7155
|
-
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7311
|
+
var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
|
|
7312
|
+
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7313
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
|
|
7314
|
+
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7156
7315
|
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7157
7316
|
var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7158
7317
|
var DesktopSuffixWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
@@ -7207,12 +7366,12 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7207
7366
|
}, addressString)))))))));
|
|
7208
7367
|
};
|
|
7209
7368
|
|
|
7210
|
-
var _templateObject$
|
|
7211
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
7212
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
7369
|
+
var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$c;
|
|
7370
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7371
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7213
7372
|
return props.clickable ? 'pointer' : 'default';
|
|
7214
7373
|
}, devices.mobile);
|
|
7215
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7374
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7216
7375
|
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7217
7376
|
return props.showImage ? 2 : '1 / span 4';
|
|
7218
7377
|
}, devices.mobile);
|
|
@@ -7300,16 +7459,16 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7300
7459
|
}), link.text))));
|
|
7301
7460
|
};
|
|
7302
7461
|
|
|
7303
|
-
var _templateObject$
|
|
7304
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
7462
|
+
var _templateObject$N, _templateObject2$B, _templateObject3$p, _templateObject4$m, _templateObject5$i;
|
|
7463
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7305
7464
|
var imageToLeft = _ref.imageToLeft;
|
|
7306
7465
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7307
7466
|
}, devices.mobile);
|
|
7308
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7467
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7309
7468
|
var imageToLeft = _ref2.imageToLeft;
|
|
7310
7469
|
return imageToLeft ? 'left' : 'right';
|
|
7311
7470
|
}, devices.mobile);
|
|
7312
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7471
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7313
7472
|
var imageToLeft = _ref3.imageToLeft;
|
|
7314
7473
|
return imageToLeft ? 'right' : 'left';
|
|
7315
7474
|
}, devices.mobile);
|
|
@@ -7353,10 +7512,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7353
7512
|
})))));
|
|
7354
7513
|
};
|
|
7355
7514
|
|
|
7356
|
-
var _templateObject$
|
|
7357
|
-
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7358
|
-
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7359
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$
|
|
7515
|
+
var _templateObject$O, _templateObject2$C, _templateObject3$q;
|
|
7516
|
+
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
7517
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
7518
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
|
|
7360
7519
|
|
|
7361
7520
|
var _excluded$j = ["text", "onClick"];
|
|
7362
7521
|
var HotFilters = function HotFilters(_ref) {
|
|
@@ -7420,10 +7579,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7420
7579
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7421
7580
|
};
|
|
7422
7581
|
|
|
7423
|
-
var _templateObject$
|
|
7424
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7425
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7426
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
7582
|
+
var _templateObject$P, _templateObject2$D, _templateObject3$r, _templateObject4$n;
|
|
7583
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
|
|
7584
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7585
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
|
|
7427
7586
|
var variant = _ref.variant,
|
|
7428
7587
|
theme = _ref.theme;
|
|
7429
7588
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7657,13 +7816,13 @@ var Information = function Information(_ref) {
|
|
|
7657
7816
|
})))));
|
|
7658
7817
|
};
|
|
7659
7818
|
|
|
7660
|
-
var _templateObject$
|
|
7661
|
-
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$
|
|
7819
|
+
var _templateObject$Q, _templateObject2$E, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
|
|
7820
|
+
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7662
7821
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7663
7822
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7664
7823
|
}, devices.mobile);
|
|
7665
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
7666
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7824
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
7825
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
7667
7826
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7668
7827
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7669
7828
|
});
|
|
@@ -7753,94 +7912,277 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7753
7912
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7754
7913
|
};
|
|
7755
7914
|
|
|
7756
|
-
var _templateObject$
|
|
7757
|
-
var
|
|
7758
|
-
var
|
|
7759
|
-
var
|
|
7760
|
-
|
|
7761
|
-
|
|
7762
|
-
|
|
7763
|
-
|
|
7764
|
-
var
|
|
7915
|
+
var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
|
|
7916
|
+
var ImpactHeaderWrapper = /*#__PURE__*/styled.header(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-black);\n padding: 36px 0;\n\n @media ", " {\n padding: 21px 0;\n }\n"])), devices.mobile);
|
|
7917
|
+
var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: grid;\n grid-template-columns: ", ";\n padding: 0 50px;\n\n @media ", " {\n padding: 0 50px;\n }\n\n @media ", " {\n padding: 0 20px;\n grid-template-columns: ", ";\n }\n"])), function (_ref) {
|
|
7918
|
+
var hasButton = _ref.hasButton,
|
|
7919
|
+
sponsorPresent = _ref.sponsorPresent;
|
|
7920
|
+
if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
|
|
7921
|
+
return '1fr';
|
|
7922
|
+
}, devices.tablet, devices.mobile, function (_ref2) {
|
|
7923
|
+
var sponsorPresent = _ref2.sponsorPresent;
|
|
7924
|
+
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7925
|
+
});
|
|
7926
|
+
var TitleButtonWrapper = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7927
|
+
var sponsorWidth = _ref3.sponsorWidth;
|
|
7928
|
+
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7929
|
+
});
|
|
7930
|
+
var TitleButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n position: static;\n margin-right: 0;\n }\n"])), devices.mobile);
|
|
7931
|
+
var MobileButtonWrapper = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 0 20px 16px 20px;\n"])));
|
|
7932
|
+
var ImpactTitle = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n align-self: center;\n grid-column: ", ";\n min-width: 0;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 2;\n max-height: calc(48px * 2);\n text-align: center;\n padding-bottom: 2px;\n\n @media ", " {\n grid-column: 1;\n -webkit-line-clamp: 4;\n max-height: calc(34px * 4);\n text-align: left;\n }\n"])), function (_ref4) {
|
|
7933
|
+
var hasColumns = _ref4.hasColumns;
|
|
7934
|
+
return hasColumns ? '3' : '1';
|
|
7935
|
+
}, devices.mobile);
|
|
7936
|
+
var ImpactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n aspect-ratio: 21 / 9;\n height: auto;\n &::before {\n content: '';\n display: block;\n padding-top: calc(9 / 21 * 100%);\n }\n\n > picture,\n img,\n video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n img {\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: cover;\n }\n }\n @media ", " {\n aspect-ratio: 1 / 1;\n &::before {\n padding-top: 100%;\n }\n max-height: 100vh;\n img {\n object-fit: cover;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
7937
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 5;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n z-index: ", ";\n min-width: ", ";\n\n @media ", " {\n grid-column: 3;\n justify-content: flex-start;\n min-width: unset;\n }\n"])), zIndexes.sponsorship, function (_ref5) {
|
|
7938
|
+
var buttonWidth = _ref5.buttonWidth;
|
|
7939
|
+
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7940
|
+
}, devices.mobile);
|
|
7765
7941
|
|
|
7766
|
-
var
|
|
7767
|
-
var
|
|
7768
|
-
|
|
7769
|
-
|
|
7770
|
-
|
|
7771
|
-
_ref$sponsor = _ref.sponsor,
|
|
7772
|
-
sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
|
|
7773
|
-
customSponsorImage = _ref.customSponsorImage,
|
|
7774
|
-
scrollHref = _ref.scrollHref,
|
|
7775
|
-
bgUrlDesktop = _ref.bgUrlDesktop,
|
|
7776
|
-
bgUrlDevice = _ref.bgUrlDevice,
|
|
7777
|
-
_ref$bgImageAltText = _ref.bgImageAltText,
|
|
7778
|
-
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
|
|
7779
|
-
_ref$semanticLevel = _ref.semanticLevel,
|
|
7780
|
-
semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
|
|
7781
|
-
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
7782
|
-
var _ref2 = link || {},
|
|
7783
|
-
linkText = _ref2.text,
|
|
7784
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
|
|
7785
|
-
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
7786
|
-
bgUrlDesktop: bgUrlDesktop,
|
|
7787
|
-
bgUrlDevice: bgUrlDevice,
|
|
7788
|
-
"data-testid": "impact-wrapper"
|
|
7789
|
-
}, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
7790
|
-
"data-testid": "impact-sponsor"
|
|
7791
|
-
}, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
7792
|
-
"data-testid": "impact-custom-sponsor"
|
|
7793
|
-
}, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderImageWrapper, null, /*#__PURE__*/React__default.createElement("picture", {
|
|
7794
|
-
"data-testid": "impact-picture"
|
|
7795
|
-
}, bgUrlDevice && (/*#__PURE__*/React__default.createElement("source", {
|
|
7796
|
-
srcSet: bgUrlDevice,
|
|
7797
|
-
media: "" + devices.mobile,
|
|
7798
|
-
"data-testid": "impact-mobile-image-source"
|
|
7799
|
-
})), /*#__PURE__*/React__default.createElement("source", {
|
|
7800
|
-
srcSet: bgUrlDesktop,
|
|
7801
|
-
media: "" + devices.desktop,
|
|
7802
|
-
"data-testid": "impact-desktop-image-source"
|
|
7803
|
-
}), /*#__PURE__*/React__default.createElement("img", {
|
|
7804
|
-
src: bgUrlDesktop,
|
|
7805
|
-
alt: bgImageAltText,
|
|
7806
|
-
"data-testid": "impact-image"
|
|
7807
|
-
}))), /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
|
|
7808
|
-
"data-testid": "impact-logo"
|
|
7809
|
-
}, children) : null, text ? (/*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
7810
|
-
"data-testid": "impact-text"
|
|
7811
|
-
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
7812
|
-
level: 3,
|
|
7813
|
-
semanticLevel: semanticLevel
|
|
7814
|
-
}, truncatedText))) : null, link ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
|
|
7815
|
-
"data-testid": "impact-link"
|
|
7816
|
-
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null), scrollHref ? (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
7817
|
-
"data-testid": "impact-scroll-link"
|
|
7818
|
-
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
7819
|
-
iconName: "Arrow",
|
|
7820
|
-
iconDirection: "down",
|
|
7821
|
-
href: scrollHref,
|
|
7822
|
-
color: ThemeColor['base-white'],
|
|
7823
|
-
hoverColor: ThemeColor['base-white']
|
|
7824
|
-
}, "Scroll Down"))) : null);
|
|
7825
|
-
};
|
|
7942
|
+
var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q;
|
|
7943
|
+
var VideoPlayButton$1 = /*#__PURE__*/styled.button(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n background-color: var(--color-base-transparent);\n border: none;\n cursor: pointer;\n\n @media ", " {\n width: 60px;\n height: 60px;\n }\n"])), devices.mobile);
|
|
7944
|
+
var VideoControlsWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
7945
|
+
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 20px;\n\n @media ", " {\n margin: 20px 4px;\n }\n"])), devices.mobile);
|
|
7946
|
+
var LeftWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7826
7947
|
|
|
7827
|
-
var
|
|
7828
|
-
var
|
|
7829
|
-
|
|
7830
|
-
|
|
7831
|
-
|
|
7832
|
-
|
|
7833
|
-
|
|
7834
|
-
|
|
7835
|
-
|
|
7836
|
-
|
|
7837
|
-
|
|
7838
|
-
|
|
7839
|
-
|
|
7840
|
-
|
|
7841
|
-
|
|
7948
|
+
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
7949
|
+
var videoElementId = _ref.videoElementId,
|
|
7950
|
+
_ref$loop = _ref.loop,
|
|
7951
|
+
loop = _ref$loop === void 0 ? false : _ref$loop;
|
|
7952
|
+
var _React$useState = React__default.useState(false),
|
|
7953
|
+
playing = _React$useState[0],
|
|
7954
|
+
setPlaying = _React$useState[1];
|
|
7955
|
+
var getVideoElement = function getVideoElement() {
|
|
7956
|
+
return document.querySelector("#" + videoElementId);
|
|
7957
|
+
};
|
|
7958
|
+
React__default.useEffect(function () {
|
|
7959
|
+
var video = getVideoElement();
|
|
7960
|
+
if (video) {
|
|
7961
|
+
video.loop = loop;
|
|
7962
|
+
}
|
|
7963
|
+
}, [loop]);
|
|
7964
|
+
var handlePlay = React__default.useCallback(function () {
|
|
7965
|
+
var video = getVideoElement();
|
|
7966
|
+
if (!video) return;
|
|
7967
|
+
if (playing) {
|
|
7968
|
+
video.pause();
|
|
7969
|
+
setPlaying(false);
|
|
7970
|
+
} else {
|
|
7971
|
+
video == null || video.play();
|
|
7972
|
+
setPlaying(true);
|
|
7973
|
+
}
|
|
7974
|
+
}, [playing]);
|
|
7975
|
+
return /*#__PURE__*/React__default.createElement(VideoControlsWrapper$1, {
|
|
7976
|
+
className: "video-controls-container"
|
|
7977
|
+
}, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper$1, null, /*#__PURE__*/React__default.createElement(LeftWrapper$1, null, /*#__PURE__*/React__default.createElement(VideoPlayButton$1, {
|
|
7978
|
+
id: "play",
|
|
7979
|
+
onClick: handlePlay,
|
|
7980
|
+
className: "video-play-button",
|
|
7981
|
+
"data-testid": "video-play-button",
|
|
7982
|
+
"aria-label": !playing ? 'Play' : 'Pause'
|
|
7983
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7984
|
+
iconName: !playing ? 'Play' : 'Pause',
|
|
7985
|
+
color: "white"
|
|
7986
|
+
})))));
|
|
7987
|
+
};
|
|
7842
7988
|
|
|
7843
|
-
var
|
|
7989
|
+
var _excluded$k = ["text"];
|
|
7990
|
+
var CHAR_LIMIT = 100;
|
|
7991
|
+
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7992
|
+
var mobileVideo = video.mobile || video.desktop;
|
|
7993
|
+
var desktopVideo = video.desktop || video.mobile;
|
|
7994
|
+
var mobilePoster = poster.mobile || poster.desktop;
|
|
7995
|
+
var desktopPoster = poster.desktop || poster.mobile;
|
|
7996
|
+
var _useState = useState(desktopPoster),
|
|
7997
|
+
posterUrl = _useState[0],
|
|
7998
|
+
setPoster = _useState[1];
|
|
7999
|
+
var _useState2 = useState(desktopVideo),
|
|
8000
|
+
videoUrl = _useState2[0],
|
|
8001
|
+
setVideoUrl = _useState2[1];
|
|
8002
|
+
var isMobile = useMobile();
|
|
8003
|
+
useEffect(function () {
|
|
8004
|
+
setPoster(isMobile ? mobilePoster : desktopPoster);
|
|
8005
|
+
setVideoUrl(isMobile ? mobileVideo : desktopVideo);
|
|
8006
|
+
}, [isMobile]);
|
|
8007
|
+
return {
|
|
8008
|
+
posterUrl: posterUrl,
|
|
8009
|
+
videoUrl: videoUrl
|
|
8010
|
+
};
|
|
8011
|
+
};
|
|
8012
|
+
var VideoWithControls = function VideoWithControls(_ref) {
|
|
8013
|
+
var video = _ref.video,
|
|
8014
|
+
poster = _ref.poster;
|
|
8015
|
+
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
8016
|
+
posterUrl = _useResponsiveVideo.posterUrl,
|
|
8017
|
+
videoUrl = _useResponsiveVideo.videoUrl;
|
|
8018
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
|
|
8019
|
+
id: video.elementId,
|
|
8020
|
+
width: "100%",
|
|
8021
|
+
height: "100%",
|
|
8022
|
+
poster: posterUrl,
|
|
8023
|
+
src: videoUrl,
|
|
8024
|
+
"data-testid": "impact-video",
|
|
8025
|
+
playsInline: true
|
|
8026
|
+
}, /*#__PURE__*/React__default.createElement("source", {
|
|
8027
|
+
src: videoUrl
|
|
8028
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
8029
|
+
src: posterUrl,
|
|
8030
|
+
alt: poster.alt,
|
|
8031
|
+
"data-testid": "impact-image"
|
|
8032
|
+
})), /*#__PURE__*/React__default.createElement(VideoControlsImpact, {
|
|
8033
|
+
loop: true,
|
|
8034
|
+
videoElementId: video.elementId
|
|
8035
|
+
}));
|
|
8036
|
+
};
|
|
8037
|
+
var ImpactHeaderImage = function ImpactHeaderImage(_ref2) {
|
|
8038
|
+
var mobile = _ref2.mobile,
|
|
8039
|
+
desktop = _ref2.desktop,
|
|
8040
|
+
alt = _ref2.alt;
|
|
8041
|
+
return /*#__PURE__*/React__default.createElement("picture", {
|
|
8042
|
+
"data-testid": "impact-picture"
|
|
8043
|
+
}, mobile && /*#__PURE__*/React__default.createElement("source", {
|
|
8044
|
+
srcSet: mobile,
|
|
8045
|
+
media: "" + devices.mobile,
|
|
8046
|
+
"data-testid": "impact-mobile-image-source"
|
|
8047
|
+
}), /*#__PURE__*/React__default.createElement("source", {
|
|
8048
|
+
srcSet: desktop,
|
|
8049
|
+
media: "" + devices.desktop,
|
|
8050
|
+
"data-testid": "impact-desktop-image-source"
|
|
8051
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
8052
|
+
src: desktop,
|
|
8053
|
+
alt: alt,
|
|
8054
|
+
"data-testid": "impact-image"
|
|
8055
|
+
}));
|
|
8056
|
+
};
|
|
8057
|
+
var ImpactHeaderVideo = function ImpactHeaderVideo(_ref3) {
|
|
8058
|
+
var video = _ref3.video,
|
|
8059
|
+
poster = _ref3.poster;
|
|
8060
|
+
if (!video.desktop && !video.mobile) {
|
|
8061
|
+
return /*#__PURE__*/React__default.createElement(ImpactHeaderImage, Object.assign({}, poster));
|
|
8062
|
+
}
|
|
8063
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8064
|
+
video: video,
|
|
8065
|
+
poster: poster
|
|
8066
|
+
});
|
|
8067
|
+
};
|
|
8068
|
+
var useElementWidth = function useElementWidth() {
|
|
8069
|
+
var _React$useState = React__default.useState(undefined),
|
|
8070
|
+
width = _React$useState[0],
|
|
8071
|
+
setWidth = _React$useState[1];
|
|
8072
|
+
var observerRef = React__default.useRef(null);
|
|
8073
|
+
var ref = React__default.useCallback(function (node) {
|
|
8074
|
+
if (observerRef.current) {
|
|
8075
|
+
observerRef.current.disconnect();
|
|
8076
|
+
observerRef.current = null;
|
|
8077
|
+
}
|
|
8078
|
+
if (!node) return;
|
|
8079
|
+
observerRef.current = new ResizeObserver(function () {
|
|
8080
|
+
setWidth(node.offsetWidth);
|
|
8081
|
+
});
|
|
8082
|
+
observerRef.current.observe(node);
|
|
8083
|
+
}, []);
|
|
8084
|
+
return [ref, width];
|
|
8085
|
+
};
|
|
8086
|
+
var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
8087
|
+
var text = _ref4.text,
|
|
8088
|
+
link = _ref4.link,
|
|
8089
|
+
_ref4$sponsor = _ref4.sponsor,
|
|
8090
|
+
sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
|
|
8091
|
+
customSponsorImage = _ref4.customSponsorImage,
|
|
8092
|
+
bgUrlDesktop = _ref4.bgUrlDesktop,
|
|
8093
|
+
bgUrlDevice = _ref4.bgUrlDevice,
|
|
8094
|
+
_ref4$bgImageAltText = _ref4.bgImageAltText,
|
|
8095
|
+
bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
|
|
8096
|
+
videoUrlDesktop = _ref4.videoUrlDesktop,
|
|
8097
|
+
videoUrlMobile = _ref4.videoUrlMobile,
|
|
8098
|
+
className = _ref4.className;
|
|
8099
|
+
var _useViewport = useViewport(),
|
|
8100
|
+
isMobile = _useViewport.isMobile,
|
|
8101
|
+
hydrated = _useViewport.hydrated;
|
|
8102
|
+
var _useElementWidth = useElementWidth(),
|
|
8103
|
+
buttonRef = _useElementWidth[0],
|
|
8104
|
+
buttonWidth = _useElementWidth[1];
|
|
8105
|
+
var _useElementWidth2 = useElementWidth(),
|
|
8106
|
+
sponsorRef = _useElementWidth2[0],
|
|
8107
|
+
sponsorWidth = _useElementWidth2[1];
|
|
8108
|
+
var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
|
|
8109
|
+
var _ref5 = link || {},
|
|
8110
|
+
linkText = _ref5.text,
|
|
8111
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
|
|
8112
|
+
var video = {
|
|
8113
|
+
elementId: 'impact-header-video',
|
|
8114
|
+
desktop: videoUrlDesktop,
|
|
8115
|
+
mobile: videoUrlMobile
|
|
8116
|
+
};
|
|
8117
|
+
var poster = {
|
|
8118
|
+
desktop: bgUrlDesktop,
|
|
8119
|
+
mobile: bgUrlDevice,
|
|
8120
|
+
alt: bgImageAltText
|
|
8121
|
+
};
|
|
8122
|
+
var sponsorContent = sponsor ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
8123
|
+
"data-testid": customSponsorImage ? 'impact-custom-sponsor' : undefined
|
|
8124
|
+
}, customSponsorImage != null ? customSponsorImage : {}))) : null;
|
|
8125
|
+
var hasButton = !isMobile && !!(link && linkText);
|
|
8126
|
+
var showSideColumns = hasButton || !!sponsor;
|
|
8127
|
+
var showTitleBar = !!(text || hasButton || sponsor);
|
|
8128
|
+
var renderSponsor = function renderSponsor() {
|
|
8129
|
+
if (isMobile) {
|
|
8130
|
+
if (!sponsorContent) return null;
|
|
8131
|
+
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8132
|
+
"data-testid": "impact-sponsor"
|
|
8133
|
+
}, sponsorContent);
|
|
8134
|
+
}
|
|
8135
|
+
if (!showSideColumns) return null;
|
|
8136
|
+
return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
8137
|
+
ref: sponsorRef,
|
|
8138
|
+
buttonWidth: buttonWidth,
|
|
8139
|
+
"data-testid": "impact-sponsor"
|
|
8140
|
+
}, sponsorContent);
|
|
8141
|
+
};
|
|
8142
|
+
if (!hydrated) return null;
|
|
8143
|
+
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
8144
|
+
theme: ThemeType.Cinema
|
|
8145
|
+
}, showTitleBar ? (/*#__PURE__*/React__default.createElement(ImpactHeaderWrapper, {
|
|
8146
|
+
className: className
|
|
8147
|
+
}, /*#__PURE__*/React__default.createElement(ImpactTitleWrapper, {
|
|
8148
|
+
"data-testid": "impact-title-wrapper",
|
|
8149
|
+
sponsorPresent: !!sponsor,
|
|
8150
|
+
hasButton: hasButton
|
|
8151
|
+
}, !isMobile && showSideColumns ? (/*#__PURE__*/React__default.createElement(TitleButtonWrapper, {
|
|
8152
|
+
sponsorWidth: sponsorWidth
|
|
8153
|
+
}, hasButton ? (/*#__PURE__*/React__default.createElement(TitleButton, Object.assign({
|
|
8154
|
+
ref: buttonRef
|
|
8155
|
+
}, restLink, {
|
|
8156
|
+
"data-testid": "impact-link"
|
|
8157
|
+
}), linkText)) : null)) : null, text ? (/*#__PURE__*/React__default.createElement(ImpactTitle, {
|
|
8158
|
+
size: "large",
|
|
8159
|
+
color: "white",
|
|
8160
|
+
hasColumns: !isMobile && showSideColumns
|
|
8161
|
+
}, truncatedText)) : null, renderSponsor()))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderAssetWrapper, {
|
|
8162
|
+
className: className
|
|
8163
|
+
}, /*#__PURE__*/React__default.createElement(ImpactHeaderVideo, {
|
|
8164
|
+
video: video,
|
|
8165
|
+
poster: poster
|
|
8166
|
+
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
8167
|
+
};
|
|
8168
|
+
|
|
8169
|
+
var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$l;
|
|
8170
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
8171
|
+
var color = _ref.color;
|
|
8172
|
+
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
8173
|
+
}, devices.mobileAndTablet);
|
|
8174
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8175
|
+
var hasImage = _ref2.hasImage;
|
|
8176
|
+
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8177
|
+
}, devices.mobileAndTablet, function (_ref3) {
|
|
8178
|
+
var hasImage = _ref3.hasImage;
|
|
8179
|
+
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8180
|
+
});
|
|
8181
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
8182
|
+
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8183
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
8184
|
+
|
|
8185
|
+
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7844
8186
|
var _image$src, _image$alt;
|
|
7845
8187
|
var info = _ref.info,
|
|
7846
8188
|
image = _ref.image,
|
|
@@ -7852,7 +8194,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7852
8194
|
"data-testid": "wrapper"
|
|
7853
8195
|
}, /*#__PURE__*/React__default.createElement(LeftPanel, {
|
|
7854
8196
|
hasImage: hasImage
|
|
7855
|
-
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper
|
|
8197
|
+
}, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
7856
8198
|
"data-testid": "scroll-link"
|
|
7857
8199
|
}, /*#__PURE__*/React__default.createElement(TabLink, {
|
|
7858
8200
|
iconName: "Arrow",
|
|
@@ -7868,11 +8210,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7868
8210
|
})))));
|
|
7869
8211
|
};
|
|
7870
8212
|
|
|
7871
|
-
var _templateObject$
|
|
7872
|
-
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$
|
|
7873
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7874
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7875
|
-
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8213
|
+
var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
8214
|
+
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
8215
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
8216
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
8217
|
+
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
7876
8218
|
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
|
|
7877
8219
|
var theme = _ref.theme;
|
|
7878
8220
|
return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
@@ -8082,7 +8424,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8082
8424
|
})))))))))));
|
|
8083
8425
|
};
|
|
8084
8426
|
|
|
8085
|
-
var _templateObject$
|
|
8427
|
+
var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$t;
|
|
8086
8428
|
var GRID = {
|
|
8087
8429
|
desktop: {
|
|
8088
8430
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8095,19 +8437,19 @@ var GRID = {
|
|
|
8095
8437
|
right: '2 / 1 / 3 / 15'
|
|
8096
8438
|
}
|
|
8097
8439
|
};
|
|
8098
|
-
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8440
|
+
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8099
8441
|
var $background = _ref.$background;
|
|
8100
8442
|
return "var(--color-" + $background + ")";
|
|
8101
8443
|
});
|
|
8102
|
-
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8444
|
+
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8103
8445
|
var hasImage = _ref2.hasImage;
|
|
8104
8446
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8105
8447
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8106
8448
|
var hasImage = _ref3.hasImage;
|
|
8107
8449
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8108
8450
|
});
|
|
8109
|
-
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8110
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8451
|
+
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
8452
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8111
8453
|
|
|
8112
8454
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
8113
8455
|
var _image$src, _image$alt;
|
|
@@ -8130,10 +8472,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8130
8472
|
})))));
|
|
8131
8473
|
};
|
|
8132
8474
|
|
|
8133
|
-
var _templateObject$
|
|
8134
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
8135
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
8136
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8475
|
+
var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
|
|
8476
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8477
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
8478
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8137
8479
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
8138
8480
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8139
8481
|
var invert = _ref.invert,
|
|
@@ -8244,7 +8586,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8244
8586
|
};
|
|
8245
8587
|
|
|
8246
8588
|
var _excluded$l = ["text"];
|
|
8247
|
-
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
8589
|
+
var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
|
|
8248
8590
|
var mobileVideo = video.mobile || video.desktop;
|
|
8249
8591
|
var desktopVideo = video.desktop || video.mobile;
|
|
8250
8592
|
var mobilePoster = poster.mobile || poster.desktop;
|
|
@@ -8265,10 +8607,10 @@ var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
|
8265
8607
|
videoUrl: videoUrl
|
|
8266
8608
|
};
|
|
8267
8609
|
};
|
|
8268
|
-
var VideoWithControls = function VideoWithControls(_ref) {
|
|
8610
|
+
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
8269
8611
|
var video = _ref.video,
|
|
8270
8612
|
poster = _ref.poster;
|
|
8271
|
-
var _useResponsiveVideo = useResponsiveVideo(video, poster),
|
|
8613
|
+
var _useResponsiveVideo = useResponsiveVideo$1(video, poster),
|
|
8272
8614
|
posterUrl = _useResponsiveVideo.posterUrl,
|
|
8273
8615
|
videoUrl = _useResponsiveVideo.videoUrl;
|
|
8274
8616
|
var isIOS = useIOS();
|
|
@@ -8321,7 +8663,7 @@ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
|
|
|
8321
8663
|
if (!video.desktop && !video.mobile) {
|
|
8322
8664
|
return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
|
|
8323
8665
|
}
|
|
8324
|
-
return /*#__PURE__*/React__default.createElement(VideoWithControls, {
|
|
8666
|
+
return /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
|
|
8325
8667
|
video: video,
|
|
8326
8668
|
poster: poster
|
|
8327
8669
|
});
|
|
@@ -8384,11 +8726,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8384
8726
|
}), linkText))))));
|
|
8385
8727
|
};
|
|
8386
8728
|
|
|
8387
|
-
var _templateObject$
|
|
8388
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8389
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8390
|
-
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8391
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8729
|
+
var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject4$u, _templateObject5$o, _templateObject6$h, _templateObject7$d;
|
|
8730
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8731
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8732
|
+
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8733
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8392
8734
|
var hasImages = _ref.hasImages;
|
|
8393
8735
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8394
8736
|
}, devices.mobile, function (_ref2) {
|
|
@@ -8463,10 +8805,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8463
8805
|
}))))));
|
|
8464
8806
|
};
|
|
8465
8807
|
|
|
8466
|
-
var _templateObject$
|
|
8467
|
-
var linkButtonStyles = /*#__PURE__*/css(_templateObject$
|
|
8468
|
-
var PageNav = /*#__PURE__*/styled.a(_templateObject2$
|
|
8469
|
-
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
8808
|
+
var _templateObject$Y, _templateObject2$M, _templateObject3$A, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
|
|
8809
|
+
var linkButtonStyles = /*#__PURE__*/css(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
8810
|
+
var PageNav = /*#__PURE__*/styled.a(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8811
|
+
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8470
8812
|
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
8471
8813
|
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8472
8814
|
var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8622,16 +8964,19 @@ var Pagination = function Pagination(_ref) {
|
|
|
8622
8964
|
}))))));
|
|
8623
8965
|
};
|
|
8624
8966
|
|
|
8625
|
-
var _templateObject$
|
|
8626
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8967
|
+
var _templateObject$Z;
|
|
8968
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: ", ";\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
|
|
8969
|
+
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8970
|
+
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8971
|
+
});
|
|
8627
8972
|
|
|
8628
|
-
var _templateObject$
|
|
8629
|
-
var TextWrapper$
|
|
8630
|
-
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$
|
|
8973
|
+
var _templateObject$_, _templateObject2$N;
|
|
8974
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8975
|
+
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8631
8976
|
|
|
8632
|
-
var _templateObject
|
|
8633
|
-
var PersonLink = /*#__PURE__*/styled.a(_templateObject
|
|
8634
|
-
var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$
|
|
8977
|
+
var _templateObject$$, _templateObject2$O;
|
|
8978
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
|
|
8979
|
+
var ReplacementContent = /*#__PURE__*/styled.span(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8635
8980
|
|
|
8636
8981
|
var Person = function Person(_ref) {
|
|
8637
8982
|
var person = _ref.person,
|
|
@@ -8654,7 +8999,7 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8654
8999
|
var _role$people;
|
|
8655
9000
|
var role = _ref.role,
|
|
8656
9001
|
className = _ref.className;
|
|
8657
|
-
return /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
9002
|
+
return /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
8658
9003
|
className: className
|
|
8659
9004
|
}, /*#__PURE__*/React__default.createElement(RoleContent, {
|
|
8660
9005
|
title: "role",
|
|
@@ -8670,13 +9015,17 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8670
9015
|
})));
|
|
8671
9016
|
};
|
|
8672
9017
|
|
|
8673
|
-
var _templateObject$
|
|
8674
|
-
var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
8675
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9018
|
+
var _templateObject$10, _templateObject2$P;
|
|
9019
|
+
var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
9020
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n filter: ", ";\n }\n"])), function (_ref) {
|
|
9021
|
+
var greyscale = _ref.greyscale;
|
|
9022
|
+
return greyscale ? 'grayscale(100%)' : 'none';
|
|
9023
|
+
});
|
|
8676
9024
|
|
|
8677
9025
|
var PersonCard = function PersonCard(_ref) {
|
|
8678
9026
|
var role = _ref.role,
|
|
8679
|
-
className = _ref.className
|
|
9027
|
+
className = _ref.className,
|
|
9028
|
+
greyscale = _ref.greyscale;
|
|
8680
9029
|
var hasHeadshot = React__default.useMemo(function () {
|
|
8681
9030
|
var _role$people;
|
|
8682
9031
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
@@ -8684,7 +9033,9 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8684
9033
|
}, [role]);
|
|
8685
9034
|
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
8686
9035
|
className: className
|
|
8687
|
-
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper,
|
|
9036
|
+
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
|
|
9037
|
+
greyscale: greyscale
|
|
9038
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
8688
9039
|
src: role.people[0].headshot,
|
|
8689
9040
|
alt: role.people[0].name
|
|
8690
9041
|
})), /*#__PURE__*/React__default.createElement(PersonDetails, {
|
|
@@ -8698,26 +9049,31 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8698
9049
|
|
|
8699
9050
|
var PeopleListing = function PeopleListing(_ref) {
|
|
8700
9051
|
var roles = _ref.roles,
|
|
8701
|
-
className = _ref.className
|
|
9052
|
+
className = _ref.className,
|
|
9053
|
+
greyscale = _ref.greyscale,
|
|
9054
|
+
largeDesktopColumns = _ref.largeDesktopColumns;
|
|
8702
9055
|
return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
|
|
8703
|
-
className: className
|
|
9056
|
+
className: className,
|
|
9057
|
+
"$largeDesktopColumns": largeDesktopColumns
|
|
8704
9058
|
}, roles.map(function (role, index) {
|
|
8705
9059
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8706
9060
|
key: role.name + "-" + index
|
|
8707
9061
|
}, /*#__PURE__*/React__default.createElement(PersonCard, {
|
|
8708
|
-
role: role
|
|
9062
|
+
role: role,
|
|
9063
|
+
className: className,
|
|
9064
|
+
greyscale: greyscale
|
|
8709
9065
|
}));
|
|
8710
9066
|
}));
|
|
8711
9067
|
};
|
|
8712
9068
|
|
|
8713
|
-
var _templateObject
|
|
8714
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8715
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
9069
|
+
var _templateObject$11, _templateObject2$Q, _templateObject3$B, _templateObject4$v;
|
|
9070
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9071
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8716
9072
|
var columnCount = _ref.columnCount;
|
|
8717
9073
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8718
9074
|
}, devices.mobile, devices.tablet);
|
|
8719
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8720
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9075
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
9076
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8721
9077
|
|
|
8722
9078
|
// Get the total character length of a property in an array of objects
|
|
8723
9079
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8806,7 +9162,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8806
9162
|
columnSpanSmallDevice: 1,
|
|
8807
9163
|
key: "credit-entry-" + name + "-" + index,
|
|
8808
9164
|
"data-testid": "credit-entry"
|
|
8809
|
-
}, /*#__PURE__*/React__default.createElement(TextWrapper$
|
|
9165
|
+
}, /*#__PURE__*/React__default.createElement(TextWrapper$1, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
|
|
8810
9166
|
title: "role",
|
|
8811
9167
|
"data-roh": dataROH
|
|
8812
9168
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
@@ -8844,8 +9200,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8844
9200
|
}, creditEntries);
|
|
8845
9201
|
};
|
|
8846
9202
|
|
|
8847
|
-
var _templateObject$
|
|
8848
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$
|
|
9203
|
+
var _templateObject$12;
|
|
9204
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
8849
9205
|
|
|
8850
9206
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
8851
9207
|
var items = _ref.items;
|
|
@@ -8863,14 +9219,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
8863
9219
|
}));
|
|
8864
9220
|
};
|
|
8865
9221
|
|
|
8866
|
-
var _templateObject$
|
|
9222
|
+
var _templateObject$13, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
8867
9223
|
var LENGTH_TEXT = 28;
|
|
8868
9224
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8869
9225
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8870
9226
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8871
9227
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8872
9228
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8873
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9229
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8874
9230
|
var imageToLeft = _ref.imageToLeft;
|
|
8875
9231
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8876
9232
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8880,7 +9236,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$11 || (_templa
|
|
|
8880
9236
|
var asCard = _ref3.asCard;
|
|
8881
9237
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8882
9238
|
});
|
|
8883
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9239
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
8884
9240
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
8885
9241
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8886
9242
|
}, function (_ref5) {
|
|
@@ -8904,7 +9260,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$A || (_templat
|
|
|
8904
9260
|
}
|
|
8905
9261
|
return '';
|
|
8906
9262
|
});
|
|
8907
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9263
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
8908
9264
|
var marginBottom = _ref7.marginBottom;
|
|
8909
9265
|
return marginBottom + "px";
|
|
8910
9266
|
}, function (_ref8) {
|
|
@@ -9135,25 +9491,25 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9135
9491
|
}))));
|
|
9136
9492
|
};
|
|
9137
9493
|
|
|
9138
|
-
var _templateObject$
|
|
9494
|
+
var _templateObject$14, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g;
|
|
9139
9495
|
var LENGTH_TEXT$2 = 28;
|
|
9140
9496
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9141
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9497
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9142
9498
|
var imageToLeft = _ref.imageToLeft;
|
|
9143
9499
|
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'";
|
|
9144
9500
|
}, devices.tablet, function (_ref2) {
|
|
9145
9501
|
var imageToLeft = _ref2.imageToLeft;
|
|
9146
9502
|
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'";
|
|
9147
9503
|
}, devices.mobile);
|
|
9148
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9504
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9149
9505
|
var imageToLeft = _ref3.imageToLeft;
|
|
9150
9506
|
return imageToLeft ? 'left' : 'right';
|
|
9151
9507
|
}, devices.mobile);
|
|
9152
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9508
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
9153
9509
|
var imageToLeft = _ref4.imageToLeft;
|
|
9154
9510
|
return imageToLeft ? 'right' : 'left';
|
|
9155
9511
|
}, devices.mobile);
|
|
9156
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$
|
|
9512
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9157
9513
|
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9158
9514
|
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9159
9515
|
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
|
|
@@ -9178,8 +9534,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templat
|
|
|
9178
9534
|
return '';
|
|
9179
9535
|
});
|
|
9180
9536
|
|
|
9181
|
-
var _templateObject$
|
|
9182
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9537
|
+
var _templateObject$15;
|
|
9538
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
9183
9539
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9184
9540
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9185
9541
|
return aspectRatio;
|
|
@@ -9210,7 +9566,7 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
9210
9566
|
return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
|
|
9211
9567
|
};
|
|
9212
9568
|
|
|
9213
|
-
var VideoWithControls$
|
|
9569
|
+
var VideoWithControls$2 = function VideoWithControls(_ref) {
|
|
9214
9570
|
var video = _ref.video,
|
|
9215
9571
|
settings = _ref.settings;
|
|
9216
9572
|
var videoRef = useRef(null);
|
|
@@ -9285,7 +9641,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9285
9641
|
}, isImage && (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
9286
9642
|
aspectRatio: AspectRatio['4:3'],
|
|
9287
9643
|
"data-testid": "AspectRatioWrapper"
|
|
9288
|
-
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
9644
|
+
}, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
|
|
9289
9645
|
video: children,
|
|
9290
9646
|
settings: videoSettings
|
|
9291
9647
|
}));
|
|
@@ -9348,7 +9704,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9348
9704
|
size: titleSize,
|
|
9349
9705
|
hierarchy: titleHierarchy
|
|
9350
9706
|
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
|
|
9351
|
-
size: "
|
|
9707
|
+
size: "small"
|
|
9352
9708
|
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
|
|
9353
9709
|
size: "large",
|
|
9354
9710
|
dangerouslySetInnerHTML: {
|
|
@@ -9361,9 +9717,65 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9361
9717
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9362
9718
|
};
|
|
9363
9719
|
|
|
9364
|
-
var _templateObject$
|
|
9365
|
-
var
|
|
9366
|
-
|
|
9720
|
+
var _templateObject$16;
|
|
9721
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9722
|
+
|
|
9723
|
+
/**
|
|
9724
|
+
* DEPRECATED. Use RadioGroup2 instead
|
|
9725
|
+
*/
|
|
9726
|
+
var RadioGroup = function RadioGroup(_ref) {
|
|
9727
|
+
var radios = _ref.radios,
|
|
9728
|
+
_ref$columnStartDeskt = _ref.columnStartDesktop,
|
|
9729
|
+
columnStartDesktop = _ref$columnStartDeskt === void 0 ? 1 : _ref$columnStartDeskt,
|
|
9730
|
+
_ref$columnStartDevic = _ref.columnStartDevice,
|
|
9731
|
+
columnStartDevice = _ref$columnStartDevic === void 0 ? 1 : _ref$columnStartDevic,
|
|
9732
|
+
_ref$columnSpanDeskto = _ref.columnSpanDesktop,
|
|
9733
|
+
columnSpanDesktop = _ref$columnSpanDeskto === void 0 ? 16 : _ref$columnSpanDeskto,
|
|
9734
|
+
_ref$columnSpanDevice = _ref.columnSpanDevice,
|
|
9735
|
+
columnSpanDevice = _ref$columnSpanDevice === void 0 ? 14 : _ref$columnSpanDevice,
|
|
9736
|
+
columnStartSmallDevice = _ref.columnStartSmallDevice,
|
|
9737
|
+
columnSpanSmallDevice = _ref.columnSpanSmallDevice,
|
|
9738
|
+
onChange = _ref.onChange;
|
|
9739
|
+
var _useState = useState(radios != null ? radios : []),
|
|
9740
|
+
radioProps = _useState[0],
|
|
9741
|
+
setRadioProps = _useState[1];
|
|
9742
|
+
var _useState2 = useState(null),
|
|
9743
|
+
checkedIndex = _useState2[0],
|
|
9744
|
+
setCheckedIndex = _useState2[1];
|
|
9745
|
+
var handleChange = function handleChange(_value, index) {
|
|
9746
|
+
setCheckedIndex(index);
|
|
9747
|
+
var newRadioProps = radios == null ? void 0 : radios.map(function (radio, i) {
|
|
9748
|
+
return _extends({}, radio, {
|
|
9749
|
+
checked: i === index
|
|
9750
|
+
});
|
|
9751
|
+
});
|
|
9752
|
+
setRadioProps(newRadioProps != null ? newRadioProps : []);
|
|
9753
|
+
onChange == null || onChange(radios ? radios[index] : undefined);
|
|
9754
|
+
};
|
|
9755
|
+
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9756
|
+
columnStartDesktop: columnStartDesktop,
|
|
9757
|
+
columnSpanDesktop: columnSpanDesktop,
|
|
9758
|
+
columnStartDevice: columnStartDevice,
|
|
9759
|
+
columnSpanDevice: columnSpanDevice,
|
|
9760
|
+
columnStartSmallDevice: columnStartSmallDevice,
|
|
9761
|
+
columnSpanSmallDevice: columnSpanSmallDevice
|
|
9762
|
+
}, /*#__PURE__*/React__default.createElement(RadioGroupContainer, null, radioProps == null ? void 0 : radioProps.map(function (radio, i) {
|
|
9763
|
+
var _radio$label;
|
|
9764
|
+
return /*#__PURE__*/React__default.createElement(Radio, {
|
|
9765
|
+
key: ((_radio$label = radio.label) != null ? _radio$label : 'defaultRadioKey') + i,
|
|
9766
|
+
checked: i === checkedIndex,
|
|
9767
|
+
// error={radio.error} // TO DO: Add error state - design not yet available
|
|
9768
|
+
label: radio.label,
|
|
9769
|
+
onChange: function onChange(e) {
|
|
9770
|
+
return handleChange(e, i);
|
|
9771
|
+
}
|
|
9772
|
+
});
|
|
9773
|
+
})));
|
|
9774
|
+
};
|
|
9775
|
+
|
|
9776
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
9777
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9778
|
+
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9367
9779
|
var horizontalMode = _ref.horizontalMode;
|
|
9368
9780
|
if (horizontalMode) return 'row';
|
|
9369
9781
|
return 'column';
|
|
@@ -9371,7 +9783,7 @@ var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2
|
|
|
9371
9783
|
var gap = _ref2.gap;
|
|
9372
9784
|
return gap + "px";
|
|
9373
9785
|
});
|
|
9374
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9786
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9375
9787
|
var darkMode = _ref3.darkMode;
|
|
9376
9788
|
if (darkMode) return 'var(--base-color-white)';
|
|
9377
9789
|
return 'var(--base-color-errorstate)';
|
|
@@ -9426,7 +9838,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9426
9838
|
var changeHandler = function changeHandler(e) {
|
|
9427
9839
|
onChange == null || onChange(e.target.value);
|
|
9428
9840
|
};
|
|
9429
|
-
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup, {
|
|
9841
|
+
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup$1, {
|
|
9430
9842
|
gap: gap,
|
|
9431
9843
|
horizontalMode: horizontalMode
|
|
9432
9844
|
}, radios.map(function (radio, idx) {
|
|
@@ -9448,10 +9860,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9448
9860
|
}, error))));
|
|
9449
9861
|
};
|
|
9450
9862
|
|
|
9451
|
-
var _templateObject$
|
|
9452
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9453
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9454
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9863
|
+
var _templateObject$18, _templateObject2$T, _templateObject3$F;
|
|
9864
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9865
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9866
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9455
9867
|
|
|
9456
9868
|
/* eslint-disable react/no-danger */
|
|
9457
9869
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9507,8 +9919,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9507
9919
|
return null;
|
|
9508
9920
|
};
|
|
9509
9921
|
|
|
9510
|
-
var _templateObject$
|
|
9511
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9922
|
+
var _templateObject$19;
|
|
9923
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9512
9924
|
|
|
9513
9925
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9514
9926
|
var HarmonicSize = {
|
|
@@ -9550,37 +9962,418 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9550
9962
|
}, description)))));
|
|
9551
9963
|
};
|
|
9552
9964
|
|
|
9553
|
-
var _templateObject$
|
|
9554
|
-
var
|
|
9555
|
-
var
|
|
9965
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7, _templateObject0$7, _templateObject1$5;
|
|
9966
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
9967
|
+
var theme = _ref.theme;
|
|
9968
|
+
return "3px solid " + theme.colors.lapisLazuli;
|
|
9969
|
+
}, function (_ref2) {
|
|
9970
|
+
var theme = _ref2.theme;
|
|
9971
|
+
return theme.colors.lightgrey;
|
|
9972
|
+
}, function (_ref3) {
|
|
9973
|
+
var theme = _ref3.theme;
|
|
9974
|
+
return theme.colors.lightgrey;
|
|
9975
|
+
});
|
|
9976
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9977
|
+
var theme = _ref4.theme;
|
|
9978
|
+
return theme.colors.darkgrey;
|
|
9979
|
+
});
|
|
9980
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9981
|
+
var listItemStyles = /*#__PURE__*/css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9982
|
+
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9983
|
+
var theme = _ref5.theme;
|
|
9984
|
+
return {
|
|
9985
|
+
iconName: 'DropdownArrow',
|
|
9986
|
+
color: theme.colors.black,
|
|
9987
|
+
title: 'Select Arrow'
|
|
9988
|
+
};
|
|
9989
|
+
})(_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"])));
|
|
9990
|
+
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9991
|
+
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9992
|
+
var Options = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
9993
|
+
var Option = /*#__PURE__*/styled.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9994
|
+
var theme = _ref6.theme,
|
|
9995
|
+
hover = _ref6.hover;
|
|
9996
|
+
var _theme$colors = theme.colors,
|
|
9997
|
+
lightgrey = _theme$colors.lightgrey,
|
|
9998
|
+
midgrey = _theme$colors.midgrey;
|
|
9999
|
+
if (hover) return "background-color: " + midgrey;
|
|
10000
|
+
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
10001
|
+
});
|
|
10002
|
+
var selectStyles = function selectStyles(width, height) {
|
|
10003
|
+
return css(_templateObject0$7 || (_templateObject0$7 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
|
|
10004
|
+
};
|
|
10005
|
+
var SelectList = /*#__PURE__*/styled.ul(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
10006
|
+
var width = _ref7.width,
|
|
10007
|
+
height = _ref7.height;
|
|
10008
|
+
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
10009
|
+
}, stateStyles, noMarginAndPaddingStyles, listItemStyles, borderStyles, ArrowIcon);
|
|
10010
|
+
|
|
10011
|
+
var useKeyboardAccessibility = function useKeyboardAccessibility(_ref) {
|
|
10012
|
+
var selectRef = _ref.selectRef,
|
|
10013
|
+
optionsRef = _ref.optionsRef,
|
|
10014
|
+
shouldHighlightOption = _ref.shouldHighlightOption;
|
|
10015
|
+
var _useState = useState(-1),
|
|
10016
|
+
itemToHighlight = _useState[0],
|
|
10017
|
+
setItemToHighlight = _useState[1];
|
|
10018
|
+
var clampIndex = function clampIndex(index) {
|
|
10019
|
+
if (index < -1) return -1;
|
|
10020
|
+
if (index > optionsRef.current.length - 1) return optionsRef.current.length - 1;
|
|
10021
|
+
return index;
|
|
10022
|
+
};
|
|
10023
|
+
var highlightNextOption = function highlightNextOption() {
|
|
10024
|
+
return setItemToHighlight(function (prev) {
|
|
10025
|
+
return clampIndex(prev + 1);
|
|
10026
|
+
});
|
|
10027
|
+
};
|
|
10028
|
+
var highlightPrevOption = function highlightPrevOption() {
|
|
10029
|
+
return setItemToHighlight(function (prev) {
|
|
10030
|
+
return clampIndex(prev - 1);
|
|
10031
|
+
});
|
|
10032
|
+
};
|
|
10033
|
+
var reset = function reset() {
|
|
10034
|
+
var _selectRef$current;
|
|
10035
|
+
(_selectRef$current = selectRef.current) == null || _selectRef$current.blur();
|
|
10036
|
+
setItemToHighlight(-1);
|
|
10037
|
+
};
|
|
10038
|
+
var handleKeyUp = function handleKeyUp(event) {
|
|
10039
|
+
if (!shouldHighlightOption) return undefined;
|
|
10040
|
+
var shouldHighlightOptionNext = event.key === 'ArrowDown';
|
|
10041
|
+
var shouldHighlightOptionPrev = event.key === 'ArrowUp';
|
|
10042
|
+
if (shouldHighlightOptionNext) return highlightNextOption();
|
|
10043
|
+
if (shouldHighlightOptionPrev) return highlightPrevOption();
|
|
10044
|
+
return undefined;
|
|
10045
|
+
};
|
|
10046
|
+
var preventScrollingWhileNavigating = function preventScrollingWhileNavigating(event) {
|
|
10047
|
+
if (!shouldHighlightOption) return;
|
|
10048
|
+
if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return;
|
|
10049
|
+
event.preventDefault();
|
|
10050
|
+
};
|
|
10051
|
+
var handleHighlighted = function handleHighlighted(cb) {
|
|
10052
|
+
return function (event) {
|
|
10053
|
+
if (itemToHighlight === -1) return;
|
|
10054
|
+
if (event.key !== 'Enter') return;
|
|
10055
|
+
cb(itemToHighlight);
|
|
10056
|
+
reset();
|
|
10057
|
+
};
|
|
10058
|
+
};
|
|
10059
|
+
useEffect(function () {
|
|
10060
|
+
if (shouldHighlightOption) return;
|
|
10061
|
+
reset();
|
|
10062
|
+
}, [shouldHighlightOption]);
|
|
10063
|
+
return {
|
|
10064
|
+
handleKeyUp: handleKeyUp,
|
|
10065
|
+
preventScrollingWhileNavigating: preventScrollingWhileNavigating,
|
|
10066
|
+
handleHighlighted: handleHighlighted,
|
|
10067
|
+
itemToHighlight: itemToHighlight
|
|
10068
|
+
};
|
|
10069
|
+
};
|
|
10070
|
+
var useVisualAccessibility = function useVisualAccessibility(_ref2) {
|
|
10071
|
+
var selectRef = _ref2.selectRef,
|
|
10072
|
+
isSelectDisabled = _ref2.isSelectDisabled;
|
|
10073
|
+
var addFocusClass = function addFocusClass() {
|
|
10074
|
+
var _selectRef$current2;
|
|
10075
|
+
(_selectRef$current2 = selectRef.current) == null || _selectRef$current2.classList.add('focus');
|
|
10076
|
+
};
|
|
10077
|
+
var removeFocusClass = function removeFocusClass() {
|
|
10078
|
+
var _selectRef$current3;
|
|
10079
|
+
(_selectRef$current3 = selectRef.current) == null || _selectRef$current3.classList.remove('focus');
|
|
10080
|
+
};
|
|
10081
|
+
var toggleFocus = function toggleFocus() {
|
|
10082
|
+
var _selectRef$current4;
|
|
10083
|
+
if ((_selectRef$current4 = selectRef.current) != null && _selectRef$current4.classList.contains('focus')) removeFocusClass();else addFocusClass();
|
|
10084
|
+
};
|
|
10085
|
+
var withClickAwayHandler = function withClickAwayHandler(cb) {
|
|
10086
|
+
return function (event) {
|
|
10087
|
+
if (!selectRef.current) return;
|
|
10088
|
+
if (selectRef.current.contains(event.target)) return;
|
|
10089
|
+
removeFocusClass();
|
|
10090
|
+
cb();
|
|
10091
|
+
};
|
|
10092
|
+
};
|
|
10093
|
+
useEffect(function () {
|
|
10094
|
+
if (!selectRef.current) return;
|
|
10095
|
+
if (isSelectDisabled) {
|
|
10096
|
+
selectRef.current.classList.add('disabled');
|
|
10097
|
+
} else selectRef.current.classList.remove('disabled');
|
|
10098
|
+
}, [isSelectDisabled]);
|
|
10099
|
+
return {
|
|
10100
|
+
withClickAwayHandler: withClickAwayHandler,
|
|
10101
|
+
toggleFocus: toggleFocus,
|
|
10102
|
+
addFocusClass: addFocusClass,
|
|
10103
|
+
removeFocusClass: removeFocusClass
|
|
10104
|
+
};
|
|
10105
|
+
};
|
|
10106
|
+
var useAccessibility = function useAccessibility(props) {
|
|
10107
|
+
var selectRef = props.selectRef;
|
|
10108
|
+
var _useKeyboardAccessibi = useKeyboardAccessibility(props),
|
|
10109
|
+
handleKeyUp = _useKeyboardAccessibi.handleKeyUp,
|
|
10110
|
+
preventScrollingWhileNavigating = _useKeyboardAccessibi.preventScrollingWhileNavigating,
|
|
10111
|
+
handleHighlighted = _useKeyboardAccessibi.handleHighlighted,
|
|
10112
|
+
itemToHighlight = _useKeyboardAccessibi.itemToHighlight;
|
|
10113
|
+
var _useVisualAccessibili = useVisualAccessibility(props),
|
|
10114
|
+
addFocusClass = _useVisualAccessibili.addFocusClass,
|
|
10115
|
+
removeFocusClass = _useVisualAccessibili.removeFocusClass,
|
|
10116
|
+
toggleFocus = _useVisualAccessibili.toggleFocus,
|
|
10117
|
+
withClickAwayHandler = _useVisualAccessibili.withClickAwayHandler;
|
|
10118
|
+
useEffect(function () {
|
|
10119
|
+
if (!selectRef.current) return undefined;
|
|
10120
|
+
selectRef.current.addEventListener('keydown', preventScrollingWhileNavigating);
|
|
10121
|
+
selectRef.current.addEventListener('keyup', handleKeyUp);
|
|
10122
|
+
selectRef.current.addEventListener('click', toggleFocus);
|
|
10123
|
+
selectRef.current.addEventListener('focus', addFocusClass);
|
|
10124
|
+
selectRef.current.addEventListener('blur', removeFocusClass);
|
|
10125
|
+
return function () {
|
|
10126
|
+
var _selectRef$current5, _selectRef$current6, _selectRef$current7, _selectRef$current8, _selectRef$current9;
|
|
10127
|
+
(_selectRef$current5 = selectRef.current) == null || _selectRef$current5.removeEventListener('keydown', preventScrollingWhileNavigating);
|
|
10128
|
+
(_selectRef$current6 = selectRef.current) == null || _selectRef$current6.removeEventListener('keyup', handleKeyUp);
|
|
10129
|
+
(_selectRef$current7 = selectRef.current) == null || _selectRef$current7.removeEventListener('click', toggleFocus);
|
|
10130
|
+
(_selectRef$current8 = selectRef.current) == null || _selectRef$current8.removeEventListener('focus', addFocusClass);
|
|
10131
|
+
(_selectRef$current9 = selectRef.current) == null || _selectRef$current9.removeEventListener('blur', removeFocusClass);
|
|
10132
|
+
};
|
|
10133
|
+
});
|
|
10134
|
+
return {
|
|
10135
|
+
withClickAwayHandler: withClickAwayHandler,
|
|
10136
|
+
handleHighlighted: handleHighlighted,
|
|
10137
|
+
itemToHighlight: itemToHighlight
|
|
10138
|
+
};
|
|
10139
|
+
};
|
|
10140
|
+
/**
|
|
10141
|
+
* DEPRECATED. Use Select2 instead.
|
|
10142
|
+
* A select component, created using <ul> and <li> elements, with bespoke accessibility
|
|
10143
|
+
* logic.
|
|
10144
|
+
*
|
|
10145
|
+
* # Usage
|
|
10146
|
+
* ## Defining a component that uses a typical Select element
|
|
10147
|
+
* ```tsx
|
|
10148
|
+
* const MyComponent = () => {
|
|
10149
|
+
* const handleSelect = (value: number, text: string) => {
|
|
10150
|
+
* console.log("Selected", value);
|
|
10151
|
+
* };
|
|
10152
|
+
*
|
|
10153
|
+
* return <>
|
|
10154
|
+
* <Select
|
|
10155
|
+
* label="This is a label"
|
|
10156
|
+
* options={[
|
|
10157
|
+
* { text: "Option 1", value: 1 },
|
|
10158
|
+
* { text: "Option 2", value: 2 },
|
|
10159
|
+
* ]}
|
|
10160
|
+
* onSelect={handleSelect}
|
|
10161
|
+
* />
|
|
10162
|
+
* </>
|
|
10163
|
+
* }
|
|
10164
|
+
* ```
|
|
10165
|
+
*
|
|
10166
|
+
* ## Defining a component that uses a disabled Select element
|
|
10167
|
+
* ```tsx
|
|
10168
|
+
* const MyComponent = () => {
|
|
10169
|
+
* const handleSelect = (value: number, text: string) => {
|
|
10170
|
+
* console.log("Selected", value);
|
|
10171
|
+
* };
|
|
10172
|
+
*
|
|
10173
|
+
* return <>
|
|
10174
|
+
* <Select
|
|
10175
|
+
* disabled // Select component disabled explicitely
|
|
10176
|
+
* label="This is a label"
|
|
10177
|
+
* options={[
|
|
10178
|
+
* { text: "Option 1", value: 1 },
|
|
10179
|
+
* { text: "Option 2", value: 2 },
|
|
10180
|
+
* ]}
|
|
10181
|
+
* onSelect={handleSelect}
|
|
10182
|
+
* />
|
|
10183
|
+
* <Select
|
|
10184
|
+
* label="This is a label"
|
|
10185
|
+
* options={[]} // Select component disabled implicitely by passing an empty array of options
|
|
10186
|
+
* onSelect={handleSelect}
|
|
10187
|
+
* />
|
|
10188
|
+
* </>
|
|
10189
|
+
* }
|
|
10190
|
+
* ```
|
|
10191
|
+
*
|
|
10192
|
+
* ## Defining a component with a non-labelled Select element
|
|
10193
|
+
* ```tsx
|
|
10194
|
+
* const MyComponent = () => {
|
|
10195
|
+
* const handleSelect = (value: number, text: string) => {
|
|
10196
|
+
* console.log("Selected", value);
|
|
10197
|
+
* };
|
|
10198
|
+
*
|
|
10199
|
+
* return <>
|
|
10200
|
+
* <Select
|
|
10201
|
+
* label=""
|
|
10202
|
+
* options={[
|
|
10203
|
+
* { text: "Option 1", value: 1 },
|
|
10204
|
+
* { text: "Option 2", value: 2 },
|
|
10205
|
+
* ]}
|
|
10206
|
+
* onSelect={handleSelect}
|
|
10207
|
+
* />
|
|
10208
|
+
* </>
|
|
10209
|
+
* }
|
|
10210
|
+
* ```
|
|
10211
|
+
*
|
|
10212
|
+
* ## Changing the dimensions of a Select element (px)
|
|
10213
|
+
* ```tsx
|
|
10214
|
+
* const MyComponent = () => {
|
|
10215
|
+
* const handleSelect = (value: number, text: string) => {
|
|
10216
|
+
* console.log("Selected", value);
|
|
10217
|
+
* };
|
|
10218
|
+
*
|
|
10219
|
+
* const selectWidthPx = 100;
|
|
10220
|
+
* const selectHeightPx = 27;
|
|
10221
|
+
*
|
|
10222
|
+
* return <>
|
|
10223
|
+
* <Select
|
|
10224
|
+
* label="This is a label"
|
|
10225
|
+
* options={[
|
|
10226
|
+
* { text: "Option 1", value: 1 },
|
|
10227
|
+
* { text: "Option 2", value: 2 },
|
|
10228
|
+
* ]}
|
|
10229
|
+
* onSelect={handleSelect}
|
|
10230
|
+
* width={selectWidthPx}
|
|
10231
|
+
* height={selectHeightPx}
|
|
10232
|
+
* />
|
|
10233
|
+
* </>
|
|
10234
|
+
* }
|
|
10235
|
+
* ```
|
|
10236
|
+
*/
|
|
10237
|
+
function Select(_ref3) {
|
|
10238
|
+
var _ref4, _selectedValue$text, _options$;
|
|
10239
|
+
var label = _ref3.label,
|
|
10240
|
+
options = _ref3.options,
|
|
10241
|
+
onSelect = _ref3.onSelect,
|
|
10242
|
+
_ref3$disabled = _ref3.disabled,
|
|
10243
|
+
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
|
|
10244
|
+
_ref3$resetWhenOption = _ref3.resetWhenOptionsUpdate,
|
|
10245
|
+
resetWhenOptionsUpdate = _ref3$resetWhenOption === void 0 ? false : _ref3$resetWhenOption,
|
|
10246
|
+
_ref3$width = _ref3.width,
|
|
10247
|
+
width = _ref3$width === void 0 ? 'default' : _ref3$width,
|
|
10248
|
+
_ref3$height = _ref3.height,
|
|
10249
|
+
height = _ref3$height === void 0 ? 'default' : _ref3$height;
|
|
10250
|
+
var selectRef = useRef(null);
|
|
10251
|
+
var optionsRef = useRef([]);
|
|
10252
|
+
var _useState2 = useState(null),
|
|
10253
|
+
selectedValue = _useState2[0],
|
|
10254
|
+
setSelectedValue = _useState2[1];
|
|
10255
|
+
var _useState3 = useState(false),
|
|
10256
|
+
isOpen = _useState3[0],
|
|
10257
|
+
setIsOpen = _useState3[1];
|
|
10258
|
+
var isDisabled = disabled || options.length === 0;
|
|
10259
|
+
var _useAccessibility = useAccessibility({
|
|
10260
|
+
selectRef: selectRef,
|
|
10261
|
+
optionsRef: optionsRef,
|
|
10262
|
+
shouldHighlightOption: isOpen,
|
|
10263
|
+
isSelectDisabled: isDisabled
|
|
10264
|
+
}),
|
|
10265
|
+
withClickAwayHandler = _useAccessibility.withClickAwayHandler,
|
|
10266
|
+
handleHighlighted = _useAccessibility.handleHighlighted,
|
|
10267
|
+
itemToHighlight = _useAccessibility.itemToHighlight;
|
|
10268
|
+
var openSelect = function openSelect() {
|
|
10269
|
+
return setIsOpen(true);
|
|
10270
|
+
};
|
|
10271
|
+
var closeSelect = function closeSelect() {
|
|
10272
|
+
return setIsOpen(false);
|
|
10273
|
+
};
|
|
10274
|
+
var toggleSelect = function toggleSelect() {
|
|
10275
|
+
return setIsOpen(function (prev) {
|
|
10276
|
+
return !prev;
|
|
10277
|
+
});
|
|
10278
|
+
};
|
|
10279
|
+
var closeSelectOnBlur = withClickAwayHandler(closeSelect);
|
|
10280
|
+
var handleOptionSelection = function handleOptionSelection(index) {
|
|
10281
|
+
var option = options[index];
|
|
10282
|
+
setSelectedValue(option);
|
|
10283
|
+
onSelect(option.value, option.text);
|
|
10284
|
+
};
|
|
10285
|
+
useEffect(function () {
|
|
10286
|
+
document.addEventListener('click', closeSelectOnBlur, false);
|
|
10287
|
+
return function () {
|
|
10288
|
+
document.removeEventListener('click', closeSelectOnBlur, false);
|
|
10289
|
+
};
|
|
10290
|
+
}, []);
|
|
10291
|
+
useEffect(function () {
|
|
10292
|
+
if (!resetWhenOptionsUpdate) return;
|
|
10293
|
+
if (options.length === 0) {
|
|
10294
|
+
setSelectedValue(null);
|
|
10295
|
+
return;
|
|
10296
|
+
}
|
|
10297
|
+
setSelectedValue(options[0]);
|
|
10298
|
+
}, [options, resetWhenOptionsUpdate]);
|
|
10299
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
10300
|
+
level: 1,
|
|
10301
|
+
tag: "p",
|
|
10302
|
+
"data-testid": "select-label"
|
|
10303
|
+
}, label)), /*#__PURE__*/React__default.createElement(SelectList, {
|
|
10304
|
+
id: "select",
|
|
10305
|
+
ref: selectRef,
|
|
10306
|
+
onClick: toggleSelect,
|
|
10307
|
+
onFocus: openSelect,
|
|
10308
|
+
onBlur: closeSelect,
|
|
10309
|
+
onMouseDown: function onMouseDown(e) {
|
|
10310
|
+
return e.preventDefault();
|
|
10311
|
+
},
|
|
10312
|
+
onKeyUp: handleHighlighted(handleOptionSelection),
|
|
10313
|
+
width: width,
|
|
10314
|
+
height: height,
|
|
10315
|
+
role: "listbox",
|
|
10316
|
+
tabIndex: 0,
|
|
10317
|
+
"aria-labelledby": label,
|
|
10318
|
+
"aria-disabled": isDisabled,
|
|
10319
|
+
"data-testid": "select"
|
|
10320
|
+
}, /*#__PURE__*/React__default.createElement(SelectWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10321
|
+
level: 1,
|
|
10322
|
+
tag: "p",
|
|
10323
|
+
"data-testid": "selected-value"
|
|
10324
|
+
}, (_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, {
|
|
10325
|
+
"data-testid": "options"
|
|
10326
|
+
}, options.map(function (option, index) {
|
|
10327
|
+
return /*#__PURE__*/React__default.createElement(Option, {
|
|
10328
|
+
ref: function ref(element) {
|
|
10329
|
+
if (!element || optionsRef.current.length === options.length) return;
|
|
10330
|
+
optionsRef.current.push(element);
|
|
10331
|
+
},
|
|
10332
|
+
role: "option",
|
|
10333
|
+
tabIndex: index + 1,
|
|
10334
|
+
hover: index === itemToHighlight,
|
|
10335
|
+
key: option.text,
|
|
10336
|
+
onClick: function onClick() {
|
|
10337
|
+
return handleOptionSelection(index);
|
|
10338
|
+
}
|
|
10339
|
+
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
10340
|
+
level: 1,
|
|
10341
|
+
tag: "p"
|
|
10342
|
+
}, option.text));
|
|
10343
|
+
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10344
|
+
}
|
|
10345
|
+
|
|
10346
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$H, _templateObject4$z;
|
|
10347
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10348
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n\n .harmonic-select__control--is-focused {\n border-color: var(--color-base-dark-grey);\n box-shadow: ", ";\n }\n\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--color-primary-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n\n @media ", " {\n font-size: 17px;\n }\n }\n\n .harmonic-select__placeholder {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__single-value {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--color-base-light-grey);\n background: var(--color-base-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--color-base-dark-grey);\n }\n }\n\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--color-base-mid-grey);\n }\n\n .harmonic-select__menu-list {\n padding: 10px 0;\n }\n\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-primary-black);\n\n @media ", " {\n font-size: 17px;\n }\n\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--color-base-light-grey);\n }\n }\n\n .harmonic-select__option--is-selected {\n color: var(--color-primary-black);\n background: none;\n }\n\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n color: var(--color-primary-black);\n }\n\n .harmonic-select__menu-notice {\n color: var(--color-primary-black);\n padding: 20px 20px;\n text-align: left;\n }\n\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9556
10349
|
var width = _ref.width;
|
|
9557
10350
|
if (!width) return 'none';
|
|
9558
10351
|
return width + "px";
|
|
9559
10352
|
}, function (_ref2) {
|
|
9560
10353
|
var error = _ref2.error;
|
|
9561
|
-
if (error !== undefined) return "1px solid var(--
|
|
9562
|
-
return "1px solid var(--base-
|
|
10354
|
+
if (error !== undefined) return "1px solid var(--color-state-error)";
|
|
10355
|
+
return "1px solid var(--color-base-mid-grey)";
|
|
9563
10356
|
}, function (_ref3) {
|
|
9564
10357
|
var error = _ref3.error;
|
|
9565
|
-
if (error !== undefined) return "var(--
|
|
9566
|
-
return "var(--base-
|
|
10358
|
+
if (error !== undefined) return "var(--color-state-error)";
|
|
10359
|
+
return "var(--color-base-dark-grey)";
|
|
9567
10360
|
}, function (_ref4) {
|
|
9568
10361
|
var darkMode = _ref4.darkMode;
|
|
9569
|
-
if (darkMode) return "0 0 0
|
|
10362
|
+
if (darkMode) return "0 0 0 1px var(--color-state-medium)";
|
|
9570
10363
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9571
|
-
});
|
|
9572
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10364
|
+
}, devices.mobile, devices.mobile);
|
|
10365
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n\n @media ", " {\n margin: 0 0 12px;\n }\n"])), function (_ref5) {
|
|
9573
10366
|
var darkMode = _ref5.darkMode;
|
|
9574
|
-
if (darkMode) return "var(--base-
|
|
9575
|
-
return "var(--
|
|
9576
|
-
});
|
|
9577
|
-
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10367
|
+
if (darkMode) return "var(--color-base-white)";
|
|
10368
|
+
return "var(--color-primary-black)";
|
|
10369
|
+
}, devices.mobile);
|
|
10370
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9578
10371
|
var darkMode = _ref6.darkMode;
|
|
9579
|
-
if (darkMode) return "var(--base-
|
|
9580
|
-
return "var(--
|
|
10372
|
+
if (darkMode) return "var(--color-base-white)";
|
|
10373
|
+
return "var(--color-state-error)";
|
|
9581
10374
|
});
|
|
9582
10375
|
|
|
9583
|
-
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10376
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
|
|
9584
10377
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
9585
10378
|
return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
9586
10379
|
iconName: "DropdownArrow"
|
|
@@ -9591,21 +10384,24 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9591
10384
|
error = _ref.error,
|
|
9592
10385
|
width = _ref.width,
|
|
9593
10386
|
darkMode = _ref.darkMode,
|
|
9594
|
-
children = _ref.children
|
|
9595
|
-
|
|
10387
|
+
children = _ref.children,
|
|
10388
|
+
className = _ref.className;
|
|
10389
|
+
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
10390
|
+
className: className
|
|
10391
|
+
}, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9596
10392
|
darkMode: darkMode,
|
|
9597
10393
|
"data-testid": "select2-text-label"
|
|
9598
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
9599
|
-
|
|
9600
|
-
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper, {
|
|
10394
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10395
|
+
size: "large"
|
|
10396
|
+
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
9601
10397
|
width: width,
|
|
9602
10398
|
error: error,
|
|
9603
10399
|
darkMode: darkMode
|
|
9604
10400
|
}, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
9605
10401
|
darkMode: darkMode,
|
|
9606
10402
|
"data-testid": "select2-error-label"
|
|
9607
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
9608
|
-
|
|
10403
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10404
|
+
size: "medium"
|
|
9609
10405
|
}, error))));
|
|
9610
10406
|
};
|
|
9611
10407
|
/**
|
|
@@ -9631,13 +10427,15 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
9631
10427
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
9632
10428
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
9633
10429
|
components = _ref2.components,
|
|
10430
|
+
className = _ref2.className,
|
|
9634
10431
|
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
9635
10432
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
9636
10433
|
label: label,
|
|
9637
10434
|
error: error,
|
|
9638
10435
|
width: width,
|
|
9639
|
-
darkMode: darkMode
|
|
9640
|
-
|
|
10436
|
+
darkMode: darkMode,
|
|
10437
|
+
className: className
|
|
10438
|
+
}, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, selectProps, {
|
|
9641
10439
|
components: _extends({
|
|
9642
10440
|
DropdownIndicator: DropdownIndicator,
|
|
9643
10441
|
LoadingIndicator: undefined,
|
|
@@ -9677,7 +10475,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9677
10475
|
error: error,
|
|
9678
10476
|
width: width,
|
|
9679
10477
|
darkMode: darkMode
|
|
9680
|
-
}, /*#__PURE__*/React__default.createElement(Select$
|
|
10478
|
+
}, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({}, selectProps, {
|
|
9681
10479
|
components: _extends({
|
|
9682
10480
|
DropdownIndicator: DropdownIndicator,
|
|
9683
10481
|
LoadingIndicator: undefined,
|
|
@@ -9688,24 +10486,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9688
10486
|
})));
|
|
9689
10487
|
};
|
|
9690
10488
|
|
|
9691
|
-
var _templateObject$
|
|
9692
|
-
var Wrapper$
|
|
9693
|
-
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$
|
|
9694
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
10489
|
+
var _templateObject$1c, _templateObject3$I, _templateObject4$A, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
|
|
10490
|
+
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
10491
|
+
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
10492
|
+
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
9695
10493
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
9696
10494
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
9697
10495
|
}, function (_ref2) {
|
|
9698
10496
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
9699
10497
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
9700
10498
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
9701
|
-
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10499
|
+
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
|
|
9702
10500
|
var singleChild = _ref3.singleChild;
|
|
9703
10501
|
return singleChild ? '0' : '10px';
|
|
9704
10502
|
});
|
|
9705
|
-
var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$
|
|
9706
|
-
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$
|
|
9707
|
-
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$
|
|
9708
|
-
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$
|
|
10503
|
+
var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
10504
|
+
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
10505
|
+
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
|
|
10506
|
+
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
|
|
9709
10507
|
|
|
9710
10508
|
// Set max. character length
|
|
9711
10509
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -9758,7 +10556,7 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
9758
10556
|
var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
|
|
9759
10557
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
9760
10558
|
theme: theme
|
|
9761
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10559
|
+
}, /*#__PURE__*/React__default.createElement(Wrapper$6, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabel, {
|
|
9762
10560
|
tag: "div",
|
|
9763
10561
|
size: "small"
|
|
9764
10562
|
}, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
|
|
@@ -9794,8 +10592,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
9794
10592
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
9795
10593
|
};
|
|
9796
10594
|
|
|
9797
|
-
var _templateObject$
|
|
9798
|
-
var Wrapper$
|
|
10595
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$J;
|
|
10596
|
+
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
9799
10597
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9800
10598
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9801
10599
|
return aspectRatio;
|
|
@@ -9805,8 +10603,8 @@ var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$19 || (_templateObjec
|
|
|
9805
10603
|
height = _ref2.height;
|
|
9806
10604
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
9807
10605
|
});
|
|
9808
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
9809
|
-
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$
|
|
10606
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
10607
|
+
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
9810
10608
|
|
|
9811
10609
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
9812
10610
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -9819,7 +10617,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9819
10617
|
aspectRatio = _ref.aspectRatio,
|
|
9820
10618
|
className = _ref.className,
|
|
9821
10619
|
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
|
9822
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10620
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, Object.assign({
|
|
9823
10621
|
aspectRatio: aspectRatio,
|
|
9824
10622
|
className: className
|
|
9825
10623
|
}, restProps), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
@@ -9839,13 +10637,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9839
10637
|
}, caption))));
|
|
9840
10638
|
};
|
|
9841
10639
|
|
|
9842
|
-
var _templateObject$
|
|
9843
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
9844
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9845
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
9846
|
-
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
9847
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
9848
|
-
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$
|
|
10640
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$u, _templateObject6$n;
|
|
10641
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
10642
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10643
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10644
|
+
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10645
|
+
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
10646
|
+
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
9849
10647
|
|
|
9850
10648
|
var MiniCard = function MiniCard(_ref) {
|
|
9851
10649
|
var _ref$title = _ref.title,
|
|
@@ -9883,18 +10681,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9883
10681
|
}, title)))));
|
|
9884
10682
|
};
|
|
9885
10683
|
|
|
9886
|
-
var _templateObject$
|
|
9887
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9888
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
9889
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
10684
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v;
|
|
10685
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
10686
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
10687
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
9890
10688
|
var isVisible = _ref.isVisible;
|
|
9891
10689
|
return isVisible ? 'visible' : 'hidden';
|
|
9892
10690
|
});
|
|
9893
|
-
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
10691
|
+
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
9894
10692
|
var isVisible = _ref2.isVisible;
|
|
9895
10693
|
return isVisible ? 'visible' : 'hidden';
|
|
9896
10694
|
});
|
|
9897
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10695
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
9898
10696
|
|
|
9899
10697
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9900
10698
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -9975,15 +10773,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
9975
10773
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
9976
10774
|
};
|
|
9977
10775
|
|
|
9978
|
-
var _templateObject$
|
|
9979
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
9980
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
9981
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
9982
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
10776
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$w;
|
|
10777
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10778
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
|
|
10779
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
10780
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
9983
10781
|
var isActive = _ref.isActive;
|
|
9984
10782
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
9985
10783
|
}, Colors.MidGrey);
|
|
9986
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
10784
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
9987
10785
|
var isOpen = _ref2.isOpen;
|
|
9988
10786
|
return isOpen ? 'block' : 'none';
|
|
9989
10787
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -10139,19 +10937,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10139
10937
|
});
|
|
10140
10938
|
};
|
|
10141
10939
|
|
|
10142
|
-
var _templateObject$
|
|
10143
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10144
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
10145
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
10940
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o;
|
|
10941
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10942
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10943
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10146
10944
|
var color = _ref.color;
|
|
10147
10945
|
return "var(--base-color-" + color + ")";
|
|
10148
10946
|
});
|
|
10149
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
10150
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$
|
|
10947
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10948
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10151
10949
|
var color = _ref2.color;
|
|
10152
10950
|
return "var(--base-color-" + color + ")";
|
|
10153
10951
|
});
|
|
10154
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$
|
|
10952
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10155
10953
|
var color = _ref3.color;
|
|
10156
10954
|
return "var(--base-color-" + color + ")";
|
|
10157
10955
|
});
|
|
@@ -10233,19 +11031,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10233
11031
|
}, strengthLabel))));
|
|
10234
11032
|
};
|
|
10235
11033
|
|
|
10236
|
-
var _templateObject$
|
|
10237
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
10238
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2
|
|
10239
|
-
var Wrapper$
|
|
10240
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
11034
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
|
|
11035
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11036
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11037
|
+
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11038
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10241
11039
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10242
11040
|
}, devices.tablet, devices.mobile);
|
|
10243
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
11041
|
+
var TableCell = /*#__PURE__*/styled.td(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
10244
11042
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10245
11043
|
}, devices.mobile);
|
|
10246
|
-
var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$
|
|
10247
|
-
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$
|
|
10248
|
-
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$
|
|
11044
|
+
var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
|
|
11045
|
+
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
|
|
11046
|
+
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10249
11047
|
|
|
10250
11048
|
/* eslint-disable react/no-danger */
|
|
10251
11049
|
var Content = function Content(_ref) {
|
|
@@ -10418,7 +11216,7 @@ var Table = function Table(_ref) {
|
|
|
10418
11216
|
} else {
|
|
10419
11217
|
visibleRows = totalRows;
|
|
10420
11218
|
}
|
|
10421
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11219
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
10422
11220
|
className: className
|
|
10423
11221
|
}, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
10424
11222
|
onClickPrev: handlePrev,
|
|
@@ -10448,24 +11246,24 @@ var Table = function Table(_ref) {
|
|
|
10448
11246
|
}))));
|
|
10449
11247
|
};
|
|
10450
11248
|
|
|
10451
|
-
var _templateObject$
|
|
10452
|
-
var Wrapper$
|
|
11249
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$P, _templateObject4$G, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
11250
|
+
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10453
11251
|
var theme = _ref.theme;
|
|
10454
11252
|
return "var(--color-" + theme + ")";
|
|
10455
11253
|
}, function (_ref2) {
|
|
10456
11254
|
var theme = _ref2.theme;
|
|
10457
11255
|
return "var(--color-" + theme + ")";
|
|
10458
11256
|
});
|
|
10459
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
10460
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
10461
|
-
var Error = /*#__PURE__*/styled.div(_templateObject4$
|
|
10462
|
-
var Form = /*#__PURE__*/styled.form(_templateObject5$
|
|
10463
|
-
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
10464
|
-
var ServerError = /*#__PURE__*/styled.div(_templateObject7$
|
|
10465
|
-
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$
|
|
10466
|
-
var ButtonWrapper$
|
|
10467
|
-
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
10468
|
-
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$
|
|
11257
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11258
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
11259
|
+
var Error = /*#__PURE__*/styled.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
11260
|
+
var Form = /*#__PURE__*/styled.form(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
11261
|
+
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
11262
|
+
var ServerError = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
11263
|
+
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
11264
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
11265
|
+
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
|
|
11266
|
+
var MessageWrapper = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
10469
11267
|
var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
10470
11268
|
var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
|
|
10471
11269
|
var _ref3$isOpen = _ref3.isOpen,
|
|
@@ -10491,7 +11289,9 @@ var themeToColor = function themeToColor(theme) {
|
|
|
10491
11289
|
var SignUpTitle = function SignUpTitle(_ref) {
|
|
10492
11290
|
var title = _ref.title,
|
|
10493
11291
|
_ref$isMobile = _ref.isMobile,
|
|
10494
|
-
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile
|
|
11292
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
|
|
11293
|
+
_ref$titleFontFamily = _ref.titleFontFamily,
|
|
11294
|
+
titleFontFamily = _ref$titleFontFamily === void 0 ? false : _ref$titleFontFamily;
|
|
10495
11295
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
10496
11296
|
columnStartDesktop: 3,
|
|
10497
11297
|
columnSpanDesktop: 10,
|
|
@@ -10500,7 +11300,7 @@ var SignUpTitle = function SignUpTitle(_ref) {
|
|
|
10500
11300
|
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
10501
11301
|
color: "black",
|
|
10502
11302
|
hierarchy: "h3",
|
|
10503
|
-
serif:
|
|
11303
|
+
serif: titleFontFamily === 'Victor',
|
|
10504
11304
|
size: isMobile ? 'small' : 'medium'
|
|
10505
11305
|
}, title)));
|
|
10506
11306
|
};
|
|
@@ -10753,10 +11553,10 @@ var SignUpForm = function SignUpForm(_ref) {
|
|
|
10753
11553
|
tabIndex: 0
|
|
10754
11554
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10755
11555
|
size: "small"
|
|
10756
|
-
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
11556
|
+
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
10757
11557
|
onClick: handleFormSubmit,
|
|
10758
11558
|
theme: theme
|
|
10759
|
-
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$
|
|
11559
|
+
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
10760
11560
|
onClick: handleFormSubmit,
|
|
10761
11561
|
theme: theme
|
|
10762
11562
|
})), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
|
|
@@ -10808,7 +11608,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
10808
11608
|
useEffect(function () {
|
|
10809
11609
|
setDropdownOpen(isOpened);
|
|
10810
11610
|
}, [isOpened]);
|
|
10811
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11611
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$9, {
|
|
10812
11612
|
theme: themeToColor(theme),
|
|
10813
11613
|
className: className
|
|
10814
11614
|
}, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
|
|
@@ -10873,13 +11673,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
10873
11673
|
}))))));
|
|
10874
11674
|
};
|
|
10875
11675
|
|
|
10876
|
-
var _templateObject$
|
|
10877
|
-
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11676
|
+
var _templateObject$1k, _templateObject2$11, _templateObject4$H, _templateObject5$A;
|
|
11677
|
+
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
10878
11678
|
var withShadow = _ref.withShadow;
|
|
10879
|
-
return withShadow && css(_templateObject2$
|
|
11679
|
+
return withShadow && css(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
10880
11680
|
}, devices.mobile);
|
|
10881
|
-
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$
|
|
10882
|
-
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$
|
|
11681
|
+
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
11682
|
+
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
10883
11683
|
|
|
10884
11684
|
var defaultGrid = {
|
|
10885
11685
|
columnStartDesktop: 2,
|
|
@@ -10937,12 +11737,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
10937
11737
|
return null;
|
|
10938
11738
|
};
|
|
10939
11739
|
|
|
10940
|
-
var _templateObject$
|
|
10941
|
-
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$
|
|
11740
|
+
var _templateObject$1l, _templateObject2$12;
|
|
11741
|
+
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
10942
11742
|
var hide = _ref.hide;
|
|
10943
11743
|
return hide && "display: none;";
|
|
10944
11744
|
}, devices.mobileAndTablet);
|
|
10945
|
-
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2
|
|
11745
|
+
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
10946
11746
|
|
|
10947
11747
|
/**
|
|
10948
11748
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11034,8 +11834,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11034
11834
|
}));
|
|
11035
11835
|
};
|
|
11036
11836
|
|
|
11037
|
-
var _templateObject$
|
|
11038
|
-
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
11837
|
+
var _templateObject$1m;
|
|
11838
|
+
var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
|
|
11039
11839
|
|
|
11040
11840
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11041
11841
|
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'] + "\">");
|
|
@@ -11095,27 +11895,27 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11095
11895
|
}, gridItemOrContent);
|
|
11096
11896
|
};
|
|
11097
11897
|
|
|
11098
|
-
var _templateObject$
|
|
11898
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11099
11899
|
var color = 'primary-black';
|
|
11100
11900
|
var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
|
|
11101
11901
|
borderColor: color,
|
|
11102
11902
|
hoveredColor: color,
|
|
11103
11903
|
pressedColor: color,
|
|
11104
11904
|
textColor: color
|
|
11105
|
-
})(_templateObject$
|
|
11106
|
-
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11107
|
-
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$
|
|
11905
|
+
})(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11906
|
+
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11907
|
+
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11108
11908
|
var Heading = /*#__PURE__*/styled(HarmonicHeader).attrs({
|
|
11109
11909
|
serif: true,
|
|
11110
11910
|
size: 'medium'
|
|
11111
|
-
})(_templateObject4$
|
|
11911
|
+
})(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11112
11912
|
var Intro = /*#__PURE__*/styled(HarmonicSubtitle).attrs({
|
|
11113
11913
|
size: 'large'
|
|
11114
|
-
})(_templateObject5$
|
|
11115
|
-
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$
|
|
11914
|
+
})(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11915
|
+
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11116
11916
|
var SignInPrompt = /*#__PURE__*/styled(BodyCopyHarmonic).attrs({
|
|
11117
11917
|
size: 'large'
|
|
11118
|
-
})(_templateObject7$
|
|
11918
|
+
})(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11119
11919
|
|
|
11120
11920
|
var Paywall = function Paywall(_ref) {
|
|
11121
11921
|
var className = _ref.className,
|
|
@@ -11308,14 +12108,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11308
12108
|
})))))));
|
|
11309
12109
|
};
|
|
11310
12110
|
|
|
11311
|
-
var _templateObject$
|
|
11312
|
-
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11313
|
-
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
11314
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$
|
|
11315
|
-
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11316
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
11317
|
-
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$
|
|
11318
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$
|
|
12111
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$C, _templateObject6$s, _templateObject7$m;
|
|
12112
|
+
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
12113
|
+
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
12114
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
12115
|
+
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
12116
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
12117
|
+
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
12118
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
11319
12119
|
|
|
11320
12120
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11321
12121
|
var Footer = function Footer(_ref) {
|
|
@@ -11373,18 +12173,18 @@ var Footer = function Footer(_ref) {
|
|
|
11373
12173
|
}, additionalInfo))));
|
|
11374
12174
|
};
|
|
11375
12175
|
|
|
11376
|
-
var _templateObject$
|
|
12176
|
+
var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11377
12177
|
var LIST_ITEM_GAP = 32;
|
|
11378
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12178
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
|
|
11379
12179
|
var bottomBorder = _ref.bottomBorder;
|
|
11380
12180
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11381
12181
|
}, zIndexes.anchor, function (_ref2) {
|
|
11382
12182
|
var withShadow = _ref2.withShadow;
|
|
11383
|
-
return withShadow && css(_templateObject2$
|
|
12183
|
+
return withShadow && css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11384
12184
|
});
|
|
11385
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
11386
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11387
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
12185
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
12186
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
12187
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11388
12188
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11389
12189
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
11390
12190
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -11395,11 +12195,11 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject5$C || (_templateObject5$C
|
|
|
11395
12195
|
hasTwoArrows = _ref5.hasTwoArrows;
|
|
11396
12196
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
11397
12197
|
});
|
|
11398
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject8$
|
|
12198
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
|
|
11399
12199
|
var withShadow = _ref7.withShadow;
|
|
11400
|
-
return withShadow && css(_templateObject9$
|
|
12200
|
+
return withShadow && css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11401
12201
|
});
|
|
11402
|
-
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$
|
|
12202
|
+
var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pointer-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
11403
12203
|
var disabled = _ref8.disabled;
|
|
11404
12204
|
return disabled ? 'not-allowed' : 'pointer';
|
|
11405
12205
|
}, function (_ref9) {
|
|
@@ -11445,7 +12245,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
11445
12245
|
onTabClick(e, id);
|
|
11446
12246
|
}
|
|
11447
12247
|
setSelectedItem(id);
|
|
11448
|
-
var clickedTab = document.getElementById("tablink-" +
|
|
12248
|
+
var clickedTab = document.getElementById("tablink-" + id);
|
|
11449
12249
|
if (clickedTab) {
|
|
11450
12250
|
clickedTab.focus();
|
|
11451
12251
|
}
|
|
@@ -11654,20 +12454,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
11654
12454
|
})))) : null))));
|
|
11655
12455
|
};
|
|
11656
12456
|
|
|
11657
|
-
var _templateObject$
|
|
11658
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12457
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
|
|
12458
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
11659
12459
|
var sticky = _ref.sticky;
|
|
11660
12460
|
return sticky ? 'sticky' : 'initial';
|
|
11661
12461
|
}, zIndexes.anchor);
|
|
11662
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
11663
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
12462
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
12463
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
11664
12464
|
var title = _ref2.title;
|
|
11665
12465
|
return title ? 'row' : 'row-reverse';
|
|
11666
12466
|
}, devices.tablet, devices.mobile);
|
|
11667
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$
|
|
11668
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
11669
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
11670
|
-
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$
|
|
12467
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
12468
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
12469
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
12470
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11671
12471
|
var theme = _ref3.theme;
|
|
11672
12472
|
return theme.colors.primaryButtonReverseBg;
|
|
11673
12473
|
}, function (_ref4) {
|
|
@@ -11680,8 +12480,8 @@ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$f
|
|
|
11680
12480
|
var theme = _ref6.theme;
|
|
11681
12481
|
return theme.colors.primaryButtonReverse;
|
|
11682
12482
|
});
|
|
11683
|
-
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$
|
|
11684
|
-
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject0$
|
|
12483
|
+
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12484
|
+
var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
11685
12485
|
|
|
11686
12486
|
var _excluded$s = ["text"],
|
|
11687
12487
|
_excluded2$4 = ["text"];
|
|
@@ -11714,18 +12514,18 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
11714
12514
|
}, message))));
|
|
11715
12515
|
};
|
|
11716
12516
|
|
|
11717
|
-
var _templateObject$
|
|
11718
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
11719
|
-
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$
|
|
11720
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
11721
|
-
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$
|
|
12517
|
+
var _templateObject$1r, _templateObject2$17, _templateObject3$U, _templateObject4$M;
|
|
12518
|
+
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
|
|
12519
|
+
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
|
|
12520
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
12521
|
+
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11722
12522
|
|
|
11723
|
-
var _templateObject$
|
|
11724
|
-
var Wrapper$
|
|
12523
|
+
var _templateObject$1s;
|
|
12524
|
+
var Wrapper$a = /*#__PURE__*/styled.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
|
|
11725
12525
|
|
|
11726
12526
|
var UpsellCards = function UpsellCards(_ref) {
|
|
11727
12527
|
var upsellCards = _ref.upsellCards;
|
|
11728
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
12528
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$a, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
|
|
11729
12529
|
return /*#__PURE__*/React__default.createElement(UpsellCard, {
|
|
11730
12530
|
key: "card-" + index,
|
|
11731
12531
|
title: card.title,
|
|
@@ -11750,13 +12550,15 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
11750
12550
|
upsellCards = _ref.upsellCards,
|
|
11751
12551
|
_ref$theme = _ref.theme,
|
|
11752
12552
|
theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme,
|
|
11753
|
-
className = _ref.className
|
|
12553
|
+
className = _ref.className,
|
|
12554
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
11754
12555
|
var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
|
|
11755
12556
|
return _extends({}, card, {
|
|
11756
12557
|
theme: card.theme || theme,
|
|
11757
12558
|
secondaryTheme: card.secondaryTheme || card.theme || theme
|
|
11758
12559
|
});
|
|
11759
12560
|
}) : [];
|
|
12561
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
11760
12562
|
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
11761
12563
|
theme: theme
|
|
11762
12564
|
}, /*#__PURE__*/React__default.createElement(Grid, {
|
|
@@ -11769,7 +12571,7 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
11769
12571
|
columnStartSmallDevice: 1,
|
|
11770
12572
|
columnSpanSmallDevice: 14
|
|
11771
12573
|
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
|
|
11772
|
-
serif:
|
|
12574
|
+
serif: isVictorTitleFont
|
|
11773
12575
|
}, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
|
|
11774
12576
|
text: richText != null ? richText : '',
|
|
11775
12577
|
columnStartDesktop: 1,
|
|
@@ -11783,9 +12585,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
11783
12585
|
})))));
|
|
11784
12586
|
};
|
|
11785
12587
|
|
|
11786
|
-
var _templateObject$
|
|
11787
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
11788
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
12588
|
+
var _templateObject$1t, _templateObject2$18;
|
|
12589
|
+
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
12590
|
+
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
11789
12591
|
var bottomBorder = _ref.bottomBorder;
|
|
11790
12592
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
11791
12593
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -11816,11 +12618,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
11816
12618
|
}, children)));
|
|
11817
12619
|
};
|
|
11818
12620
|
|
|
11819
|
-
var _templateObject$
|
|
11820
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
11821
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
11822
|
-
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
11823
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
12621
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N;
|
|
12622
|
+
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
12623
|
+
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
12624
|
+
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
12625
|
+
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
11824
12626
|
|
|
11825
12627
|
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
11826
12628
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -12024,29 +12826,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12024
12826
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12025
12827
|
};
|
|
12026
12828
|
|
|
12027
|
-
var _templateObject$
|
|
12028
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12829
|
+
var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
|
|
12830
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
12029
12831
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12030
12832
|
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 }";
|
|
12031
12833
|
}, devices.mobile, function (_ref2) {
|
|
12032
12834
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12033
12835
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12034
12836
|
});
|
|
12035
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12837
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12036
12838
|
var type = _ref3.type,
|
|
12037
12839
|
isActive = _ref3.isActive;
|
|
12038
12840
|
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 ";
|
|
12039
12841
|
});
|
|
12040
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
12041
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12042
|
-
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
12842
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
12843
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12844
|
+
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12043
12845
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12044
12846
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12045
12847
|
});
|
|
12046
|
-
var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$
|
|
12047
|
-
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12048
|
-
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$
|
|
12049
|
-
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$
|
|
12848
|
+
var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
|
|
12849
|
+
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
12850
|
+
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12851
|
+
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12050
12852
|
var active = _ref5.active;
|
|
12051
12853
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
12052
12854
|
}, devices.tablet, function (_ref6) {
|
|
@@ -12076,7 +12878,8 @@ var Carousel = function Carousel(_ref) {
|
|
|
12076
12878
|
_ref$infinite = _ref.infinite,
|
|
12077
12879
|
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
12078
12880
|
_ref$useOffset = _ref.useOffset,
|
|
12079
|
-
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset
|
|
12881
|
+
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset,
|
|
12882
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
12080
12883
|
var _useState = useState(false),
|
|
12081
12884
|
isFullscreen = _useState[0],
|
|
12082
12885
|
setIsFullscreen = _useState[1];
|
|
@@ -12226,6 +13029,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12226
13029
|
var carouselTitleId = "carousel-title-" + title;
|
|
12227
13030
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
12228
13031
|
var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
13032
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12229
13033
|
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
12230
13034
|
className: className,
|
|
12231
13035
|
type: type,
|
|
@@ -12249,7 +13053,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12249
13053
|
isDescriptionPresent: !!description
|
|
12250
13054
|
}, /*#__PURE__*/React__default.createElement(TitleText$1, {
|
|
12251
13055
|
size: "medium",
|
|
12252
|
-
serif:
|
|
13056
|
+
serif: isVictorTitleFont,
|
|
12253
13057
|
hierarchy: titleSemanticLevelValue
|
|
12254
13058
|
}, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12255
13059
|
size: "large"
|
|
@@ -12289,18 +13093,18 @@ var Carousel = function Carousel(_ref) {
|
|
|
12289
13093
|
}, children))));
|
|
12290
13094
|
};
|
|
12291
13095
|
|
|
12292
|
-
var _templateObject$
|
|
12293
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
12294
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12295
|
-
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
12296
|
-
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
12297
|
-
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
12298
|
-
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
12299
|
-
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
12300
|
-
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
12301
|
-
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
12302
|
-
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled.div(_templateObject0$
|
|
12303
|
-
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$
|
|
13096
|
+
var _templateObject$1w, _templateObject2$1b, _templateObject3$X, _templateObject4$P, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$d, _templateObject0$b, _templateObject1$7, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
13097
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
13098
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13099
|
+
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
13100
|
+
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$P || (_templateObject4$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13101
|
+
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13102
|
+
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
13103
|
+
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$p || (_templateObject7$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
13104
|
+
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$i || (_templateObject8$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
13105
|
+
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$d || (_templateObject9$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13106
|
+
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled.div(_templateObject0$b || (_templateObject0$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
13107
|
+
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$7 || (_templateObject1$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12304
13108
|
var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
12305
13109
|
var FirstButtonComponentWrapper = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
12306
13110
|
var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -12439,7 +13243,7 @@ var VideoSlide = function VideoSlide(_ref) {
|
|
|
12439
13243
|
});
|
|
12440
13244
|
return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
|
|
12441
13245
|
isCurrentSlide: isCurrentSlide
|
|
12442
|
-
}, /*#__PURE__*/React__default.createElement(VideoWithControls$
|
|
13246
|
+
}, /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
|
|
12443
13247
|
video: video,
|
|
12444
13248
|
settings: settings
|
|
12445
13249
|
}));
|
|
@@ -12470,7 +13274,10 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
|
|
|
12470
13274
|
isCurrentSlide: index === currentSlide
|
|
12471
13275
|
})) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
|
|
12472
13276
|
alt: mediaContent.alt
|
|
12473
|
-
}, mediaContent
|
|
13277
|
+
}, mediaContent, {
|
|
13278
|
+
fetchPriority: index === currentSlide ? 'high' : 'auto',
|
|
13279
|
+
loading: index === currentSlide ? 'eager' : 'lazy'
|
|
13280
|
+
})))));
|
|
12474
13281
|
}));
|
|
12475
13282
|
};
|
|
12476
13283
|
|
|
@@ -12479,7 +13286,8 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12479
13286
|
carouselTitle = _ref.carouselTitle,
|
|
12480
13287
|
slides = _ref.slides,
|
|
12481
13288
|
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
12482
|
-
className = _ref.className
|
|
13289
|
+
className = _ref.className,
|
|
13290
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
12483
13291
|
var slidesMedia = useMemo(function () {
|
|
12484
13292
|
return slides.map(function (_ref2) {
|
|
12485
13293
|
var mediaContent = _ref2.mediaContent;
|
|
@@ -12510,6 +13318,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12510
13318
|
var handleClickInside = function handleClickInside(e) {
|
|
12511
13319
|
e.stopPropagation();
|
|
12512
13320
|
};
|
|
13321
|
+
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12513
13322
|
return /*#__PURE__*/React__default.createElement(HighlightsGrid$1, {
|
|
12514
13323
|
role: "region",
|
|
12515
13324
|
"aria-labelledby": carouselTitleId,
|
|
@@ -12522,7 +13331,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12522
13331
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
12523
13332
|
className: TYPOGRAPHY_CLASS_NAME,
|
|
12524
13333
|
size: "medium",
|
|
12525
|
-
serif:
|
|
13334
|
+
serif: isVictorTitleFont,
|
|
12526
13335
|
hierarchy: titleSemanticLevelValue
|
|
12527
13336
|
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12528
13337
|
onClickNext: onNext,
|
|
@@ -12614,9 +13423,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
12614
13423
|
})));
|
|
12615
13424
|
};
|
|
12616
13425
|
|
|
12617
|
-
var _templateObject$
|
|
12618
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
12619
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
13426
|
+
var _templateObject$1x, _templateObject3$Y;
|
|
13427
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
13428
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
12620
13429
|
|
|
12621
13430
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
12622
13431
|
var children = _ref.children;
|
|
@@ -13211,8 +14020,8 @@ var Theme = function Theme(_ref) {
|
|
|
13211
14020
|
}, children);
|
|
13212
14021
|
};
|
|
13213
14022
|
|
|
13214
|
-
var _templateObject$
|
|
13215
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
14023
|
+
var _templateObject$1y;
|
|
14024
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13216
14025
|
var theme = _ref.theme;
|
|
13217
14026
|
return theme.colors.primary;
|
|
13218
14027
|
}, function (_ref2) {
|
|
@@ -14159,10 +14968,10 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1u || (_templa
|
|
|
14159
14968
|
return theme.footer.tablet.paddingBottom;
|
|
14160
14969
|
}, devices.desktop, devices.largeDesktop);
|
|
14161
14970
|
|
|
14162
|
-
var _templateObject$
|
|
14163
|
-
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$
|
|
14164
|
-
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$
|
|
14165
|
-
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$
|
|
14971
|
+
var _templateObject$1z, _templateObject2$1c, _templateObject3$Z;
|
|
14972
|
+
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$1z || (_templateObject$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14973
|
+
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$1c || (_templateObject2$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14974
|
+
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
14166
14975
|
|
|
14167
14976
|
/* eslint-disable react/no-danger */
|
|
14168
14977
|
var Quote = function Quote(_ref) {
|
|
@@ -14192,5 +15001,5 @@ var Quote = function Quote(_ref) {
|
|
|
14192
15001
|
}, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
|
|
14193
15002
|
};
|
|
14194
15003
|
|
|
14195
|
-
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio2, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$
|
|
15004
|
+
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$2 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
|
|
14196
15005
|
//# sourceMappingURL=harmonic.esm.js.map
|