@royaloperahouse/harmonic 0.6.0 → 0.6.1-b
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/README.md +252 -43
- package/dist/components/atoms/ControlledDropdown/ControlledDropdown.d.ts +2 -2
- package/dist/components/atoms/ControlledDropdown/ControlledDropdown.style.d.ts +2 -2
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/Search/Search.d.ts +1 -1
- package/dist/components/atoms/Search/Search.style.d.ts +1 -1
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/HotFilters/HotFilters.d.ts +4 -0
- package/dist/components/molecules/HotFilters/HotFilters.style.d.ts +3 -0
- package/dist/components/molecules/HotFilters/index.d.ts +2 -0
- package/dist/components/molecules/NavTop/NavTop.d.ts +1 -1
- package/dist/components/molecules/SearchBar/SearchBar.d.ts +1 -1
- package/dist/components/molecules/SearchBar/SearchBar.style.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/components/organisms/Navigation/Navigation.style.d.ts +1 -1
- package/dist/harmonic.cjs.development.css +319 -0
- package/dist/harmonic.cjs.development.js +341 -212
- 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 +353 -222
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/helpers/accessibility.d.ts +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +1 -0
- package/dist/types/navigation.d.ts +12 -0
- package/dist/types/types.d.ts +22 -1
- package/package.json +1 -1
- package/README.GIT +0 -278
package/dist/harmonic.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { createElement, memo, useCallback, useRef,
|
|
1
|
+
import React__default, { createElement, memo, useCallback, useRef, useImperativeHandle, useMemo, useEffect, useState, forwardRef, cloneElement, useLayoutEffect } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import Modal from 'react-modal';
|
|
@@ -394,7 +394,7 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
|
394
394
|
size = _ref2.size,
|
|
395
395
|
em = _ref2.em,
|
|
396
396
|
_ref2$color = _ref2.color,
|
|
397
|
-
color = _ref2$color === void 0 ? '
|
|
397
|
+
color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
|
|
398
398
|
serif = _ref2.serif,
|
|
399
399
|
Tag = _ref2.hierarchy,
|
|
400
400
|
className = _ref2.className;
|
|
@@ -414,7 +414,7 @@ var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
|
|
|
414
414
|
var children = _ref3.children,
|
|
415
415
|
size = _ref3.size,
|
|
416
416
|
_ref3$color = _ref3.color,
|
|
417
|
-
color = _ref3$color === void 0 ? '
|
|
417
|
+
color = _ref3$color === void 0 ? 'inherit' : _ref3$color,
|
|
418
418
|
className = _ref3.className;
|
|
419
419
|
var classNames = createClassNames('subtitle', {
|
|
420
420
|
size: size,
|
|
@@ -431,7 +431,7 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
|
|
|
431
431
|
_ref4$size = _ref4.size,
|
|
432
432
|
size = _ref4$size === void 0 ? 'medium' : _ref4$size,
|
|
433
433
|
_ref4$color = _ref4.color,
|
|
434
|
-
color = _ref4$color === void 0 ? '
|
|
434
|
+
color = _ref4$color === void 0 ? 'inherit' : _ref4$color,
|
|
435
435
|
className = _ref4.className,
|
|
436
436
|
props = _objectWithoutPropertiesLoose(_ref4, _excluded);
|
|
437
437
|
var classNames = createClassNames('bodycopy', {
|
|
@@ -448,7 +448,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
|
|
|
448
448
|
var children = _ref5.children,
|
|
449
449
|
size = _ref5.size,
|
|
450
450
|
_ref5$color = _ref5.color,
|
|
451
|
-
color = _ref5$color === void 0 ? '
|
|
451
|
+
color = _ref5$color === void 0 ? 'inherit' : _ref5$color,
|
|
452
452
|
className = _ref5.className,
|
|
453
453
|
props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
|
|
454
454
|
var classNames = createClassNames('overline', {
|
|
@@ -464,7 +464,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
|
|
|
464
464
|
var ButtonText = function ButtonText(_ref6) {
|
|
465
465
|
var children = _ref6.children,
|
|
466
466
|
_ref6$color = _ref6.color,
|
|
467
|
-
color = _ref6$color === void 0 ? '
|
|
467
|
+
color = _ref6$color === void 0 ? 'inherit' : _ref6$color,
|
|
468
468
|
className = _ref6.className;
|
|
469
469
|
var classNames = createClassNames('buttontext', {
|
|
470
470
|
color: color,
|
|
@@ -477,7 +477,7 @@ var ButtonText = function ButtonText(_ref6) {
|
|
|
477
477
|
var Caption = function Caption(_ref7) {
|
|
478
478
|
var children = _ref7.children,
|
|
479
479
|
_ref7$color = _ref7.color,
|
|
480
|
-
color = _ref7$color === void 0 ? '
|
|
480
|
+
color = _ref7$color === void 0 ? 'inherit' : _ref7$color,
|
|
481
481
|
className = _ref7.className;
|
|
482
482
|
var classNames = createClassNames('captiontext', {
|
|
483
483
|
color: color,
|
|
@@ -490,7 +490,7 @@ var Caption = function Caption(_ref7) {
|
|
|
490
490
|
var NavigationText = function NavigationText(_ref8) {
|
|
491
491
|
var children = _ref8.children,
|
|
492
492
|
_ref8$color = _ref8.color,
|
|
493
|
-
color = _ref8$color === void 0 ? '
|
|
493
|
+
color = _ref8$color === void 0 ? 'inherit' : _ref8$color,
|
|
494
494
|
className = _ref8.className;
|
|
495
495
|
var classNames = createClassNames('navigationtext', {
|
|
496
496
|
color: color,
|
|
@@ -2962,7 +2962,7 @@ var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3 || (_templateObj
|
|
|
2962
2962
|
|
|
2963
2963
|
var _templateObject$7, _templateObject2$5, _templateObject3$1, _templateObject4;
|
|
2964
2964
|
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
2965
|
-
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.
|
|
2965
|
+
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.button(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n display: flex;\n gap: 6px;\n border-bottom: 1px solid transparent;\n height: 24px;\n line-height: 24px;\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 color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n width: max-content;\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n\n ", "\n"])), function (_ref) {
|
|
2966
2966
|
var active = _ref.active;
|
|
2967
2967
|
if (active) {
|
|
2968
2968
|
return "\n & {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n } \n ";
|
|
@@ -2970,12 +2970,12 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject
|
|
|
2970
2970
|
return '';
|
|
2971
2971
|
});
|
|
2972
2972
|
var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled(ControlledDropdownHeaderContainer).attrs({
|
|
2973
|
-
as: '
|
|
2973
|
+
as: 'button'
|
|
2974
2974
|
})(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
2975
2975
|
var IconWrapper = /*#__PURE__*/styled.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n\n span > svg path {\n fill: var(--color-primary-black);\n }\n"])));
|
|
2976
2976
|
|
|
2977
2977
|
/* eslint-disable no-useless-return */
|
|
2978
|
-
var ControlledDropdown = function
|
|
2978
|
+
var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
2979
2979
|
var text = _ref.text,
|
|
2980
2980
|
options = _ref.options,
|
|
2981
2981
|
active = _ref.active,
|
|
@@ -2983,32 +2983,22 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
2983
2983
|
onOptionClick = _ref.onOptionClick,
|
|
2984
2984
|
_onMouseEnter = _ref.onMouseEnter,
|
|
2985
2985
|
_onMouseLeave = _ref.onMouseLeave,
|
|
2986
|
+
_onFocusLeave = _ref.onFocusLeave,
|
|
2986
2987
|
onReset = _ref.onReset,
|
|
2987
2988
|
_onFocus = _ref.onFocus,
|
|
2988
2989
|
_onBlur = _ref.onBlur,
|
|
2989
2990
|
className = _ref.className;
|
|
2990
|
-
|
|
2991
|
-
var
|
|
2991
|
+
ControlledDropdown.displayName = 'ControlledDropdown';
|
|
2992
|
+
var internalRef = useRef(null);
|
|
2993
|
+
useImperativeHandle(ref, function () {
|
|
2994
|
+
return internalRef.current;
|
|
2995
|
+
});
|
|
2996
|
+
var resetHandler = function resetHandler() {
|
|
2992
2997
|
return onReset == null ? void 0 : onReset();
|
|
2993
|
-
}
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
var _ref$current;
|
|
2998
|
-
if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
|
|
2999
|
-
return;
|
|
3000
|
-
} else if (active) {
|
|
3001
|
-
resetHandler();
|
|
3002
|
-
}
|
|
3003
|
-
};
|
|
3004
|
-
document.addEventListener('click', mouseClickHandler);
|
|
3005
|
-
return function () {
|
|
3006
|
-
document.removeEventListener('click', mouseClickHandler);
|
|
3007
|
-
};
|
|
3008
|
-
}
|
|
3009
|
-
// eslint-disable-next-line consistent-return
|
|
3010
|
-
return;
|
|
3011
|
-
}, [ref, resetHandler, active]);
|
|
2998
|
+
};
|
|
2999
|
+
var isDropdown = useMemo(function () {
|
|
3000
|
+
return !!(options != null && options.length);
|
|
3001
|
+
}, [options]);
|
|
3012
3002
|
var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
|
|
3013
3003
|
if (e.key === 'Enter') {
|
|
3014
3004
|
onOptionClick == null || onOptionClick(link);
|
|
@@ -3028,13 +3018,15 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
3028
3018
|
_onBlur == null || _onBlur();
|
|
3029
3019
|
}
|
|
3030
3020
|
};
|
|
3031
|
-
var isDropdown = !!(options != null && options.length);
|
|
3032
3021
|
var wrapperEvents = {
|
|
3033
3022
|
onMouseEnter: function onMouseEnter() {
|
|
3034
3023
|
return _onMouseEnter == null ? void 0 : _onMouseEnter();
|
|
3035
3024
|
},
|
|
3036
3025
|
onMouseLeave: function onMouseLeave() {
|
|
3037
3026
|
return _onMouseLeave == null ? void 0 : _onMouseLeave();
|
|
3027
|
+
},
|
|
3028
|
+
onFocusLeave: function onFocusLeave() {
|
|
3029
|
+
return _onFocusLeave == null ? void 0 : _onFocusLeave();
|
|
3038
3030
|
}
|
|
3039
3031
|
};
|
|
3040
3032
|
var headerEvents = {
|
|
@@ -3050,21 +3042,51 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
3050
3042
|
},
|
|
3051
3043
|
onKeyDown: handleHeaderKeyDown
|
|
3052
3044
|
};
|
|
3045
|
+
useEffect(function () {
|
|
3046
|
+
var mouseEvent = function mouseEvent(e) {
|
|
3047
|
+
var _internalRef$current;
|
|
3048
|
+
if (internalRef != null && (_internalRef$current = internalRef.current) != null && _internalRef$current.contains(e.target)) return;
|
|
3049
|
+
if (active) resetHandler();
|
|
3050
|
+
};
|
|
3051
|
+
if (window.innerWidth > breakpoints.sm) {
|
|
3052
|
+
document.addEventListener('click', mouseEvent);
|
|
3053
|
+
}
|
|
3054
|
+
return function () {
|
|
3055
|
+
document.removeEventListener('click', mouseEvent);
|
|
3056
|
+
};
|
|
3057
|
+
}, [resetHandler, active]);
|
|
3058
|
+
useEffect(function () {
|
|
3059
|
+
var handleFocusOut = function handleFocusOut(e) {
|
|
3060
|
+
if (internalRef.current && !internalRef.current.contains(e.relatedTarget)) {
|
|
3061
|
+
_onFocusLeave == null || _onFocusLeave();
|
|
3062
|
+
}
|
|
3063
|
+
};
|
|
3064
|
+
var node = internalRef.current;
|
|
3065
|
+
if (node) node.addEventListener('focusout', handleFocusOut);
|
|
3066
|
+
return function () {
|
|
3067
|
+
return node == null ? void 0 : node.removeEventListener('focusout', handleFocusOut);
|
|
3068
|
+
};
|
|
3069
|
+
}, [_onFocusLeave]);
|
|
3053
3070
|
return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
|
|
3054
|
-
ref:
|
|
3071
|
+
ref: internalRef
|
|
3055
3072
|
}, wrapperEvents, {
|
|
3056
3073
|
className: className
|
|
3057
3074
|
}), isDropdown ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
|
|
3058
3075
|
active: active
|
|
3059
3076
|
}, headerEvents, {
|
|
3060
|
-
|
|
3061
|
-
|
|
3077
|
+
"data-testid": "span-container",
|
|
3078
|
+
role: "menuitem",
|
|
3079
|
+
"aria-controls": "dropdown-menu",
|
|
3080
|
+
"aria-haspopup": "menu",
|
|
3081
|
+
"aria-expanded": active
|
|
3062
3082
|
}), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
3063
3083
|
"data-testid": "dropdown-icon"
|
|
3064
3084
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
3065
3085
|
iconName: "DropdownArrow"
|
|
3066
3086
|
}))), active && options ? (/*#__PURE__*/React__default.createElement(OptionsContainer, {
|
|
3067
|
-
withOptionsInMobile: true
|
|
3087
|
+
withOptionsInMobile: true,
|
|
3088
|
+
role: "menu",
|
|
3089
|
+
id: "dropdown-menu"
|
|
3068
3090
|
}, options.map(function (optionItem, index) {
|
|
3069
3091
|
return /*#__PURE__*/React__default.createElement(OptionItem, {
|
|
3070
3092
|
key: "key-" + index + "-" + optionItem.option,
|
|
@@ -3078,15 +3100,18 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
3078
3100
|
onBlur: function onBlur() {
|
|
3079
3101
|
return handleOptionBlur(index);
|
|
3080
3102
|
},
|
|
3081
|
-
href: optionItem.optionLink
|
|
3103
|
+
href: optionItem.optionLink,
|
|
3104
|
+
role: "menuitem"
|
|
3082
3105
|
}, optionItem.option);
|
|
3083
3106
|
}))) : null)) : (/*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
|
|
3084
3107
|
active: active
|
|
3085
3108
|
}, headerEvents, {
|
|
3086
3109
|
"data-testid": "link-container",
|
|
3110
|
+
"aria-label": text,
|
|
3111
|
+
role: "menuitem",
|
|
3087
3112
|
tabIndex: 0
|
|
3088
3113
|
}), text)));
|
|
3089
|
-
};
|
|
3114
|
+
});
|
|
3090
3115
|
|
|
3091
3116
|
var _templateObject$8;
|
|
3092
3117
|
var Grid = /*#__PURE__*/styled.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
|
|
@@ -3771,6 +3796,7 @@ var Tab = function Tab(_ref) {
|
|
|
3771
3796
|
className = _ref.className,
|
|
3772
3797
|
role = _ref.role,
|
|
3773
3798
|
ariaLabel = _ref.ariaLabel,
|
|
3799
|
+
tabLinkId = _ref.tabLinkId,
|
|
3774
3800
|
color = _ref.color;
|
|
3775
3801
|
var clickHandler = function clickHandler() {
|
|
3776
3802
|
if (onClick) {
|
|
@@ -3801,8 +3827,9 @@ var Tab = function Tab(_ref) {
|
|
|
3801
3827
|
tabIndex: 0,
|
|
3802
3828
|
className: className
|
|
3803
3829
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
3804
|
-
|
|
3830
|
+
id: tabLinkId,
|
|
3805
3831
|
trimText: trimText,
|
|
3832
|
+
color: color,
|
|
3806
3833
|
withTextInMobile: withTextInMobile,
|
|
3807
3834
|
"aria-hidden": "true"
|
|
3808
3835
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -5137,7 +5164,7 @@ var MobileMenuContainer = /*#__PURE__*/styled(Grid)(_templateObject7$3 || (_temp
|
|
|
5137
5164
|
return showSearch ? '110px' : '12px';
|
|
5138
5165
|
});
|
|
5139
5166
|
var LogoContainer = /*#__PURE__*/styled.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &&& .logoImg {\n height: 96px;\n width: 80px;\n }\n\n span > svg path,\n span > svg g path {\n fill: var(--color-primary-black);\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
5140
|
-
var LogoContainerMobile = /*#__PURE__*/styled.
|
|
5167
|
+
var LogoContainerMobile = /*#__PURE__*/styled.a(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n\n span > svg path {\n fill: var(--color-primary-black);\n }\n }\n"])), devices.mobileAndTablet);
|
|
5141
5168
|
var MenuContainer = /*#__PURE__*/styled.div(_templateObject0$1 || (_templateObject0$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n\n @media ", " {\n flex-direction: row;\n justify-content: space-between;\n height: 60px;\n width 100%;\n }\n"])), devices.mobileAndTablet);
|
|
5142
5169
|
var NavWrapper = /*#__PURE__*/styled.div(_templateObject1 || (_templateObject1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 32px;\n\n @media ", " {\n flex-direction: row;\n height: 60px;\n justify-content: flex-end;\n }\n"])), devices.mobileAndTablet);
|
|
5143
5170
|
var NavContainer = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n flex-gap: 32px;\n width: fit-content;\n\n @media ", " {\n flex-gap: 0;\n height: auto;\n width: fit-content;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobileAndTablet);
|
|
@@ -5311,7 +5338,7 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5311
5338
|
};
|
|
5312
5339
|
|
|
5313
5340
|
var _templateObject$A, _templateObject2$q;
|
|
5314
|
-
var SearchContainer = /*#__PURE__*/styled.
|
|
5341
|
+
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) {
|
|
5315
5342
|
var selected = _ref.selected;
|
|
5316
5343
|
if (selected) {
|
|
5317
5344
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
@@ -5320,31 +5347,26 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObj
|
|
|
5320
5347
|
});
|
|
5321
5348
|
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"])));
|
|
5322
5349
|
|
|
5323
|
-
var Search$1 = function
|
|
5350
|
+
var Search$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
5324
5351
|
var _ref$selected = _ref.selected,
|
|
5325
5352
|
selected = _ref$selected === void 0 ? false : _ref$selected,
|
|
5326
5353
|
onClick = _ref.onClick,
|
|
5327
5354
|
className = _ref.className;
|
|
5328
|
-
|
|
5329
|
-
if (e.key === 'Enter') {
|
|
5330
|
-
onClick == null || onClick();
|
|
5331
|
-
}
|
|
5332
|
-
};
|
|
5355
|
+
Search$1.displayName = 'Search';
|
|
5333
5356
|
return /*#__PURE__*/React__default.createElement(SearchContainer, {
|
|
5334
|
-
role: "button",
|
|
5335
5357
|
"aria-label": "Search",
|
|
5336
5358
|
selected: selected,
|
|
5337
5359
|
onClick: onClick,
|
|
5338
|
-
onKeyDown: onKeyDownHandler,
|
|
5339
5360
|
"data-testid": "search-icon",
|
|
5340
5361
|
tabIndex: 0,
|
|
5341
|
-
className: className
|
|
5362
|
+
className: className,
|
|
5363
|
+
ref: ref
|
|
5342
5364
|
}, /*#__PURE__*/React__default.createElement(SvgContainer$1, {
|
|
5343
5365
|
"aria-hidden": "true"
|
|
5344
5366
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5345
5367
|
iconName: "Search"
|
|
5346
5368
|
})));
|
|
5347
|
-
};
|
|
5369
|
+
});
|
|
5348
5370
|
|
|
5349
5371
|
/* eslint-disable react/jsx-no-useless-fragment */
|
|
5350
5372
|
var Dropdown = function Dropdown(_ref) {
|
|
@@ -5366,6 +5388,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5366
5388
|
className = _ref.className,
|
|
5367
5389
|
role = _ref.role,
|
|
5368
5390
|
ariaLabel = _ref.ariaLabel,
|
|
5391
|
+
tabLinkId = _ref.tabLinkId,
|
|
5369
5392
|
trimTabText = _ref.trimTabText;
|
|
5370
5393
|
var node = useRef();
|
|
5371
5394
|
var _useState = useState(false),
|
|
@@ -5462,6 +5485,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5462
5485
|
};
|
|
5463
5486
|
var renderTab = function renderTab() {
|
|
5464
5487
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
5488
|
+
tabLinkId: tabLinkId,
|
|
5465
5489
|
trimText: trimTabText,
|
|
5466
5490
|
title: title,
|
|
5467
5491
|
titleLink: titleLink,
|
|
@@ -5541,7 +5565,8 @@ var Account = function Account(_ref) {
|
|
|
5541
5565
|
iconName: iconName,
|
|
5542
5566
|
withOptionsInMobile: false,
|
|
5543
5567
|
withIcon: "left",
|
|
5544
|
-
className: className
|
|
5568
|
+
className: className,
|
|
5569
|
+
tabLinkId: "account-link"
|
|
5545
5570
|
});
|
|
5546
5571
|
};
|
|
5547
5572
|
|
|
@@ -5559,12 +5584,14 @@ var NavTop = function NavTop(_ref) {
|
|
|
5559
5584
|
onClickSearch = _ref.onClickSearch,
|
|
5560
5585
|
_ref$isShowSearch = _ref.isShowSearch,
|
|
5561
5586
|
isShowSearch = _ref$isShowSearch === void 0 ? false : _ref$isShowSearch,
|
|
5562
|
-
className = _ref.className
|
|
5587
|
+
className = _ref.className,
|
|
5588
|
+
searchButtonRef = _ref.searchButtonRef;
|
|
5563
5589
|
return /*#__PURE__*/React__default.createElement(NavTopContainer$1, {
|
|
5564
5590
|
className: className
|
|
5565
5591
|
}, /*#__PURE__*/React__default.createElement(Search$1, {
|
|
5566
5592
|
onClick: onClickSearch,
|
|
5567
|
-
selected: isShowSearch
|
|
5593
|
+
selected: isShowSearch,
|
|
5594
|
+
ref: searchButtonRef
|
|
5568
5595
|
}), /*#__PURE__*/React__default.createElement(Basket$1, {
|
|
5569
5596
|
link: basketLink,
|
|
5570
5597
|
text: basketText,
|
|
@@ -5610,6 +5637,7 @@ var Tabs = function Tabs(_ref) {
|
|
|
5610
5637
|
var _useState3 = useState(-1),
|
|
5611
5638
|
hoverOverDropdown = _useState3[0],
|
|
5612
5639
|
setHoverOverDropdown = _useState3[1];
|
|
5640
|
+
var dropdownRefs = useRef([]);
|
|
5613
5641
|
var onClickHandler = function onClickHandler(value) {
|
|
5614
5642
|
setOpenMenu(value);
|
|
5615
5643
|
if (onShowMenu) {
|
|
@@ -5649,23 +5677,25 @@ var Tabs = function Tabs(_ref) {
|
|
|
5649
5677
|
setHoverOverDropdown(-1);
|
|
5650
5678
|
}
|
|
5651
5679
|
};
|
|
5652
|
-
var
|
|
5653
|
-
|
|
5680
|
+
var onDropdownFocusLeave = function onDropdownFocusLeave() {
|
|
5681
|
+
onResetActive();
|
|
5654
5682
|
};
|
|
5655
|
-
var
|
|
5656
|
-
var
|
|
5657
|
-
|
|
5683
|
+
var handleBlur = function handleBlur(index) {
|
|
5684
|
+
var currentDropdown = dropdownRefs.current[index];
|
|
5685
|
+
var active = document.activeElement;
|
|
5686
|
+
if (currentDropdown && (!active || !currentDropdown.contains(active))) {
|
|
5658
5687
|
onResetActive();
|
|
5659
5688
|
}
|
|
5660
5689
|
};
|
|
5661
5690
|
return /*#__PURE__*/React__default.createElement(TabsContainer, {
|
|
5691
|
+
role: "menubar",
|
|
5662
5692
|
className: className
|
|
5663
5693
|
}, /*#__PURE__*/React__default.createElement(ItemsContainer, {
|
|
5664
5694
|
showMenu: showMenu
|
|
5665
5695
|
}, items.map(function (item, index) {
|
|
5666
5696
|
return /*#__PURE__*/React__default.createElement(ControlledDropdown, {
|
|
5667
5697
|
key: "key-" + item.title,
|
|
5668
|
-
text: item.title,
|
|
5698
|
+
text: item.title || '',
|
|
5669
5699
|
options: item.options,
|
|
5670
5700
|
onClick: function onClick() {
|
|
5671
5701
|
return onDropdownClick(index, item.titleLink);
|
|
@@ -5677,17 +5707,23 @@ var Tabs = function Tabs(_ref) {
|
|
|
5677
5707
|
onMouseLeave: function onMouseLeave() {
|
|
5678
5708
|
return onDropdownMouseLeave();
|
|
5679
5709
|
},
|
|
5680
|
-
|
|
5681
|
-
return
|
|
5710
|
+
onFocusLeave: function onFocusLeave() {
|
|
5711
|
+
return onDropdownFocusLeave();
|
|
5682
5712
|
},
|
|
5683
5713
|
onBlur: function onBlur() {
|
|
5684
|
-
return
|
|
5714
|
+
return handleBlur(index);
|
|
5685
5715
|
},
|
|
5686
5716
|
onReset: onResetActive,
|
|
5687
|
-
active: isActiveDropdown(index)
|
|
5717
|
+
active: isActiveDropdown(index),
|
|
5718
|
+
ref: function ref(el) {
|
|
5719
|
+
dropdownRefs.current[index] = el;
|
|
5720
|
+
}
|
|
5688
5721
|
});
|
|
5689
5722
|
})), !showMenu && (/*#__PURE__*/React__default.createElement(MenuContainer$1, null, openMenu ? (/*#__PURE__*/React__default.createElement("a", {
|
|
5690
5723
|
"data-testid": "mobile-menu-close",
|
|
5724
|
+
role: "button",
|
|
5725
|
+
"aria-label": "Close menu",
|
|
5726
|
+
tabIndex: 0,
|
|
5691
5727
|
onClick: function onClick(e) {
|
|
5692
5728
|
e.preventDefault();
|
|
5693
5729
|
onClickHandler(false);
|
|
@@ -5697,6 +5733,9 @@ var Tabs = function Tabs(_ref) {
|
|
|
5697
5733
|
iconName: "Close"
|
|
5698
5734
|
}))) : (/*#__PURE__*/React__default.createElement(MenuItem, null, /*#__PURE__*/React__default.createElement("a", {
|
|
5699
5735
|
"data-testid": "mobile-menu-button",
|
|
5736
|
+
role: "button",
|
|
5737
|
+
"aria-label": "Open menu",
|
|
5738
|
+
tabIndex: 0,
|
|
5700
5739
|
onClick: function onClick(e) {
|
|
5701
5740
|
e.preventDefault();
|
|
5702
5741
|
onClickHandler(true);
|
|
@@ -5707,30 +5746,56 @@ var Tabs = function Tabs(_ref) {
|
|
|
5707
5746
|
var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject5$a, _templateObject6$7, _templateObject7$4;
|
|
5708
5747
|
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);
|
|
5709
5748
|
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"])));
|
|
5710
|
-
var SvgContainerClose = /*#__PURE__*/styled.
|
|
5749
|
+
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"])));
|
|
5711
5750
|
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__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);
|
|
5712
5751
|
var TextLinkWrapper$1 = /*#__PURE__*/styled(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
5713
5752
|
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"])));
|
|
5714
5753
|
|
|
5754
|
+
function useFocusTrap(containerRef, onEscape) {
|
|
5755
|
+
useEffect(function () {
|
|
5756
|
+
var container = containerRef.current;
|
|
5757
|
+
if (!container) return undefined;
|
|
5758
|
+
var focusableSelectors = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
|
|
5759
|
+
var focusableEls = container.querySelectorAll(focusableSelectors);
|
|
5760
|
+
var firstEl = focusableEls[0];
|
|
5761
|
+
var lastEl = focusableEls[focusableEls.length - 1];
|
|
5762
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
5763
|
+
if (e.key === 'Tab') {
|
|
5764
|
+
if (focusableEls.length === 0) return;
|
|
5765
|
+
if (e.shiftKey && document.activeElement === firstEl) {
|
|
5766
|
+
e.preventDefault();
|
|
5767
|
+
lastEl == null || lastEl.focus();
|
|
5768
|
+
} else if (!e.shiftKey && document.activeElement === lastEl) {
|
|
5769
|
+
e.preventDefault();
|
|
5770
|
+
firstEl == null || firstEl.focus();
|
|
5771
|
+
}
|
|
5772
|
+
}
|
|
5773
|
+
if (e.key === 'Escape') {
|
|
5774
|
+
onEscape == null || onEscape();
|
|
5775
|
+
}
|
|
5776
|
+
};
|
|
5777
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
5778
|
+
return function () {
|
|
5779
|
+
return document.removeEventListener('keydown', handleKeyDown);
|
|
5780
|
+
};
|
|
5781
|
+
}, [containerRef, onEscape]);
|
|
5782
|
+
}
|
|
5783
|
+
|
|
5715
5784
|
var SearchBar = function SearchBar(_ref) {
|
|
5716
5785
|
var onClick = _ref.onClick,
|
|
5717
5786
|
onClose = _ref.onClose,
|
|
5718
|
-
className = _ref.className
|
|
5787
|
+
className = _ref.className,
|
|
5788
|
+
inputRef = _ref.inputRef;
|
|
5719
5789
|
var _useState = useState(false),
|
|
5720
5790
|
showSearchLink = _useState[0],
|
|
5721
5791
|
setShowSearchLink = _useState[1];
|
|
5722
5792
|
var _useState2 = useState(''),
|
|
5723
5793
|
searchValue = _useState2[0],
|
|
5724
5794
|
setSearchValue = _useState2[1];
|
|
5725
|
-
var
|
|
5726
|
-
|
|
5727
|
-
|
|
5728
|
-
|
|
5729
|
-
return function () {
|
|
5730
|
-
var _inputRef$current2;
|
|
5731
|
-
return inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
|
|
5732
|
-
};
|
|
5733
|
-
}, [inputRef]);
|
|
5795
|
+
var internalRef = useRef(null);
|
|
5796
|
+
var finalInputRef = inputRef != null ? inputRef : internalRef;
|
|
5797
|
+
var containerRef = useRef(null);
|
|
5798
|
+
useFocusTrap(containerRef, onClose);
|
|
5734
5799
|
var onSearchHandler = function onSearchHandler(value) {
|
|
5735
5800
|
onClick(value);
|
|
5736
5801
|
setSearchValue('');
|
|
@@ -5766,12 +5831,13 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5766
5831
|
var _useViewport = useViewport(),
|
|
5767
5832
|
isDesktop = _useViewport.isDesktop;
|
|
5768
5833
|
return /*#__PURE__*/React__default.createElement(SearchBarContainer, {
|
|
5769
|
-
className: className
|
|
5834
|
+
className: className,
|
|
5835
|
+
ref: containerRef
|
|
5770
5836
|
}, /*#__PURE__*/React__default.createElement(SvgContainerSearch, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5771
5837
|
iconName: "Search"
|
|
5772
5838
|
})), /*#__PURE__*/React__default.createElement(InputContainer, null, /*#__PURE__*/React__default.createElement("input", {
|
|
5773
5839
|
"data-testid": "input-html",
|
|
5774
|
-
ref:
|
|
5840
|
+
ref: finalInputRef,
|
|
5775
5841
|
className: "search-input",
|
|
5776
5842
|
placeholder: "Search the website...",
|
|
5777
5843
|
type: "text",
|
|
@@ -5785,7 +5851,9 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5785
5851
|
})), showSearchLink && (isDesktop ? (/*#__PURE__*/React__default.createElement("div", {
|
|
5786
5852
|
"data-testid": "search-button"
|
|
5787
5853
|
}, /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, {
|
|
5854
|
+
role: "button",
|
|
5788
5855
|
"data-testid": "search-link",
|
|
5856
|
+
"aria-label": "Submit search",
|
|
5789
5857
|
onClick: function onClick() {
|
|
5790
5858
|
return onSearchHandler(searchValue);
|
|
5791
5859
|
},
|
|
@@ -5794,6 +5862,8 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5794
5862
|
},
|
|
5795
5863
|
tabIndex: 0
|
|
5796
5864
|
}, "Search"))) : (/*#__PURE__*/React__default.createElement(SearchArrowContainer, {
|
|
5865
|
+
role: "button",
|
|
5866
|
+
"aria-label": "Submit search",
|
|
5797
5867
|
"data-testid": "search-arrow-button",
|
|
5798
5868
|
onClick: function onClick() {
|
|
5799
5869
|
return onSearchHandler(searchValue);
|
|
@@ -5804,7 +5874,8 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5804
5874
|
tabIndex: 0,
|
|
5805
5875
|
onClick: onCloseHandler,
|
|
5806
5876
|
onKeyDown: onKeyboardCloseHandler,
|
|
5807
|
-
"data-testid": "close-icon"
|
|
5877
|
+
"data-testid": "close-icon",
|
|
5878
|
+
"aria-label": "Close search bar"
|
|
5808
5879
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5809
5880
|
iconName: "Close"
|
|
5810
5881
|
})));
|
|
@@ -5821,6 +5892,8 @@ var Navigation = function Navigation(_ref) {
|
|
|
5821
5892
|
crest = _ref$crest === void 0 ? false : _ref$crest,
|
|
5822
5893
|
className = _ref.className,
|
|
5823
5894
|
logoLink = _ref.logoLink;
|
|
5895
|
+
var searchInputRef = useRef(null);
|
|
5896
|
+
var searchButtonRef = useRef(null);
|
|
5824
5897
|
var _useState = useState(dataNavTop),
|
|
5825
5898
|
navTopData = _useState[0],
|
|
5826
5899
|
setNavTopData = _useState[1];
|
|
@@ -5834,6 +5907,12 @@ var Navigation = function Navigation(_ref) {
|
|
|
5834
5907
|
fullScreenHeight = _useState4[0],
|
|
5835
5908
|
setFullScreenHeight = _useState4[1];
|
|
5836
5909
|
var items = menuData.items;
|
|
5910
|
+
var logoLinkProps = {
|
|
5911
|
+
title: title,
|
|
5912
|
+
href: logoLink,
|
|
5913
|
+
rel: 'noopener noreferrer',
|
|
5914
|
+
'data-roh': dataRoh
|
|
5915
|
+
};
|
|
5837
5916
|
useEffect(function () {
|
|
5838
5917
|
var _document, _document2;
|
|
5839
5918
|
var body = (_document = document) == null ? void 0 : _document.body;
|
|
@@ -5847,9 +5926,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
5847
5926
|
setNavTopData(dataNavTop);
|
|
5848
5927
|
}, [dataNavTop]);
|
|
5849
5928
|
var onClickSearchHandler = function onClickSearchHandler() {
|
|
5850
|
-
setshowSearch(
|
|
5851
|
-
return !prev;
|
|
5852
|
-
});
|
|
5929
|
+
setshowSearch(true);
|
|
5853
5930
|
};
|
|
5854
5931
|
var onLinkHandler = function onLinkHandler(link) {
|
|
5855
5932
|
onLink(link);
|
|
@@ -5866,7 +5943,23 @@ var Navigation = function Navigation(_ref) {
|
|
|
5866
5943
|
};
|
|
5867
5944
|
var onCloseSearchHandler = function onCloseSearchHandler() {
|
|
5868
5945
|
setshowSearch(false);
|
|
5946
|
+
setTimeout(function () {
|
|
5947
|
+
var _searchButtonRef$curr;
|
|
5948
|
+
(_searchButtonRef$curr = searchButtonRef.current) == null || _searchButtonRef$curr.focus();
|
|
5949
|
+
}, 0);
|
|
5869
5950
|
};
|
|
5951
|
+
useEffect(function () {
|
|
5952
|
+
if (showSearch) {
|
|
5953
|
+
var timer = setTimeout(function () {
|
|
5954
|
+
var _searchInputRef$curre;
|
|
5955
|
+
(_searchInputRef$curre = searchInputRef.current) == null || _searchInputRef$curre.focus();
|
|
5956
|
+
}, 50);
|
|
5957
|
+
return function () {
|
|
5958
|
+
return clearTimeout(timer);
|
|
5959
|
+
};
|
|
5960
|
+
}
|
|
5961
|
+
return undefined;
|
|
5962
|
+
}, [showSearch]);
|
|
5870
5963
|
var _useViewport = useViewport(),
|
|
5871
5964
|
isMobile = _useViewport.isMobile;
|
|
5872
5965
|
return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
|
|
@@ -5886,16 +5979,11 @@ var Navigation = function Navigation(_ref) {
|
|
|
5886
5979
|
columnSpanDesktop: 18,
|
|
5887
5980
|
columnStartDevice: 1,
|
|
5888
5981
|
columnSpanDevice: 14
|
|
5889
|
-
}, /*#__PURE__*/React__default.createElement(MenuContainer, null, /*#__PURE__*/React__default.createElement(LogoContainer, {
|
|
5890
|
-
"data-roh": dataRoh,
|
|
5891
|
-
rel: "noopener noreferrer",
|
|
5892
|
-
href: logoLink,
|
|
5893
|
-
title: title
|
|
5894
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5982
|
+
}, /*#__PURE__*/React__default.createElement(MenuContainer, null, /*#__PURE__*/React__default.createElement(LogoContainer, Object.assign({}, logoLinkProps), /*#__PURE__*/React__default.createElement(Icon, {
|
|
5895
5983
|
iconName: crest ? 'NavLogoWithCrest' : 'NavLogoNoCrest',
|
|
5896
5984
|
"data-testid": crest ? 'NavLogoWithCrest' : 'NavLogoNoCrest',
|
|
5897
5985
|
"aria-hidden": "true"
|
|
5898
|
-
})), /*#__PURE__*/React__default.createElement(LogoContainerMobile,
|
|
5986
|
+
})), /*#__PURE__*/React__default.createElement(LogoContainerMobile, Object.assign({}, logoLinkProps), /*#__PURE__*/React__default.createElement(Icon, {
|
|
5899
5987
|
iconName: "NavLogoMobile"
|
|
5900
5988
|
})), /*#__PURE__*/React__default.createElement(NavWrapper, null, /*#__PURE__*/React__default.createElement(NavContainer, null, /*#__PURE__*/React__default.createElement(Tabs, {
|
|
5901
5989
|
items: items,
|
|
@@ -5913,7 +6001,8 @@ var Navigation = function Navigation(_ref) {
|
|
|
5913
6001
|
basketNumVirtualItems: navTopData.basketNumVirtualItems,
|
|
5914
6002
|
onClickSearch: onClickSearchHandler,
|
|
5915
6003
|
onLink: onLinkHandler,
|
|
5916
|
-
isShowSearch: showSearch
|
|
6004
|
+
isShowSearch: showSearch,
|
|
6005
|
+
searchButtonRef: searchButtonRef
|
|
5917
6006
|
}))))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchBackground, {
|
|
5918
6007
|
visible: showSearch
|
|
5919
6008
|
}), /*#__PURE__*/React__default.createElement(GridItemSearch, {
|
|
@@ -5924,6 +6013,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
5924
6013
|
columnStartDevice: 2,
|
|
5925
6014
|
columnSpanDevice: 12
|
|
5926
6015
|
}, /*#__PURE__*/React__default.createElement(SearchBar, {
|
|
6016
|
+
inputRef: searchInputRef,
|
|
5927
6017
|
onClick: onSearchHandler,
|
|
5928
6018
|
onClose: onCloseSearchHandler
|
|
5929
6019
|
})))), showMenu && (/*#__PURE__*/React__default.createElement(NavigationGridMobile, {
|
|
@@ -8661,6 +8751,44 @@ var Editorial = function Editorial(_ref) {
|
|
|
8661
8751
|
})))));
|
|
8662
8752
|
};
|
|
8663
8753
|
|
|
8754
|
+
var _templateObject$Z, _templateObject2$K, _templateObject3$x;
|
|
8755
|
+
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__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"])));
|
|
8756
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__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);
|
|
8757
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$x || (_templateObject3$x = /*#__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"])));
|
|
8758
|
+
|
|
8759
|
+
var _excluded$k = ["text", "onClick"];
|
|
8760
|
+
var HotFilters = function HotFilters(_ref) {
|
|
8761
|
+
var items = _ref.items,
|
|
8762
|
+
className = _ref.className,
|
|
8763
|
+
defaultSelectedIndex = _ref.defaultSelectedIndex;
|
|
8764
|
+
var _useState = useState(defaultSelectedIndex != null ? defaultSelectedIndex : 0),
|
|
8765
|
+
selectedIndex = _useState[0],
|
|
8766
|
+
setSelectedIndex = _useState[1];
|
|
8767
|
+
var handleClick = function handleClick(index, onClick) {
|
|
8768
|
+
setSelectedIndex(index);
|
|
8769
|
+
if (onClick) onClick();
|
|
8770
|
+
};
|
|
8771
|
+
return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, {
|
|
8772
|
+
className: className
|
|
8773
|
+
}, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
|
|
8774
|
+
var text = item.text,
|
|
8775
|
+
_onClick = item.onClick,
|
|
8776
|
+
rest = _objectWithoutPropertiesLoose(item, _excluded$k);
|
|
8777
|
+
var isSelected = index === selectedIndex;
|
|
8778
|
+
return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
|
|
8779
|
+
key: index,
|
|
8780
|
+
onClick: function onClick() {
|
|
8781
|
+
return handleClick(index, _onClick);
|
|
8782
|
+
},
|
|
8783
|
+
iconName: isSelected ? 'Confirm' : undefined,
|
|
8784
|
+
backgroundColor: isSelected ? 'primary-black' : 'base-white',
|
|
8785
|
+
textColor: isSelected ? 'base-white' : 'base-black',
|
|
8786
|
+
hoveredColor: isSelected ? 'black-hovered' : 'base-black',
|
|
8787
|
+
pressedColor: "black-pressed"
|
|
8788
|
+
}, rest), text);
|
|
8789
|
+
})));
|
|
8790
|
+
};
|
|
8791
|
+
|
|
8664
8792
|
var InformationCtaVariants = {
|
|
8665
8793
|
Primary: 'Primary',
|
|
8666
8794
|
Secondary: 'Secondary',
|
|
@@ -8690,10 +8818,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
8690
8818
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
8691
8819
|
};
|
|
8692
8820
|
|
|
8693
|
-
var _templateObject$
|
|
8694
|
-
var InfoWrapper$1 = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8695
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
8696
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
8821
|
+
var _templateObject$_, _templateObject2$L, _templateObject3$y, _templateObject4$s;
|
|
8822
|
+
var InfoWrapper$1 = /*#__PURE__*/styled(Grid)(_templateObject$_ || (_templateObject$_ = /*#__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);
|
|
8823
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
8824
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$y || (_templateObject3$y = /*#__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) {
|
|
8697
8825
|
var variant = _ref.variant,
|
|
8698
8826
|
theme = _ref.theme;
|
|
8699
8827
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -8860,13 +8988,13 @@ var Information = function Information(_ref) {
|
|
|
8860
8988
|
})))));
|
|
8861
8989
|
};
|
|
8862
8990
|
|
|
8863
|
-
var _templateObject
|
|
8864
|
-
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject
|
|
8991
|
+
var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$c, _templateObject8$8;
|
|
8992
|
+
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$$ || (_templateObject$$ = /*#__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) {
|
|
8865
8993
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
8866
8994
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
8867
8995
|
}, devices.mobile);
|
|
8868
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
8869
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8996
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$M || (_templateObject2$M = /*#__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);
|
|
8997
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
8870
8998
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
8871
8999
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
8872
9000
|
});
|
|
@@ -8961,17 +9089,17 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
8961
9089
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
8962
9090
|
};
|
|
8963
9091
|
|
|
8964
|
-
var _templateObject
|
|
8965
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8966
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8967
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
9092
|
+
var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$n, _templateObject6$i, _templateObject7$d, _templateObject8$9;
|
|
9093
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
9094
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
9095
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
8968
9096
|
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
8969
9097
|
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
8970
9098
|
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
8971
9099
|
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
8972
9100
|
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
8973
9101
|
|
|
8974
|
-
var _excluded$
|
|
9102
|
+
var _excluded$l = ["text"];
|
|
8975
9103
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
8976
9104
|
var children = _ref.children,
|
|
8977
9105
|
text = _ref.text,
|
|
@@ -8989,7 +9117,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
8989
9117
|
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
8990
9118
|
var _ref2 = link || {},
|
|
8991
9119
|
linkText = _ref2.text,
|
|
8992
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9120
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
8993
9121
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
8994
9122
|
bgUrlDesktop: bgUrlDesktop,
|
|
8995
9123
|
bgUrlDevice: bgUrlDevice,
|
|
@@ -9032,19 +9160,19 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
9032
9160
|
}, "Scroll Down"))) : null);
|
|
9033
9161
|
};
|
|
9034
9162
|
|
|
9035
|
-
var _templateObject$
|
|
9036
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9163
|
+
var _templateObject$11, _templateObject2$O, _templateObject3$B, _templateObject4$v, _templateObject5$o;
|
|
9164
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$11 || (_templateObject$11 = /*#__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) {
|
|
9037
9165
|
var color = _ref.color;
|
|
9038
9166
|
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 ";
|
|
9039
9167
|
}, devices.mobileAndTablet);
|
|
9040
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
9168
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__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) {
|
|
9041
9169
|
var hasImage = _ref2.hasImage;
|
|
9042
9170
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
9043
9171
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
9044
9172
|
var hasImage = _ref3.hasImage;
|
|
9045
9173
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
9046
9174
|
});
|
|
9047
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
9175
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__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);
|
|
9048
9176
|
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__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);
|
|
9049
9177
|
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__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);
|
|
9050
9178
|
|
|
@@ -9076,10 +9204,10 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
9076
9204
|
})))));
|
|
9077
9205
|
};
|
|
9078
9206
|
|
|
9079
|
-
var _templateObject$
|
|
9080
|
-
var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$
|
|
9081
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9082
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9207
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
|
|
9208
|
+
var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
9209
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
9210
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__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);
|
|
9083
9211
|
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__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);
|
|
9084
9212
|
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__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) {
|
|
9085
9213
|
var theme = _ref.theme;
|
|
@@ -9290,10 +9418,10 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
9290
9418
|
})))))))))));
|
|
9291
9419
|
};
|
|
9292
9420
|
|
|
9293
|
-
var _templateObject$
|
|
9294
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
9295
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
9296
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9421
|
+
var _templateObject$13, _templateObject2$Q, _templateObject3$D, _templateObject5$q, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6;
|
|
9422
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__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);
|
|
9423
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__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"])));
|
|
9424
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
9297
9425
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__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);
|
|
9298
9426
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$k || (_templateObject6$k = /*#__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) {
|
|
9299
9427
|
var invert = _ref.invert,
|
|
@@ -9403,7 +9531,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
9403
9531
|
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
9404
9532
|
};
|
|
9405
9533
|
|
|
9406
|
-
var _excluded$
|
|
9534
|
+
var _excluded$m = ["text"];
|
|
9407
9535
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
9408
9536
|
var mobileVideo = video.mobile || video.desktop;
|
|
9409
9537
|
var desktopVideo = video.desktop || video.mobile;
|
|
@@ -9508,7 +9636,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
9508
9636
|
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
|
|
9509
9637
|
var _ref5 = link || {},
|
|
9510
9638
|
linkText = _ref5.text,
|
|
9511
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
9639
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$m);
|
|
9512
9640
|
// const titleSize = title && title.length > 20 ? 4 : 3;
|
|
9513
9641
|
var video = {
|
|
9514
9642
|
elementId: 'compact-header-video',
|
|
@@ -9544,11 +9672,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
9544
9672
|
}), linkText))))));
|
|
9545
9673
|
};
|
|
9546
9674
|
|
|
9547
|
-
var _templateObject$
|
|
9548
|
-
var MorePages = /*#__PURE__*/styled.span(_templateObject$
|
|
9549
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$
|
|
9675
|
+
var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x;
|
|
9676
|
+
var MorePages = /*#__PURE__*/styled.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
9677
|
+
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"])));
|
|
9550
9678
|
// PageNumber extends bodyText but uses subtitle-1 font size
|
|
9551
|
-
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$
|
|
9679
|
+
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
|
|
9552
9680
|
var active = _ref.active;
|
|
9553
9681
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
9554
9682
|
});
|
|
@@ -9618,10 +9746,10 @@ var Pagination = function Pagination(_ref) {
|
|
|
9618
9746
|
})))));
|
|
9619
9747
|
};
|
|
9620
9748
|
|
|
9621
|
-
var _templateObject$
|
|
9622
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9623
|
-
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9624
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9749
|
+
var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$g;
|
|
9750
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
9751
|
+
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
9752
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
9625
9753
|
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
9626
9754
|
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
9627
9755
|
var PersonLink = /*#__PURE__*/styled.a(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
@@ -9682,13 +9810,13 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
9682
9810
|
}));
|
|
9683
9811
|
};
|
|
9684
9812
|
|
|
9685
|
-
var _templateObject$
|
|
9686
|
-
var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
9687
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
9813
|
+
var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z;
|
|
9814
|
+
var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9815
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$T || (_templateObject2$T = /*#__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) {
|
|
9688
9816
|
var columnCount = _ref.columnCount;
|
|
9689
9817
|
return "repeat(" + columnCount + ", 1fr)";
|
|
9690
9818
|
}, devices.mobile, devices.tablet);
|
|
9691
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9819
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
9692
9820
|
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
9693
9821
|
|
|
9694
9822
|
// Get the total character length of a property in an array of objects
|
|
@@ -9807,14 +9935,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9807
9935
|
}, creditEntries);
|
|
9808
9936
|
};
|
|
9809
9937
|
|
|
9810
|
-
var _templateObject$
|
|
9938
|
+
var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$A, _templateObject5$s, _templateObject6$m, _templateObject7$h, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
9811
9939
|
var LENGTH_TEXT = 28;
|
|
9812
9940
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9813
9941
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9814
9942
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9815
9943
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9816
9944
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9817
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9945
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$17 || (_templateObject$17 = /*#__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) {
|
|
9818
9946
|
var imageToLeft = _ref.imageToLeft;
|
|
9819
9947
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9820
9948
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9824,8 +9952,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$16 || (_templa
|
|
|
9824
9952
|
var asCard = _ref3.asCard;
|
|
9825
9953
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9826
9954
|
});
|
|
9827
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$
|
|
9828
|
-
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$
|
|
9955
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
9956
|
+
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\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"])));
|
|
9829
9957
|
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
9830
9958
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9831
9959
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
@@ -9883,7 +10011,7 @@ var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject17 || (_temp
|
|
|
9883
10011
|
var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
9884
10012
|
var EndDateText = /*#__PURE__*/styled.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid var(--base-color-black);\n padding-bottom: 32px;\n margin-bottom: 32px;\n\n @media ", " {\n padding-bottom: 20px;\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
9885
10013
|
|
|
9886
|
-
var _excluded$
|
|
10014
|
+
var _excluded$n = ["text"],
|
|
9887
10015
|
_excluded2$4 = ["text"],
|
|
9888
10016
|
_excluded3 = ["text"];
|
|
9889
10017
|
var _buttonTypeToButton$2;
|
|
@@ -9946,7 +10074,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9946
10074
|
var _ref2 = firstButton || {},
|
|
9947
10075
|
_ref2$text = _ref2.text,
|
|
9948
10076
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9949
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
10077
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
|
|
9950
10078
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
9951
10079
|
var secondButton = links == null ? void 0 : links[1];
|
|
9952
10080
|
var _ref3 = secondButton || {},
|
|
@@ -10059,21 +10187,21 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10059
10187
|
}))));
|
|
10060
10188
|
};
|
|
10061
10189
|
|
|
10062
|
-
var _templateObject$
|
|
10190
|
+
var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$t, _templateObject6$n, _templateObject7$i;
|
|
10063
10191
|
var LENGTH_TEXT$2 = 28;
|
|
10064
10192
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
10065
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
10193
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$18 || (_templateObject$18 = /*#__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) {
|
|
10066
10194
|
var imageToLeft = _ref.imageToLeft;
|
|
10067
10195
|
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'";
|
|
10068
10196
|
}, devices.tablet, function (_ref2) {
|
|
10069
10197
|
var imageToLeft = _ref2.imageToLeft;
|
|
10070
10198
|
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'";
|
|
10071
10199
|
}, devices.mobile);
|
|
10072
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10200
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
10073
10201
|
var imageToLeft = _ref3.imageToLeft;
|
|
10074
10202
|
return imageToLeft ? 'left' : 'right';
|
|
10075
10203
|
}, devices.mobile);
|
|
10076
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
10204
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__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) {
|
|
10077
10205
|
var imageToLeft = _ref4.imageToLeft;
|
|
10078
10206
|
return imageToLeft ? 'right' : 'left';
|
|
10079
10207
|
}, devices.mobile);
|
|
@@ -10102,8 +10230,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$i || (_templat
|
|
|
10102
10230
|
return '';
|
|
10103
10231
|
});
|
|
10104
10232
|
|
|
10105
|
-
var _templateObject$
|
|
10106
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10233
|
+
var _templateObject$19;
|
|
10234
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__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) {
|
|
10107
10235
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10108
10236
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10109
10237
|
return aspectRatio;
|
|
@@ -10215,7 +10343,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
10215
10343
|
}));
|
|
10216
10344
|
};
|
|
10217
10345
|
|
|
10218
|
-
var _excluded$
|
|
10346
|
+
var _excluded$o = ["text"],
|
|
10219
10347
|
_excluded2$5 = ["text"];
|
|
10220
10348
|
var LENGTH_TEXT$3 = 28;
|
|
10221
10349
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
@@ -10240,7 +10368,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
10240
10368
|
var _ref2 = primaryButton || {},
|
|
10241
10369
|
_ref2$text = _ref2.text,
|
|
10242
10370
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
10243
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
10371
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
10244
10372
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
10245
10373
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
10246
10374
|
var _ref3 = tertiaryButton || {},
|
|
@@ -10282,8 +10410,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
10282
10410
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
10283
10411
|
};
|
|
10284
10412
|
|
|
10285
|
-
var _templateObject$
|
|
10286
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10413
|
+
var _templateObject$1a;
|
|
10414
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
10287
10415
|
|
|
10288
10416
|
/**
|
|
10289
10417
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -10338,9 +10466,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
10338
10466
|
})));
|
|
10339
10467
|
};
|
|
10340
10468
|
|
|
10341
|
-
var _templateObject$
|
|
10342
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
10343
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10469
|
+
var _templateObject$1b, _templateObject2$W, _templateObject3$J;
|
|
10470
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10471
|
+
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
10344
10472
|
var horizontalMode = _ref.horizontalMode;
|
|
10345
10473
|
if (horizontalMode) return 'row';
|
|
10346
10474
|
return 'column';
|
|
@@ -10348,7 +10476,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObjec
|
|
|
10348
10476
|
var gap = _ref2.gap;
|
|
10349
10477
|
return gap + "px";
|
|
10350
10478
|
});
|
|
10351
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10479
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
10352
10480
|
var darkMode = _ref3.darkMode;
|
|
10353
10481
|
if (darkMode) return 'var(--base-color-white)';
|
|
10354
10482
|
return 'var(--base-color-errorstate)';
|
|
@@ -10425,10 +10553,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
10425
10553
|
}, error))));
|
|
10426
10554
|
};
|
|
10427
10555
|
|
|
10428
|
-
var _templateObject$
|
|
10429
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
10430
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10431
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10556
|
+
var _templateObject$1c, _templateObject2$X, _templateObject3$K;
|
|
10557
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__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);
|
|
10558
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__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"])));
|
|
10559
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__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);
|
|
10432
10560
|
|
|
10433
10561
|
/* eslint-disable react/no-danger */
|
|
10434
10562
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -10484,8 +10612,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
10484
10612
|
return null;
|
|
10485
10613
|
};
|
|
10486
10614
|
|
|
10487
|
-
var _templateObject$
|
|
10488
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
10615
|
+
var _templateObject$1d;
|
|
10616
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__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 font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
10489
10617
|
|
|
10490
10618
|
var SectionTitle = function SectionTitle(_ref) {
|
|
10491
10619
|
var title = _ref.title,
|
|
@@ -10513,8 +10641,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
10513
10641
|
}, description)))));
|
|
10514
10642
|
};
|
|
10515
10643
|
|
|
10516
|
-
var _templateObject$
|
|
10517
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
10644
|
+
var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$u, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
|
|
10645
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$1e || (_templateObject$1e = /*#__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) {
|
|
10518
10646
|
var theme = _ref.theme;
|
|
10519
10647
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
10520
10648
|
}, function (_ref2) {
|
|
@@ -10524,11 +10652,11 @@ var stateStyles = /*#__PURE__*/css(_templateObject$1d || (_templateObject$1d = /
|
|
|
10524
10652
|
var theme = _ref3.theme;
|
|
10525
10653
|
return theme.colors.lightgrey;
|
|
10526
10654
|
});
|
|
10527
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
10655
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
10528
10656
|
var theme = _ref4.theme;
|
|
10529
10657
|
return theme.colors.darkgrey;
|
|
10530
10658
|
});
|
|
10531
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
10659
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
10532
10660
|
var listItemStyles = /*#__PURE__*/css(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
10533
10661
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
10534
10662
|
var theme = _ref5.theme;
|
|
@@ -10894,9 +11022,9 @@ function Select(_ref3) {
|
|
|
10894
11022
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10895
11023
|
}
|
|
10896
11024
|
|
|
10897
|
-
var _templateObject$
|
|
10898
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
10899
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11025
|
+
var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$D;
|
|
11026
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
11027
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
10900
11028
|
var width = _ref.width;
|
|
10901
11029
|
if (!width) return 'none';
|
|
10902
11030
|
return width + "px";
|
|
@@ -10913,7 +11041,7 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateOb
|
|
|
10913
11041
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
10914
11042
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10915
11043
|
});
|
|
10916
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
11044
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
10917
11045
|
var darkMode = _ref5.darkMode;
|
|
10918
11046
|
if (darkMode) return "var(--base-color-white)";
|
|
10919
11047
|
return "var(--base-color-black)";
|
|
@@ -10924,7 +11052,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObjec
|
|
|
10924
11052
|
return "var(--base-color-errorstate)";
|
|
10925
11053
|
});
|
|
10926
11054
|
|
|
10927
|
-
var _excluded$
|
|
11055
|
+
var _excluded$p = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10928
11056
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10929
11057
|
return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10930
11058
|
iconName: "DropdownArrow"
|
|
@@ -10975,7 +11103,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10975
11103
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10976
11104
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10977
11105
|
components = _ref2.components,
|
|
10978
|
-
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
11106
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
|
|
10979
11107
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10980
11108
|
label: label,
|
|
10981
11109
|
error: error,
|
|
@@ -10993,7 +11121,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10993
11121
|
})));
|
|
10994
11122
|
};
|
|
10995
11123
|
|
|
10996
|
-
var _excluded$
|
|
11124
|
+
var _excluded$q = ["label", "error", "width", "darkMode", "components"];
|
|
10997
11125
|
/**
|
|
10998
11126
|
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
10999
11127
|
* component for select instead of regular react-select component. This can be used
|
|
@@ -11015,7 +11143,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
11015
11143
|
_ref$darkMode = _ref.darkMode,
|
|
11016
11144
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
11017
11145
|
components = _ref.components,
|
|
11018
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
11146
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
|
11019
11147
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
11020
11148
|
label: label,
|
|
11021
11149
|
error: error,
|
|
@@ -11032,8 +11160,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
11032
11160
|
})));
|
|
11033
11161
|
};
|
|
11034
11162
|
|
|
11035
|
-
var _templateObject$
|
|
11036
|
-
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$
|
|
11163
|
+
var _templateObject$1g, _templateObject2$_;
|
|
11164
|
+
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
11037
11165
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
11038
11166
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
11039
11167
|
return aspectRatio;
|
|
@@ -11043,7 +11171,7 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1f || (_templateObjec
|
|
|
11043
11171
|
height = _ref2.height;
|
|
11044
11172
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
11045
11173
|
});
|
|
11046
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
11174
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
11047
11175
|
|
|
11048
11176
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
11049
11177
|
var caption = _ref.caption,
|
|
@@ -11077,13 +11205,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
11077
11205
|
})), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
11078
11206
|
};
|
|
11079
11207
|
|
|
11080
|
-
var _templateObject$
|
|
11081
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
11082
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2
|
|
11208
|
+
var _templateObject$1h, _templateObject2$$, _templateObject3$N;
|
|
11209
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
11210
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
11083
11211
|
var displayAttribution = _ref.displayAttribution;
|
|
11084
11212
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
11085
11213
|
});
|
|
11086
|
-
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
11214
|
+
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
|
|
11087
11215
|
|
|
11088
11216
|
/* eslint-disable react/no-danger */
|
|
11089
11217
|
var Quote = function Quote(_ref) {
|
|
@@ -11108,10 +11236,10 @@ var Quote = function Quote(_ref) {
|
|
|
11108
11236
|
}, attribution))));
|
|
11109
11237
|
};
|
|
11110
11238
|
|
|
11111
|
-
var _templateObject$
|
|
11112
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
11113
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2
|
|
11114
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
11239
|
+
var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$v, _templateObject6$p;
|
|
11240
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__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"])));
|
|
11241
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
11242
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
11115
11243
|
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
11116
11244
|
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__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);
|
|
11117
11245
|
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__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);
|
|
@@ -11152,10 +11280,10 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
11152
11280
|
}, title)))));
|
|
11153
11281
|
};
|
|
11154
11282
|
|
|
11155
|
-
var _templateObject$
|
|
11156
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
11157
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
11158
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
11283
|
+
var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$F, _templateObject5$w;
|
|
11284
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__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"])));
|
|
11285
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$11 || (_templateObject2$11 = /*#__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"])));
|
|
11286
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
11159
11287
|
var isVisible = _ref.isVisible;
|
|
11160
11288
|
return isVisible ? 'visible' : 'hidden';
|
|
11161
11289
|
});
|
|
@@ -11244,10 +11372,10 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
11244
11372
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
11245
11373
|
};
|
|
11246
11374
|
|
|
11247
|
-
var _templateObject$
|
|
11248
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
11249
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
11250
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
11375
|
+
var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$G, _templateObject5$x;
|
|
11376
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
11377
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$12 || (_templateObject2$12 = /*#__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);
|
|
11378
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$Q || (_templateObject3$Q = /*#__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);
|
|
11251
11379
|
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$G || (_templateObject4$G = /*#__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) {
|
|
11252
11380
|
var isActive = _ref.isActive;
|
|
11253
11381
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
@@ -11408,10 +11536,10 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
11408
11536
|
});
|
|
11409
11537
|
};
|
|
11410
11538
|
|
|
11411
|
-
var _templateObject$
|
|
11412
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
11413
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
11414
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
11539
|
+
var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$y, _templateObject6$q;
|
|
11540
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11541
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11542
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
11415
11543
|
var color = _ref.color;
|
|
11416
11544
|
return "var(--base-color-" + color + ")";
|
|
11417
11545
|
});
|
|
@@ -11502,10 +11630,10 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
11502
11630
|
}, strengthLabel))));
|
|
11503
11631
|
};
|
|
11504
11632
|
|
|
11505
|
-
var _templateObject$
|
|
11506
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
11507
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11508
|
-
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$
|
|
11633
|
+
var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$z, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
|
|
11634
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11635
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11636
|
+
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11509
11637
|
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ", ";\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 padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
11510
11638
|
return "var(--base-color-" + props.lineColor + ")";
|
|
11511
11639
|
}, function (props) {
|
|
@@ -11706,16 +11834,16 @@ var Table = function Table(_ref) {
|
|
|
11706
11834
|
}))))))))));
|
|
11707
11835
|
};
|
|
11708
11836
|
|
|
11709
|
-
var _templateObject$
|
|
11710
|
-
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$
|
|
11837
|
+
var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$J, _templateObject5$A, _templateObject6$s, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
|
|
11838
|
+
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11711
11839
|
var theme = _ref.theme;
|
|
11712
11840
|
return "var(--color-" + theme + ")";
|
|
11713
11841
|
}, function (_ref2) {
|
|
11714
11842
|
var theme = _ref2.theme;
|
|
11715
11843
|
return "var(--color-" + theme + ")";
|
|
11716
11844
|
});
|
|
11717
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
11718
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
11845
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11846
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$T || (_templateObject3$T = /*#__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);
|
|
11719
11847
|
var Error$1 = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
11720
11848
|
var Form = /*#__PURE__*/styled.form(_templateObject5$A || (_templateObject5$A = /*#__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$1);
|
|
11721
11849
|
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__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);
|
|
@@ -12130,9 +12258,9 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
12130
12258
|
}))))));
|
|
12131
12259
|
};
|
|
12132
12260
|
|
|
12133
|
-
var _templateObject$
|
|
12134
|
-
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
12135
|
-
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject3$
|
|
12261
|
+
var _templateObject$1o, _templateObject3$U, _templateObject4$K;
|
|
12262
|
+
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1o || (_templateObject$1o = /*#__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\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, devices.mobile);
|
|
12263
|
+
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject3$U || (_templateObject3$U = /*#__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);
|
|
12136
12264
|
var ContentWrapper$3 = /*#__PURE__*/styled.a(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
12137
12265
|
|
|
12138
12266
|
var AnchorBar = function AnchorBar(_ref) {
|
|
@@ -12342,22 +12470,25 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12342
12470
|
var css_248z$1 = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')\n format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')\n format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
|
|
12343
12471
|
styleInject(css_248z$1);
|
|
12344
12472
|
|
|
12345
|
-
var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n\n/* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-height: 17px;\n \n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n --carousel-image-caption-height: 14px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n --carousel-image-caption-height: 14px;\n }\n\n/* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --line-height-listing: 36px;\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n --page-header-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
|
|
12346
|
-
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
12473
|
+
var css_248z$2 = "/* ~~~~~ General Styling Classes ~~~~~ */\n.typography_color-primary__LOfDi {\n color: var(--color-primary);\n}\n\n.typography_color-black__6MHRL {\n color: var(--color-base-black);\n}\n\n.typography_color-white__PfW5s {\n color: var(--color-base-white);\n}\n\n.typography_color-red__iPlbG {\n color: var(--color-primary-red);\n}\n\n.typography_color-grey__GA1c2 {\n color: var(--color-base-dark-grey);\n}\n\n.typography_color-inherit__RDd0Y {\n color: inherit;\n}\n\n.typography_em__E6tX- {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.typography_display__-F3p4 {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.typography_large__uq0zC {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -3px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.typography_header__BexiD {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.typography_subtitle__aoFTV {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.typography_bodycopy__vYtQ8 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.typography_overline__EnUK3 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.typography_large__uq0zC {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.typography_small__wfQ0K {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.typography_buttontext__vcxNi {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n font-weight: 400;\n\n @media (max-width: 699px) {\n font-weight: 500;\n line-height: 17px;\n }\n}\n\n/* Caption Text */\n.typography_captiontext__91UFb {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n\n @media (max-width: 699px) {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n}\n\n/* Navigation Text */\n.typography_navigationtext__YfGf7 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n font-weight: 500;\n\n @media (max-width: 699px) {\n font-size: 17px;\n line-height: 17px;\n }\n}\n";
|
|
12347
12474
|
styleInject(css_248z$2);
|
|
12348
12475
|
|
|
12349
|
-
var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n /* Stream theme overrides */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-background: #1a1a1a;\n --color-primary-button: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n\n --rotator-button-color: var(--color-base-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-black);\n\n --heading-promo-bg-color: var(--color-base-black);\n --page-header-bg-color: var(--color-primary-black);\n}\n";
|
|
12350
|
-
var
|
|
12476
|
+
var css_248z$3 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n\n/* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-height: 17px;\n \n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n --carousel-image-caption-height: 14px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n --carousel-image-caption-height: 14px;\n }\n\n/* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --line-height-listing: 36px;\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n --page-header-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
|
|
12477
|
+
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
12351
12478
|
styleInject(css_248z$3);
|
|
12352
12479
|
|
|
12353
|
-
var css_248z$4 = ".
|
|
12354
|
-
var
|
|
12480
|
+
var css_248z$4 = ".stream-theme-module_streamTheme__lTfqQ {\n /* Stream theme overrides */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-background: #1a1a1a;\n --color-primary-button: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n\n --rotator-button-color: var(--color-base-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-black);\n\n --heading-promo-bg-color: var(--color-base-black);\n --page-header-bg-color: var(--color-primary-black);\n}\n";
|
|
12481
|
+
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
12355
12482
|
styleInject(css_248z$4);
|
|
12356
12483
|
|
|
12357
|
-
var css_248z$5 = ".
|
|
12358
|
-
var
|
|
12484
|
+
var css_248z$5 = ".cinema-theme-module_cinemaTheme__f5QFs {\n /* White */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-button: #ffffff;\n --color-primary-background: #1a1a1a;\n --color-primary-button-reverse-bg: #ffffff;\n --color-primary-button-reverse: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n --button-color: var(--color-primary-black);\n --button-bg-color: var(--color-base-white);\n --button-hover-color: var(--color-white-hovered);\n --button-pressed-color: var(--color-white-pressed);\n --button-secondary-color: var(--color-base-white);\n --button-secondary-hover-color: var(--color-white-hovered);\n --button-secondary-pressed-color: var(--color-white-pressed);\n --button-tertiary-color: var(--color-base-white);\n --button-tertiary-hover-color: var(--color-white-hovered);\n --button-tertiary-pressed-color: var(--color-white-pressed);\n\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-primary-red);\n --announcement-banner-bg-color: var(--color-base-white);\n --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n --information-panel-color: var(--color-primary-black);\n --information-panel-bg-color: var(--color-base-white);\n --information-panel-button-color: var(--color-base-white);\n --information-panel-button-bg-color: var(--color-primary-red);\n --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n --heading-promo-bg-color: var(--color-base-white); \n --page-header-bg-color: var(--color-primary-black);\n};";
|
|
12485
|
+
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
12359
12486
|
styleInject(css_248z$5);
|
|
12360
12487
|
|
|
12488
|
+
var css_248z$6 = ".schools-theme-module_schoolsTheme__CWHba {\n /* Schools theme overrides */\n --base-color-primary: #c8102e;\n --color-primary: #c8102e;\n --color-primary-button: #c8102e;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n\n @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n }\n}\n";
|
|
12489
|
+
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
12490
|
+
styleInject(css_248z$6);
|
|
12491
|
+
|
|
12361
12492
|
/* eslint-disable react/jsx-no-useless-fragment */
|
|
12362
12493
|
var getThemeClass = function getThemeClass(theme) {
|
|
12363
12494
|
// Always include the base (core) theme class
|
|
@@ -12397,11 +12528,11 @@ var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
|
|
|
12397
12528
|
return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
|
|
12398
12529
|
};
|
|
12399
12530
|
|
|
12400
|
-
var _excluded$
|
|
12531
|
+
var _excluded$r = ["logo", "slides"];
|
|
12401
12532
|
var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
12402
12533
|
var logo = _ref.logo,
|
|
12403
12534
|
slides = _ref.slides,
|
|
12404
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12535
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
|
|
12405
12536
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12406
12537
|
var links = processSlideLinks(slide.links);
|
|
12407
12538
|
return _extends({}, slide, {
|
|
@@ -12418,10 +12549,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
|
12418
12549
|
})));
|
|
12419
12550
|
};
|
|
12420
12551
|
|
|
12421
|
-
var _excluded$
|
|
12552
|
+
var _excluded$s = ["slides"];
|
|
12422
12553
|
var HighlightsCore = function HighlightsCore(_ref) {
|
|
12423
12554
|
var slides = _ref.slides,
|
|
12424
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12555
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
|
|
12425
12556
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12426
12557
|
var links = processSlideLinks(slide.links);
|
|
12427
12558
|
return _extends({}, slide, {
|
|
@@ -12435,11 +12566,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
|
|
|
12435
12566
|
})));
|
|
12436
12567
|
};
|
|
12437
12568
|
|
|
12438
|
-
var _excluded$
|
|
12569
|
+
var _excluded$t = ["logo", "slides"];
|
|
12439
12570
|
var HighlightsStream = function HighlightsStream(_ref) {
|
|
12440
12571
|
var logo = _ref.logo,
|
|
12441
12572
|
slides = _ref.slides,
|
|
12442
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12573
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
|
|
12443
12574
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12444
12575
|
var links = processSlideLinks(slide.links);
|
|
12445
12576
|
return _extends({}, slide, {
|
|
@@ -12456,9 +12587,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
12456
12587
|
})));
|
|
12457
12588
|
};
|
|
12458
12589
|
|
|
12459
|
-
var _templateObject$
|
|
12460
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
12461
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12590
|
+
var _templateObject$1p, _templateObject3$V;
|
|
12591
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
12592
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
12462
12593
|
|
|
12463
12594
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
12464
12595
|
var children = _ref.children;
|
|
@@ -12493,8 +12624,8 @@ var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
|
12493
12624
|
}))));
|
|
12494
12625
|
};
|
|
12495
12626
|
|
|
12496
|
-
var _templateObject$
|
|
12497
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1p || (_templateObject$1p = /*#__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: 6px;\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) {
|
|
12627
|
+
var _templateObject$1q;
|
|
12628
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1q || (_templateObject$1q = /*#__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: 6px;\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) {
|
|
12498
12629
|
var theme = _ref.theme;
|
|
12499
12630
|
return theme.colors.primary;
|
|
12500
12631
|
}, function (_ref2) {
|
|
@@ -13448,5 +13579,5 @@ var HarmonicSize = {
|
|
|
13448
13579
|
Large: 'large'
|
|
13449
13580
|
};
|
|
13450
13581
|
|
|
13451
|
-
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, 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, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, PeopleListing, 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, TextOnly, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
|
|
13582
|
+
export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, 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, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, PeopleListing, 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, TextOnly, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
|
|
13452
13583
|
//# sourceMappingURL=harmonic.esm.js.map
|