@royaloperahouse/harmonic 0.6.0 → 0.6.1-a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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 +321 -194
- 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 +333 -204
- 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 +23 -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,42 @@ 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"])));
|
|
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"])));
|
|
8758
|
+
|
|
8759
|
+
var HotFilters = function HotFilters(_ref) {
|
|
8760
|
+
var items = _ref.items,
|
|
8761
|
+
className = _ref.className,
|
|
8762
|
+
defaultSelectedIndex = _ref.defaultSelectedIndex;
|
|
8763
|
+
var _useState = useState(defaultSelectedIndex != null ? defaultSelectedIndex : 0),
|
|
8764
|
+
selectedIndex = _useState[0],
|
|
8765
|
+
setSelectedIndex = _useState[1];
|
|
8766
|
+
var handleClick = function handleClick(index, onClick) {
|
|
8767
|
+
setSelectedIndex(index);
|
|
8768
|
+
if (onClick) onClick();
|
|
8769
|
+
};
|
|
8770
|
+
return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, null, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, {
|
|
8771
|
+
className: className
|
|
8772
|
+
}, items.map(function (item, index) {
|
|
8773
|
+
var text = item.text,
|
|
8774
|
+
_onClick = item.onClick;
|
|
8775
|
+
var isSelected = index === selectedIndex;
|
|
8776
|
+
return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, {
|
|
8777
|
+
key: index,
|
|
8778
|
+
backgroundColor: isSelected ? 'primary-black' : 'base-white',
|
|
8779
|
+
iconName: isSelected ? 'Confirm' : undefined,
|
|
8780
|
+
onClick: function onClick() {
|
|
8781
|
+
return handleClick(index, _onClick);
|
|
8782
|
+
},
|
|
8783
|
+
textColor: isSelected ? 'base-white' : 'base-black',
|
|
8784
|
+
pressedColor: "base-black",
|
|
8785
|
+
hoveredColor: "base-black"
|
|
8786
|
+
}, text);
|
|
8787
|
+
})));
|
|
8788
|
+
};
|
|
8789
|
+
|
|
8664
8790
|
var InformationCtaVariants = {
|
|
8665
8791
|
Primary: 'Primary',
|
|
8666
8792
|
Secondary: 'Secondary',
|
|
@@ -8690,10 +8816,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
8690
8816
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
8691
8817
|
};
|
|
8692
8818
|
|
|
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$
|
|
8819
|
+
var _templateObject$_, _templateObject2$L, _templateObject3$y, _templateObject4$s;
|
|
8820
|
+
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);
|
|
8821
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
8822
|
+
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
8823
|
var variant = _ref.variant,
|
|
8698
8824
|
theme = _ref.theme;
|
|
8699
8825
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -8860,13 +8986,13 @@ var Information = function Information(_ref) {
|
|
|
8860
8986
|
})))));
|
|
8861
8987
|
};
|
|
8862
8988
|
|
|
8863
|
-
var _templateObject
|
|
8864
|
-
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject
|
|
8989
|
+
var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$c, _templateObject8$8;
|
|
8990
|
+
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
8991
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
8866
8992
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
8867
8993
|
}, devices.mobile);
|
|
8868
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
8869
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8994
|
+
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);
|
|
8995
|
+
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
8996
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
8871
8997
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
8872
8998
|
});
|
|
@@ -8961,10 +9087,10 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
8961
9087
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
8962
9088
|
};
|
|
8963
9089
|
|
|
8964
|
-
var _templateObject
|
|
8965
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8966
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8967
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
9090
|
+
var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$n, _templateObject6$i, _templateObject7$d, _templateObject8$9;
|
|
9091
|
+
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);
|
|
9092
|
+
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);
|
|
9093
|
+
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
9094
|
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
9095
|
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
8970
9096
|
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);
|
|
@@ -9032,19 +9158,19 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
9032
9158
|
}, "Scroll Down"))) : null);
|
|
9033
9159
|
};
|
|
9034
9160
|
|
|
9035
|
-
var _templateObject$
|
|
9036
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9161
|
+
var _templateObject$11, _templateObject2$O, _templateObject3$B, _templateObject4$v, _templateObject5$o;
|
|
9162
|
+
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
9163
|
var color = _ref.color;
|
|
9038
9164
|
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
9165
|
}, devices.mobileAndTablet);
|
|
9040
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
9166
|
+
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
9167
|
var hasImage = _ref2.hasImage;
|
|
9042
9168
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
9043
9169
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
9044
9170
|
var hasImage = _ref3.hasImage;
|
|
9045
9171
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
9046
9172
|
});
|
|
9047
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
9173
|
+
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
9174
|
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
9175
|
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
9176
|
|
|
@@ -9076,10 +9202,10 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
9076
9202
|
})))));
|
|
9077
9203
|
};
|
|
9078
9204
|
|
|
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$
|
|
9205
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
|
|
9206
|
+
var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
9207
|
+
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"])));
|
|
9208
|
+
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
9209
|
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
9210
|
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
9211
|
var theme = _ref.theme;
|
|
@@ -9290,10 +9416,10 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
9290
9416
|
})))))))))));
|
|
9291
9417
|
};
|
|
9292
9418
|
|
|
9293
|
-
var _templateObject$
|
|
9294
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
9295
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
9296
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9419
|
+
var _templateObject$13, _templateObject2$Q, _templateObject3$D, _templateObject5$q, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6;
|
|
9420
|
+
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);
|
|
9421
|
+
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"])));
|
|
9422
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
9297
9423
|
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
9424
|
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
9425
|
var invert = _ref.invert,
|
|
@@ -9544,11 +9670,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
9544
9670
|
}), linkText))))));
|
|
9545
9671
|
};
|
|
9546
9672
|
|
|
9547
|
-
var _templateObject$
|
|
9548
|
-
var MorePages = /*#__PURE__*/styled.span(_templateObject$
|
|
9549
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$
|
|
9673
|
+
var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x;
|
|
9674
|
+
var MorePages = /*#__PURE__*/styled.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
9675
|
+
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
9676
|
// PageNumber extends bodyText but uses subtitle-1 font size
|
|
9551
|
-
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$
|
|
9677
|
+
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
9678
|
var active = _ref.active;
|
|
9553
9679
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
9554
9680
|
});
|
|
@@ -9618,10 +9744,10 @@ var Pagination = function Pagination(_ref) {
|
|
|
9618
9744
|
})))));
|
|
9619
9745
|
};
|
|
9620
9746
|
|
|
9621
|
-
var _templateObject$
|
|
9622
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9623
|
-
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9624
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9747
|
+
var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$g;
|
|
9748
|
+
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);
|
|
9749
|
+
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"])));
|
|
9750
|
+
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
9751
|
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
9752
|
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
9627
9753
|
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 +9808,13 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
9682
9808
|
}));
|
|
9683
9809
|
};
|
|
9684
9810
|
|
|
9685
|
-
var _templateObject$
|
|
9686
|
-
var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
9687
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
9811
|
+
var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z;
|
|
9812
|
+
var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9813
|
+
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
9814
|
var columnCount = _ref.columnCount;
|
|
9689
9815
|
return "repeat(" + columnCount + ", 1fr)";
|
|
9690
9816
|
}, devices.mobile, devices.tablet);
|
|
9691
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9817
|
+
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
9818
|
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
9819
|
|
|
9694
9820
|
// Get the total character length of a property in an array of objects
|
|
@@ -9807,14 +9933,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9807
9933
|
}, creditEntries);
|
|
9808
9934
|
};
|
|
9809
9935
|
|
|
9810
|
-
var _templateObject$
|
|
9936
|
+
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
9937
|
var LENGTH_TEXT = 28;
|
|
9812
9938
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9813
9939
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9814
9940
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9815
9941
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9816
9942
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9817
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9943
|
+
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
9944
|
var imageToLeft = _ref.imageToLeft;
|
|
9819
9945
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9820
9946
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9824,8 +9950,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$16 || (_templa
|
|
|
9824
9950
|
var asCard = _ref3.asCard;
|
|
9825
9951
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9826
9952
|
});
|
|
9827
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$
|
|
9828
|
-
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$
|
|
9953
|
+
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"])));
|
|
9954
|
+
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
9955
|
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
9956
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9831
9957
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
@@ -10059,21 +10185,21 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10059
10185
|
}))));
|
|
10060
10186
|
};
|
|
10061
10187
|
|
|
10062
|
-
var _templateObject$
|
|
10188
|
+
var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$t, _templateObject6$n, _templateObject7$i;
|
|
10063
10189
|
var LENGTH_TEXT$2 = 28;
|
|
10064
10190
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
10065
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
10191
|
+
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
10192
|
var imageToLeft = _ref.imageToLeft;
|
|
10067
10193
|
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
10194
|
}, devices.tablet, function (_ref2) {
|
|
10069
10195
|
var imageToLeft = _ref2.imageToLeft;
|
|
10070
10196
|
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
10197
|
}, devices.mobile);
|
|
10072
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10198
|
+
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
10199
|
var imageToLeft = _ref3.imageToLeft;
|
|
10074
10200
|
return imageToLeft ? 'left' : 'right';
|
|
10075
10201
|
}, devices.mobile);
|
|
10076
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
10202
|
+
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
10203
|
var imageToLeft = _ref4.imageToLeft;
|
|
10078
10204
|
return imageToLeft ? 'right' : 'left';
|
|
10079
10205
|
}, devices.mobile);
|
|
@@ -10102,8 +10228,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$i || (_templat
|
|
|
10102
10228
|
return '';
|
|
10103
10229
|
});
|
|
10104
10230
|
|
|
10105
|
-
var _templateObject$
|
|
10106
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10231
|
+
var _templateObject$19;
|
|
10232
|
+
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
10233
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10108
10234
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10109
10235
|
return aspectRatio;
|
|
@@ -10282,8 +10408,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
10282
10408
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
10283
10409
|
};
|
|
10284
10410
|
|
|
10285
|
-
var _templateObject$
|
|
10286
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10411
|
+
var _templateObject$1a;
|
|
10412
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
10287
10413
|
|
|
10288
10414
|
/**
|
|
10289
10415
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -10338,9 +10464,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
10338
10464
|
})));
|
|
10339
10465
|
};
|
|
10340
10466
|
|
|
10341
|
-
var _templateObject$
|
|
10342
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
10343
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10467
|
+
var _templateObject$1b, _templateObject2$W, _templateObject3$J;
|
|
10468
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10469
|
+
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
10470
|
var horizontalMode = _ref.horizontalMode;
|
|
10345
10471
|
if (horizontalMode) return 'row';
|
|
10346
10472
|
return 'column';
|
|
@@ -10348,7 +10474,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObjec
|
|
|
10348
10474
|
var gap = _ref2.gap;
|
|
10349
10475
|
return gap + "px";
|
|
10350
10476
|
});
|
|
10351
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10477
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
10352
10478
|
var darkMode = _ref3.darkMode;
|
|
10353
10479
|
if (darkMode) return 'var(--base-color-white)';
|
|
10354
10480
|
return 'var(--base-color-errorstate)';
|
|
@@ -10425,10 +10551,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
10425
10551
|
}, error))));
|
|
10426
10552
|
};
|
|
10427
10553
|
|
|
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$
|
|
10554
|
+
var _templateObject$1c, _templateObject2$X, _templateObject3$K;
|
|
10555
|
+
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);
|
|
10556
|
+
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"])));
|
|
10557
|
+
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
10558
|
|
|
10433
10559
|
/* eslint-disable react/no-danger */
|
|
10434
10560
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -10484,8 +10610,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
10484
10610
|
return null;
|
|
10485
10611
|
};
|
|
10486
10612
|
|
|
10487
|
-
var _templateObject$
|
|
10488
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
10613
|
+
var _templateObject$1d;
|
|
10614
|
+
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
10615
|
|
|
10490
10616
|
var SectionTitle = function SectionTitle(_ref) {
|
|
10491
10617
|
var title = _ref.title,
|
|
@@ -10513,8 +10639,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
10513
10639
|
}, description)))));
|
|
10514
10640
|
};
|
|
10515
10641
|
|
|
10516
|
-
var _templateObject$
|
|
10517
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
10642
|
+
var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$u, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
|
|
10643
|
+
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
10644
|
var theme = _ref.theme;
|
|
10519
10645
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
10520
10646
|
}, function (_ref2) {
|
|
@@ -10524,11 +10650,11 @@ var stateStyles = /*#__PURE__*/css(_templateObject$1d || (_templateObject$1d = /
|
|
|
10524
10650
|
var theme = _ref3.theme;
|
|
10525
10651
|
return theme.colors.lightgrey;
|
|
10526
10652
|
});
|
|
10527
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
10653
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
10528
10654
|
var theme = _ref4.theme;
|
|
10529
10655
|
return theme.colors.darkgrey;
|
|
10530
10656
|
});
|
|
10531
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
10657
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
10532
10658
|
var listItemStyles = /*#__PURE__*/css(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
10533
10659
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
10534
10660
|
var theme = _ref5.theme;
|
|
@@ -10894,9 +11020,9 @@ function Select(_ref3) {
|
|
|
10894
11020
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10895
11021
|
}
|
|
10896
11022
|
|
|
10897
|
-
var _templateObject$
|
|
10898
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
10899
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11023
|
+
var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$D;
|
|
11024
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
11025
|
+
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
11026
|
var width = _ref.width;
|
|
10901
11027
|
if (!width) return 'none';
|
|
10902
11028
|
return width + "px";
|
|
@@ -10913,7 +11039,7 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateOb
|
|
|
10913
11039
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
10914
11040
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10915
11041
|
});
|
|
10916
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
11042
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
10917
11043
|
var darkMode = _ref5.darkMode;
|
|
10918
11044
|
if (darkMode) return "var(--base-color-white)";
|
|
10919
11045
|
return "var(--base-color-black)";
|
|
@@ -11032,8 +11158,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
11032
11158
|
})));
|
|
11033
11159
|
};
|
|
11034
11160
|
|
|
11035
|
-
var _templateObject$
|
|
11036
|
-
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$
|
|
11161
|
+
var _templateObject$1g, _templateObject2$_;
|
|
11162
|
+
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
11163
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
11038
11164
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
11039
11165
|
return aspectRatio;
|
|
@@ -11043,7 +11169,7 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1f || (_templateObjec
|
|
|
11043
11169
|
height = _ref2.height;
|
|
11044
11170
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
11045
11171
|
});
|
|
11046
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
11172
|
+
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
11173
|
|
|
11048
11174
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
11049
11175
|
var caption = _ref.caption,
|
|
@@ -11077,13 +11203,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
11077
11203
|
})), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
11078
11204
|
};
|
|
11079
11205
|
|
|
11080
|
-
var _templateObject$
|
|
11081
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
11082
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2
|
|
11206
|
+
var _templateObject$1h, _templateObject2$$, _templateObject3$N;
|
|
11207
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
11208
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
11083
11209
|
var displayAttribution = _ref.displayAttribution;
|
|
11084
11210
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
11085
11211
|
});
|
|
11086
|
-
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
11212
|
+
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
11213
|
|
|
11088
11214
|
/* eslint-disable react/no-danger */
|
|
11089
11215
|
var Quote = function Quote(_ref) {
|
|
@@ -11108,10 +11234,10 @@ var Quote = function Quote(_ref) {
|
|
|
11108
11234
|
}, attribution))));
|
|
11109
11235
|
};
|
|
11110
11236
|
|
|
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$
|
|
11237
|
+
var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$v, _templateObject6$p;
|
|
11238
|
+
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"])));
|
|
11239
|
+
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"])));
|
|
11240
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
11115
11241
|
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
11116
11242
|
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
11243
|
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 +11278,10 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
11152
11278
|
}, title)))));
|
|
11153
11279
|
};
|
|
11154
11280
|
|
|
11155
|
-
var _templateObject$
|
|
11156
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
11157
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
11158
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
11281
|
+
var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$F, _templateObject5$w;
|
|
11282
|
+
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"])));
|
|
11283
|
+
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"])));
|
|
11284
|
+
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
11285
|
var isVisible = _ref.isVisible;
|
|
11160
11286
|
return isVisible ? 'visible' : 'hidden';
|
|
11161
11287
|
});
|
|
@@ -11244,10 +11370,10 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
11244
11370
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
11245
11371
|
};
|
|
11246
11372
|
|
|
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$
|
|
11373
|
+
var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$G, _templateObject5$x;
|
|
11374
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
11375
|
+
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);
|
|
11376
|
+
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
11377
|
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
11378
|
var isActive = _ref.isActive;
|
|
11253
11379
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
@@ -11408,10 +11534,10 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
11408
11534
|
});
|
|
11409
11535
|
};
|
|
11410
11536
|
|
|
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$
|
|
11537
|
+
var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$y, _templateObject6$q;
|
|
11538
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11539
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11540
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
11415
11541
|
var color = _ref.color;
|
|
11416
11542
|
return "var(--base-color-" + color + ")";
|
|
11417
11543
|
});
|
|
@@ -11502,10 +11628,10 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
11502
11628
|
}, strengthLabel))));
|
|
11503
11629
|
};
|
|
11504
11630
|
|
|
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$
|
|
11631
|
+
var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$z, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
|
|
11632
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11633
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11634
|
+
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11509
11635
|
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
11636
|
return "var(--base-color-" + props.lineColor + ")";
|
|
11511
11637
|
}, function (props) {
|
|
@@ -11706,16 +11832,16 @@ var Table = function Table(_ref) {
|
|
|
11706
11832
|
}))))))))));
|
|
11707
11833
|
};
|
|
11708
11834
|
|
|
11709
|
-
var _templateObject$
|
|
11710
|
-
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$
|
|
11835
|
+
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;
|
|
11836
|
+
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
11837
|
var theme = _ref.theme;
|
|
11712
11838
|
return "var(--color-" + theme + ")";
|
|
11713
11839
|
}, function (_ref2) {
|
|
11714
11840
|
var theme = _ref2.theme;
|
|
11715
11841
|
return "var(--color-" + theme + ")";
|
|
11716
11842
|
});
|
|
11717
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
11718
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
11843
|
+
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);
|
|
11844
|
+
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
11845
|
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
11846
|
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
11847
|
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 +12256,9 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
12130
12256
|
}))))));
|
|
12131
12257
|
};
|
|
12132
12258
|
|
|
12133
|
-
var _templateObject$
|
|
12134
|
-
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
12135
|
-
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject3$
|
|
12259
|
+
var _templateObject$1o, _templateObject3$U, _templateObject4$K;
|
|
12260
|
+
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);
|
|
12261
|
+
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
12262
|
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
12263
|
|
|
12138
12264
|
var AnchorBar = function AnchorBar(_ref) {
|
|
@@ -12342,22 +12468,25 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
12342
12468
|
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
12469
|
styleInject(css_248z$1);
|
|
12344
12470
|
|
|
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"};
|
|
12471
|
+
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
12472
|
styleInject(css_248z$2);
|
|
12348
12473
|
|
|
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
|
|
12474
|
+
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";
|
|
12475
|
+
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
12351
12476
|
styleInject(css_248z$3);
|
|
12352
12477
|
|
|
12353
|
-
var css_248z$4 = ".
|
|
12354
|
-
var
|
|
12478
|
+
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";
|
|
12479
|
+
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
12355
12480
|
styleInject(css_248z$4);
|
|
12356
12481
|
|
|
12357
|
-
var css_248z$5 = ".
|
|
12358
|
-
var
|
|
12482
|
+
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};";
|
|
12483
|
+
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
12359
12484
|
styleInject(css_248z$5);
|
|
12360
12485
|
|
|
12486
|
+
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";
|
|
12487
|
+
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
12488
|
+
styleInject(css_248z$6);
|
|
12489
|
+
|
|
12361
12490
|
/* eslint-disable react/jsx-no-useless-fragment */
|
|
12362
12491
|
var getThemeClass = function getThemeClass(theme) {
|
|
12363
12492
|
// Always include the base (core) theme class
|
|
@@ -12456,9 +12585,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
12456
12585
|
})));
|
|
12457
12586
|
};
|
|
12458
12587
|
|
|
12459
|
-
var _templateObject$
|
|
12460
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
12461
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12588
|
+
var _templateObject$1p, _templateObject3$V;
|
|
12589
|
+
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"])));
|
|
12590
|
+
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
12591
|
|
|
12463
12592
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
12464
12593
|
var children = _ref.children;
|
|
@@ -12493,8 +12622,8 @@ var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
|
12493
12622
|
}))));
|
|
12494
12623
|
};
|
|
12495
12624
|
|
|
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) {
|
|
12625
|
+
var _templateObject$1q;
|
|
12626
|
+
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
12627
|
var theme = _ref.theme;
|
|
12499
12628
|
return theme.colors.primary;
|
|
12500
12629
|
}, function (_ref2) {
|
|
@@ -13448,5 +13577,5 @@ var HarmonicSize = {
|
|
|
13448
13577
|
Large: 'large'
|
|
13449
13578
|
};
|
|
13450
13579
|
|
|
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 };
|
|
13580
|
+
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
13581
|
//# sourceMappingURL=harmonic.esm.js.map
|