@royaloperahouse/harmonic 0.6.0 → 0.6.1-b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +252 -43
- package/dist/components/atoms/ControlledDropdown/ControlledDropdown.d.ts +2 -2
- package/dist/components/atoms/ControlledDropdown/ControlledDropdown.style.d.ts +2 -2
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/Search/Search.d.ts +1 -1
- package/dist/components/atoms/Search/Search.style.d.ts +1 -1
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/HotFilters/HotFilters.d.ts +4 -0
- package/dist/components/molecules/HotFilters/HotFilters.style.d.ts +3 -0
- package/dist/components/molecules/HotFilters/index.d.ts +2 -0
- package/dist/components/molecules/NavTop/NavTop.d.ts +1 -1
- package/dist/components/molecules/SearchBar/SearchBar.d.ts +1 -1
- package/dist/components/molecules/SearchBar/SearchBar.style.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/components/organisms/Navigation/Navigation.style.d.ts +1 -1
- package/dist/harmonic.cjs.development.css +319 -0
- package/dist/harmonic.cjs.development.js +341 -212
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +353 -222
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/helpers/accessibility.d.ts +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +1 -0
- package/dist/types/navigation.d.ts +12 -0
- package/dist/types/types.d.ts +22 -1
- package/package.json +1 -1
- package/README.GIT +0 -278
|
@@ -374,7 +374,7 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
|
374
374
|
size = _ref2.size,
|
|
375
375
|
em = _ref2.em,
|
|
376
376
|
_ref2$color = _ref2.color,
|
|
377
|
-
color = _ref2$color === void 0 ? '
|
|
377
|
+
color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
|
|
378
378
|
serif = _ref2.serif,
|
|
379
379
|
Tag = _ref2.hierarchy,
|
|
380
380
|
className = _ref2.className;
|
|
@@ -394,7 +394,7 @@ var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
|
|
|
394
394
|
var children = _ref3.children,
|
|
395
395
|
size = _ref3.size,
|
|
396
396
|
_ref3$color = _ref3.color,
|
|
397
|
-
color = _ref3$color === void 0 ? '
|
|
397
|
+
color = _ref3$color === void 0 ? 'inherit' : _ref3$color,
|
|
398
398
|
className = _ref3.className;
|
|
399
399
|
var classNames = createClassNames('subtitle', {
|
|
400
400
|
size: size,
|
|
@@ -411,7 +411,7 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
|
|
|
411
411
|
_ref4$size = _ref4.size,
|
|
412
412
|
size = _ref4$size === void 0 ? 'medium' : _ref4$size,
|
|
413
413
|
_ref4$color = _ref4.color,
|
|
414
|
-
color = _ref4$color === void 0 ? '
|
|
414
|
+
color = _ref4$color === void 0 ? 'inherit' : _ref4$color,
|
|
415
415
|
className = _ref4.className,
|
|
416
416
|
props = _objectWithoutPropertiesLoose(_ref4, _excluded);
|
|
417
417
|
var classNames = createClassNames('bodycopy', {
|
|
@@ -428,7 +428,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
|
|
|
428
428
|
var children = _ref5.children,
|
|
429
429
|
size = _ref5.size,
|
|
430
430
|
_ref5$color = _ref5.color,
|
|
431
|
-
color = _ref5$color === void 0 ? '
|
|
431
|
+
color = _ref5$color === void 0 ? 'inherit' : _ref5$color,
|
|
432
432
|
className = _ref5.className,
|
|
433
433
|
props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
|
|
434
434
|
var classNames = createClassNames('overline', {
|
|
@@ -444,7 +444,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
|
|
|
444
444
|
var ButtonText = function ButtonText(_ref6) {
|
|
445
445
|
var children = _ref6.children,
|
|
446
446
|
_ref6$color = _ref6.color,
|
|
447
|
-
color = _ref6$color === void 0 ? '
|
|
447
|
+
color = _ref6$color === void 0 ? 'inherit' : _ref6$color,
|
|
448
448
|
className = _ref6.className;
|
|
449
449
|
var classNames = createClassNames('buttontext', {
|
|
450
450
|
color: color,
|
|
@@ -457,7 +457,7 @@ var ButtonText = function ButtonText(_ref6) {
|
|
|
457
457
|
var Caption = function Caption(_ref7) {
|
|
458
458
|
var children = _ref7.children,
|
|
459
459
|
_ref7$color = _ref7.color,
|
|
460
|
-
color = _ref7$color === void 0 ? '
|
|
460
|
+
color = _ref7$color === void 0 ? 'inherit' : _ref7$color,
|
|
461
461
|
className = _ref7.className;
|
|
462
462
|
var classNames = createClassNames('captiontext', {
|
|
463
463
|
color: color,
|
|
@@ -470,7 +470,7 @@ var Caption = function Caption(_ref7) {
|
|
|
470
470
|
var NavigationText = function NavigationText(_ref8) {
|
|
471
471
|
var children = _ref8.children,
|
|
472
472
|
_ref8$color = _ref8.color,
|
|
473
|
-
color = _ref8$color === void 0 ? '
|
|
473
|
+
color = _ref8$color === void 0 ? 'inherit' : _ref8$color,
|
|
474
474
|
className = _ref8.className;
|
|
475
475
|
var classNames = createClassNames('navigationtext', {
|
|
476
476
|
color: color,
|
|
@@ -2939,7 +2939,7 @@ var OptionsContainer = /*#__PURE__*/styled__default.div(_templateObject3 || (_te
|
|
|
2939
2939
|
|
|
2940
2940
|
var _templateObject$7, _templateObject2$5, _templateObject3$1, _templateObject4;
|
|
2941
2941
|
var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
2942
|
-
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.
|
|
2942
|
+
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.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) {
|
|
2943
2943
|
var active = _ref.active;
|
|
2944
2944
|
if (active) {
|
|
2945
2945
|
return "\n & {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n } \n ";
|
|
@@ -2947,12 +2947,12 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templ
|
|
|
2947
2947
|
return '';
|
|
2948
2948
|
});
|
|
2949
2949
|
var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled__default(ControlledDropdownHeaderContainer).attrs({
|
|
2950
|
-
as: '
|
|
2950
|
+
as: 'button'
|
|
2951
2951
|
})(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
2952
2952
|
var IconWrapper = /*#__PURE__*/styled__default.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n\n span > svg path {\n fill: var(--color-primary-black);\n }\n"])));
|
|
2953
2953
|
|
|
2954
2954
|
/* eslint-disable no-useless-return */
|
|
2955
|
-
var ControlledDropdown = function
|
|
2955
|
+
var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
2956
2956
|
var text = _ref.text,
|
|
2957
2957
|
options = _ref.options,
|
|
2958
2958
|
active = _ref.active,
|
|
@@ -2960,32 +2960,22 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
2960
2960
|
onOptionClick = _ref.onOptionClick,
|
|
2961
2961
|
_onMouseEnter = _ref.onMouseEnter,
|
|
2962
2962
|
_onMouseLeave = _ref.onMouseLeave,
|
|
2963
|
+
_onFocusLeave = _ref.onFocusLeave,
|
|
2963
2964
|
onReset = _ref.onReset,
|
|
2964
2965
|
_onFocus = _ref.onFocus,
|
|
2965
2966
|
_onBlur = _ref.onBlur,
|
|
2966
2967
|
className = _ref.className;
|
|
2967
|
-
|
|
2968
|
-
var
|
|
2968
|
+
ControlledDropdown.displayName = 'ControlledDropdown';
|
|
2969
|
+
var internalRef = React.useRef(null);
|
|
2970
|
+
React.useImperativeHandle(ref, function () {
|
|
2971
|
+
return internalRef.current;
|
|
2972
|
+
});
|
|
2973
|
+
var resetHandler = function resetHandler() {
|
|
2969
2974
|
return onReset == null ? void 0 : onReset();
|
|
2970
|
-
}
|
|
2971
|
-
React.
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
var _ref$current;
|
|
2975
|
-
if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
|
|
2976
|
-
return;
|
|
2977
|
-
} else if (active) {
|
|
2978
|
-
resetHandler();
|
|
2979
|
-
}
|
|
2980
|
-
};
|
|
2981
|
-
document.addEventListener('click', mouseClickHandler);
|
|
2982
|
-
return function () {
|
|
2983
|
-
document.removeEventListener('click', mouseClickHandler);
|
|
2984
|
-
};
|
|
2985
|
-
}
|
|
2986
|
-
// eslint-disable-next-line consistent-return
|
|
2987
|
-
return;
|
|
2988
|
-
}, [ref, resetHandler, active]);
|
|
2975
|
+
};
|
|
2976
|
+
var isDropdown = React.useMemo(function () {
|
|
2977
|
+
return !!(options != null && options.length);
|
|
2978
|
+
}, [options]);
|
|
2989
2979
|
var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
|
|
2990
2980
|
if (e.key === 'Enter') {
|
|
2991
2981
|
onOptionClick == null || onOptionClick(link);
|
|
@@ -3005,13 +2995,15 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
3005
2995
|
_onBlur == null || _onBlur();
|
|
3006
2996
|
}
|
|
3007
2997
|
};
|
|
3008
|
-
var isDropdown = !!(options != null && options.length);
|
|
3009
2998
|
var wrapperEvents = {
|
|
3010
2999
|
onMouseEnter: function onMouseEnter() {
|
|
3011
3000
|
return _onMouseEnter == null ? void 0 : _onMouseEnter();
|
|
3012
3001
|
},
|
|
3013
3002
|
onMouseLeave: function onMouseLeave() {
|
|
3014
3003
|
return _onMouseLeave == null ? void 0 : _onMouseLeave();
|
|
3004
|
+
},
|
|
3005
|
+
onFocusLeave: function onFocusLeave() {
|
|
3006
|
+
return _onFocusLeave == null ? void 0 : _onFocusLeave();
|
|
3015
3007
|
}
|
|
3016
3008
|
};
|
|
3017
3009
|
var headerEvents = {
|
|
@@ -3027,21 +3019,51 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
3027
3019
|
},
|
|
3028
3020
|
onKeyDown: handleHeaderKeyDown
|
|
3029
3021
|
};
|
|
3022
|
+
React.useEffect(function () {
|
|
3023
|
+
var mouseEvent = function mouseEvent(e) {
|
|
3024
|
+
var _internalRef$current;
|
|
3025
|
+
if (internalRef != null && (_internalRef$current = internalRef.current) != null && _internalRef$current.contains(e.target)) return;
|
|
3026
|
+
if (active) resetHandler();
|
|
3027
|
+
};
|
|
3028
|
+
if (window.innerWidth > breakpoints.sm) {
|
|
3029
|
+
document.addEventListener('click', mouseEvent);
|
|
3030
|
+
}
|
|
3031
|
+
return function () {
|
|
3032
|
+
document.removeEventListener('click', mouseEvent);
|
|
3033
|
+
};
|
|
3034
|
+
}, [resetHandler, active]);
|
|
3035
|
+
React.useEffect(function () {
|
|
3036
|
+
var handleFocusOut = function handleFocusOut(e) {
|
|
3037
|
+
if (internalRef.current && !internalRef.current.contains(e.relatedTarget)) {
|
|
3038
|
+
_onFocusLeave == null || _onFocusLeave();
|
|
3039
|
+
}
|
|
3040
|
+
};
|
|
3041
|
+
var node = internalRef.current;
|
|
3042
|
+
if (node) node.addEventListener('focusout', handleFocusOut);
|
|
3043
|
+
return function () {
|
|
3044
|
+
return node == null ? void 0 : node.removeEventListener('focusout', handleFocusOut);
|
|
3045
|
+
};
|
|
3046
|
+
}, [_onFocusLeave]);
|
|
3030
3047
|
return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
|
|
3031
|
-
ref:
|
|
3048
|
+
ref: internalRef
|
|
3032
3049
|
}, wrapperEvents, {
|
|
3033
3050
|
className: className
|
|
3034
3051
|
}), isDropdown ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
|
|
3035
3052
|
active: active
|
|
3036
3053
|
}, headerEvents, {
|
|
3037
|
-
|
|
3038
|
-
|
|
3054
|
+
"data-testid": "span-container",
|
|
3055
|
+
role: "menuitem",
|
|
3056
|
+
"aria-controls": "dropdown-menu",
|
|
3057
|
+
"aria-haspopup": "menu",
|
|
3058
|
+
"aria-expanded": active
|
|
3039
3059
|
}), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
|
|
3040
3060
|
"data-testid": "dropdown-icon"
|
|
3041
3061
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
3042
3062
|
iconName: "DropdownArrow"
|
|
3043
3063
|
}))), active && options ? (/*#__PURE__*/React__default.createElement(OptionsContainer, {
|
|
3044
|
-
withOptionsInMobile: true
|
|
3064
|
+
withOptionsInMobile: true,
|
|
3065
|
+
role: "menu",
|
|
3066
|
+
id: "dropdown-menu"
|
|
3045
3067
|
}, options.map(function (optionItem, index) {
|
|
3046
3068
|
return /*#__PURE__*/React__default.createElement(OptionItem, {
|
|
3047
3069
|
key: "key-" + index + "-" + optionItem.option,
|
|
@@ -3055,15 +3077,18 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
3055
3077
|
onBlur: function onBlur() {
|
|
3056
3078
|
return handleOptionBlur(index);
|
|
3057
3079
|
},
|
|
3058
|
-
href: optionItem.optionLink
|
|
3080
|
+
href: optionItem.optionLink,
|
|
3081
|
+
role: "menuitem"
|
|
3059
3082
|
}, optionItem.option);
|
|
3060
3083
|
}))) : null)) : (/*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
|
|
3061
3084
|
active: active
|
|
3062
3085
|
}, headerEvents, {
|
|
3063
3086
|
"data-testid": "link-container",
|
|
3087
|
+
"aria-label": text,
|
|
3088
|
+
role: "menuitem",
|
|
3064
3089
|
tabIndex: 0
|
|
3065
3090
|
}), text)));
|
|
3066
|
-
};
|
|
3091
|
+
});
|
|
3067
3092
|
|
|
3068
3093
|
var _templateObject$8;
|
|
3069
3094
|
var Grid = /*#__PURE__*/styled__default.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"])));
|
|
@@ -3747,6 +3772,7 @@ var Tab = function Tab(_ref) {
|
|
|
3747
3772
|
className = _ref.className,
|
|
3748
3773
|
role = _ref.role,
|
|
3749
3774
|
ariaLabel = _ref.ariaLabel,
|
|
3775
|
+
tabLinkId = _ref.tabLinkId,
|
|
3750
3776
|
color = _ref.color;
|
|
3751
3777
|
var clickHandler = function clickHandler() {
|
|
3752
3778
|
if (onClick) {
|
|
@@ -3777,8 +3803,9 @@ var Tab = function Tab(_ref) {
|
|
|
3777
3803
|
tabIndex: 0,
|
|
3778
3804
|
className: className
|
|
3779
3805
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
3780
|
-
|
|
3806
|
+
id: tabLinkId,
|
|
3781
3807
|
trimText: trimText,
|
|
3808
|
+
color: color,
|
|
3782
3809
|
withTextInMobile: withTextInMobile,
|
|
3783
3810
|
"aria-hidden": "true"
|
|
3784
3811
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -5112,7 +5139,7 @@ var MobileMenuContainer = /*#__PURE__*/styled__default(Grid)(_templateObject7$3
|
|
|
5112
5139
|
return showSearch ? '110px' : '12px';
|
|
5113
5140
|
});
|
|
5114
5141
|
var LogoContainer = /*#__PURE__*/styled__default.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);
|
|
5115
|
-
var LogoContainerMobile = /*#__PURE__*/styled__default.
|
|
5142
|
+
var LogoContainerMobile = /*#__PURE__*/styled__default.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);
|
|
5116
5143
|
var MenuContainer = /*#__PURE__*/styled__default.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);
|
|
5117
5144
|
var NavWrapper = /*#__PURE__*/styled__default.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);
|
|
5118
5145
|
var NavContainer = /*#__PURE__*/styled__default.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);
|
|
@@ -5286,7 +5313,7 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5286
5313
|
};
|
|
5287
5314
|
|
|
5288
5315
|
var _templateObject$A, _templateObject2$q;
|
|
5289
|
-
var SearchContainer = /*#__PURE__*/styled__default.
|
|
5316
|
+
var SearchContainer = /*#__PURE__*/styled__default.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) {
|
|
5290
5317
|
var selected = _ref.selected;
|
|
5291
5318
|
if (selected) {
|
|
5292
5319
|
return "\n border-bottom: 1px solid var(--color-primary-red);\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
|
|
@@ -5295,31 +5322,26 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_te
|
|
|
5295
5322
|
});
|
|
5296
5323
|
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5297
5324
|
|
|
5298
|
-
var Search$1 = function
|
|
5325
|
+
var Search$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
5299
5326
|
var _ref$selected = _ref.selected,
|
|
5300
5327
|
selected = _ref$selected === void 0 ? false : _ref$selected,
|
|
5301
5328
|
onClick = _ref.onClick,
|
|
5302
5329
|
className = _ref.className;
|
|
5303
|
-
|
|
5304
|
-
if (e.key === 'Enter') {
|
|
5305
|
-
onClick == null || onClick();
|
|
5306
|
-
}
|
|
5307
|
-
};
|
|
5330
|
+
Search$1.displayName = 'Search';
|
|
5308
5331
|
return /*#__PURE__*/React__default.createElement(SearchContainer, {
|
|
5309
|
-
role: "button",
|
|
5310
5332
|
"aria-label": "Search",
|
|
5311
5333
|
selected: selected,
|
|
5312
5334
|
onClick: onClick,
|
|
5313
|
-
onKeyDown: onKeyDownHandler,
|
|
5314
5335
|
"data-testid": "search-icon",
|
|
5315
5336
|
tabIndex: 0,
|
|
5316
|
-
className: className
|
|
5337
|
+
className: className,
|
|
5338
|
+
ref: ref
|
|
5317
5339
|
}, /*#__PURE__*/React__default.createElement(SvgContainer$1, {
|
|
5318
5340
|
"aria-hidden": "true"
|
|
5319
5341
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5320
5342
|
iconName: "Search"
|
|
5321
5343
|
})));
|
|
5322
|
-
};
|
|
5344
|
+
});
|
|
5323
5345
|
|
|
5324
5346
|
/* eslint-disable react/jsx-no-useless-fragment */
|
|
5325
5347
|
var Dropdown = function Dropdown(_ref) {
|
|
@@ -5341,6 +5363,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5341
5363
|
className = _ref.className,
|
|
5342
5364
|
role = _ref.role,
|
|
5343
5365
|
ariaLabel = _ref.ariaLabel,
|
|
5366
|
+
tabLinkId = _ref.tabLinkId,
|
|
5344
5367
|
trimTabText = _ref.trimTabText;
|
|
5345
5368
|
var node = React.useRef();
|
|
5346
5369
|
var _useState = React.useState(false),
|
|
@@ -5437,6 +5460,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
5437
5460
|
};
|
|
5438
5461
|
var renderTab = function renderTab() {
|
|
5439
5462
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
5463
|
+
tabLinkId: tabLinkId,
|
|
5440
5464
|
trimText: trimTabText,
|
|
5441
5465
|
title: title,
|
|
5442
5466
|
titleLink: titleLink,
|
|
@@ -5516,7 +5540,8 @@ var Account = function Account(_ref) {
|
|
|
5516
5540
|
iconName: iconName,
|
|
5517
5541
|
withOptionsInMobile: false,
|
|
5518
5542
|
withIcon: "left",
|
|
5519
|
-
className: className
|
|
5543
|
+
className: className,
|
|
5544
|
+
tabLinkId: "account-link"
|
|
5520
5545
|
});
|
|
5521
5546
|
};
|
|
5522
5547
|
|
|
@@ -5534,12 +5559,14 @@ var NavTop = function NavTop(_ref) {
|
|
|
5534
5559
|
onClickSearch = _ref.onClickSearch,
|
|
5535
5560
|
_ref$isShowSearch = _ref.isShowSearch,
|
|
5536
5561
|
isShowSearch = _ref$isShowSearch === void 0 ? false : _ref$isShowSearch,
|
|
5537
|
-
className = _ref.className
|
|
5562
|
+
className = _ref.className,
|
|
5563
|
+
searchButtonRef = _ref.searchButtonRef;
|
|
5538
5564
|
return /*#__PURE__*/React__default.createElement(NavTopContainer$1, {
|
|
5539
5565
|
className: className
|
|
5540
5566
|
}, /*#__PURE__*/React__default.createElement(Search$1, {
|
|
5541
5567
|
onClick: onClickSearch,
|
|
5542
|
-
selected: isShowSearch
|
|
5568
|
+
selected: isShowSearch,
|
|
5569
|
+
ref: searchButtonRef
|
|
5543
5570
|
}), /*#__PURE__*/React__default.createElement(Basket$1, {
|
|
5544
5571
|
link: basketLink,
|
|
5545
5572
|
text: basketText,
|
|
@@ -5585,6 +5612,7 @@ var Tabs = function Tabs(_ref) {
|
|
|
5585
5612
|
var _useState3 = React.useState(-1),
|
|
5586
5613
|
hoverOverDropdown = _useState3[0],
|
|
5587
5614
|
setHoverOverDropdown = _useState3[1];
|
|
5615
|
+
var dropdownRefs = React.useRef([]);
|
|
5588
5616
|
var onClickHandler = function onClickHandler(value) {
|
|
5589
5617
|
setOpenMenu(value);
|
|
5590
5618
|
if (onShowMenu) {
|
|
@@ -5624,23 +5652,25 @@ var Tabs = function Tabs(_ref) {
|
|
|
5624
5652
|
setHoverOverDropdown(-1);
|
|
5625
5653
|
}
|
|
5626
5654
|
};
|
|
5627
|
-
var
|
|
5628
|
-
|
|
5655
|
+
var onDropdownFocusLeave = function onDropdownFocusLeave() {
|
|
5656
|
+
onResetActive();
|
|
5629
5657
|
};
|
|
5630
|
-
var
|
|
5631
|
-
var
|
|
5632
|
-
|
|
5658
|
+
var handleBlur = function handleBlur(index) {
|
|
5659
|
+
var currentDropdown = dropdownRefs.current[index];
|
|
5660
|
+
var active = document.activeElement;
|
|
5661
|
+
if (currentDropdown && (!active || !currentDropdown.contains(active))) {
|
|
5633
5662
|
onResetActive();
|
|
5634
5663
|
}
|
|
5635
5664
|
};
|
|
5636
5665
|
return /*#__PURE__*/React__default.createElement(TabsContainer, {
|
|
5666
|
+
role: "menubar",
|
|
5637
5667
|
className: className
|
|
5638
5668
|
}, /*#__PURE__*/React__default.createElement(ItemsContainer, {
|
|
5639
5669
|
showMenu: showMenu
|
|
5640
5670
|
}, items.map(function (item, index) {
|
|
5641
5671
|
return /*#__PURE__*/React__default.createElement(ControlledDropdown, {
|
|
5642
5672
|
key: "key-" + item.title,
|
|
5643
|
-
text: item.title,
|
|
5673
|
+
text: item.title || '',
|
|
5644
5674
|
options: item.options,
|
|
5645
5675
|
onClick: function onClick() {
|
|
5646
5676
|
return onDropdownClick(index, item.titleLink);
|
|
@@ -5652,17 +5682,23 @@ var Tabs = function Tabs(_ref) {
|
|
|
5652
5682
|
onMouseLeave: function onMouseLeave() {
|
|
5653
5683
|
return onDropdownMouseLeave();
|
|
5654
5684
|
},
|
|
5655
|
-
|
|
5656
|
-
return
|
|
5685
|
+
onFocusLeave: function onFocusLeave() {
|
|
5686
|
+
return onDropdownFocusLeave();
|
|
5657
5687
|
},
|
|
5658
5688
|
onBlur: function onBlur() {
|
|
5659
|
-
return
|
|
5689
|
+
return handleBlur(index);
|
|
5660
5690
|
},
|
|
5661
5691
|
onReset: onResetActive,
|
|
5662
|
-
active: isActiveDropdown(index)
|
|
5692
|
+
active: isActiveDropdown(index),
|
|
5693
|
+
ref: function ref(el) {
|
|
5694
|
+
dropdownRefs.current[index] = el;
|
|
5695
|
+
}
|
|
5663
5696
|
});
|
|
5664
5697
|
})), !showMenu && (/*#__PURE__*/React__default.createElement(MenuContainer$1, null, openMenu ? (/*#__PURE__*/React__default.createElement("a", {
|
|
5665
5698
|
"data-testid": "mobile-menu-close",
|
|
5699
|
+
role: "button",
|
|
5700
|
+
"aria-label": "Close menu",
|
|
5701
|
+
tabIndex: 0,
|
|
5666
5702
|
onClick: function onClick(e) {
|
|
5667
5703
|
e.preventDefault();
|
|
5668
5704
|
onClickHandler(false);
|
|
@@ -5672,6 +5708,9 @@ var Tabs = function Tabs(_ref) {
|
|
|
5672
5708
|
iconName: "Close"
|
|
5673
5709
|
}))) : (/*#__PURE__*/React__default.createElement(MenuItem, null, /*#__PURE__*/React__default.createElement("a", {
|
|
5674
5710
|
"data-testid": "mobile-menu-button",
|
|
5711
|
+
role: "button",
|
|
5712
|
+
"aria-label": "Open menu",
|
|
5713
|
+
tabIndex: 0,
|
|
5675
5714
|
onClick: function onClick(e) {
|
|
5676
5715
|
e.preventDefault();
|
|
5677
5716
|
onClickHandler(true);
|
|
@@ -5682,30 +5721,56 @@ var Tabs = function Tabs(_ref) {
|
|
|
5682
5721
|
var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject5$a, _templateObject6$7, _templateObject7$4;
|
|
5683
5722
|
var SearchBarContainer = /*#__PURE__*/styled__default.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);
|
|
5684
5723
|
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
5685
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.
|
|
5724
|
+
var SvgContainerClose = /*#__PURE__*/styled__default.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"])));
|
|
5686
5725
|
var InputContainer = /*#__PURE__*/styled__default.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);
|
|
5687
5726
|
var TextLinkWrapper$1 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
5688
5727
|
var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-right: 8px;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5689
5728
|
|
|
5729
|
+
function useFocusTrap(containerRef, onEscape) {
|
|
5730
|
+
React.useEffect(function () {
|
|
5731
|
+
var container = containerRef.current;
|
|
5732
|
+
if (!container) return undefined;
|
|
5733
|
+
var focusableSelectors = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
|
|
5734
|
+
var focusableEls = container.querySelectorAll(focusableSelectors);
|
|
5735
|
+
var firstEl = focusableEls[0];
|
|
5736
|
+
var lastEl = focusableEls[focusableEls.length - 1];
|
|
5737
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
5738
|
+
if (e.key === 'Tab') {
|
|
5739
|
+
if (focusableEls.length === 0) return;
|
|
5740
|
+
if (e.shiftKey && document.activeElement === firstEl) {
|
|
5741
|
+
e.preventDefault();
|
|
5742
|
+
lastEl == null || lastEl.focus();
|
|
5743
|
+
} else if (!e.shiftKey && document.activeElement === lastEl) {
|
|
5744
|
+
e.preventDefault();
|
|
5745
|
+
firstEl == null || firstEl.focus();
|
|
5746
|
+
}
|
|
5747
|
+
}
|
|
5748
|
+
if (e.key === 'Escape') {
|
|
5749
|
+
onEscape == null || onEscape();
|
|
5750
|
+
}
|
|
5751
|
+
};
|
|
5752
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
5753
|
+
return function () {
|
|
5754
|
+
return document.removeEventListener('keydown', handleKeyDown);
|
|
5755
|
+
};
|
|
5756
|
+
}, [containerRef, onEscape]);
|
|
5757
|
+
}
|
|
5758
|
+
|
|
5690
5759
|
var SearchBar = function SearchBar(_ref) {
|
|
5691
5760
|
var onClick = _ref.onClick,
|
|
5692
5761
|
onClose = _ref.onClose,
|
|
5693
|
-
className = _ref.className
|
|
5762
|
+
className = _ref.className,
|
|
5763
|
+
inputRef = _ref.inputRef;
|
|
5694
5764
|
var _useState = React.useState(false),
|
|
5695
5765
|
showSearchLink = _useState[0],
|
|
5696
5766
|
setShowSearchLink = _useState[1];
|
|
5697
5767
|
var _useState2 = React.useState(''),
|
|
5698
5768
|
searchValue = _useState2[0],
|
|
5699
5769
|
setSearchValue = _useState2[1];
|
|
5700
|
-
var
|
|
5701
|
-
|
|
5702
|
-
|
|
5703
|
-
|
|
5704
|
-
return function () {
|
|
5705
|
-
var _inputRef$current2;
|
|
5706
|
-
return inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
|
|
5707
|
-
};
|
|
5708
|
-
}, [inputRef]);
|
|
5770
|
+
var internalRef = React.useRef(null);
|
|
5771
|
+
var finalInputRef = inputRef != null ? inputRef : internalRef;
|
|
5772
|
+
var containerRef = React.useRef(null);
|
|
5773
|
+
useFocusTrap(containerRef, onClose);
|
|
5709
5774
|
var onSearchHandler = function onSearchHandler(value) {
|
|
5710
5775
|
onClick(value);
|
|
5711
5776
|
setSearchValue('');
|
|
@@ -5741,12 +5806,13 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5741
5806
|
var _useViewport = useViewport(),
|
|
5742
5807
|
isDesktop = _useViewport.isDesktop;
|
|
5743
5808
|
return /*#__PURE__*/React__default.createElement(SearchBarContainer, {
|
|
5744
|
-
className: className
|
|
5809
|
+
className: className,
|
|
5810
|
+
ref: containerRef
|
|
5745
5811
|
}, /*#__PURE__*/React__default.createElement(SvgContainerSearch, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5746
5812
|
iconName: "Search"
|
|
5747
5813
|
})), /*#__PURE__*/React__default.createElement(InputContainer, null, /*#__PURE__*/React__default.createElement("input", {
|
|
5748
5814
|
"data-testid": "input-html",
|
|
5749
|
-
ref:
|
|
5815
|
+
ref: finalInputRef,
|
|
5750
5816
|
className: "search-input",
|
|
5751
5817
|
placeholder: "Search the website...",
|
|
5752
5818
|
type: "text",
|
|
@@ -5760,7 +5826,9 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5760
5826
|
})), showSearchLink && (isDesktop ? (/*#__PURE__*/React__default.createElement("div", {
|
|
5761
5827
|
"data-testid": "search-button"
|
|
5762
5828
|
}, /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, {
|
|
5829
|
+
role: "button",
|
|
5763
5830
|
"data-testid": "search-link",
|
|
5831
|
+
"aria-label": "Submit search",
|
|
5764
5832
|
onClick: function onClick() {
|
|
5765
5833
|
return onSearchHandler(searchValue);
|
|
5766
5834
|
},
|
|
@@ -5769,6 +5837,8 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5769
5837
|
},
|
|
5770
5838
|
tabIndex: 0
|
|
5771
5839
|
}, "Search"))) : (/*#__PURE__*/React__default.createElement(SearchArrowContainer, {
|
|
5840
|
+
role: "button",
|
|
5841
|
+
"aria-label": "Submit search",
|
|
5772
5842
|
"data-testid": "search-arrow-button",
|
|
5773
5843
|
onClick: function onClick() {
|
|
5774
5844
|
return onSearchHandler(searchValue);
|
|
@@ -5779,7 +5849,8 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
5779
5849
|
tabIndex: 0,
|
|
5780
5850
|
onClick: onCloseHandler,
|
|
5781
5851
|
onKeyDown: onKeyboardCloseHandler,
|
|
5782
|
-
"data-testid": "close-icon"
|
|
5852
|
+
"data-testid": "close-icon",
|
|
5853
|
+
"aria-label": "Close search bar"
|
|
5783
5854
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5784
5855
|
iconName: "Close"
|
|
5785
5856
|
})));
|
|
@@ -5796,6 +5867,8 @@ var Navigation = function Navigation(_ref) {
|
|
|
5796
5867
|
crest = _ref$crest === void 0 ? false : _ref$crest,
|
|
5797
5868
|
className = _ref.className,
|
|
5798
5869
|
logoLink = _ref.logoLink;
|
|
5870
|
+
var searchInputRef = React.useRef(null);
|
|
5871
|
+
var searchButtonRef = React.useRef(null);
|
|
5799
5872
|
var _useState = React.useState(dataNavTop),
|
|
5800
5873
|
navTopData = _useState[0],
|
|
5801
5874
|
setNavTopData = _useState[1];
|
|
@@ -5809,6 +5882,12 @@ var Navigation = function Navigation(_ref) {
|
|
|
5809
5882
|
fullScreenHeight = _useState4[0],
|
|
5810
5883
|
setFullScreenHeight = _useState4[1];
|
|
5811
5884
|
var items = menuData.items;
|
|
5885
|
+
var logoLinkProps = {
|
|
5886
|
+
title: title,
|
|
5887
|
+
href: logoLink,
|
|
5888
|
+
rel: 'noopener noreferrer',
|
|
5889
|
+
'data-roh': dataRoh
|
|
5890
|
+
};
|
|
5812
5891
|
React.useEffect(function () {
|
|
5813
5892
|
var _document, _document2;
|
|
5814
5893
|
var body = (_document = document) == null ? void 0 : _document.body;
|
|
@@ -5822,9 +5901,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
5822
5901
|
setNavTopData(dataNavTop);
|
|
5823
5902
|
}, [dataNavTop]);
|
|
5824
5903
|
var onClickSearchHandler = function onClickSearchHandler() {
|
|
5825
|
-
setshowSearch(
|
|
5826
|
-
return !prev;
|
|
5827
|
-
});
|
|
5904
|
+
setshowSearch(true);
|
|
5828
5905
|
};
|
|
5829
5906
|
var onLinkHandler = function onLinkHandler(link) {
|
|
5830
5907
|
onLink(link);
|
|
@@ -5841,7 +5918,23 @@ var Navigation = function Navigation(_ref) {
|
|
|
5841
5918
|
};
|
|
5842
5919
|
var onCloseSearchHandler = function onCloseSearchHandler() {
|
|
5843
5920
|
setshowSearch(false);
|
|
5921
|
+
setTimeout(function () {
|
|
5922
|
+
var _searchButtonRef$curr;
|
|
5923
|
+
(_searchButtonRef$curr = searchButtonRef.current) == null || _searchButtonRef$curr.focus();
|
|
5924
|
+
}, 0);
|
|
5844
5925
|
};
|
|
5926
|
+
React.useEffect(function () {
|
|
5927
|
+
if (showSearch) {
|
|
5928
|
+
var timer = setTimeout(function () {
|
|
5929
|
+
var _searchInputRef$curre;
|
|
5930
|
+
(_searchInputRef$curre = searchInputRef.current) == null || _searchInputRef$curre.focus();
|
|
5931
|
+
}, 50);
|
|
5932
|
+
return function () {
|
|
5933
|
+
return clearTimeout(timer);
|
|
5934
|
+
};
|
|
5935
|
+
}
|
|
5936
|
+
return undefined;
|
|
5937
|
+
}, [showSearch]);
|
|
5845
5938
|
var _useViewport = useViewport(),
|
|
5846
5939
|
isMobile = _useViewport.isMobile;
|
|
5847
5940
|
return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
|
|
@@ -5861,16 +5954,11 @@ var Navigation = function Navigation(_ref) {
|
|
|
5861
5954
|
columnSpanDesktop: 18,
|
|
5862
5955
|
columnStartDevice: 1,
|
|
5863
5956
|
columnSpanDevice: 14
|
|
5864
|
-
}, /*#__PURE__*/React__default.createElement(MenuContainer, null, /*#__PURE__*/React__default.createElement(LogoContainer, {
|
|
5865
|
-
"data-roh": dataRoh,
|
|
5866
|
-
rel: "noopener noreferrer",
|
|
5867
|
-
href: logoLink,
|
|
5868
|
-
title: title
|
|
5869
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5957
|
+
}, /*#__PURE__*/React__default.createElement(MenuContainer, null, /*#__PURE__*/React__default.createElement(LogoContainer, Object.assign({}, logoLinkProps), /*#__PURE__*/React__default.createElement(Icon, {
|
|
5870
5958
|
iconName: crest ? 'NavLogoWithCrest' : 'NavLogoNoCrest',
|
|
5871
5959
|
"data-testid": crest ? 'NavLogoWithCrest' : 'NavLogoNoCrest',
|
|
5872
5960
|
"aria-hidden": "true"
|
|
5873
|
-
})), /*#__PURE__*/React__default.createElement(LogoContainerMobile,
|
|
5961
|
+
})), /*#__PURE__*/React__default.createElement(LogoContainerMobile, Object.assign({}, logoLinkProps), /*#__PURE__*/React__default.createElement(Icon, {
|
|
5874
5962
|
iconName: "NavLogoMobile"
|
|
5875
5963
|
})), /*#__PURE__*/React__default.createElement(NavWrapper, null, /*#__PURE__*/React__default.createElement(NavContainer, null, /*#__PURE__*/React__default.createElement(Tabs, {
|
|
5876
5964
|
items: items,
|
|
@@ -5888,7 +5976,8 @@ var Navigation = function Navigation(_ref) {
|
|
|
5888
5976
|
basketNumVirtualItems: navTopData.basketNumVirtualItems,
|
|
5889
5977
|
onClickSearch: onClickSearchHandler,
|
|
5890
5978
|
onLink: onLinkHandler,
|
|
5891
|
-
isShowSearch: showSearch
|
|
5979
|
+
isShowSearch: showSearch,
|
|
5980
|
+
searchButtonRef: searchButtonRef
|
|
5892
5981
|
}))))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchBackground, {
|
|
5893
5982
|
visible: showSearch
|
|
5894
5983
|
}), /*#__PURE__*/React__default.createElement(GridItemSearch, {
|
|
@@ -5899,6 +5988,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
5899
5988
|
columnStartDevice: 2,
|
|
5900
5989
|
columnSpanDevice: 12
|
|
5901
5990
|
}, /*#__PURE__*/React__default.createElement(SearchBar, {
|
|
5991
|
+
inputRef: searchInputRef,
|
|
5902
5992
|
onClick: onSearchHandler,
|
|
5903
5993
|
onClose: onCloseSearchHandler
|
|
5904
5994
|
})))), showMenu && (/*#__PURE__*/React__default.createElement(NavigationGridMobile, {
|
|
@@ -8634,6 +8724,44 @@ var Editorial = function Editorial(_ref) {
|
|
|
8634
8724
|
})))));
|
|
8635
8725
|
};
|
|
8636
8726
|
|
|
8727
|
+
var _templateObject$Z, _templateObject2$K, _templateObject3$x;
|
|
8728
|
+
var HotFiltersWrapper = /*#__PURE__*/styled__default.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"])));
|
|
8729
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
8730
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
|
|
8731
|
+
|
|
8732
|
+
var _excluded$k = ["text", "onClick"];
|
|
8733
|
+
var HotFilters = function HotFilters(_ref) {
|
|
8734
|
+
var items = _ref.items,
|
|
8735
|
+
className = _ref.className,
|
|
8736
|
+
defaultSelectedIndex = _ref.defaultSelectedIndex;
|
|
8737
|
+
var _useState = React.useState(defaultSelectedIndex != null ? defaultSelectedIndex : 0),
|
|
8738
|
+
selectedIndex = _useState[0],
|
|
8739
|
+
setSelectedIndex = _useState[1];
|
|
8740
|
+
var handleClick = function handleClick(index, onClick) {
|
|
8741
|
+
setSelectedIndex(index);
|
|
8742
|
+
if (onClick) onClick();
|
|
8743
|
+
};
|
|
8744
|
+
return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, {
|
|
8745
|
+
className: className
|
|
8746
|
+
}, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
|
|
8747
|
+
var text = item.text,
|
|
8748
|
+
_onClick = item.onClick,
|
|
8749
|
+
rest = _objectWithoutPropertiesLoose(item, _excluded$k);
|
|
8750
|
+
var isSelected = index === selectedIndex;
|
|
8751
|
+
return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
|
|
8752
|
+
key: index,
|
|
8753
|
+
onClick: function onClick() {
|
|
8754
|
+
return handleClick(index, _onClick);
|
|
8755
|
+
},
|
|
8756
|
+
iconName: isSelected ? 'Confirm' : undefined,
|
|
8757
|
+
backgroundColor: isSelected ? 'primary-black' : 'base-white',
|
|
8758
|
+
textColor: isSelected ? 'base-white' : 'base-black',
|
|
8759
|
+
hoveredColor: isSelected ? 'black-hovered' : 'base-black',
|
|
8760
|
+
pressedColor: "black-pressed"
|
|
8761
|
+
}, rest), text);
|
|
8762
|
+
})));
|
|
8763
|
+
};
|
|
8764
|
+
|
|
8637
8765
|
var InformationCtaVariants = {
|
|
8638
8766
|
Primary: 'Primary',
|
|
8639
8767
|
Secondary: 'Secondary',
|
|
@@ -8663,10 +8791,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
8663
8791
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
8664
8792
|
};
|
|
8665
8793
|
|
|
8666
|
-
var _templateObject$
|
|
8667
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8668
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
8669
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
8794
|
+
var _templateObject$_, _templateObject2$L, _templateObject3$y, _templateObject4$s;
|
|
8795
|
+
var InfoWrapper$1 = /*#__PURE__*/styled__default(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);
|
|
8796
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
8797
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('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) {
|
|
8670
8798
|
var variant = _ref.variant,
|
|
8671
8799
|
theme = _ref.theme;
|
|
8672
8800
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -8833,13 +8961,13 @@ var Information = function Information(_ref) {
|
|
|
8833
8961
|
})))));
|
|
8834
8962
|
};
|
|
8835
8963
|
|
|
8836
|
-
var _templateObject
|
|
8837
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject
|
|
8964
|
+
var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$c, _templateObject8$8;
|
|
8965
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default('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) {
|
|
8838
8966
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
8839
8967
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
8840
8968
|
}, devices.mobile);
|
|
8841
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
8842
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8969
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(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);
|
|
8970
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
8843
8971
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
8844
8972
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
8845
8973
|
});
|
|
@@ -8934,17 +9062,17 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
8934
9062
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
8935
9063
|
};
|
|
8936
9064
|
|
|
8937
|
-
var _templateObject
|
|
8938
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8939
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8940
|
-
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
9065
|
+
var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$n, _templateObject6$i, _templateObject7$d, _templateObject8$9;
|
|
9066
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.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);
|
|
9067
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.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);
|
|
9068
|
+
var ImpactGrid = /*#__PURE__*/styled__default(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);
|
|
8941
9069
|
var SponsorWrapper = /*#__PURE__*/styled__default.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);
|
|
8942
9070
|
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
8943
9071
|
var TextWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
8944
9072
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
8945
9073
|
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
8946
9074
|
|
|
8947
|
-
var _excluded$
|
|
9075
|
+
var _excluded$l = ["text"];
|
|
8948
9076
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
8949
9077
|
var children = _ref.children,
|
|
8950
9078
|
text = _ref.text,
|
|
@@ -8962,7 +9090,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
8962
9090
|
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
8963
9091
|
var _ref2 = link || {},
|
|
8964
9092
|
linkText = _ref2.text,
|
|
8965
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9093
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
8966
9094
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
8967
9095
|
bgUrlDesktop: bgUrlDesktop,
|
|
8968
9096
|
bgUrlDevice: bgUrlDevice,
|
|
@@ -9005,19 +9133,19 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
9005
9133
|
}, "Scroll Down"))) : null);
|
|
9006
9134
|
};
|
|
9007
9135
|
|
|
9008
|
-
var _templateObject$
|
|
9009
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9136
|
+
var _templateObject$11, _templateObject2$O, _templateObject3$B, _templateObject4$v, _templateObject5$o;
|
|
9137
|
+
var PanelGrid = /*#__PURE__*/styled__default(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) {
|
|
9010
9138
|
var color = _ref.color;
|
|
9011
9139
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
9012
9140
|
}, devices.mobileAndTablet);
|
|
9013
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9141
|
+
var LeftPanel = /*#__PURE__*/styled__default.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) {
|
|
9014
9142
|
var hasImage = _ref2.hasImage;
|
|
9015
9143
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
9016
9144
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
9017
9145
|
var hasImage = _ref3.hasImage;
|
|
9018
9146
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
9019
9147
|
});
|
|
9020
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9148
|
+
var RightPanel = /*#__PURE__*/styled__default.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);
|
|
9021
9149
|
var InfoWrapper$2 = /*#__PURE__*/styled__default.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);
|
|
9022
9150
|
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
9023
9151
|
|
|
@@ -9049,10 +9177,10 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
9049
9177
|
})))));
|
|
9050
9178
|
};
|
|
9051
9179
|
|
|
9052
|
-
var _templateObject$
|
|
9053
|
-
var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$
|
|
9054
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9055
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9180
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
|
|
9181
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
9182
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
9183
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
9056
9184
|
var ImageButtonWrapper = /*#__PURE__*/styled__default.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);
|
|
9057
9185
|
var ContentSection = /*#__PURE__*/styled__default.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) {
|
|
9058
9186
|
var theme = _ref.theme;
|
|
@@ -9263,10 +9391,10 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
9263
9391
|
})))))))))));
|
|
9264
9392
|
};
|
|
9265
9393
|
|
|
9266
|
-
var _templateObject$
|
|
9267
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9268
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9269
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9394
|
+
var _templateObject$13, _templateObject2$Q, _templateObject3$D, _templateObject5$q, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6;
|
|
9395
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.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);
|
|
9396
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.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"])));
|
|
9397
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
9270
9398
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.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);
|
|
9271
9399
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(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) {
|
|
9272
9400
|
var invert = _ref.invert,
|
|
@@ -9376,7 +9504,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
9376
9504
|
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
9377
9505
|
};
|
|
9378
9506
|
|
|
9379
|
-
var _excluded$
|
|
9507
|
+
var _excluded$m = ["text"];
|
|
9380
9508
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
9381
9509
|
var mobileVideo = video.mobile || video.desktop;
|
|
9382
9510
|
var desktopVideo = video.desktop || video.mobile;
|
|
@@ -9481,7 +9609,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
9481
9609
|
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
|
|
9482
9610
|
var _ref5 = link || {},
|
|
9483
9611
|
linkText = _ref5.text,
|
|
9484
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
9612
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$m);
|
|
9485
9613
|
// const titleSize = title && title.length > 20 ? 4 : 3;
|
|
9486
9614
|
var video = {
|
|
9487
9615
|
elementId: 'compact-header-video',
|
|
@@ -9517,11 +9645,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
9517
9645
|
}), linkText))))));
|
|
9518
9646
|
};
|
|
9519
9647
|
|
|
9520
|
-
var _templateObject$
|
|
9521
|
-
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$
|
|
9522
|
-
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$
|
|
9648
|
+
var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x;
|
|
9649
|
+
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
9650
|
+
var PageNumberWrapper = /*#__PURE__*/styled__default.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"])));
|
|
9523
9651
|
// PageNumber extends bodyText but uses subtitle-1 font size
|
|
9524
|
-
var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
9652
|
+
var PageNumber = /*#__PURE__*/styled__default.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) {
|
|
9525
9653
|
var active = _ref.active;
|
|
9526
9654
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
9527
9655
|
});
|
|
@@ -9591,10 +9719,10 @@ var Pagination = function Pagination(_ref) {
|
|
|
9591
9719
|
})))));
|
|
9592
9720
|
};
|
|
9593
9721
|
|
|
9594
|
-
var _templateObject$
|
|
9595
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9596
|
-
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9597
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9722
|
+
var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$g;
|
|
9723
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(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);
|
|
9724
|
+
var PersonWrapper = /*#__PURE__*/styled__default.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"])));
|
|
9725
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
9598
9726
|
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
9599
9727
|
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
9600
9728
|
var PersonLink = /*#__PURE__*/styled__default.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"])));
|
|
@@ -9655,13 +9783,13 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
9655
9783
|
}));
|
|
9656
9784
|
};
|
|
9657
9785
|
|
|
9658
|
-
var _templateObject$
|
|
9659
|
-
var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9660
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
9786
|
+
var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z;
|
|
9787
|
+
var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9788
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(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) {
|
|
9661
9789
|
var columnCount = _ref.columnCount;
|
|
9662
9790
|
return "repeat(" + columnCount + ", 1fr)";
|
|
9663
9791
|
}, devices.mobile, devices.tablet);
|
|
9664
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9792
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.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"])));
|
|
9665
9793
|
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
9666
9794
|
|
|
9667
9795
|
// Get the total character length of a property in an array of objects
|
|
@@ -9780,14 +9908,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9780
9908
|
}, creditEntries);
|
|
9781
9909
|
};
|
|
9782
9910
|
|
|
9783
|
-
var _templateObject$
|
|
9911
|
+
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;
|
|
9784
9912
|
var LENGTH_TEXT = 28;
|
|
9785
9913
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9786
9914
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9787
9915
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9788
9916
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9789
9917
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9790
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9918
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(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) {
|
|
9791
9919
|
var imageToLeft = _ref.imageToLeft;
|
|
9792
9920
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9793
9921
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9797,8 +9925,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$16 ||
|
|
|
9797
9925
|
var asCard = _ref3.asCard;
|
|
9798
9926
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9799
9927
|
});
|
|
9800
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
9801
|
-
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9928
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
9929
|
+
var PromoWithTagsText = /*#__PURE__*/styled__default.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"])));
|
|
9802
9930
|
var ButtonsContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
9803
9931
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9804
9932
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
@@ -9856,7 +9984,7 @@ var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject17
|
|
|
9856
9984
|
var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
9857
9985
|
var EndDateText = /*#__PURE__*/styled__default.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid var(--base-color-black);\n padding-bottom: 32px;\n margin-bottom: 32px;\n\n @media ", " {\n padding-bottom: 20px;\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
9858
9986
|
|
|
9859
|
-
var _excluded$
|
|
9987
|
+
var _excluded$n = ["text"],
|
|
9860
9988
|
_excluded2$4 = ["text"],
|
|
9861
9989
|
_excluded3 = ["text"];
|
|
9862
9990
|
var _buttonTypeToButton$2;
|
|
@@ -9919,7 +10047,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9919
10047
|
var _ref2 = firstButton || {},
|
|
9920
10048
|
_ref2$text = _ref2.text,
|
|
9921
10049
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9922
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
10050
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
|
|
9923
10051
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
9924
10052
|
var secondButton = links == null ? void 0 : links[1];
|
|
9925
10053
|
var _ref3 = secondButton || {},
|
|
@@ -10032,21 +10160,21 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10032
10160
|
}))));
|
|
10033
10161
|
};
|
|
10034
10162
|
|
|
10035
|
-
var _templateObject$
|
|
10163
|
+
var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$t, _templateObject6$n, _templateObject7$i;
|
|
10036
10164
|
var LENGTH_TEXT$2 = 28;
|
|
10037
10165
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
10038
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
10166
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(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) {
|
|
10039
10167
|
var imageToLeft = _ref.imageToLeft;
|
|
10040
10168
|
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'";
|
|
10041
10169
|
}, devices.tablet, function (_ref2) {
|
|
10042
10170
|
var imageToLeft = _ref2.imageToLeft;
|
|
10043
10171
|
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'";
|
|
10044
10172
|
}, devices.mobile);
|
|
10045
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10173
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.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) {
|
|
10046
10174
|
var imageToLeft = _ref3.imageToLeft;
|
|
10047
10175
|
return imageToLeft ? 'left' : 'right';
|
|
10048
10176
|
}, devices.mobile);
|
|
10049
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10177
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.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) {
|
|
10050
10178
|
var imageToLeft = _ref4.imageToLeft;
|
|
10051
10179
|
return imageToLeft ? 'right' : 'left';
|
|
10052
10180
|
}, devices.mobile);
|
|
@@ -10075,8 +10203,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$i ||
|
|
|
10075
10203
|
return '';
|
|
10076
10204
|
});
|
|
10077
10205
|
|
|
10078
|
-
var _templateObject$
|
|
10079
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10206
|
+
var _templateObject$19;
|
|
10207
|
+
var VideoContainer = /*#__PURE__*/styled__default.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) {
|
|
10080
10208
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10081
10209
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10082
10210
|
return aspectRatio;
|
|
@@ -10188,7 +10316,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
10188
10316
|
}));
|
|
10189
10317
|
};
|
|
10190
10318
|
|
|
10191
|
-
var _excluded$
|
|
10319
|
+
var _excluded$o = ["text"],
|
|
10192
10320
|
_excluded2$5 = ["text"];
|
|
10193
10321
|
var LENGTH_TEXT$3 = 28;
|
|
10194
10322
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
@@ -10213,7 +10341,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
10213
10341
|
var _ref2 = primaryButton || {},
|
|
10214
10342
|
_ref2$text = _ref2.text,
|
|
10215
10343
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
10216
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
10344
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
10217
10345
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
10218
10346
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
10219
10347
|
var _ref3 = tertiaryButton || {},
|
|
@@ -10255,8 +10383,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
10255
10383
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
10256
10384
|
};
|
|
10257
10385
|
|
|
10258
|
-
var _templateObject$
|
|
10259
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10386
|
+
var _templateObject$1a;
|
|
10387
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
10260
10388
|
|
|
10261
10389
|
/**
|
|
10262
10390
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -10311,9 +10439,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
10311
10439
|
})));
|
|
10312
10440
|
};
|
|
10313
10441
|
|
|
10314
|
-
var _templateObject$
|
|
10315
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10316
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10442
|
+
var _templateObject$1b, _templateObject2$W, _templateObject3$J;
|
|
10443
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10444
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.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) {
|
|
10317
10445
|
var horizontalMode = _ref.horizontalMode;
|
|
10318
10446
|
if (horizontalMode) return 'row';
|
|
10319
10447
|
return 'column';
|
|
@@ -10321,7 +10449,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_temp
|
|
|
10321
10449
|
var gap = _ref2.gap;
|
|
10322
10450
|
return gap + "px";
|
|
10323
10451
|
});
|
|
10324
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10452
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
10325
10453
|
var darkMode = _ref3.darkMode;
|
|
10326
10454
|
if (darkMode) return 'var(--base-color-white)';
|
|
10327
10455
|
return 'var(--base-color-errorstate)';
|
|
@@ -10398,10 +10526,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
10398
10526
|
}, error))));
|
|
10399
10527
|
};
|
|
10400
10528
|
|
|
10401
|
-
var _templateObject$
|
|
10402
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10403
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10404
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10529
|
+
var _templateObject$1c, _templateObject2$X, _templateObject3$K;
|
|
10530
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.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);
|
|
10531
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.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"])));
|
|
10532
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.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);
|
|
10405
10533
|
|
|
10406
10534
|
/* eslint-disable react/no-danger */
|
|
10407
10535
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -10457,8 +10585,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
10457
10585
|
return null;
|
|
10458
10586
|
};
|
|
10459
10587
|
|
|
10460
|
-
var _templateObject$
|
|
10461
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10588
|
+
var _templateObject$1d;
|
|
10589
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
10462
10590
|
|
|
10463
10591
|
var SectionTitle = function SectionTitle(_ref) {
|
|
10464
10592
|
var title = _ref.title,
|
|
@@ -10486,8 +10614,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
10486
10614
|
}, description)))));
|
|
10487
10615
|
};
|
|
10488
10616
|
|
|
10489
|
-
var _templateObject$
|
|
10490
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
10617
|
+
var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$u, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
|
|
10618
|
+
var stateStyles = /*#__PURE__*/styled.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) {
|
|
10491
10619
|
var theme = _ref.theme;
|
|
10492
10620
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
10493
10621
|
}, function (_ref2) {
|
|
@@ -10497,11 +10625,11 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$1d || (_templateObject
|
|
|
10497
10625
|
var theme = _ref3.theme;
|
|
10498
10626
|
return theme.colors.lightgrey;
|
|
10499
10627
|
});
|
|
10500
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
10628
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
10501
10629
|
var theme = _ref4.theme;
|
|
10502
10630
|
return theme.colors.darkgrey;
|
|
10503
10631
|
});
|
|
10504
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
10632
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
10505
10633
|
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
10506
10634
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
10507
10635
|
var theme = _ref5.theme;
|
|
@@ -10867,9 +10995,9 @@ function Select(_ref3) {
|
|
|
10867
10995
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10868
10996
|
}
|
|
10869
10997
|
|
|
10870
|
-
var _templateObject$
|
|
10871
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10872
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10998
|
+
var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$D;
|
|
10999
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
11000
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
10873
11001
|
var width = _ref.width;
|
|
10874
11002
|
if (!width) return 'none';
|
|
10875
11003
|
return width + "px";
|
|
@@ -10886,7 +11014,7 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_t
|
|
|
10886
11014
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
10887
11015
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10888
11016
|
});
|
|
10889
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11017
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
10890
11018
|
var darkMode = _ref5.darkMode;
|
|
10891
11019
|
if (darkMode) return "var(--base-color-white)";
|
|
10892
11020
|
return "var(--base-color-black)";
|
|
@@ -10897,7 +11025,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_temp
|
|
|
10897
11025
|
return "var(--base-color-errorstate)";
|
|
10898
11026
|
});
|
|
10899
11027
|
|
|
10900
|
-
var _excluded$
|
|
11028
|
+
var _excluded$p = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10901
11029
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10902
11030
|
return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10903
11031
|
iconName: "DropdownArrow"
|
|
@@ -10948,7 +11076,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10948
11076
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10949
11077
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10950
11078
|
components = _ref2.components,
|
|
10951
|
-
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
11079
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
|
|
10952
11080
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10953
11081
|
label: label,
|
|
10954
11082
|
error: error,
|
|
@@ -10966,7 +11094,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10966
11094
|
})));
|
|
10967
11095
|
};
|
|
10968
11096
|
|
|
10969
|
-
var _excluded$
|
|
11097
|
+
var _excluded$q = ["label", "error", "width", "darkMode", "components"];
|
|
10970
11098
|
/**
|
|
10971
11099
|
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
10972
11100
|
* component for select instead of regular react-select component. This can be used
|
|
@@ -10988,7 +11116,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10988
11116
|
_ref$darkMode = _ref.darkMode,
|
|
10989
11117
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
10990
11118
|
components = _ref.components,
|
|
10991
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
11119
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
|
10992
11120
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10993
11121
|
label: label,
|
|
10994
11122
|
error: error,
|
|
@@ -11005,8 +11133,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
11005
11133
|
})));
|
|
11006
11134
|
};
|
|
11007
11135
|
|
|
11008
|
-
var _templateObject$
|
|
11009
|
-
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
11136
|
+
var _templateObject$1g, _templateObject2$_;
|
|
11137
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.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) {
|
|
11010
11138
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
11011
11139
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
11012
11140
|
return aspectRatio;
|
|
@@ -11016,7 +11144,7 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1f || (_temp
|
|
|
11016
11144
|
height = _ref2.height;
|
|
11017
11145
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
11018
11146
|
});
|
|
11019
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
11147
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.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"])));
|
|
11020
11148
|
|
|
11021
11149
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
11022
11150
|
var caption = _ref.caption,
|
|
@@ -11050,13 +11178,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
11050
11178
|
})), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
11051
11179
|
};
|
|
11052
11180
|
|
|
11053
|
-
var _templateObject$
|
|
11054
|
-
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11055
|
-
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2
|
|
11181
|
+
var _templateObject$1h, _templateObject2$$, _templateObject3$N;
|
|
11182
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
11183
|
+
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
11056
11184
|
var displayAttribution = _ref.displayAttribution;
|
|
11057
11185
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
11058
11186
|
});
|
|
11059
|
-
var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11187
|
+
var Line$1 = /*#__PURE__*/styled__default.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);
|
|
11060
11188
|
|
|
11061
11189
|
/* eslint-disable react/no-danger */
|
|
11062
11190
|
var Quote = function Quote(_ref) {
|
|
@@ -11081,10 +11209,10 @@ var Quote = function Quote(_ref) {
|
|
|
11081
11209
|
}, attribution))));
|
|
11082
11210
|
};
|
|
11083
11211
|
|
|
11084
|
-
var _templateObject$
|
|
11085
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11086
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2
|
|
11087
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
11212
|
+
var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$v, _templateObject6$p;
|
|
11213
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.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"])));
|
|
11214
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
11215
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
11088
11216
|
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
11089
11217
|
var IconWrapper$3 = /*#__PURE__*/styled__default.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);
|
|
11090
11218
|
var TitleWrapper$4 = /*#__PURE__*/styled__default.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);
|
|
@@ -11125,10 +11253,10 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
11125
11253
|
}, title)))));
|
|
11126
11254
|
};
|
|
11127
11255
|
|
|
11128
|
-
var _templateObject$
|
|
11129
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11130
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11131
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11256
|
+
var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$F, _templateObject5$w;
|
|
11257
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.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"])));
|
|
11258
|
+
var LinkContainer = /*#__PURE__*/styled__default.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"])));
|
|
11259
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
11132
11260
|
var isVisible = _ref.isVisible;
|
|
11133
11261
|
return isVisible ? 'visible' : 'hidden';
|
|
11134
11262
|
});
|
|
@@ -11217,10 +11345,10 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
11217
11345
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
11218
11346
|
};
|
|
11219
11347
|
|
|
11220
|
-
var _templateObject$
|
|
11221
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$
|
|
11222
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
11223
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
11348
|
+
var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$G, _templateObject5$x;
|
|
11349
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
11350
|
+
var MenuList = /*#__PURE__*/styled__default.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"])), exports.Colors.LightGrey);
|
|
11351
|
+
var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
11224
11352
|
var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref) {
|
|
11225
11353
|
var isActive = _ref.isActive;
|
|
11226
11354
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
@@ -11381,10 +11509,10 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
11381
11509
|
});
|
|
11382
11510
|
};
|
|
11383
11511
|
|
|
11384
|
-
var _templateObject$
|
|
11385
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11386
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11387
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11512
|
+
var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$y, _templateObject6$q;
|
|
11513
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11514
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11515
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
11388
11516
|
var color = _ref.color;
|
|
11389
11517
|
return "var(--base-color-" + color + ")";
|
|
11390
11518
|
});
|
|
@@ -11475,10 +11603,10 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
11475
11603
|
}, strengthLabel))));
|
|
11476
11604
|
};
|
|
11477
11605
|
|
|
11478
|
-
var _templateObject$
|
|
11479
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$
|
|
11480
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11481
|
-
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11606
|
+
var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$z, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
|
|
11607
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11608
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11609
|
+
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11482
11610
|
var TableHeader = /*#__PURE__*/styled__default.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) {
|
|
11483
11611
|
return "var(--base-color-" + props.lineColor + ")";
|
|
11484
11612
|
}, function (props) {
|
|
@@ -11679,16 +11807,16 @@ var Table = function Table(_ref) {
|
|
|
11679
11807
|
}))))))))));
|
|
11680
11808
|
};
|
|
11681
11809
|
|
|
11682
|
-
var _templateObject$
|
|
11683
|
-
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
11810
|
+
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;
|
|
11811
|
+
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11684
11812
|
var theme = _ref.theme;
|
|
11685
11813
|
return "var(--color-" + theme + ")";
|
|
11686
11814
|
}, function (_ref2) {
|
|
11687
11815
|
var theme = _ref2.theme;
|
|
11688
11816
|
return "var(--color-" + theme + ")";
|
|
11689
11817
|
});
|
|
11690
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11691
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
11818
|
+
var SignUpFormWrapper = /*#__PURE__*/styled__default(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);
|
|
11819
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled__default('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);
|
|
11692
11820
|
var Error$1 = /*#__PURE__*/styled__default.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"])));
|
|
11693
11821
|
var Form = /*#__PURE__*/styled__default.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);
|
|
11694
11822
|
var FormFooterWrapper = /*#__PURE__*/styled__default.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);
|
|
@@ -12103,9 +12231,9 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
12103
12231
|
}))))));
|
|
12104
12232
|
};
|
|
12105
12233
|
|
|
12106
|
-
var _templateObject$
|
|
12107
|
-
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
12108
|
-
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
12234
|
+
var _templateObject$1o, _templateObject3$U, _templateObject4$K;
|
|
12235
|
+
var AnchorBarContainer = /*#__PURE__*/styled__default(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);
|
|
12236
|
+
var CloseButtonWrapper = /*#__PURE__*/styled__default.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);
|
|
12109
12237
|
var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
12110
12238
|
|
|
12111
12239
|
var AnchorBar = function AnchorBar(_ref) {
|
|
@@ -12359,11 +12487,11 @@ var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
|
|
|
12359
12487
|
return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
|
|
12360
12488
|
};
|
|
12361
12489
|
|
|
12362
|
-
var _excluded$
|
|
12490
|
+
var _excluded$r = ["logo", "slides"];
|
|
12363
12491
|
var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
12364
12492
|
var logo = _ref.logo,
|
|
12365
12493
|
slides = _ref.slides,
|
|
12366
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12494
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
|
|
12367
12495
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12368
12496
|
var links = processSlideLinks(slide.links);
|
|
12369
12497
|
return _extends({}, slide, {
|
|
@@ -12380,10 +12508,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
|
|
|
12380
12508
|
})));
|
|
12381
12509
|
};
|
|
12382
12510
|
|
|
12383
|
-
var _excluded$
|
|
12511
|
+
var _excluded$s = ["slides"];
|
|
12384
12512
|
var HighlightsCore = function HighlightsCore(_ref) {
|
|
12385
12513
|
var slides = _ref.slides,
|
|
12386
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12514
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
|
|
12387
12515
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12388
12516
|
var links = processSlideLinks(slide.links);
|
|
12389
12517
|
return _extends({}, slide, {
|
|
@@ -12397,11 +12525,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
|
|
|
12397
12525
|
})));
|
|
12398
12526
|
};
|
|
12399
12527
|
|
|
12400
|
-
var _excluded$
|
|
12528
|
+
var _excluded$t = ["logo", "slides"];
|
|
12401
12529
|
var HighlightsStream = function HighlightsStream(_ref) {
|
|
12402
12530
|
var logo = _ref.logo,
|
|
12403
12531
|
slides = _ref.slides,
|
|
12404
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
12532
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
|
|
12405
12533
|
var slidesWithLinks = slides.map(function (slide) {
|
|
12406
12534
|
var links = processSlideLinks(slide.links);
|
|
12407
12535
|
return _extends({}, slide, {
|
|
@@ -12418,9 +12546,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
12418
12546
|
})));
|
|
12419
12547
|
};
|
|
12420
12548
|
|
|
12421
|
-
var _templateObject$
|
|
12422
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12423
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12549
|
+
var _templateObject$1p, _templateObject3$V;
|
|
12550
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
12551
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
12424
12552
|
|
|
12425
12553
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
12426
12554
|
var children = _ref.children;
|
|
@@ -12455,8 +12583,8 @@ var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
|
12455
12583
|
}))));
|
|
12456
12584
|
};
|
|
12457
12585
|
|
|
12458
|
-
var _templateObject$
|
|
12459
|
-
var GlobalStyles = /*#__PURE__*/styled.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) {
|
|
12586
|
+
var _templateObject$1q;
|
|
12587
|
+
var GlobalStyles = /*#__PURE__*/styled.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) {
|
|
12460
12588
|
var theme = _ref.theme;
|
|
12461
12589
|
return theme.colors.primary;
|
|
12462
12590
|
}, function (_ref2) {
|
|
@@ -13445,6 +13573,7 @@ exports.HighlightsCarousel = HighlightsCarousel;
|
|
|
13445
13573
|
exports.HighlightsCarouselCinema = HighlightsCinema;
|
|
13446
13574
|
exports.HighlightsCarouselCore = HighlightsCore;
|
|
13447
13575
|
exports.HighlightsCarouselStream = HighlightsStream;
|
|
13576
|
+
exports.HotFilters = HotFilters;
|
|
13448
13577
|
exports.Icon = Icon;
|
|
13449
13578
|
exports.ImageAspectRatioWrapper = ImageAspectRatioWrapper;
|
|
13450
13579
|
exports.ImageWithCaption = ImageWithCaption;
|