@royaloperahouse/harmonic 1.0.9 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/CastFilter/{CastFilters.d.ts → Original/CastFilters.d.ts} +1 -1
- package/dist/components/molecules/CastFilter/Original/CastFilters.style.d.ts +5 -0
- package/dist/components/molecules/CastFilter/Original/index.d.ts +2 -0
- package/dist/components/molecules/CastFilter/Variant/CastFiltersVariant.d.ts +9 -0
- package/dist/components/molecules/CastFilter/Variant/CastFiltersVariant.style.d.ts +6 -0
- package/dist/components/molecules/CastFilter/Variant/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +3 -2
- package/dist/harmonic.cjs.development.js +600 -297
- 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 +600 -298
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/types.d.ts +12 -0
- package/package.json +2 -1
- package/dist/components/molecules/CastFilter/index.d.ts +0 -2
package/dist/harmonic.esm.js
CHANGED
|
@@ -6451,13 +6451,13 @@ var Cards = function Cards(_ref) {
|
|
|
6451
6451
|
};
|
|
6452
6452
|
|
|
6453
6453
|
var _templateObject$I, _templateObject2$v, _templateObject3$j, _templateObject4$i, _templateObject5$e, _templateObject6$9, _templateObject7$6, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
|
|
6454
|
-
var CastFiltersComponentWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n
|
|
6454
|
+
var CastFiltersComponentWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6455
6455
|
var CastFiltersWrapper = /*#__PURE__*/styled.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
|
|
6456
6456
|
var HeadingTextWrapper = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
|
|
6457
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["
|
|
6457
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
6458
6458
|
var CastWrapper = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: hidden;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n @media ", " {\n flex-direction: column;\n gap: 10px;\n overflow-x: scroll;\n }\n"])), devices.mobile);
|
|
6459
|
-
var ActionButtons = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n gap: 32px;\n\n .mobile-only {\n visibility: hidden;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n }\n\n @media ", " {\n .mobile-only {\n visibility: visible;\n padding-block: 24px;\n font-size: 17px;\n line-height: 24px;\n }\n\n
|
|
6460
|
-
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n margin-block-start: 2px;\n margin-inline: 2px;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n\n :focus-visible {\n outline: none;\n\n & > div:first-child {\n outline: 2px solid var(--color-base-black);\n }\n }\n\n @media ", " {\n
|
|
6459
|
+
var ActionButtons = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n gap: 32px;\n\n .mobile-only {\n visibility: hidden;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n }\n\n @media ", " {\n .mobile-only {\n visibility: visible;\n padding-block: 24px;\n font-size: 17px;\n line-height: 24px;\n }\n\n :has(.mobile-only) {\n justify-content: left;\n }\n\n :not(:has(.mobile-only)) {\n padding-block: 12px;\n }\n\n a {\n width: fit-content;\n }\n }\n"])), devices.mobile);
|
|
6460
|
+
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n margin-block-start: 2px;\n margin-inline: 2px;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n\n :focus-visible {\n outline: none;\n\n & > div:first-child {\n outline: 2px solid var(--color-base-black);\n }\n }\n\n @media ", " {\n p {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
6461
6461
|
var PersonToggle = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n width: 86px;\n height: 86px;\n min-width: 86px;\n border: 4px solid;\n border-color: ", ";\n border-radius: 50%;\n background: var(--color-base-white);\n position: relative;\n box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
|
|
6462
6462
|
var isSelected = _ref.isSelected;
|
|
6463
6463
|
return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
|
|
@@ -6469,7 +6469,7 @@ var PersonImage = /*#__PURE__*/styled.img(_templateObject9$3 || (_templateObject
|
|
|
6469
6469
|
var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
|
|
6470
6470
|
return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
|
|
6471
6471
|
});
|
|
6472
|
-
var PersonName = /*#__PURE__*/styled.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n
|
|
6472
|
+
var PersonName = /*#__PURE__*/styled.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n"])));
|
|
6473
6473
|
var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (_ref4) {
|
|
6474
6474
|
var isSelected = _ref4.isSelected;
|
|
6475
6475
|
return isSelected ? 'flex' : 'none';
|
|
@@ -6479,12 +6479,18 @@ var Decal = /*#__PURE__*/styled.div(_templateObject1$2 || (_templateObject1$2 =
|
|
|
6479
6479
|
});
|
|
6480
6480
|
var EmptySelectionTextSpacer = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
|
|
6481
6481
|
|
|
6482
|
+
var _templateObject$J, _templateObject2$w, _templateObject3$k, _templateObject5$f;
|
|
6483
|
+
var CastFiltersComponentWrapper$1 = /*#__PURE__*/styled(CastFiltersComponentWrapper)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n flex-direction: column-reverse;\n }\n"])), devices.mobile);
|
|
6484
|
+
var RotatorButtonsWrapper$1 = /*#__PURE__*/styled(RotatorButtonsWrapper)(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6485
|
+
var PersonWrapper$1 = /*#__PURE__*/styled(PersonWrapper)(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n flex-direction: row;\n gap: 20px;\n margin-block-end: 2px;\n margin-inline-end: unset;\n }\n"])), devices.mobile);
|
|
6486
|
+
var ActionButtons$1 = /*#__PURE__*/styled(ActionButtons)(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n flex-direction: row-reverse;\n gap: unset;\n justify-content: space-between;\n border-block-end: 2px solid var(--base-color-light-grey);\n }\n"])), devices.mobile);
|
|
6487
|
+
|
|
6482
6488
|
var defaultPlaceholderImage = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c9c9c9%3Bstroke%3A%23c9c9c9%3B%7D.cls-1%2C.cls-2%2C.cls-3%7Bstroke-miterlimit%3A10%3B%7D.cls-2%7Bfill-rule%3Aevenodd%3B%7D.cls-2%2C.cls-3%7Bfill%3A%2372767c%3Bstroke%3A%2372767c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M50.42%2C89.58c21.86%2C0%2C39.58-17.72%2C39.58-39.58S72.28%2C10.42%2C50.42%2C10.42%2C10.83%2C28.14%2C10.83%2C50s17.72%2C39.58%2C39.58%2C39.58Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M50.4%2C89.58c10.88%2C0%2C20.75-4.42%2C27.92-11.54-4.96-10.46-15.58-17.71-27.92-17.71s-22.96%2C7.25-27.92%2C17.71c7.17%2C7.12%2C17%2C11.54%2C27.92%2C11.54Z%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M50.4%2C55.67c8.05%2C0%2C14.58-6.53%2C14.58-14.58s-6.53-14.58-14.58-14.58-14.58%2C6.53-14.58%2C14.58%2C6.53%2C14.58%2C14.58%2C14.58Z%22%2F%3E%3C%2Fsvg%3E";
|
|
6483
6489
|
|
|
6484
|
-
var _templateObject$
|
|
6490
|
+
var _templateObject$K, _templateObject2$x;
|
|
6485
6491
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
6486
|
-
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6487
|
-
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$
|
|
6492
|
+
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
6493
|
+
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
6488
6494
|
var transitioning = _ref.transitioning;
|
|
6489
6495
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
6490
6496
|
}, function (_ref2) {
|
|
@@ -6902,7 +6908,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6902
6908
|
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
6903
6909
|
_ref$selectedIndices = _ref.selectedIndices,
|
|
6904
6910
|
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices,
|
|
6905
|
-
selectedIds = _ref.selectedIds
|
|
6911
|
+
selectedIds = _ref.selectedIds,
|
|
6912
|
+
posthog = _ref.posthog;
|
|
6906
6913
|
var _useViewport = useViewport(),
|
|
6907
6914
|
isMobile = _useViewport.isMobile;
|
|
6908
6915
|
var castWrapperRef = useRef(null);
|
|
@@ -7044,6 +7051,9 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7044
7051
|
if (onSelectId) onSelectId(itemId);
|
|
7045
7052
|
if (onSelect) onSelect(index);
|
|
7046
7053
|
if (onClick) onClick();
|
|
7054
|
+
posthog == null || posthog.capture('cast_filter_person_card_click', {
|
|
7055
|
+
variant: 'control'
|
|
7056
|
+
});
|
|
7047
7057
|
}, [onSelect, onSelectId]);
|
|
7048
7058
|
var handlePersonKeydown = React__default.useCallback(function (e, index, itemId, onClick) {
|
|
7049
7059
|
if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
|
|
@@ -7066,7 +7076,7 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7066
7076
|
var personSelectionId = getCastItemSelectionId(person);
|
|
7067
7077
|
var isSelected = isIdSelectionMode ? selectedIdsSet.has(personSelectionId) : selectedIndices.includes(index);
|
|
7068
7078
|
var personImage = image || placeholderImage || defaultPlaceholderImage;
|
|
7069
|
-
return /*#__PURE__*/React__default.createElement(PersonWrapper, {
|
|
7079
|
+
return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
|
|
7070
7080
|
key: personSelectionId,
|
|
7071
7081
|
"aria-selected": isSelected,
|
|
7072
7082
|
"aria-label": ariaLabel != null ? ariaLabel : name,
|
|
@@ -7079,7 +7089,8 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7079
7089
|
},
|
|
7080
7090
|
onKeyDown: function onKeyDown(e) {
|
|
7081
7091
|
return handlePersonKeydown(e, index, personSelectionId, _onClick);
|
|
7082
|
-
}
|
|
7092
|
+
},
|
|
7093
|
+
"data-roh": "cast-filter-person-card"
|
|
7083
7094
|
}, /*#__PURE__*/React__default.createElement(PersonToggle, {
|
|
7084
7095
|
isSelected: isSelected,
|
|
7085
7096
|
"aria-hidden": "true"
|
|
@@ -7099,7 +7110,7 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7099
7110
|
}, name)));
|
|
7100
7111
|
});
|
|
7101
7112
|
};
|
|
7102
|
-
return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper, {
|
|
7113
|
+
return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper$1, {
|
|
7103
7114
|
className: className
|
|
7104
7115
|
}, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, headingText && (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
7105
7116
|
columnStartDesktop: 1,
|
|
@@ -7108,7 +7119,7 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7108
7119
|
columnSpanDevice: 9
|
|
7109
7120
|
}, /*#__PURE__*/React__default.createElement(HeadingTextWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7110
7121
|
size: "large"
|
|
7111
|
-
}, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
7122
|
+
}, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
|
|
7112
7123
|
columnStartDesktop: 16,
|
|
7113
7124
|
columnSpanDesktop: 2
|
|
7114
7125
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
@@ -7133,29 +7144,320 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7133
7144
|
ref: swipeRef,
|
|
7134
7145
|
onOverflowChange: handleOverflowChange,
|
|
7135
7146
|
limitDragToNavigableRange: true
|
|
7136
|
-
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedStateIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7147
|
+
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons$1, null, selectedStateIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7137
7148
|
size: "medium",
|
|
7138
7149
|
className: "mobile-only"
|
|
7139
7150
|
}, emptySelectionText)), selectedStateIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedStateIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (onApply || onApplyIds) && (/*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
7140
7151
|
onClick: function onClick() {
|
|
7141
7152
|
if (onApply) onApply(selectedStateIndices);
|
|
7142
7153
|
if (onApplyIds) onApplyIds(selectedStateIds);
|
|
7143
|
-
}
|
|
7154
|
+
},
|
|
7155
|
+
"data-roh": "cast-filter-apply"
|
|
7144
7156
|
}, ctaText != null ? ctaText : 'Apply')), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
|
|
7145
7157
|
tabIndex: 0,
|
|
7146
7158
|
role: "button",
|
|
7147
7159
|
onClick: onClear,
|
|
7148
|
-
onKeyDown: handleClearKeydown
|
|
7160
|
+
onKeyDown: handleClearKeydown,
|
|
7161
|
+
"data-roh": "cast-filter-clear"
|
|
7149
7162
|
}, textLinkText != null ? textLinkText : 'Clear')))))));
|
|
7150
7163
|
};
|
|
7151
7164
|
|
|
7152
|
-
var _templateObject$
|
|
7153
|
-
var
|
|
7154
|
-
var
|
|
7155
|
-
var
|
|
7156
|
-
var
|
|
7157
|
-
var
|
|
7158
|
-
var
|
|
7165
|
+
var _templateObject$L, _templateObject2$y, _templateObject3$l, _templateObject4$j, _templateObject5$g, _templateObject6$a;
|
|
7166
|
+
var CastFiltersWrapperVariant = /*#__PURE__*/styled(CastFiltersWrapper)(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0px;\n"])));
|
|
7167
|
+
var AppliedCastFiltersPortal = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:has(> div[data-roh='cast-applied']) {\n margin-bottom: 32px;\n }\n"])));
|
|
7168
|
+
var CastFiltersGrid = /*#__PURE__*/styled(Grid)(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
7169
|
+
var CastWrapperVariant = /*#__PURE__*/styled(CastWrapper)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n"])));
|
|
7170
|
+
var HeadingTextWrapperVariant = /*#__PURE__*/styled(HeadingTextWrapper)(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n p {\n font-size: 17px;\n }\n }\n"])), devices.mobile);
|
|
7171
|
+
var CastFiltersComponentWrapperVariant = /*#__PURE__*/styled(CastFiltersComponentWrapper)(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0px;\n\n @media ", " {\n gap: 0px;\n }\n"])), devices.mobile);
|
|
7172
|
+
|
|
7173
|
+
var CastFiltersVariant = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
7174
|
+
var cast = _ref.cast,
|
|
7175
|
+
headingText = _ref.headingText,
|
|
7176
|
+
ctaText = _ref.ctaText,
|
|
7177
|
+
textLinkText = _ref.textLinkText,
|
|
7178
|
+
emptySelectionText = _ref.emptySelectionText,
|
|
7179
|
+
placeholderImage = _ref.placeholderImage,
|
|
7180
|
+
listRoleDescription = _ref.listRoleDescription,
|
|
7181
|
+
className = _ref.className,
|
|
7182
|
+
onSelect = _ref.onSelect,
|
|
7183
|
+
onSelectId = _ref.onSelectId,
|
|
7184
|
+
onApply = _ref.onApply,
|
|
7185
|
+
onApplyIds = _ref.onApplyIds,
|
|
7186
|
+
onClear = _ref.onClear,
|
|
7187
|
+
_ref$greyscale = _ref.greyscale,
|
|
7188
|
+
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
7189
|
+
_ref$selectedIndices = _ref.selectedIndices,
|
|
7190
|
+
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices,
|
|
7191
|
+
selectedIds = _ref.selectedIds,
|
|
7192
|
+
_ref$showCastFilterAp = _ref.showCastFilterApply,
|
|
7193
|
+
showCastFilterApply = _ref$showCastFilterAp === void 0 ? false : _ref$showCastFilterAp,
|
|
7194
|
+
appliedCast = _ref.appliedCast,
|
|
7195
|
+
posthog = _ref.posthog;
|
|
7196
|
+
var _useViewport = useViewport(),
|
|
7197
|
+
isMobile = _useViewport.isMobile;
|
|
7198
|
+
var castWrapperRef = useRef(null);
|
|
7199
|
+
var isDraggingRef = useRef(false);
|
|
7200
|
+
var startXRef = useRef(0);
|
|
7201
|
+
var scrollStartRef = useRef(0);
|
|
7202
|
+
var hasDraggedRef = useRef(false);
|
|
7203
|
+
var swipeRef = useRef(null);
|
|
7204
|
+
var _useState = useState(false),
|
|
7205
|
+
availablePrev = _useState[0],
|
|
7206
|
+
setAvailablePrev = _useState[1];
|
|
7207
|
+
var _useState2 = useState(cast.length > 1),
|
|
7208
|
+
availableNext = _useState2[0],
|
|
7209
|
+
setAvailableNext = _useState2[1];
|
|
7210
|
+
var _useState3 = useState(true),
|
|
7211
|
+
showRotatorButtons = _useState3[0],
|
|
7212
|
+
setShowRotatorButtons = _useState3[1];
|
|
7213
|
+
var onIndexChangeHandler = function onIndexChangeHandler(index) {
|
|
7214
|
+
setAvailablePrev(index > 0);
|
|
7215
|
+
setAvailableNext(function () {
|
|
7216
|
+
var _swipeRef$current$has, _swipeRef$current;
|
|
7217
|
+
return (_swipeRef$current$has = (_swipeRef$current = swipeRef.current) == null ? void 0 : _swipeRef$current.hasNext()) != null ? _swipeRef$current$has : index < Math.max(0, cast.length - 1);
|
|
7218
|
+
});
|
|
7219
|
+
};
|
|
7220
|
+
useEffect(function () {
|
|
7221
|
+
setAvailablePrev(false);
|
|
7222
|
+
setAvailableNext(function () {
|
|
7223
|
+
var _swipeRef$current$has2, _swipeRef$current2;
|
|
7224
|
+
return (_swipeRef$current$has2 = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext()) != null ? _swipeRef$current$has2 : cast.length > 1;
|
|
7225
|
+
});
|
|
7226
|
+
}, [cast.length]);
|
|
7227
|
+
var handleOverflowChange = function handleOverflowChange(overflow) {
|
|
7228
|
+
var _swipeRef$current3;
|
|
7229
|
+
setShowRotatorButtons(overflow);
|
|
7230
|
+
var hasNext = (_swipeRef$current3 = swipeRef.current) == null ? void 0 : _swipeRef$current3.hasNext();
|
|
7231
|
+
if (typeof hasNext === 'boolean') {
|
|
7232
|
+
setAvailableNext(hasNext);
|
|
7233
|
+
} else {
|
|
7234
|
+
setAvailableNext(overflow);
|
|
7235
|
+
}
|
|
7236
|
+
};
|
|
7237
|
+
var onNext = function onNext() {
|
|
7238
|
+
var _swipeRef$current4;
|
|
7239
|
+
if (!availableNext) return;
|
|
7240
|
+
(_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.nextSlide();
|
|
7241
|
+
};
|
|
7242
|
+
var onPrev = function onPrev() {
|
|
7243
|
+
var _swipeRef$current5;
|
|
7244
|
+
if (!availablePrev) return;
|
|
7245
|
+
(_swipeRef$current5 = swipeRef.current) == null || _swipeRef$current5.prevSlide();
|
|
7246
|
+
};
|
|
7247
|
+
useEffect(function () {
|
|
7248
|
+
var el = castWrapperRef.current;
|
|
7249
|
+
if (!el) return undefined;
|
|
7250
|
+
var handleKeydown = function handleKeydown(e) {
|
|
7251
|
+
if (!el.contains(document.activeElement)) return;
|
|
7252
|
+
if (e.key === 'ArrowRight') {
|
|
7253
|
+
var _swipeRef$current6;
|
|
7254
|
+
e.preventDefault();
|
|
7255
|
+
(_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.nextSlide();
|
|
7256
|
+
} else if (e.key === 'ArrowLeft') {
|
|
7257
|
+
var _swipeRef$current7;
|
|
7258
|
+
e.preventDefault();
|
|
7259
|
+
(_swipeRef$current7 = swipeRef.current) == null || _swipeRef$current7.prevSlide();
|
|
7260
|
+
}
|
|
7261
|
+
};
|
|
7262
|
+
el.addEventListener('keydown', handleKeydown);
|
|
7263
|
+
return function () {
|
|
7264
|
+
return el.removeEventListener('keydown', handleKeydown);
|
|
7265
|
+
};
|
|
7266
|
+
}, []);
|
|
7267
|
+
var handleMouseDown = useCallback(function (e) {
|
|
7268
|
+
if (!isMobile || !castWrapperRef.current) return;
|
|
7269
|
+
isDraggingRef.current = true;
|
|
7270
|
+
hasDraggedRef.current = false;
|
|
7271
|
+
startXRef.current = e.clientX;
|
|
7272
|
+
scrollStartRef.current = castWrapperRef.current.scrollLeft;
|
|
7273
|
+
if (e.target === castWrapperRef.current) e.preventDefault();
|
|
7274
|
+
}, [isMobile]);
|
|
7275
|
+
var handleMouseMove = useCallback(function (e) {
|
|
7276
|
+
if (!isMobile || !isDraggingRef.current || !castWrapperRef.current) return;
|
|
7277
|
+
var deltaX = e.clientX - startXRef.current;
|
|
7278
|
+
var threshold = 5;
|
|
7279
|
+
if (Math.abs(deltaX) > threshold) {
|
|
7280
|
+
hasDraggedRef.current = true;
|
|
7281
|
+
e.preventDefault();
|
|
7282
|
+
castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
|
|
7283
|
+
}
|
|
7284
|
+
}, [isMobile]);
|
|
7285
|
+
var handleMouseUp = useCallback(function () {
|
|
7286
|
+
if (!isMobile) return;
|
|
7287
|
+
isDraggingRef.current = false;
|
|
7288
|
+
setTimeout(function () {
|
|
7289
|
+
hasDraggedRef.current = false;
|
|
7290
|
+
}, 0);
|
|
7291
|
+
}, [isMobile]);
|
|
7292
|
+
var handleMouseLeave = useCallback(function () {
|
|
7293
|
+
if (!isMobile) return;
|
|
7294
|
+
isDraggingRef.current = false;
|
|
7295
|
+
hasDraggedRef.current = false;
|
|
7296
|
+
}, [isMobile]);
|
|
7297
|
+
var getCastItemSelectionId = useCallback(function (person) {
|
|
7298
|
+
if (person.id !== undefined && person.id !== null) return String(person.id);
|
|
7299
|
+
if (person.slug !== undefined && person.slug !== null) return String(person.slug);
|
|
7300
|
+
return person.name;
|
|
7301
|
+
}, []);
|
|
7302
|
+
var isIdSelectionMode = selectedIds !== undefined;
|
|
7303
|
+
var selectedIdsSet = useMemo(function () {
|
|
7304
|
+
var ids = selectedIds != null ? selectedIds : [];
|
|
7305
|
+
return new Set(ids.map(function (id) {
|
|
7306
|
+
return String(id);
|
|
7307
|
+
}));
|
|
7308
|
+
}, [selectedIds]);
|
|
7309
|
+
var selectedStateIndices = useMemo(function () {
|
|
7310
|
+
if (!isIdSelectionMode) return selectedIndices;
|
|
7311
|
+
return cast.flatMap(function (person, index) {
|
|
7312
|
+
var itemId = getCastItemSelectionId(person);
|
|
7313
|
+
return selectedIdsSet.has(itemId) ? [index] : [];
|
|
7314
|
+
});
|
|
7315
|
+
}, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
|
|
7316
|
+
var selectedStateIds = useMemo(function () {
|
|
7317
|
+
if (isIdSelectionMode) {
|
|
7318
|
+
return cast.filter(function (person) {
|
|
7319
|
+
return selectedIdsSet.has(getCastItemSelectionId(person));
|
|
7320
|
+
}).map(function (person) {
|
|
7321
|
+
return getCastItemSelectionId(person);
|
|
7322
|
+
});
|
|
7323
|
+
}
|
|
7324
|
+
return selectedIndices.map(function (index) {
|
|
7325
|
+
return cast[index];
|
|
7326
|
+
}).filter(function (person) {
|
|
7327
|
+
return person !== undefined;
|
|
7328
|
+
}).map(function (person) {
|
|
7329
|
+
return getCastItemSelectionId(person);
|
|
7330
|
+
});
|
|
7331
|
+
}, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
|
|
7332
|
+
var handleClick = React__default.useCallback(function (index, itemId, onClick) {
|
|
7333
|
+
if (hasDraggedRef.current) return;
|
|
7334
|
+
if (onSelectId) onSelectId(itemId);
|
|
7335
|
+
if (onSelect) onSelect(index);
|
|
7336
|
+
if (onClick) onClick();
|
|
7337
|
+
posthog == null || posthog.capture('cast_filter_person_card_click', {
|
|
7338
|
+
variant: 'evergreen-cast-filter'
|
|
7339
|
+
});
|
|
7340
|
+
}, [onSelect, onSelectId]);
|
|
7341
|
+
var handlePersonKeydown = React__default.useCallback(function (e, index, itemId, onClick) {
|
|
7342
|
+
if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
|
|
7343
|
+
e.preventDefault();
|
|
7344
|
+
handleClick(index, itemId, onClick);
|
|
7345
|
+
}
|
|
7346
|
+
}, [handleClick]);
|
|
7347
|
+
var handleClearKeydown = React__default.useCallback(function (e) {
|
|
7348
|
+
if (e.key === 'Enter' && onClear) {
|
|
7349
|
+
onClear();
|
|
7350
|
+
}
|
|
7351
|
+
}, [onClear]);
|
|
7352
|
+
var showActionButtonsSection = onApply || onClear || emptySelectionText;
|
|
7353
|
+
var getPersonCards = function getPersonCards() {
|
|
7354
|
+
return cast.map(function (person, index) {
|
|
7355
|
+
var name = person.name,
|
|
7356
|
+
image = person.image,
|
|
7357
|
+
_onClick = person.onClick,
|
|
7358
|
+
ariaLabel = person['aria-label'];
|
|
7359
|
+
var personSelectionId = getCastItemSelectionId(person);
|
|
7360
|
+
var isApplied = appliedCast.some(function (castMember) {
|
|
7361
|
+
return castMember.name === person.name;
|
|
7362
|
+
});
|
|
7363
|
+
var isSelected = isIdSelectionMode ? selectedIdsSet.has(personSelectionId) : selectedIndices.includes(index);
|
|
7364
|
+
var personImage = image || placeholderImage || defaultPlaceholderImage;
|
|
7365
|
+
return /*#__PURE__*/React__default.createElement(PersonWrapper, {
|
|
7366
|
+
key: personSelectionId,
|
|
7367
|
+
"aria-selected": isSelected,
|
|
7368
|
+
"aria-label": ariaLabel != null ? ariaLabel : name,
|
|
7369
|
+
"aria-posinset": index + 1,
|
|
7370
|
+
"aria-setsize": cast.length,
|
|
7371
|
+
role: "option",
|
|
7372
|
+
tabIndex: 0,
|
|
7373
|
+
onClick: function onClick() {
|
|
7374
|
+
return handleClick(index, personSelectionId, _onClick);
|
|
7375
|
+
},
|
|
7376
|
+
onKeyDown: function onKeyDown(e) {
|
|
7377
|
+
return handlePersonKeydown(e, index, personSelectionId, _onClick);
|
|
7378
|
+
},
|
|
7379
|
+
"data-roh": "cast-filter-person-card"
|
|
7380
|
+
}, /*#__PURE__*/React__default.createElement(PersonToggle, {
|
|
7381
|
+
isSelected: isSelected,
|
|
7382
|
+
"aria-hidden": "true"
|
|
7383
|
+
}, /*#__PURE__*/React__default.createElement(PersonImage, {
|
|
7384
|
+
src: personImage,
|
|
7385
|
+
alt: "",
|
|
7386
|
+
draggable: false,
|
|
7387
|
+
isDefaultPlaceholder: !(!!image || !!placeholderImage),
|
|
7388
|
+
greyscale: greyscale
|
|
7389
|
+
}), /*#__PURE__*/React__default.createElement(Decal, {
|
|
7390
|
+
isSelected: isApplied
|
|
7391
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7392
|
+
iconName: "Confirm",
|
|
7393
|
+
color: "white"
|
|
7394
|
+
}))), /*#__PURE__*/React__default.createElement(PersonName, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7395
|
+
size: "medium"
|
|
7396
|
+
}, name)));
|
|
7397
|
+
});
|
|
7398
|
+
};
|
|
7399
|
+
return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapperVariant, {
|
|
7400
|
+
className: className
|
|
7401
|
+
}, /*#__PURE__*/React__default.createElement(CastFiltersWrapperVariant, null, /*#__PURE__*/React__default.createElement(CastFiltersGrid, null, headingText && (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
7402
|
+
columnStartDesktop: 1,
|
|
7403
|
+
columnSpanDesktop: 10,
|
|
7404
|
+
columnStartDevice: 1,
|
|
7405
|
+
columnSpanDevice: 9
|
|
7406
|
+
}, /*#__PURE__*/React__default.createElement(HeadingTextWrapperVariant, null, /*#__PURE__*/React__default.createElement(NavigationText, {
|
|
7407
|
+
color: "grey"
|
|
7408
|
+
}, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
|
|
7409
|
+
columnStartDesktop: 16,
|
|
7410
|
+
columnSpanDesktop: 2
|
|
7411
|
+
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
7412
|
+
size: "small",
|
|
7413
|
+
onClickNext: onNext,
|
|
7414
|
+
onClickPrev: onPrev,
|
|
7415
|
+
availablePrev: availablePrev,
|
|
7416
|
+
availableNext: availableNext
|
|
7417
|
+
})))), /*#__PURE__*/React__default.createElement(AppliedCastFiltersPortal, {
|
|
7418
|
+
ref: ref
|
|
7419
|
+
}), /*#__PURE__*/React__default.createElement(CastWrapperVariant, {
|
|
7420
|
+
ref: castWrapperRef,
|
|
7421
|
+
role: "listbox",
|
|
7422
|
+
"aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
|
|
7423
|
+
"aria-label": "filter list",
|
|
7424
|
+
"aria-multiselectable": "true",
|
|
7425
|
+
onMouseDown: handleMouseDown,
|
|
7426
|
+
onMouseMove: handleMouseMove,
|
|
7427
|
+
onMouseUp: handleMouseUp,
|
|
7428
|
+
onMouseLeave: handleMouseLeave
|
|
7429
|
+
}, /*#__PURE__*/React__default.createElement(Swipe, {
|
|
7430
|
+
onIndexChange: onIndexChangeHandler,
|
|
7431
|
+
"data-testid": "cast-filter-swipe",
|
|
7432
|
+
ref: swipeRef,
|
|
7433
|
+
onOverflowChange: handleOverflowChange,
|
|
7434
|
+
limitDragToNavigableRange: true
|
|
7435
|
+
}, getPersonCards()))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedStateIndices.length === 0 && appliedCast.length === 0 && !showCastFilterApply && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7436
|
+
size: "medium",
|
|
7437
|
+
className: "mobile-only"
|
|
7438
|
+
}, emptySelectionText)), selectedStateIndices.length === 0 && appliedCast.length === 0 && !showCastFilterApply && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), showCastFilterApply && (onApply || onApplyIds) && (/*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
7439
|
+
onClick: function onClick() {
|
|
7440
|
+
if (onApply) onApply(selectedStateIndices);
|
|
7441
|
+
if (onApplyIds) onApplyIds(selectedStateIds);
|
|
7442
|
+
},
|
|
7443
|
+
"data-roh": "cast-filter-apply"
|
|
7444
|
+
}, ctaText != null ? ctaText : 'Apply')), onClear && appliedCast.length > 0 && (/*#__PURE__*/React__default.createElement(TextLink, {
|
|
7445
|
+
tabIndex: 0,
|
|
7446
|
+
role: "button",
|
|
7447
|
+
onClick: onClear,
|
|
7448
|
+
onKeyDown: handleClearKeydown,
|
|
7449
|
+
"data-roh": "cast-filter-clear"
|
|
7450
|
+
}, textLinkText != null ? textLinkText : 'Clear')))));
|
|
7451
|
+
});
|
|
7452
|
+
CastFiltersVariant.displayName = 'CastFiltersVariant';
|
|
7453
|
+
|
|
7454
|
+
var _templateObject$M, _templateObject2$z, _templateObject3$m, _templateObject4$k, _templateObject5$h, _templateObject6$b, _templateObject7$7;
|
|
7455
|
+
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
|
|
7456
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
|
|
7457
|
+
var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
|
|
7458
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
|
|
7459
|
+
var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7460
|
+
var DesktopSuffixWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7159
7461
|
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
|
|
7160
7462
|
|
|
7161
7463
|
var ContactCard = function ContactCard(_ref) {
|
|
@@ -7207,13 +7509,13 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7207
7509
|
}, addressString)))))))));
|
|
7208
7510
|
};
|
|
7209
7511
|
|
|
7210
|
-
var _templateObject$
|
|
7211
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7212
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$
|
|
7213
|
-
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7214
|
-
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$
|
|
7215
|
-
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7216
|
-
var MediaLinksWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
7512
|
+
var _templateObject$N, _templateObject2$A, _templateObject3$n, _templateObject4$l, _templateObject5$i, _templateObject6$c, _templateObject7$8, _templateObject8$5;
|
|
7513
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n grid-template-rows: 100px;\n gap: 0;\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content min-content;\n gap: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
7514
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
|
|
7515
|
+
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
7516
|
+
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
7517
|
+
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
7518
|
+
var MediaLinksWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
7217
7519
|
var MediaIconWrapper$1 = /*#__PURE__*/styled.a(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
|
|
7218
7520
|
var TextLinkWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &&& {\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n }\n"])));
|
|
7219
7521
|
|
|
@@ -7240,17 +7542,17 @@ var ContactNewsletter = function ContactNewsletter(_ref) {
|
|
|
7240
7542
|
}, contact.title))));
|
|
7241
7543
|
};
|
|
7242
7544
|
|
|
7243
|
-
var _templateObject$
|
|
7244
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$
|
|
7245
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
7545
|
+
var _templateObject$O, _templateObject2$B, _templateObject3$o, _templateObject4$m, _templateObject5$j, _templateObject6$d;
|
|
7546
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7547
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7246
7548
|
return props.clickable ? 'pointer' : 'default';
|
|
7247
7549
|
}, devices.mobile);
|
|
7248
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7249
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7550
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7551
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7250
7552
|
return props.showImage ? 2 : '1 / span 4';
|
|
7251
7553
|
}, devices.mobile);
|
|
7252
|
-
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject5$
|
|
7253
|
-
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
7554
|
+
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7555
|
+
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
7254
7556
|
return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
|
|
7255
7557
|
});
|
|
7256
7558
|
|
|
@@ -7333,21 +7635,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7333
7635
|
}), link.text))));
|
|
7334
7636
|
};
|
|
7335
7637
|
|
|
7336
|
-
var _templateObject$
|
|
7337
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
7638
|
+
var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$n, _templateObject5$k;
|
|
7639
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7338
7640
|
var imageToLeft = _ref.imageToLeft;
|
|
7339
7641
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7340
7642
|
}, devices.mobile);
|
|
7341
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7643
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7342
7644
|
var imageToLeft = _ref2.imageToLeft;
|
|
7343
7645
|
return imageToLeft ? 'left' : 'right';
|
|
7344
7646
|
}, devices.mobile);
|
|
7345
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7647
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7346
7648
|
var imageToLeft = _ref3.imageToLeft;
|
|
7347
7649
|
return imageToLeft ? 'right' : 'left';
|
|
7348
7650
|
}, devices.mobile);
|
|
7349
|
-
var EditorialSubtitle = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$
|
|
7350
|
-
var EditorialText = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject5$
|
|
7651
|
+
var EditorialSubtitle = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-subtitle);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
7652
|
+
var EditorialText = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-body);\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 em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
7351
7653
|
|
|
7352
7654
|
var Editorial = function Editorial(_ref) {
|
|
7353
7655
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7386,10 +7688,10 @@ var Editorial = function Editorial(_ref) {
|
|
|
7386
7688
|
})))));
|
|
7387
7689
|
};
|
|
7388
7690
|
|
|
7389
|
-
var _templateObject$
|
|
7390
|
-
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7391
|
-
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7392
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$
|
|
7691
|
+
var _templateObject$Q, _templateObject2$D, _templateObject3$q;
|
|
7692
|
+
var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__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"])));
|
|
7693
|
+
var HotFilterOptionsWrapper = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__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);
|
|
7694
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n @media (hover: hover) and (pointer: fine) {\n :hover {\n color: var(--color-base-white);\n }\n }\n"])));
|
|
7393
7695
|
|
|
7394
7696
|
var _excluded$i = ["text", "onClick"];
|
|
7395
7697
|
var HotFilters = function HotFilters(_ref) {
|
|
@@ -7424,10 +7726,10 @@ var HotFilters = function HotFilters(_ref) {
|
|
|
7424
7726
|
})));
|
|
7425
7727
|
};
|
|
7426
7728
|
|
|
7427
|
-
var _templateObject$
|
|
7428
|
-
var ScrollContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7429
|
-
var TabsContainerWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7430
|
-
var StyledTab = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$
|
|
7729
|
+
var _templateObject$R, _templateObject2$E, _templateObject3$r;
|
|
7730
|
+
var ScrollContainer = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__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\n @media ", " {\n overflow-x: visible;\n }\n"])), devices.mobile);
|
|
7731
|
+
var TabsContainerWrapper = /*#__PURE__*/styled.div(_templateObject2$E || (_templateObject2$E = /*#__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 width: 100%;\n min-width: 0;\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: 10px;\n }\n"])), devices.mobile);
|
|
7732
|
+
var StyledTab = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n &:focus-visible {\n outline: 2px solid var(--color-base-black);\n outline-offset: 2px;\n }\n\n @media (hover: hover) and (pointer: fine) {\n &:hover {\n color: var(--color-base-white);\n }\n }\n\n @media ", " {\n width: auto !important;\n min-width: fit-content;\n flex: 0 0 auto;\n }\n"])), devices.mobile);
|
|
7431
7733
|
|
|
7432
7734
|
var _excluded$j = ["text", "id", "isSelected", "allowedSelectedWith"];
|
|
7433
7735
|
/**
|
|
@@ -7519,10 +7821,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7519
7821
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7520
7822
|
};
|
|
7521
7823
|
|
|
7522
|
-
var _templateObject$
|
|
7523
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7524
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7525
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
7824
|
+
var _templateObject$S, _templateObject2$F, _templateObject3$s, _templateObject4$o;
|
|
7825
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$S || (_templateObject$S = /*#__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);
|
|
7826
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7827
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$s || (_templateObject3$s = /*#__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) {
|
|
7526
7828
|
var variant = _ref.variant,
|
|
7527
7829
|
theme = _ref.theme;
|
|
7528
7830
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7565,7 +7867,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$q || (_template
|
|
|
7565
7867
|
theme = _ref10.theme;
|
|
7566
7868
|
return getTextColor$4(variant, theme, COLORS$4.pressed);
|
|
7567
7869
|
});
|
|
7568
|
-
var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$
|
|
7870
|
+
var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--information-panel-color);\n\n a {\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n color: var(--information-panel-color);\n }\n\n @media ", " {\n padding-top: 4px;\n }\n"])), devices.mobile);
|
|
7569
7871
|
|
|
7570
7872
|
var css_248z$1 = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2') format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
|
|
7571
7873
|
styleInject(css_248z$1);
|
|
@@ -7756,31 +8058,31 @@ var Information = function Information(_ref) {
|
|
|
7756
8058
|
})))));
|
|
7757
8059
|
};
|
|
7758
8060
|
|
|
7759
|
-
var _templateObject$
|
|
7760
|
-
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$
|
|
8061
|
+
var _templateObject$T, _templateObject2$G, _templateObject3$t, _templateObject4$p, _templateObject5$l, _templateObject6$e, _templateObject7$9, _templateObject8$6;
|
|
8062
|
+
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$T || (_templateObject$T = /*#__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) {
|
|
7761
8063
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7762
8064
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7763
8065
|
}, devices.mobile);
|
|
7764
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
8066
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\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 ", "\n }\n }\n"])), function (_ref2) {
|
|
7765
8067
|
var isMultipleRow = _ref2.isMultipleRow;
|
|
7766
8068
|
return isMultipleRow ? "\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 grid-template-rows: min-content;\n grid-template-areas:\n '. . title title title title title title title title title title button button button . .';\n ";
|
|
7767
8069
|
}, devices.mobile, devices.tablet, function (_ref3) {
|
|
7768
8070
|
var isMultipleRow = _ref3.isMultipleRow;
|
|
7769
8071
|
return isMultipleRow ? "\n grid-template-rows: min-content min-content;\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 grid-template-rows: min-content;\n grid-template-areas:\n '. . title title title title title title title title button button button button button .';\n ";
|
|
7770
8072
|
});
|
|
7771
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8073
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref4) {
|
|
7772
8074
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7773
8075
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7774
8076
|
});
|
|
7775
|
-
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8077
|
+
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref5) {
|
|
7776
8078
|
var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
|
|
7777
8079
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7778
8080
|
}, devices.mobile);
|
|
7779
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8081
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref6) {
|
|
7780
8082
|
var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
|
|
7781
8083
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7782
8084
|
}, devices.mobile);
|
|
7783
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
8085
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
7784
8086
|
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), devices.mobile, function (_ref7) {
|
|
7785
8087
|
var isPageHeadingWithoutTitle = _ref7.isPageHeadingWithoutTitle;
|
|
7786
8088
|
return isPageHeadingWithoutTitle && "\n margin-top: 15px;\n ";
|
|
@@ -7861,9 +8163,9 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7861
8163
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7862
8164
|
};
|
|
7863
8165
|
|
|
7864
|
-
var _templateObject$
|
|
7865
|
-
var ImpactHeaderWrapper = /*#__PURE__*/styled.header(_templateObject$
|
|
7866
|
-
var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8166
|
+
var _templateObject$U, _templateObject2$H, _templateObject3$u, _templateObject4$q, _templateObject5$m, _templateObject6$f, _templateObject7$a, _templateObject8$7;
|
|
8167
|
+
var ImpactHeaderWrapper = /*#__PURE__*/styled.header(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-black);\n padding: 36px 0;\n\n @media ", " {\n padding: 21px 0;\n }\n"])), devices.mobile);
|
|
8168
|
+
var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: grid;\n grid-template-columns: ", ";\n padding: 0 50px;\n\n @media ", " {\n padding: 0 50px;\n }\n\n @media ", " {\n padding: 0 20px;\n grid-template-columns: ", ";\n }\n"])), function (_ref) {
|
|
7867
8169
|
var hasButton = _ref.hasButton,
|
|
7868
8170
|
sponsorPresent = _ref.sponsorPresent;
|
|
7869
8171
|
if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
|
|
@@ -7872,13 +8174,13 @@ var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templat
|
|
|
7872
8174
|
var sponsorPresent = _ref2.sponsorPresent;
|
|
7873
8175
|
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7874
8176
|
});
|
|
7875
|
-
var TitleButtonWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8177
|
+
var TitleButtonWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7876
8178
|
var sponsorWidth = _ref3.sponsorWidth;
|
|
7877
8179
|
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7878
8180
|
});
|
|
7879
|
-
var TitleButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject4$
|
|
7880
|
-
var MobileButtonWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7881
|
-
var ImpactTitle = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$
|
|
8181
|
+
var TitleButton = /*#__PURE__*/styled(PrimaryButton)(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n position: static;\n margin-right: 0;\n }\n"])), devices.mobile);
|
|
8182
|
+
var MobileButtonWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 0 20px 16px 20px;\n"])));
|
|
8183
|
+
var ImpactTitle = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n align-self: center;\n grid-column: ", ";\n min-width: 0;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 2;\n max-height: calc(48px * 2);\n text-align: center;\n padding-bottom: 2px;\n\n @media ", " {\n grid-column: 1;\n -webkit-line-clamp: 4;\n max-height: calc(34px * 4);\n text-align: left;\n }\n"])), function (_ref4) {
|
|
7882
8184
|
var hasColumns = _ref4.hasColumns;
|
|
7883
8185
|
return hasColumns ? '3' : '1';
|
|
7884
8186
|
}, devices.mobile);
|
|
@@ -7888,11 +8190,11 @@ var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObj
|
|
|
7888
8190
|
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7889
8191
|
}, devices.mobile);
|
|
7890
8192
|
|
|
7891
|
-
var _templateObject$
|
|
7892
|
-
var VideoPlayButton$1 = /*#__PURE__*/styled.button(_templateObject$
|
|
7893
|
-
var VideoControlsWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7894
|
-
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7895
|
-
var LeftWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8193
|
+
var _templateObject$V, _templateObject2$I, _templateObject3$v, _templateObject4$r;
|
|
8194
|
+
var VideoPlayButton$1 = /*#__PURE__*/styled.button(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n background-color: var(--color-base-transparent);\n border: none;\n cursor: pointer;\n\n @media ", " {\n width: 60px;\n height: 60px;\n }\n"])), devices.mobile);
|
|
8195
|
+
var VideoControlsWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
8196
|
+
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 20px;\n\n @media ", " {\n margin: 20px 4px;\n }\n"])), devices.mobile);
|
|
8197
|
+
var LeftWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7896
8198
|
|
|
7897
8199
|
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
7898
8200
|
var videoElementId = _ref.videoElementId,
|
|
@@ -8115,21 +8417,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
|
8115
8417
|
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
8116
8418
|
};
|
|
8117
8419
|
|
|
8118
|
-
var _templateObject$
|
|
8119
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8420
|
+
var _templateObject$W, _templateObject2$J, _templateObject3$w, _templateObject4$s, _templateObject5$n;
|
|
8421
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$W || (_templateObject$W = /*#__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) {
|
|
8120
8422
|
var color = _ref.color;
|
|
8121
8423
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
8122
8424
|
}, devices.mobileAndTablet);
|
|
8123
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
8425
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__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) {
|
|
8124
8426
|
var hasImage = _ref2.hasImage;
|
|
8125
8427
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8126
8428
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8127
8429
|
var hasImage = _ref3.hasImage;
|
|
8128
8430
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8129
8431
|
});
|
|
8130
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
8131
|
-
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8132
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8432
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__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);
|
|
8433
|
+
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__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);
|
|
8434
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__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);
|
|
8133
8435
|
|
|
8134
8436
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
8135
8437
|
var _image$src, _image$alt;
|
|
@@ -8159,19 +8461,19 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8159
8461
|
})))));
|
|
8160
8462
|
};
|
|
8161
8463
|
|
|
8162
|
-
var _templateObject$
|
|
8163
|
-
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$
|
|
8164
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8165
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8166
|
-
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8167
|
-
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$
|
|
8464
|
+
var _templateObject$X, _templateObject2$K, _templateObject3$x, _templateObject4$t, _templateObject5$o, _templateObject6$g, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
8465
|
+
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
8466
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
8467
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__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);
|
|
8468
|
+
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__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);
|
|
8469
|
+
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__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) {
|
|
8168
8470
|
var theme = _ref.theme;
|
|
8169
8471
|
return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
8170
8472
|
}, function (_ref2) {
|
|
8171
8473
|
var showBlock = _ref2.showBlock;
|
|
8172
8474
|
return showBlock ? 'block' : 'none';
|
|
8173
8475
|
}, devices.mobile);
|
|
8174
|
-
var BadgeWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$
|
|
8476
|
+
var BadgeWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
|
|
8175
8477
|
var AdditionalContentWrapper = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
|
|
8176
8478
|
var isBadgePresent = _ref3.isBadgePresent;
|
|
8177
8479
|
return isBadgePresent ? '1' : '4';
|
|
@@ -8373,7 +8675,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8373
8675
|
})))))))))));
|
|
8374
8676
|
};
|
|
8375
8677
|
|
|
8376
|
-
var _templateObject$
|
|
8678
|
+
var _templateObject$Y, _templateObject2$L, _templateObject3$y, _templateObject4$u;
|
|
8377
8679
|
var GRID = {
|
|
8378
8680
|
desktop: {
|
|
8379
8681
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8386,19 +8688,19 @@ var GRID = {
|
|
|
8386
8688
|
right: '2 / 1 / 3 / 15'
|
|
8387
8689
|
}
|
|
8388
8690
|
};
|
|
8389
|
-
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8691
|
+
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8390
8692
|
var $background = _ref.$background;
|
|
8391
8693
|
return "var(--color-" + $background + ")";
|
|
8392
8694
|
});
|
|
8393
|
-
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8695
|
+
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
8394
8696
|
var hasImage = _ref2.hasImage;
|
|
8395
8697
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8396
8698
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8397
8699
|
var hasImage = _ref3.hasImage;
|
|
8398
8700
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8399
8701
|
});
|
|
8400
|
-
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8401
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8702
|
+
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
8703
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8402
8704
|
|
|
8403
8705
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
8404
8706
|
var _image$src, _image$alt;
|
|
@@ -8421,12 +8723,12 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8421
8723
|
})))));
|
|
8422
8724
|
};
|
|
8423
8725
|
|
|
8424
|
-
var _templateObject$
|
|
8425
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
8426
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
8427
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8428
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8429
|
-
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$
|
|
8726
|
+
var _templateObject$Z, _templateObject2$M, _templateObject3$z, _templateObject5$p, _templateObject6$h, _templateObject7$c, _templateObject8$9, _templateObject9$5, _templateObject0$5;
|
|
8727
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__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);
|
|
8728
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__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"])));
|
|
8729
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8730
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__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);
|
|
8731
|
+
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . . . . . . . . . . . .'\n '. logo logo logo title title title title title title title title cta cta . .'\n '. . . . . . . . . . . . . . . .';\n align-content: center;\n gap: 0 var(--grid-column-gap);\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 grid-template-columns: 1fr;\n grid-template-areas:\n 'logo'\n 'title'\n 'cta';\n\n gap: 0;\n row-gap: 16px;\n height: auto;\n padding: 32px 20px;\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'logo'\n 'title'\n 'cta';\n\n gap: 0;\n row-gap: 16px;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8430
8732
|
var invert = _ref.invert,
|
|
8431
8733
|
theme = _ref.theme;
|
|
8432
8734
|
return invert ? theme.colors.white : theme.colors.primary;
|
|
@@ -8675,23 +8977,23 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8675
8977
|
}), linkText))))));
|
|
8676
8978
|
};
|
|
8677
8979
|
|
|
8678
|
-
var _templateObject$
|
|
8679
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8680
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8681
|
-
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8682
|
-
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8980
|
+
var _templateObject$_, _templateObject2$N, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$i, _templateObject7$d;
|
|
8981
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8982
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8983
|
+
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8984
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8683
8985
|
var hasImages = _ref.hasImages;
|
|
8684
8986
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8685
8987
|
}, devices.mobile, function (_ref2) {
|
|
8686
8988
|
var hasImages = _ref2.hasImages;
|
|
8687
8989
|
return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8688
8990
|
});
|
|
8689
|
-
var HighlightsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8991
|
+
var HighlightsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n .swipe-slide {\n ", "\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), function (_ref3) {
|
|
8690
8992
|
var hasMultipleImages = _ref3.hasMultipleImages;
|
|
8691
8993
|
return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
|
|
8692
8994
|
}, devices.mobile);
|
|
8693
|
-
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject6$
|
|
8694
|
-
var RotatorButtonsWrapper$
|
|
8995
|
+
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin-top: 8px;\n margin-bottom: 8px;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white) !important;\n }\n\n & {\n display: flex;\n margin-left: 100px;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
|
|
8996
|
+
var RotatorButtonsWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
8695
8997
|
|
|
8696
8998
|
/* eslint-disable react/no-danger */
|
|
8697
8999
|
var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
@@ -8734,7 +9036,7 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8734
9036
|
}
|
|
8735
9037
|
})))) : null), hasImages && (/*#__PURE__*/React__default.createElement(HighlightsCarouselWrapper, {
|
|
8736
9038
|
hasMultipleImages: hasMultipleImages
|
|
8737
|
-
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$
|
|
9039
|
+
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$2, {
|
|
8738
9040
|
"data-testid": "rotator-buttons"
|
|
8739
9041
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
8740
9042
|
onClickNext: onNext,
|
|
@@ -8754,12 +9056,12 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8754
9056
|
}))))));
|
|
8755
9057
|
};
|
|
8756
9058
|
|
|
8757
|
-
var _templateObject
|
|
8758
|
-
var linkButtonStyles = /*#__PURE__*/css(_templateObject
|
|
8759
|
-
var PageNav = /*#__PURE__*/styled.a(_templateObject2$
|
|
8760
|
-
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
8761
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$
|
|
8762
|
-
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$
|
|
9059
|
+
var _templateObject$$, _templateObject2$O, _templateObject3$B, _templateObject5$r, _templateObject6$j, _templateObject7$e, _templateObject8$a;
|
|
9060
|
+
var linkButtonStyles = /*#__PURE__*/css(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
9061
|
+
var PageNav = /*#__PURE__*/styled.a(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
9062
|
+
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
9063
|
+
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
9064
|
+
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8763
9065
|
var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8764
9066
|
var TextLinkPagination = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
|
|
8765
9067
|
var active = _ref.active;
|
|
@@ -8913,15 +9215,15 @@ var Pagination = function Pagination(_ref) {
|
|
|
8913
9215
|
}))))));
|
|
8914
9216
|
};
|
|
8915
9217
|
|
|
8916
|
-
var _templateObject$
|
|
8917
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9218
|
+
var _templateObject$10;
|
|
9219
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: ", ";\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
|
|
8918
9220
|
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8919
9221
|
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8920
9222
|
});
|
|
8921
9223
|
|
|
8922
|
-
var _templateObject
|
|
8923
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject
|
|
8924
|
-
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$
|
|
9224
|
+
var _templateObject$11, _templateObject2$P;
|
|
9225
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
9226
|
+
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8925
9227
|
|
|
8926
9228
|
var PersonDetails = function PersonDetails(_ref) {
|
|
8927
9229
|
var _role$people;
|
|
@@ -8943,9 +9245,9 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8943
9245
|
})));
|
|
8944
9246
|
};
|
|
8945
9247
|
|
|
8946
|
-
var _templateObject$
|
|
8947
|
-
var PersonWrapper$
|
|
8948
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9248
|
+
var _templateObject$12, _templateObject2$Q;
|
|
9249
|
+
var PersonWrapper$2 = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
9250
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n filter: ", ";\n }\n"])), function (_ref) {
|
|
8949
9251
|
var greyscale = _ref.greyscale;
|
|
8950
9252
|
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8951
9253
|
});
|
|
@@ -8959,7 +9261,7 @@ var PersonCard = function PersonCard(_ref) {
|
|
|
8959
9261
|
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
8960
9262
|
return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
|
|
8961
9263
|
}, [role]);
|
|
8962
|
-
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$
|
|
9264
|
+
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$2, {
|
|
8963
9265
|
className: className
|
|
8964
9266
|
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
|
|
8965
9267
|
greyscale: greyscale
|
|
@@ -8994,14 +9296,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8994
9296
|
}));
|
|
8995
9297
|
};
|
|
8996
9298
|
|
|
8997
|
-
var _templateObject$
|
|
8998
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8999
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
9299
|
+
var _templateObject$13, _templateObject2$R, _templateObject3$C, _templateObject4$w;
|
|
9300
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9301
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$R || (_templateObject2$R = /*#__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) {
|
|
9000
9302
|
var columnCount = _ref.columnCount;
|
|
9001
9303
|
return "repeat(" + columnCount + ", 1fr)";
|
|
9002
9304
|
}, devices.mobile, devices.tablet);
|
|
9003
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9004
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9305
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
9306
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
9005
9307
|
|
|
9006
9308
|
// Get the total character length of a property in an array of objects
|
|
9007
9309
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -9128,8 +9430,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9128
9430
|
}, creditEntries);
|
|
9129
9431
|
};
|
|
9130
9432
|
|
|
9131
|
-
var _templateObject$
|
|
9132
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$
|
|
9433
|
+
var _templateObject$14;
|
|
9434
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
9133
9435
|
|
|
9134
9436
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
9135
9437
|
var items = _ref.items;
|
|
@@ -9147,14 +9449,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
9147
9449
|
}));
|
|
9148
9450
|
};
|
|
9149
9451
|
|
|
9150
|
-
var _templateObject$
|
|
9452
|
+
var _templateObject$15, _templateObject3$D, _templateObject4$x, _templateObject5$s, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
9151
9453
|
var LENGTH_TEXT = 28;
|
|
9152
9454
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9153
9455
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9154
9456
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9155
9457
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9156
9458
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9157
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9459
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$15 || (_templateObject$15 = /*#__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) {
|
|
9158
9460
|
var imageToLeft = _ref.imageToLeft;
|
|
9159
9461
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9160
9462
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9164,7 +9466,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templa
|
|
|
9164
9466
|
var asCard = _ref3.asCard;
|
|
9165
9467
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9166
9468
|
});
|
|
9167
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9469
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__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) {
|
|
9168
9470
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9169
9471
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9170
9472
|
}, function (_ref5) {
|
|
@@ -9188,15 +9490,15 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$B || (_templat
|
|
|
9188
9490
|
}
|
|
9189
9491
|
return '';
|
|
9190
9492
|
});
|
|
9191
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9493
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
9192
9494
|
var marginBottom = _ref7.marginBottom;
|
|
9193
9495
|
return marginBottom + "px";
|
|
9194
9496
|
}, function (_ref8) {
|
|
9195
9497
|
var mobileMarginBottom = _ref8.mobileMarginBottom;
|
|
9196
9498
|
return mobileMarginBottom && "\n @media " + devices.mobile + " {\n margin-bottom: " + mobileMarginBottom + "px;\n }\n ";
|
|
9197
9499
|
});
|
|
9198
|
-
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
9199
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$
|
|
9500
|
+
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
9501
|
+
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
9200
9502
|
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
9201
9503
|
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
9202
9504
|
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
@@ -9419,27 +9721,27 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9419
9721
|
}))));
|
|
9420
9722
|
};
|
|
9421
9723
|
|
|
9422
|
-
var _templateObject$
|
|
9724
|
+
var _templateObject$16, _templateObject2$S, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$l, _templateObject7$g;
|
|
9423
9725
|
var LENGTH_TEXT$2 = 28;
|
|
9424
9726
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9425
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9727
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$16 || (_templateObject$16 = /*#__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) {
|
|
9426
9728
|
var imageToLeft = _ref.imageToLeft;
|
|
9427
9729
|
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'";
|
|
9428
9730
|
}, devices.tablet, function (_ref2) {
|
|
9429
9731
|
var imageToLeft = _ref2.imageToLeft;
|
|
9430
9732
|
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'";
|
|
9431
9733
|
}, devices.mobile);
|
|
9432
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9734
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9433
9735
|
var imageToLeft = _ref3.imageToLeft;
|
|
9434
9736
|
return imageToLeft ? 'left' : 'right';
|
|
9435
9737
|
}, devices.mobile);
|
|
9436
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9738
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__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) {
|
|
9437
9739
|
var imageToLeft = _ref4.imageToLeft;
|
|
9438
9740
|
return imageToLeft ? 'right' : 'left';
|
|
9439
9741
|
}, devices.mobile);
|
|
9440
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$
|
|
9441
|
-
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$
|
|
9442
|
-
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$
|
|
9742
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9743
|
+
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9744
|
+
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9443
9745
|
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
|
|
9444
9746
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
9445
9747
|
primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
|
|
@@ -9462,8 +9764,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templat
|
|
|
9462
9764
|
return '';
|
|
9463
9765
|
});
|
|
9464
9766
|
|
|
9465
|
-
var _templateObject$
|
|
9466
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9767
|
+
var _templateObject$17;
|
|
9768
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__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) {
|
|
9467
9769
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9468
9770
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9469
9771
|
return aspectRatio;
|
|
@@ -9645,10 +9947,10 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9645
9947
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9646
9948
|
};
|
|
9647
9949
|
|
|
9648
|
-
var _templateObject$
|
|
9649
|
-
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$
|
|
9650
|
-
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$
|
|
9651
|
-
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$
|
|
9950
|
+
var _templateObject$18, _templateObject2$T, _templateObject3$F;
|
|
9951
|
+
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
9952
|
+
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
9953
|
+
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
9652
9954
|
|
|
9653
9955
|
/* eslint-disable react/no-danger */
|
|
9654
9956
|
var Quote = function Quote(_ref) {
|
|
@@ -9678,9 +9980,9 @@ var Quote = function Quote(_ref) {
|
|
|
9678
9980
|
}, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
|
|
9679
9981
|
};
|
|
9680
9982
|
|
|
9681
|
-
var _templateObject$
|
|
9682
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9683
|
-
var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$
|
|
9983
|
+
var _templateObject$19, _templateObject2$U, _templateObject3$G;
|
|
9984
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9985
|
+
var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9684
9986
|
var horizontalMode = _ref.horizontalMode;
|
|
9685
9987
|
if (horizontalMode) return 'row';
|
|
9686
9988
|
return 'column';
|
|
@@ -9688,7 +9990,7 @@ var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2
|
|
|
9688
9990
|
var gap = _ref2.gap;
|
|
9689
9991
|
return gap + "px";
|
|
9690
9992
|
});
|
|
9691
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9993
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9692
9994
|
var darkMode = _ref3.darkMode;
|
|
9693
9995
|
if (darkMode) return 'var(--base-color-white)';
|
|
9694
9996
|
return 'var(--base-color-errorstate)';
|
|
@@ -9765,10 +10067,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9765
10067
|
}, error))));
|
|
9766
10068
|
};
|
|
9767
10069
|
|
|
9768
|
-
var _templateObject$
|
|
9769
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9770
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9771
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10070
|
+
var _templateObject$1a, _templateObject2$V, _templateObject3$H;
|
|
10071
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__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);
|
|
10072
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__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"])));
|
|
10073
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__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);
|
|
9772
10074
|
|
|
9773
10075
|
/* eslint-disable react/no-danger */
|
|
9774
10076
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9824,12 +10126,12 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9824
10126
|
return null;
|
|
9825
10127
|
};
|
|
9826
10128
|
|
|
9827
|
-
var _templateObject$
|
|
9828
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9829
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
9830
|
-
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$
|
|
9831
|
-
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
9832
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject6$
|
|
10129
|
+
var _templateObject$1b, _templateObject2$W, _templateObject3$I, _templateObject5$u, _templateObject6$m, _templateObject7$h;
|
|
10130
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__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);
|
|
10131
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
10132
|
+
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n"])));
|
|
10133
|
+
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__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);
|
|
10134
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
9833
10135
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-right: 8px;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
9834
10136
|
|
|
9835
10137
|
function useFocusTrap(containerRef, onEscape, enabled) {
|
|
@@ -9968,8 +10270,8 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
9968
10270
|
})));
|
|
9969
10271
|
};
|
|
9970
10272
|
|
|
9971
|
-
var _templateObject$
|
|
9972
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
10273
|
+
var _templateObject$1c;
|
|
10274
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9973
10275
|
|
|
9974
10276
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9975
10277
|
var HarmonicSize = {
|
|
@@ -10011,9 +10313,9 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
10011
10313
|
}, description)))));
|
|
10012
10314
|
};
|
|
10013
10315
|
|
|
10014
|
-
var _templateObject$
|
|
10015
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
10016
|
-
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10316
|
+
var _templateObject$1d, _templateObject2$X, _templateObject3$J, _templateObject4$z;
|
|
10317
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10318
|
+
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n\n .harmonic-select__control--is-focused {\n border-color: var(--color-base-dark-grey);\n box-shadow: ", ";\n }\n\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--color-primary-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n\n @media ", " {\n font-size: 17px;\n }\n }\n\n .harmonic-select__placeholder {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__single-value {\n color: var(--color-primary-black);\n }\n\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--color-base-light-grey);\n background: var(--color-base-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--color-base-dark-grey);\n }\n }\n\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--color-base-mid-grey);\n }\n\n .harmonic-select__menu-list {\n padding: 10px 0;\n }\n\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-primary-black);\n\n @media ", " {\n font-size: 17px;\n }\n\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--color-base-light-grey);\n }\n }\n\n .harmonic-select__option--is-selected {\n color: var(--color-primary-black);\n background: none;\n }\n\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n color: var(--color-primary-black);\n }\n\n .harmonic-select__menu-notice {\n color: var(--color-primary-black);\n padding: 20px 20px;\n text-align: left;\n }\n\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
10017
10319
|
var width = _ref.width;
|
|
10018
10320
|
if (!width) return 'none';
|
|
10019
10321
|
return width + "px";
|
|
@@ -10030,12 +10332,12 @@ var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObje
|
|
|
10030
10332
|
if (darkMode) return "0 0 0 1px var(--color-state-medium)";
|
|
10031
10333
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10032
10334
|
}, devices.mobile, devices.mobile);
|
|
10033
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10335
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n\n @media ", " {\n margin: 0 0 12px;\n }\n"])), function (_ref5) {
|
|
10034
10336
|
var darkMode = _ref5.darkMode;
|
|
10035
10337
|
if (darkMode) return "var(--color-base-white)";
|
|
10036
10338
|
return "var(--color-primary-black)";
|
|
10037
10339
|
}, devices.mobile);
|
|
10038
|
-
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10340
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
10039
10341
|
var darkMode = _ref6.darkMode;
|
|
10040
10342
|
if (darkMode) return "var(--color-base-white)";
|
|
10041
10343
|
return "var(--color-state-error)";
|
|
@@ -10154,16 +10456,16 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10154
10456
|
})));
|
|
10155
10457
|
};
|
|
10156
10458
|
|
|
10157
|
-
var _templateObject$
|
|
10158
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10159
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10459
|
+
var _templateObject$1e, _templateObject2$Y, _templateObject3$K, _templateObject4$A;
|
|
10460
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
10461
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
10160
10462
|
if (props.showMenu) {
|
|
10161
10463
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
10162
10464
|
}
|
|
10163
10465
|
return "display: none;";
|
|
10164
10466
|
});
|
|
10165
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10166
|
-
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$
|
|
10467
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--color-primary-red);\n }\n }\n\n && svg path {\n fill: var(--color-primary-black);\n }\n\n :hover {\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
10468
|
+
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 0;\n }\n }\n"])), devices.mobileAndTablet);
|
|
10167
10469
|
|
|
10168
10470
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
10169
10471
|
var Tabs = function Tabs(_ref) {
|
|
@@ -10289,21 +10591,21 @@ var Tabs = function Tabs(_ref) {
|
|
|
10289
10591
|
}, "Menu"))))));
|
|
10290
10592
|
};
|
|
10291
10593
|
|
|
10292
|
-
var _templateObject$
|
|
10293
|
-
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10294
|
-
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$
|
|
10295
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
10594
|
+
var _templateObject$1f, _templateObject3$L, _templateObject4$B, _templateObject5$v, _templateObject6$n, _templateObject7$i, _templateObject8$c, _templateObject9$7;
|
|
10595
|
+
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
10596
|
+
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
10597
|
+
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
10296
10598
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10297
10599
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
10298
10600
|
}, function (_ref2) {
|
|
10299
10601
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
10300
10602
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
10301
10603
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
10302
|
-
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10604
|
+
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
|
|
10303
10605
|
var singleChild = _ref3.singleChild;
|
|
10304
10606
|
return singleChild ? '0' : '10px';
|
|
10305
10607
|
});
|
|
10306
|
-
var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$
|
|
10608
|
+
var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
10307
10609
|
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
10308
10610
|
var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
|
|
10309
10611
|
var VisuallyHidden = /*#__PURE__*/styled.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
|
|
@@ -10397,8 +10699,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10397
10699
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10398
10700
|
};
|
|
10399
10701
|
|
|
10400
|
-
var _templateObject$
|
|
10401
|
-
var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$
|
|
10702
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M;
|
|
10703
|
+
var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
10402
10704
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10403
10705
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10404
10706
|
return aspectRatio;
|
|
@@ -10408,8 +10710,8 @@ var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$1e || (_templateObjec
|
|
|
10408
10710
|
height = _ref2.height;
|
|
10409
10711
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10410
10712
|
});
|
|
10411
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
10412
|
-
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$
|
|
10713
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
10714
|
+
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
10413
10715
|
|
|
10414
10716
|
var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10415
10717
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -10442,13 +10744,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10442
10744
|
}, caption))));
|
|
10443
10745
|
};
|
|
10444
10746
|
|
|
10445
|
-
var _templateObject$
|
|
10446
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10447
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10448
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
10449
|
-
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10450
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10451
|
-
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$
|
|
10747
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$C, _templateObject5$w, _templateObject6$o;
|
|
10748
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__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"])));
|
|
10749
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10750
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10751
|
+
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10752
|
+
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$w || (_templateObject5$w = /*#__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);
|
|
10753
|
+
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$o || (_templateObject6$o = /*#__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);
|
|
10452
10754
|
|
|
10453
10755
|
var MiniCard = function MiniCard(_ref) {
|
|
10454
10756
|
var _ref$title = _ref.title,
|
|
@@ -10486,8 +10788,8 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10486
10788
|
}, title)))));
|
|
10487
10789
|
};
|
|
10488
10790
|
|
|
10489
|
-
var _templateObject$
|
|
10490
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10791
|
+
var _templateObject$1i;
|
|
10792
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 100%;\n\n @media ", " {\n column-gap: 20px;\n }\n"])), devices.mobile);
|
|
10491
10793
|
|
|
10492
10794
|
var NavTop = function NavTop(_ref) {
|
|
10493
10795
|
var accountText = _ref.accountText,
|
|
@@ -10527,18 +10829,18 @@ var NavTop = function NavTop(_ref) {
|
|
|
10527
10829
|
}));
|
|
10528
10830
|
};
|
|
10529
10831
|
|
|
10530
|
-
var _templateObject$
|
|
10531
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10532
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2
|
|
10533
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
10832
|
+
var _templateObject$1j, _templateObject2$$, _templateObject3$O, _templateObject4$D, _templateObject5$x;
|
|
10833
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
10834
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__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"])));
|
|
10835
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10534
10836
|
var isVisible = _ref.isVisible;
|
|
10535
10837
|
return isVisible ? 'visible' : 'hidden';
|
|
10536
10838
|
});
|
|
10537
|
-
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
10839
|
+
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10538
10840
|
var isVisible = _ref2.isVisible;
|
|
10539
10841
|
return isVisible ? 'visible' : 'hidden';
|
|
10540
10842
|
});
|
|
10541
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10843
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
10542
10844
|
|
|
10543
10845
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10544
10846
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10619,15 +10921,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10619
10921
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10620
10922
|
};
|
|
10621
10923
|
|
|
10622
|
-
var _templateObject$
|
|
10623
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
10624
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
10625
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
10626
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
10924
|
+
var _templateObject$1k, _templateObject2$10, _templateObject3$P, _templateObject4$E, _templateObject5$y;
|
|
10925
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10926
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
|
|
10927
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
10928
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
10627
10929
|
var isActive = _ref.isActive;
|
|
10628
10930
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10629
10931
|
}, Colors.MidGrey);
|
|
10630
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
10932
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10631
10933
|
var isOpen = _ref2.isOpen;
|
|
10632
10934
|
return isOpen ? 'block' : 'none';
|
|
10633
10935
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -10783,19 +11085,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10783
11085
|
});
|
|
10784
11086
|
};
|
|
10785
11087
|
|
|
10786
|
-
var _templateObject$
|
|
10787
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10788
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2
|
|
10789
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
11088
|
+
var _templateObject$1l, _templateObject2$11, _templateObject3$Q, _templateObject4$F, _templateObject5$z, _templateObject6$p;
|
|
11089
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11090
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11091
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10790
11092
|
var color = _ref.color;
|
|
10791
11093
|
return "var(--base-color-" + color + ")";
|
|
10792
11094
|
});
|
|
10793
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
10794
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$
|
|
11095
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
11096
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10795
11097
|
var color = _ref2.color;
|
|
10796
11098
|
return "var(--base-color-" + color + ")";
|
|
10797
11099
|
});
|
|
10798
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$
|
|
11100
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10799
11101
|
var color = _ref3.color;
|
|
10800
11102
|
return "var(--base-color-" + color + ")";
|
|
10801
11103
|
});
|
|
@@ -10877,17 +11179,17 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10877
11179
|
}, strengthLabel))));
|
|
10878
11180
|
};
|
|
10879
11181
|
|
|
10880
|
-
var _templateObject$
|
|
10881
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
10882
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10883
|
-
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10884
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
11182
|
+
var _templateObject$1m, _templateObject2$12, _templateObject3$R, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$j, _templateObject8$d;
|
|
11183
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11184
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11185
|
+
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11186
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10885
11187
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10886
11188
|
}, devices.tablet, devices.mobile);
|
|
10887
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
11189
|
+
var TableCell = /*#__PURE__*/styled.td(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
10888
11190
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10889
11191
|
}, devices.mobile);
|
|
10890
|
-
var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$
|
|
11192
|
+
var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
|
|
10891
11193
|
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
|
|
10892
11194
|
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10893
11195
|
|
|
@@ -11092,19 +11394,19 @@ var Table = function Table(_ref) {
|
|
|
11092
11394
|
}))));
|
|
11093
11395
|
};
|
|
11094
11396
|
|
|
11095
|
-
var _templateObject$
|
|
11096
|
-
var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$
|
|
11397
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$S, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
11398
|
+
var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11097
11399
|
var theme = _ref.theme;
|
|
11098
11400
|
return "var(--color-" + theme + ")";
|
|
11099
11401
|
}, function (_ref2) {
|
|
11100
11402
|
var theme = _ref2.theme;
|
|
11101
11403
|
return "var(--color-" + theme + ")";
|
|
11102
11404
|
});
|
|
11103
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
11104
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
11105
|
-
var Error = /*#__PURE__*/styled.div(_templateObject4$
|
|
11106
|
-
var Form = /*#__PURE__*/styled.form(_templateObject5$
|
|
11107
|
-
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
11405
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11406
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$S || (_templateObject3$S = /*#__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);
|
|
11407
|
+
var Error = /*#__PURE__*/styled.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
11408
|
+
var Form = /*#__PURE__*/styled.form(_templateObject5$B || (_templateObject5$B = /*#__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);
|
|
11409
|
+
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$r || (_templateObject6$r = /*#__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);
|
|
11108
11410
|
var ServerError = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
11109
11411
|
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
11110
11412
|
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
@@ -11519,13 +11821,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
11519
11821
|
}))))));
|
|
11520
11822
|
};
|
|
11521
11823
|
|
|
11522
|
-
var _templateObject$
|
|
11523
|
-
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11824
|
+
var _templateObject$1o, _templateObject2$14, _templateObject4$I, _templateObject5$C;
|
|
11825
|
+
var AnchorBarContainer = /*#__PURE__*/styled(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
11524
11826
|
var withShadow = _ref.withShadow;
|
|
11525
|
-
return withShadow && css(_templateObject2$
|
|
11827
|
+
return withShadow && css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11526
11828
|
}, devices.mobile);
|
|
11527
|
-
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$
|
|
11528
|
-
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$
|
|
11829
|
+
var CloseButtonWrapper = /*#__PURE__*/styled.a(_templateObject4$I || (_templateObject4$I = /*#__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);
|
|
11830
|
+
var ContentWrapper$2 = /*#__PURE__*/styled.a(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
11529
11831
|
|
|
11530
11832
|
var defaultGrid = {
|
|
11531
11833
|
columnStartDesktop: 2,
|
|
@@ -11583,12 +11885,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
11583
11885
|
return null;
|
|
11584
11886
|
};
|
|
11585
11887
|
|
|
11586
|
-
var _templateObject$
|
|
11587
|
-
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$
|
|
11888
|
+
var _templateObject$1p, _templateObject2$15;
|
|
11889
|
+
var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
11588
11890
|
var hide = _ref.hide;
|
|
11589
11891
|
return hide && "display: none;";
|
|
11590
11892
|
}, devices.mobileAndTablet);
|
|
11591
|
-
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$
|
|
11893
|
+
var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
11592
11894
|
|
|
11593
11895
|
/**
|
|
11594
11896
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11680,24 +11982,24 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11680
11982
|
}));
|
|
11681
11983
|
};
|
|
11682
11984
|
|
|
11683
|
-
var _templateObject$
|
|
11985
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$J, _templateObject5$D, _templateObject6$s, _templateObject7$l;
|
|
11684
11986
|
var color = 'primary-black';
|
|
11685
11987
|
var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
|
|
11686
11988
|
borderColor: color,
|
|
11687
11989
|
hoveredColor: color,
|
|
11688
11990
|
pressedColor: color,
|
|
11689
11991
|
textColor: color
|
|
11690
|
-
})(_templateObject$
|
|
11691
|
-
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11692
|
-
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$
|
|
11992
|
+
})(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11993
|
+
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11994
|
+
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11693
11995
|
var Heading = /*#__PURE__*/styled(HarmonicHeader).attrs({
|
|
11694
11996
|
serif: true,
|
|
11695
11997
|
size: 'medium'
|
|
11696
|
-
})(_templateObject4$
|
|
11998
|
+
})(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11697
11999
|
var Intro = /*#__PURE__*/styled(HarmonicSubtitle).attrs({
|
|
11698
12000
|
size: 'large'
|
|
11699
|
-
})(_templateObject5$
|
|
11700
|
-
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$
|
|
12001
|
+
})(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
12002
|
+
var SignInLink = /*#__PURE__*/styled.a(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11701
12003
|
var SignInPrompt = /*#__PURE__*/styled(BodyCopyHarmonic).attrs({
|
|
11702
12004
|
size: 'large'
|
|
11703
12005
|
})(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
@@ -11727,8 +12029,8 @@ var Paywall = function Paywall(_ref) {
|
|
|
11727
12029
|
}, "Sign in"))));
|
|
11728
12030
|
};
|
|
11729
12031
|
|
|
11730
|
-
var _templateObject$
|
|
11731
|
-
var Wrapper$9 = /*#__PURE__*/styled.div(_templateObject$
|
|
12032
|
+
var _templateObject$1r;
|
|
12033
|
+
var Wrapper$9 = /*#__PURE__*/styled.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
|
|
11732
12034
|
|
|
11733
12035
|
var UpsellCards = function UpsellCards(_ref) {
|
|
11734
12036
|
var upsellCards = _ref.upsellCards,
|
|
@@ -11919,13 +12221,13 @@ var Navigation = function Navigation(_ref) {
|
|
|
11919
12221
|
})))))));
|
|
11920
12222
|
};
|
|
11921
12223
|
|
|
11922
|
-
var _templateObject$
|
|
11923
|
-
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
11924
|
-
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
11925
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$
|
|
11926
|
-
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11927
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
11928
|
-
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$
|
|
12224
|
+
var _templateObject$1s, _templateObject2$17, _templateObject3$U, _templateObject4$K, _templateObject5$E, _templateObject6$t, _templateObject7$m;
|
|
12225
|
+
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
12226
|
+
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
12227
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
12228
|
+
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
12229
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
12230
|
+
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11929
12231
|
var TextLinkWrapper$4 = /*#__PURE__*/styled(TextLink)(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
11930
12232
|
|
|
11931
12233
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
@@ -11984,18 +12286,18 @@ var Footer = function Footer(_ref) {
|
|
|
11984
12286
|
}, additionalInfo))));
|
|
11985
12287
|
};
|
|
11986
12288
|
|
|
11987
|
-
var _templateObject$
|
|
12289
|
+
var _templateObject$1t, _templateObject2$18, _templateObject3$V, _templateObject4$L, _templateObject5$F, _templateObject8$f, _templateObject9$9, _templateObject0$8;
|
|
11988
12290
|
var LIST_ITEM_GAP = 32;
|
|
11989
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12291
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
|
|
11990
12292
|
var bottomBorder = _ref.bottomBorder;
|
|
11991
12293
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11992
12294
|
}, zIndexes.anchor, function (_ref2) {
|
|
11993
12295
|
var withShadow = _ref2.withShadow;
|
|
11994
|
-
return withShadow && css(_templateObject2$
|
|
12296
|
+
return withShadow && css(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11995
12297
|
});
|
|
11996
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
11997
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
11998
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
12298
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
12299
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
12300
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11999
12301
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
12000
12302
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
12001
12303
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -12265,18 +12567,18 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12265
12567
|
})))) : null))));
|
|
12266
12568
|
};
|
|
12267
12569
|
|
|
12268
|
-
var _templateObject$
|
|
12269
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12570
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$W, _templateObject4$M, _templateObject6$u, _templateObject7$n, _templateObject8$g, _templateObject9$a, _templateObject0$9;
|
|
12571
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12270
12572
|
var sticky = _ref.sticky;
|
|
12271
12573
|
return sticky ? 'sticky' : 'initial';
|
|
12272
12574
|
}, zIndexes.anchor);
|
|
12273
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
12274
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
12575
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
12576
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
12275
12577
|
var title = _ref2.title;
|
|
12276
12578
|
return title ? 'row' : 'row-reverse';
|
|
12277
12579
|
}, devices.tablet, devices.mobile);
|
|
12278
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$
|
|
12279
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
12580
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
12581
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
12280
12582
|
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
12281
12583
|
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
12282
12584
|
var theme = _ref3.theme;
|
|
@@ -12325,11 +12627,11 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12325
12627
|
}, message))));
|
|
12326
12628
|
};
|
|
12327
12629
|
|
|
12328
|
-
var _templateObject$
|
|
12329
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
12330
|
-
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$
|
|
12331
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12332
|
-
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$
|
|
12630
|
+
var _templateObject$1v, _templateObject2$1a, _templateObject3$X, _templateObject4$N;
|
|
12631
|
+
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
|
|
12632
|
+
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
|
|
12633
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
12634
|
+
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
12333
12635
|
|
|
12334
12636
|
var UpsellSection = function UpsellSection(_ref) {
|
|
12335
12637
|
var title = _ref.title,
|
|
@@ -12374,9 +12676,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
12374
12676
|
})))));
|
|
12375
12677
|
};
|
|
12376
12678
|
|
|
12377
|
-
var _templateObject$
|
|
12378
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12379
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
12679
|
+
var _templateObject$1w, _templateObject2$1b;
|
|
12680
|
+
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
12681
|
+
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
12380
12682
|
var bottomBorder = _ref.bottomBorder;
|
|
12381
12683
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
12382
12684
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -12407,11 +12709,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12407
12709
|
}, children)));
|
|
12408
12710
|
};
|
|
12409
12711
|
|
|
12410
|
-
var _templateObject$
|
|
12411
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
12412
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
12413
|
-
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12414
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
12712
|
+
var _templateObject$1x, _templateObject2$1c, _templateObject3$Y, _templateObject4$O;
|
|
12713
|
+
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
12714
|
+
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$1c || (_templateObject2$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
12715
|
+
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
12716
|
+
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
12415
12717
|
|
|
12416
12718
|
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId", "closeButtonAriaLabel"];
|
|
12417
12719
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -12618,26 +12920,26 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12618
12920
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12619
12921
|
};
|
|
12620
12922
|
|
|
12621
|
-
var _templateObject$
|
|
12622
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
12923
|
+
var _templateObject$1y, _templateObject2$1d, _templateObject3$Z, _templateObject4$P, _templateObject5$G, _templateObject6$v, _templateObject7$o, _templateObject8$h, _templateObject9$b;
|
|
12924
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
12623
12925
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12624
12926
|
return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n\n > div {\n height: " + imagesHeightDesktop + "px;\n }\n }\n }\n }";
|
|
12625
12927
|
}, devices.mobile, function (_ref2) {
|
|
12626
12928
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
12627
12929
|
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
12628
12930
|
});
|
|
12629
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12931
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$1d || (_templateObject2$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
12630
12932
|
var type = _ref3.type,
|
|
12631
12933
|
isActive = _ref3.isActive;
|
|
12632
12934
|
return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n " + getCardSlideTabletStyles(type) + "\n }\n }\n }\n\n @media " + devices.mobile + " {\n && {\n .swipe-slide {\n " + getCardSlideMobileStyles(type) + "\n }\n }\n }\n ";
|
|
12633
12935
|
});
|
|
12634
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
12635
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
12636
|
-
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$
|
|
12936
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
12937
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$P || (_templateObject4$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12938
|
+
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$G || (_templateObject5$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12637
12939
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
12638
12940
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12639
12941
|
});
|
|
12640
|
-
var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$
|
|
12942
|
+
var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-top: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
|
|
12641
12943
|
var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n margin-right: var(--navigation-middle-gap);\n }\n"])), devices.mobile);
|
|
12642
12944
|
var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12643
12945
|
var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
@@ -12910,17 +13212,17 @@ var Carousel = function Carousel(_ref) {
|
|
|
12910
13212
|
}, children))));
|
|
12911
13213
|
};
|
|
12912
13214
|
|
|
12913
|
-
var _templateObject$
|
|
12914
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
12915
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
12916
|
-
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
12917
|
-
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
12918
|
-
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
12919
|
-
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
13215
|
+
var _templateObject$1z, _templateObject2$1e, _templateObject3$_, _templateObject4$Q, _templateObject5$H, _templateObject6$w, _templateObject7$p, _templateObject8$i, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
13216
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$1z || (_templateObject$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
13217
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$1e || (_templateObject2$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13218
|
+
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$_ || (_templateObject3$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
13219
|
+
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$Q || (_templateObject4$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13220
|
+
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$H || (_templateObject5$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
13221
|
+
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$w || (_templateObject6$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12920
13222
|
var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$p || (_templateObject7$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12921
13223
|
var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$i || (_templateObject8$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
12922
13224
|
var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12923
|
-
var RotatorButtonsWrapper$
|
|
13225
|
+
var RotatorButtonsWrapper$3 = /*#__PURE__*/styled.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12924
13226
|
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12925
13227
|
var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
12926
13228
|
var FirstButtonComponentWrapper = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
|
|
@@ -13170,7 +13472,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13170
13472
|
auxiliaryCTA: auxiliaryCTA
|
|
13171
13473
|
})), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
|
|
13172
13474
|
"data-testid": "carousel-wrapper"
|
|
13173
|
-
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$
|
|
13475
|
+
}, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$3, {
|
|
13174
13476
|
"data-testid": "rotator-buttons"
|
|
13175
13477
|
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
13176
13478
|
onClickNext: onNext,
|
|
@@ -13246,9 +13548,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13246
13548
|
})));
|
|
13247
13549
|
};
|
|
13248
13550
|
|
|
13249
|
-
var _templateObject$
|
|
13250
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
13251
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3
|
|
13551
|
+
var _templateObject$1A, _templateObject3$$;
|
|
13552
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1A || (_templateObject$1A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
13553
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$$ || (_templateObject3$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13252
13554
|
|
|
13253
13555
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13254
13556
|
var children = _ref.children;
|
|
@@ -13843,8 +14145,8 @@ var Theme = function Theme(_ref) {
|
|
|
13843
14145
|
}, children);
|
|
13844
14146
|
};
|
|
13845
14147
|
|
|
13846
|
-
var _templateObject$
|
|
13847
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1z || (_templateObject$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
14148
|
+
var _templateObject$1B;
|
|
14149
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1B || (_templateObject$1B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13848
14150
|
var theme = _ref.theme;
|
|
13849
14151
|
return theme.colors.primary;
|
|
13850
14152
|
}, function (_ref2) {
|
|
@@ -14791,5 +15093,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1z || (_templa
|
|
|
14791
15093
|
return theme.footer.tablet.paddingBottom;
|
|
14792
15094
|
}, devices.desktop, devices.largeDesktop);
|
|
14793
15095
|
|
|
14794
|
-
export { Accordion, Accordions, Account, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, Basket$1 as Basket, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContactNewsletter, ContentSummary, ControlledDropdown, CreditListing, CustomStrategyTabsFilter, Dropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, MiniCard, MinimalCarousel, ModalWindow, NavTop, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, Person, PersonCard, PersonDetails, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search$1 as Search, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, SocialLinks, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Swipe, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellCards, UpsellSection, VideoControls, VideoWithControls$2 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
|
|
15096
|
+
export { Accordion, Accordions, Account, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, Basket$1 as Basket, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CastFiltersVariant as CastFilterVariant, CinemaBadge, Colors, ContactCard, ContactNewsletter, ContentSummary, ControlledDropdown, CreditListing, CustomStrategyTabsFilter, Dropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Logo, MiniCard, MinimalCarousel, ModalWindow, NavTop, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, Person, PersonCard, PersonDetails, PolicyLinks, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio2, RadioGroup2, ReadMore, RotatorButtons, Search$1 as Search, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, SocialLinks, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Swipe, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellCards, UpsellSection, VideoControls, VideoWithControls$2 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
|
|
14795
15097
|
//# sourceMappingURL=harmonic.esm.js.map
|