@royaloperahouse/harmonic 1.0.5-e → 1.0.6-a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -27
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/PageHeading/PageHeading.style.d.ts +2 -3
- package/dist/components/molecules/ReadMore/ReadMoreTextLink.d.ts +4 -0
- package/dist/components/molecules/ReadMore/ReadMoreTextLink.style.d.ts +3 -0
- package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +1 -2
- package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +3 -1
- package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +3 -1
- package/dist/harmonic.cjs.development.css +0 -319
- package/dist/harmonic.cjs.development.js +273 -426
- 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 +281 -437
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +4 -4
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
- package/dist/types/carousel.d.ts +1 -24
- package/dist/types/index.d.ts +2 -2
- package/dist/types/modalWindow.d.ts +0 -4
- package/dist/types/types.d.ts +6 -93
- package/package.json +1 -1
- package/dist/components/molecules/CustomStrategyTabsFilter/CustomStrategyTabsFilter.d.ts +0 -70
- package/dist/components/molecules/CustomStrategyTabsFilter/index.d.ts +0 -2
- package/dist/components/molecules/CustomStrategyTabsFilter/styled.d.ts +0 -18
package/dist/harmonic.esm.js
CHANGED
|
@@ -228,6 +228,26 @@ styleInject(css_248z);
|
|
|
228
228
|
var _excluded = ["children", "size", "em", "color", "serif", "hierarchy", "tag", "className"],
|
|
229
229
|
_excluded2 = ["children", "size", "color", "className", "bold", "tag"],
|
|
230
230
|
_excluded3 = ["children", "size", "color", "className"];
|
|
231
|
+
/* ~~~ Display - (use case) ~~~ */
|
|
232
|
+
var DisplayHeader = function DisplayHeader(_ref) {
|
|
233
|
+
var children = _ref.children,
|
|
234
|
+
size = _ref.size,
|
|
235
|
+
em = _ref.em,
|
|
236
|
+
_ref$color = _ref.color,
|
|
237
|
+
color = _ref$color === void 0 ? 'inherit' : _ref$color,
|
|
238
|
+
serif = _ref.serif,
|
|
239
|
+
className = _ref.className;
|
|
240
|
+
var classNames = createClassNames('display', {
|
|
241
|
+
size: size,
|
|
242
|
+
color: color,
|
|
243
|
+
serif: serif,
|
|
244
|
+
em: em,
|
|
245
|
+
className: className
|
|
246
|
+
}, typographyStyles);
|
|
247
|
+
return /*#__PURE__*/React__default.createElement("h1", {
|
|
248
|
+
className: classNames
|
|
249
|
+
}, children);
|
|
250
|
+
};
|
|
231
251
|
/* ~~~ Headers - size and hierarchy set separately ~~~ */
|
|
232
252
|
var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
233
253
|
var _ref3;
|
|
@@ -2715,7 +2735,6 @@ var Tab = function Tab(_ref) {
|
|
|
2715
2735
|
className = _ref.className,
|
|
2716
2736
|
role = _ref.role,
|
|
2717
2737
|
ariaLabel = _ref.ariaLabel,
|
|
2718
|
-
tabLinkId = _ref.tabLinkId,
|
|
2719
2738
|
color = _ref.color,
|
|
2720
2739
|
dataTestId = _ref.dataTestId,
|
|
2721
2740
|
isOpen = _ref.isOpen;
|
|
@@ -2750,9 +2769,8 @@ var Tab = function Tab(_ref) {
|
|
|
2750
2769
|
className: className,
|
|
2751
2770
|
"data-testid": dataTestId
|
|
2752
2771
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
2753
|
-
id: tabLinkId,
|
|
2754
|
-
trimText: trimText,
|
|
2755
2772
|
color: color,
|
|
2773
|
+
trimText: trimText,
|
|
2756
2774
|
withTextInMobile: withTextInMobile,
|
|
2757
2775
|
"aria-hidden": "true"
|
|
2758
2776
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -2782,7 +2800,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2782
2800
|
className = _ref.className,
|
|
2783
2801
|
role = _ref.role,
|
|
2784
2802
|
ariaLabel = _ref.ariaLabel,
|
|
2785
|
-
tabLinkId = _ref.tabLinkId,
|
|
2786
2803
|
trimTabText = _ref.trimTabText;
|
|
2787
2804
|
var node = useRef();
|
|
2788
2805
|
var _useState = useState(false),
|
|
@@ -2879,7 +2896,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2879
2896
|
};
|
|
2880
2897
|
var renderTab = function renderTab() {
|
|
2881
2898
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
2882
|
-
tabLinkId: tabLinkId,
|
|
2883
2899
|
trimText: trimTabText,
|
|
2884
2900
|
title: title,
|
|
2885
2901
|
titleLink: titleLink,
|
|
@@ -2959,8 +2975,7 @@ var Account = function Account(_ref) {
|
|
|
2959
2975
|
iconName: iconName,
|
|
2960
2976
|
withOptionsInMobile: false,
|
|
2961
2977
|
withIcon: "left",
|
|
2962
|
-
className: className
|
|
2963
|
-
tabLinkId: "account-link"
|
|
2978
|
+
className: className
|
|
2964
2979
|
});
|
|
2965
2980
|
};
|
|
2966
2981
|
|
|
@@ -3095,7 +3110,7 @@ var getPressedColor = function getPressedColor(_ref4) {
|
|
|
3095
3110
|
};
|
|
3096
3111
|
|
|
3097
3112
|
var _templateObject$6, _templateObject2$3;
|
|
3098
|
-
var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n
|
|
3113
|
+
var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n background-color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n background-color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$1, getBackgroundColor$1, getBackgroundColor$1, getPointerEvents, getTextColor$1, getHoveredColor, getHoveredColor, getTextColor$1, getPressedColor, getPressedColor, getTextColor$1);
|
|
3099
3114
|
var AriaDescription = /*#__PURE__*/styled.span(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
3100
3115
|
|
|
3101
3116
|
var _excluded$4 = ["children", "disabled", "className"];
|
|
@@ -5692,7 +5707,6 @@ var Accordion = function Accordion(_ref) {
|
|
|
5692
5707
|
var toggleAccordion = function toggleAccordion() {
|
|
5693
5708
|
if (React__default.Children.count(children) === 0) return;
|
|
5694
5709
|
if (openAccordion) {
|
|
5695
|
-
setIcon(collapsedStateIconData);
|
|
5696
5710
|
setOpenAccordion(false);
|
|
5697
5711
|
setTextHeight('0px');
|
|
5698
5712
|
setIcon(collapsedStateIconData);
|
|
@@ -6045,9 +6059,14 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
6045
6059
|
_ref2$renderGridItem = _ref2.renderGridItem,
|
|
6046
6060
|
renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
|
|
6047
6061
|
var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
|
|
6048
|
-
var content = /*#__PURE__*/React__default.createElement(
|
|
6062
|
+
var content = /*#__PURE__*/React__default.createElement(TextContainer, {
|
|
6063
|
+
tag: "div",
|
|
6064
|
+
size: "large",
|
|
6065
|
+
"data-testid": "text-container",
|
|
6049
6066
|
className: textContainerClassName,
|
|
6050
|
-
|
|
6067
|
+
dangerouslySetInnerHTML: {
|
|
6068
|
+
__html: addTypographyClasses(text)
|
|
6069
|
+
}
|
|
6051
6070
|
});
|
|
6052
6071
|
var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
6053
6072
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -6857,15 +6876,12 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6857
6876
|
listRoleDescription = _ref.listRoleDescription,
|
|
6858
6877
|
className = _ref.className,
|
|
6859
6878
|
onSelect = _ref.onSelect,
|
|
6860
|
-
onSelectId = _ref.onSelectId,
|
|
6861
6879
|
onApply = _ref.onApply,
|
|
6862
|
-
onApplyIds = _ref.onApplyIds,
|
|
6863
6880
|
onClear = _ref.onClear,
|
|
6864
6881
|
_ref$greyscale = _ref.greyscale,
|
|
6865
6882
|
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
6866
6883
|
_ref$selectedIndices = _ref.selectedIndices,
|
|
6867
|
-
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices
|
|
6868
|
-
selectedIds = _ref.selectedIds;
|
|
6884
|
+
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
6869
6885
|
var _useViewport = useViewport(),
|
|
6870
6886
|
isMobile = _useViewport.isMobile;
|
|
6871
6887
|
var castWrapperRef = useRef(null);
|
|
@@ -6967,51 +6983,14 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6967
6983
|
isDraggingRef.current = false;
|
|
6968
6984
|
hasDraggedRef.current = false;
|
|
6969
6985
|
}, [isMobile]);
|
|
6970
|
-
var
|
|
6971
|
-
if (person.id !== undefined && person.id !== null) return String(person.id);
|
|
6972
|
-
if (person.slug !== undefined && person.slug !== null) return String(person.slug);
|
|
6973
|
-
return person.name;
|
|
6974
|
-
}, []);
|
|
6975
|
-
var isIdSelectionMode = selectedIds !== undefined;
|
|
6976
|
-
var selectedIdsSet = useMemo(function () {
|
|
6977
|
-
var ids = selectedIds != null ? selectedIds : [];
|
|
6978
|
-
return new Set(ids.map(function (id) {
|
|
6979
|
-
return String(id);
|
|
6980
|
-
}));
|
|
6981
|
-
}, [selectedIds]);
|
|
6982
|
-
var selectedStateIndices = useMemo(function () {
|
|
6983
|
-
if (!isIdSelectionMode) return selectedIndices;
|
|
6984
|
-
return cast.flatMap(function (person, index) {
|
|
6985
|
-
var itemId = getCastItemSelectionId(person);
|
|
6986
|
-
return selectedIdsSet.has(itemId) ? [index] : [];
|
|
6987
|
-
});
|
|
6988
|
-
}, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
|
|
6989
|
-
var selectedStateIds = useMemo(function () {
|
|
6990
|
-
if (isIdSelectionMode) {
|
|
6991
|
-
return cast.filter(function (person) {
|
|
6992
|
-
return selectedIdsSet.has(getCastItemSelectionId(person));
|
|
6993
|
-
}).map(function (person) {
|
|
6994
|
-
return getCastItemSelectionId(person);
|
|
6995
|
-
});
|
|
6996
|
-
}
|
|
6997
|
-
return selectedIndices.map(function (index) {
|
|
6998
|
-
return cast[index];
|
|
6999
|
-
}).filter(function (person) {
|
|
7000
|
-
return person !== undefined;
|
|
7001
|
-
}).map(function (person) {
|
|
7002
|
-
return getCastItemSelectionId(person);
|
|
7003
|
-
});
|
|
7004
|
-
}, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
|
|
7005
|
-
var handleClick = React__default.useCallback(function (index, itemId, onClick) {
|
|
6986
|
+
var handleClick = React__default.useCallback(function (index, onClick) {
|
|
7006
6987
|
if (hasDraggedRef.current) return;
|
|
7007
|
-
if (onSelectId) onSelectId(itemId);
|
|
7008
6988
|
if (onSelect) onSelect(index);
|
|
7009
6989
|
if (onClick) onClick();
|
|
7010
|
-
}, [onSelect
|
|
7011
|
-
var handlePersonKeydown = React__default.useCallback(function (e, index,
|
|
7012
|
-
if (e.key === 'Enter'
|
|
7013
|
-
|
|
7014
|
-
handleClick(index, itemId, onClick);
|
|
6990
|
+
}, [onSelect]);
|
|
6991
|
+
var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
|
|
6992
|
+
if (e.key === 'Enter') {
|
|
6993
|
+
handleClick(index, onClick);
|
|
7015
6994
|
}
|
|
7016
6995
|
}, [handleClick]);
|
|
7017
6996
|
var handleClearKeydown = React__default.useCallback(function (e) {
|
|
@@ -7026,27 +7005,27 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7026
7005
|
image = person.image,
|
|
7027
7006
|
_onClick = person.onClick,
|
|
7028
7007
|
ariaLabel = person['aria-label'];
|
|
7029
|
-
var
|
|
7030
|
-
var isSelected = isIdSelectionMode ? selectedIdsSet.has(personSelectionId) : selectedIndices.includes(index);
|
|
7008
|
+
var isSelected = selectedIndices.includes(index);
|
|
7031
7009
|
var personImage = image || placeholderImage || defaultPlaceholderImage;
|
|
7032
7010
|
return /*#__PURE__*/React__default.createElement(PersonWrapper, {
|
|
7033
|
-
key:
|
|
7011
|
+
key: index,
|
|
7034
7012
|
"aria-selected": isSelected,
|
|
7035
|
-
"aria-label": ariaLabel
|
|
7013
|
+
"aria-label": ariaLabel || (isSelected ? 'Deselect' : 'Select') + " " + name,
|
|
7014
|
+
"aria-posinset": index + 1,
|
|
7015
|
+
"aria-setsize": cast.length,
|
|
7036
7016
|
role: "option",
|
|
7037
7017
|
tabIndex: 0,
|
|
7038
|
-
onClick: function onClick() {
|
|
7039
|
-
return handleClick(index, personSelectionId, _onClick);
|
|
7040
|
-
},
|
|
7041
7018
|
onKeyDown: function onKeyDown(e) {
|
|
7042
|
-
return handlePersonKeydown(e, index,
|
|
7019
|
+
return handlePersonKeydown(e, index, _onClick);
|
|
7043
7020
|
}
|
|
7044
7021
|
}, /*#__PURE__*/React__default.createElement(PersonToggle, {
|
|
7045
7022
|
isSelected: isSelected,
|
|
7046
|
-
|
|
7023
|
+
onClick: function onClick() {
|
|
7024
|
+
return handleClick(index, _onClick);
|
|
7025
|
+
}
|
|
7047
7026
|
}, /*#__PURE__*/React__default.createElement(PersonImage, {
|
|
7048
7027
|
src: personImage,
|
|
7049
|
-
alt: "",
|
|
7028
|
+
alt: image ? name : "Placeholder image for " + name,
|
|
7050
7029
|
draggable: false,
|
|
7051
7030
|
isDefaultPlaceholder: !(!!image || !!placeholderImage),
|
|
7052
7031
|
greyscale: greyscale
|
|
@@ -7082,8 +7061,7 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7082
7061
|
ref: castWrapperRef,
|
|
7083
7062
|
role: "listbox",
|
|
7084
7063
|
"aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
|
|
7085
|
-
"aria-
|
|
7086
|
-
"aria-multiselectable": "true",
|
|
7064
|
+
"aria-multiselectable": true,
|
|
7087
7065
|
onMouseDown: handleMouseDown,
|
|
7088
7066
|
onMouseMove: handleMouseMove,
|
|
7089
7067
|
onMouseUp: handleMouseUp,
|
|
@@ -7094,15 +7072,14 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7094
7072
|
ref: swipeRef,
|
|
7095
7073
|
onOverflowChange: handleOverflowChange,
|
|
7096
7074
|
limitDragToNavigableRange: true
|
|
7097
|
-
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null,
|
|
7075
|
+
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7098
7076
|
size: "medium",
|
|
7099
7077
|
className: "mobile-only"
|
|
7100
|
-
}, emptySelectionText)),
|
|
7078
|
+
}, emptySelectionText)), selectedIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, onApply && /*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
7101
7079
|
onClick: function onClick() {
|
|
7102
|
-
|
|
7103
|
-
if (onApplyIds) onApplyIds(selectedStateIds);
|
|
7080
|
+
return onApply(selectedIndices);
|
|
7104
7081
|
}
|
|
7105
|
-
}, ctaText != null ? ctaText : 'Apply')
|
|
7082
|
+
}, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
|
|
7106
7083
|
tabIndex: 0,
|
|
7107
7084
|
role: "button",
|
|
7108
7085
|
onClick: onClear,
|
|
@@ -7385,123 +7362,6 @@ var HotFilters = function HotFilters(_ref) {
|
|
|
7385
7362
|
})));
|
|
7386
7363
|
};
|
|
7387
7364
|
|
|
7388
|
-
var _templateObject$P, _templateObject2$C, _templateObject3$p;
|
|
7389
|
-
var ScrollContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__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"])));
|
|
7390
|
-
var TabsContainerWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
|
|
7391
|
-
var StyledTab = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
|
|
7392
|
-
|
|
7393
|
-
var _excluded$j = ["text", "id", "isSelected"];
|
|
7394
|
-
/**
|
|
7395
|
-
* A horizontally scrollable tabs filter component used to display
|
|
7396
|
-
* selectable strategy tabs with configurable styling and selection behavior.
|
|
7397
|
-
*
|
|
7398
|
-
* Features:
|
|
7399
|
-
* - Supports both single-select and multi-select tab scenarios
|
|
7400
|
-
* - Displays an optional icon on selected tabs
|
|
7401
|
-
* - Allows customization of colors and selected icon through `customViewConfig`
|
|
7402
|
-
* - Applies default styling when configuration values are omitted
|
|
7403
|
-
* - Emits the clicked tab item through `onClick`
|
|
7404
|
-
*
|
|
7405
|
-
* @component
|
|
7406
|
-
*
|
|
7407
|
-
* @param {TCustomStrategyTabsFilterProps['items']} items
|
|
7408
|
-
* Collection of tabs to render.
|
|
7409
|
-
*
|
|
7410
|
-
* @param {string} [className]
|
|
7411
|
-
* Optional CSS class name applied to the root scroll container.
|
|
7412
|
-
*
|
|
7413
|
-
* @param {<T>(item: TCustomStrategyTabsFilterProps['items'][number]) => T} onClick
|
|
7414
|
-
* Called when a tab is clicked. Receives the full clicked item (including
|
|
7415
|
-
* `allowedSelectedWith`). The parent is responsible for computing the next
|
|
7416
|
-
* `items` array and passing it back down with updated `isSelected` values.
|
|
7417
|
-
* as long as no return statement `type` is inferred automatically as void
|
|
7418
|
-
*
|
|
7419
|
-
* @param [customViewConfig]
|
|
7420
|
-
* Optional visual configuration used to customize:
|
|
7421
|
-
* - selected tab icon
|
|
7422
|
-
* - selected/unselected background colors
|
|
7423
|
-
* - selected/unselected text colors
|
|
7424
|
-
* - hover color
|
|
7425
|
-
* - pressed color
|
|
7426
|
-
*
|
|
7427
|
-
* Any omitted configuration values will fall back to the component defaults.
|
|
7428
|
-
*
|
|
7429
|
-
* @returns { React.JSX.Element}
|
|
7430
|
-
*
|
|
7431
|
-
* @example
|
|
7432
|
-
* ```tsx
|
|
7433
|
-
* * @example Controlled selection with custom rules
|
|
7434
|
-
* * The component does not manage selection itself. The parent owns `items` (including
|
|
7435
|
-
* * `isSelected`) and updates that state in `onClick`. Use `allowedSelectedWith` on each
|
|
7436
|
-
* * item to describe which other tab IDs may stay selected when that tab is chosen.
|
|
7437
|
-
* *
|
|
7438
|
-
* * ```tsx
|
|
7439
|
-
* * const [items, setItems] = useState<TCustomStrategyTabsFilterItem[]>([
|
|
7440
|
-
* * { id: 'all', text: 'All events', isSelected: true, allowedSelectedWith: [] },
|
|
7441
|
-
* * { id: 'opera', text: 'Opera', isSelected: false, allowedSelectedWith: ['ballet'] },
|
|
7442
|
-
* * { id: 'ballet', text: 'Ballet', isSelected: false, allowedSelectedWith: ['opera'] },
|
|
7443
|
-
* * ]);
|
|
7444
|
-
* *
|
|
7445
|
-
* * const handleClick = (clickedItem: TCustomStrategyTabsFilterItem) => {
|
|
7446
|
-
* * setItems((current) =>
|
|
7447
|
-
* * current.map((item) => {
|
|
7448
|
-
* * if (item.id === clickedItem.id) {
|
|
7449
|
-
* * return { ...item, isSelected: !item.isSelected };
|
|
7450
|
-
* * }
|
|
7451
|
-
* *
|
|
7452
|
-
* * const mayStaySelected = clickedItem.allowedSelectedWith?.includes(item.id);
|
|
7453
|
-
* * return { ...item, isSelected: mayStaySelected ? !item.isSelected : false };
|
|
7454
|
-
* * })
|
|
7455
|
-
* * );
|
|
7456
|
-
* * };
|
|
7457
|
-
* *
|
|
7458
|
-
* * return <CustomStrategyTabsFilter items={items} onClick={handleClick} />;
|
|
7459
|
-
*/
|
|
7460
|
-
var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
|
|
7461
|
-
var _customViewConfig$bac, _customViewConfig$bac2, _customViewConfig$tex, _customViewConfig$tex2;
|
|
7462
|
-
var items = _ref.items,
|
|
7463
|
-
className = _ref.className,
|
|
7464
|
-
onClick = _ref.onClick,
|
|
7465
|
-
customViewConfig = _ref.customViewConfig;
|
|
7466
|
-
var handleClick = React__default.useCallback(function (item) {
|
|
7467
|
-
onClick(item);
|
|
7468
|
-
}, [onClick]);
|
|
7469
|
-
// in case of any partially passed configuration, config defaults non defined
|
|
7470
|
-
var config = {
|
|
7471
|
-
selectIcon: (customViewConfig == null ? void 0 : customViewConfig.selectIcon) || 'Confirm',
|
|
7472
|
-
backgroundColor: {
|
|
7473
|
-
select: (customViewConfig == null || (_customViewConfig$bac = customViewConfig.backgroundColor) == null ? void 0 : _customViewConfig$bac.select) || 'base-black',
|
|
7474
|
-
unselect: (customViewConfig == null || (_customViewConfig$bac2 = customViewConfig.backgroundColor) == null ? void 0 : _customViewConfig$bac2.unselect) || 'base-white'
|
|
7475
|
-
},
|
|
7476
|
-
textColor: {
|
|
7477
|
-
select: (customViewConfig == null || (_customViewConfig$tex = customViewConfig.textColor) == null ? void 0 : _customViewConfig$tex.select) || 'base-white',
|
|
7478
|
-
unselect: (customViewConfig == null || (_customViewConfig$tex2 = customViewConfig.textColor) == null ? void 0 : _customViewConfig$tex2.unselect) || 'base-black'
|
|
7479
|
-
},
|
|
7480
|
-
hoveredColor: (customViewConfig == null ? void 0 : customViewConfig.hoveredColor) || 'base-black',
|
|
7481
|
-
pressedColor: (customViewConfig == null ? void 0 : customViewConfig.pressedColor) || 'black-pressed'
|
|
7482
|
-
};
|
|
7483
|
-
return /*#__PURE__*/React__default.createElement(ScrollContainer, {
|
|
7484
|
-
className: className
|
|
7485
|
-
}, /*#__PURE__*/React__default.createElement(TabsContainerWrapper, null, items.map(function (item) {
|
|
7486
|
-
var text = item.text,
|
|
7487
|
-
id = item.id,
|
|
7488
|
-
isSelected = item.isSelected,
|
|
7489
|
-
rest = _objectWithoutPropertiesLoose(item, _excluded$j);
|
|
7490
|
-
return /*#__PURE__*/React__default.createElement(StyledTab, Object.assign({
|
|
7491
|
-
key: id,
|
|
7492
|
-
onClick: function onClick() {
|
|
7493
|
-
return handleClick(item);
|
|
7494
|
-
},
|
|
7495
|
-
iconName: isSelected ? config.selectIcon : undefined,
|
|
7496
|
-
backgroundColor: isSelected ? config.backgroundColor.select : config.backgroundColor.unselect,
|
|
7497
|
-
textColor: isSelected ? config.textColor.select : config.textColor.unselect,
|
|
7498
|
-
hoveredColor: config.hoveredColor,
|
|
7499
|
-
pressedColor: config.pressedColor,
|
|
7500
|
-
"aria-pressed": isSelected
|
|
7501
|
-
}, rest), text);
|
|
7502
|
-
})));
|
|
7503
|
-
};
|
|
7504
|
-
|
|
7505
7365
|
var InformationCtaVariants = {
|
|
7506
7366
|
Primary: 'Primary',
|
|
7507
7367
|
Secondary: 'Secondary',
|
|
@@ -7531,10 +7391,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7531
7391
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7532
7392
|
};
|
|
7533
7393
|
|
|
7534
|
-
var _templateObject$
|
|
7535
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7536
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7537
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
7394
|
+
var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$n;
|
|
7395
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
|
|
7396
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7397
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$p || (_templateObject3$p = /*#__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) {
|
|
7538
7398
|
var variant = _ref.variant,
|
|
7539
7399
|
theme = _ref.theme;
|
|
7540
7400
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7582,24 +7442,21 @@ var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$n |
|
|
|
7582
7442
|
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";
|
|
7583
7443
|
styleInject(css_248z$1);
|
|
7584
7444
|
|
|
7585
|
-
var css_248z$2 = "/* ~~~~~ General Styling Classes ~~~~~ */\n.typography_color-primary__LOfDi {\n color: var(--color-primary);\n}\n\n.typography_color-black__6MHRL {\n color: var(--color-base-black);\n}\n\n.typography_color-white__PfW5s {\n color: var(--color-base-white);\n}\n\n.typography_color-red__iPlbG {\n color: var(--color-primary-red);\n}\n\n.typography_color-grey__GA1c2 {\n color: var(--color-base-dark-grey);\n}\n\n.typography_color-inherit__RDd0Y {\n color: inherit;\n}\n\n.typography_em__E6tX- {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.typography_display__-F3p4 {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.typography_large__uq0zC {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -3px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.typography_header__BexiD {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.typography_subtitle__aoFTV {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.typography_bodycopy__vYtQ8 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.typography_overline__EnUK3 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.typography_large__uq0zC {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.typography_small__wfQ0K {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.typography_buttontext__vcxNi {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n font-weight: 400;\n\n @media (max-width: 699px) {\n font-weight: 500;\n line-height: 17px;\n }\n}\n\n/* Caption Text */\n.typography_captiontext__91UFb {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n\n @media (max-width: 699px) {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n}\n\n/* Navigation Text */\n.typography_navigationtext__YfGf7 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n font-weight: 500;\n\n @media (max-width: 699px) {\n font-size: 17px;\n line-height: 17px;\n }\n}\n";
|
|
7586
|
-
styleInject(css_248z$2);
|
|
7587
|
-
|
|
7588
|
-
var css_248z$3 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Shadows */\n --shadow-floating: 0px 4px 38px 0px #0000000a;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n --button-anchor-tab-color: var(--color-primary-red);\n\n /* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-small-width: 44px;\n --rotator-button-small-icon-width: 28px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-margin: 12px;\n\n --line-height-listing: 36px;\n\n --upsell-border-color: var(--color-primary-red);\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n\n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n\n --line-height-listing: 34px;\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n }\n\n /* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n --page-header-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
|
|
7445
|
+
var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Shadows */\n --shadow-floating: 0px 4px 38px 0px #0000000a;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n --button-anchor-tab-color: var(--color-primary-red);\n\n /* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-small-width: 44px;\n --rotator-button-small-icon-width: 28px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-margin: 12px;\n\n --line-height-listing: 36px;\n\n --upsell-border-color: var(--color-primary-red);\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n\n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n\n --line-height-listing: 34px;\n\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n --text-transform-body: none;\n --text-transform-header: uppercase;\n --text-transform-subtitle: uppercase;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n }\n\n /* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n --page-header-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-altHeader: none;\n --text-transform-overline: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
|
|
7589
7446
|
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
7590
|
-
styleInject(css_248z$
|
|
7447
|
+
styleInject(css_248z$2);
|
|
7591
7448
|
|
|
7592
|
-
var css_248z$
|
|
7449
|
+
var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n /* Stream theme overrides */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-background: #1a1a1a;\n --color-primary-button: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-anchor-tab-color: var(--color-primary-black);\n\n --rotator-button-color: var(--color-base-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-black);\n\n --heading-promo-bg-color: var(--color-base-black);\n --page-header-bg-color: var(--color-primary-black);\n\n --upsell-border-color: var(--color-primary-black);\n}\n";
|
|
7593
7450
|
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
7594
|
-
styleInject(css_248z$
|
|
7451
|
+
styleInject(css_248z$3);
|
|
7595
7452
|
|
|
7596
|
-
var css_248z$
|
|
7453
|
+
var css_248z$4 = ".cinema-theme-module_cinemaTheme__f5QFs {\n /* White */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-button: #ffffff;\n --color-primary-background: #1a1a1a;\n --color-primary-button-reverse-bg: #ffffff;\n --color-primary-button-reverse: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n --button-color: var(--color-primary-black);\n --button-bg-color: var(--color-base-white);\n --button-hover-color: var(--color-white-hovered);\n --button-pressed-color: var(--color-white-pressed);\n --button-secondary-color: var(--color-base-white);\n --button-secondary-hover-color: var(--color-white-hovered);\n --button-secondary-pressed-color: var(--color-white-pressed);\n --button-tertiary-color: var(--color-base-white);\n --button-tertiary-hover-color: var(--color-white-hovered);\n --button-tertiary-pressed-color: var(--color-white-pressed);\n --button-anchor-tab-color: var(--color-primary-black);\n\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-primary-red);\n --announcement-banner-bg-color: var(--color-base-white);\n --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n --information-panel-color: var(--color-primary-black);\n --information-panel-bg-color: var(--color-base-white);\n --information-panel-button-color: var(--color-base-white);\n --information-panel-button-bg-color: var(--color-primary-red);\n --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n --heading-promo-bg-color: var(--color-base-white);\n --page-header-bg-color: var(--color-primary-black);\n\n --upsell-border-color: var(--color-primary-black);\n}\n";
|
|
7597
7454
|
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
7598
|
-
styleInject(css_248z$
|
|
7455
|
+
styleInject(css_248z$4);
|
|
7599
7456
|
|
|
7600
|
-
var css_248z$
|
|
7457
|
+
var css_248z$5 = ".schools-theme-module_schoolsTheme__CWHba {\n /* Schools theme overrides */\n --base-color-primary: #c8102e;\n --color-primary: #c8102e;\n --color-primary-button: #c8102e;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n\n @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n }\n}\n";
|
|
7601
7458
|
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
7602
|
-
styleInject(css_248z$
|
|
7459
|
+
styleInject(css_248z$5);
|
|
7603
7460
|
|
|
7604
7461
|
/* eslint-disable react/jsx-no-useless-fragment */
|
|
7605
7462
|
var DEFAULT_THEME = ThemeType.Core;
|
|
@@ -7771,39 +7628,33 @@ var Information = function Information(_ref) {
|
|
|
7771
7628
|
})))));
|
|
7772
7629
|
};
|
|
7773
7630
|
|
|
7774
|
-
var _templateObject$
|
|
7775
|
-
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$
|
|
7631
|
+
var _templateObject$Q, _templateObject2$D, _templateObject3$q, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$6;
|
|
7632
|
+
var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7776
7633
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7777
7634
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7778
7635
|
}, devices.mobile);
|
|
7779
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
7780
|
-
|
|
7781
|
-
|
|
7782
|
-
}, devices.mobile, devices.tablet, function (_ref3) {
|
|
7783
|
-
var isMultipleRow = _ref3.isMultipleRow;
|
|
7784
|
-
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 ";
|
|
7785
|
-
});
|
|
7786
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref4) {
|
|
7787
|
-
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7636
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
7637
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
7638
|
+
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7788
7639
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7789
7640
|
});
|
|
7790
|
-
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (
|
|
7791
|
-
var isPageHeadingWithoutTitle =
|
|
7641
|
+
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
|
|
7642
|
+
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7792
7643
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7793
7644
|
}, devices.mobile);
|
|
7794
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__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 (
|
|
7795
|
-
var isPageHeadingWithoutTitle =
|
|
7645
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__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 (_ref4) {
|
|
7646
|
+
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7796
7647
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7797
7648
|
}, devices.mobile);
|
|
7798
7649
|
var TextWrapper = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__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"])));
|
|
7799
|
-
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"])),
|
|
7800
|
-
var isPageHeadingWithoutTitle =
|
|
7650
|
+
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 ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
|
|
7651
|
+
var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
|
|
7652
|
+
return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
|
|
7653
|
+
}, devices.mobile, function (_ref6) {
|
|
7654
|
+
var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
|
|
7801
7655
|
return isPageHeadingWithoutTitle && "\n margin-top: 15px;\n ";
|
|
7802
7656
|
});
|
|
7803
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n
|
|
7804
|
-
var isMultipleRow = _ref8.isMultipleRow;
|
|
7805
|
-
return isMultipleRow ? "margin: 0" : "margin: 10px 0";
|
|
7806
|
-
}, devices.mobile);
|
|
7657
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
7807
7658
|
|
|
7808
7659
|
var PageHeading = function PageHeading(_ref) {
|
|
7809
7660
|
var title = _ref.title,
|
|
@@ -7843,14 +7694,11 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7843
7694
|
return null;
|
|
7844
7695
|
}
|
|
7845
7696
|
};
|
|
7846
|
-
var isMultiRowContainer = !!text || !!title || sponsor;
|
|
7847
7697
|
return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
|
|
7848
7698
|
className: className,
|
|
7849
7699
|
"data-testid": "page-heading-wrapper",
|
|
7850
7700
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
7851
|
-
}, /*#__PURE__*/React__default.createElement(PageHeadingGrid, {
|
|
7852
|
-
isMultipleRow: isMultiRowContainer
|
|
7853
|
-
}, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
|
|
7701
|
+
}, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
|
|
7854
7702
|
"data-testid": "page-heading-title",
|
|
7855
7703
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
7856
7704
|
}, renderBadge(theme), children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
|
|
@@ -7876,9 +7724,9 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7876
7724
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7877
7725
|
};
|
|
7878
7726
|
|
|
7879
|
-
var _templateObject$
|
|
7880
|
-
var ImpactHeaderWrapper = /*#__PURE__*/styled.header(_templateObject$
|
|
7881
|
-
var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7727
|
+
var _templateObject$R, _templateObject2$E, _templateObject3$r, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$7;
|
|
7728
|
+
var ImpactHeaderWrapper = /*#__PURE__*/styled.header(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-black);\n padding: 36px 0;\n\n @media ", " {\n padding: 21px 0;\n }\n"])), devices.mobile);
|
|
7729
|
+
var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$E || (_templateObject2$E = /*#__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) {
|
|
7882
7730
|
var hasButton = _ref.hasButton,
|
|
7883
7731
|
sponsorPresent = _ref.sponsorPresent;
|
|
7884
7732
|
if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
|
|
@@ -7887,7 +7735,7 @@ var ImpactTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templat
|
|
|
7887
7735
|
var sponsorPresent = _ref2.sponsorPresent;
|
|
7888
7736
|
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7889
7737
|
});
|
|
7890
|
-
var TitleButtonWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7738
|
+
var TitleButtonWrapper = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7891
7739
|
var sponsorWidth = _ref3.sponsorWidth;
|
|
7892
7740
|
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7893
7741
|
});
|
|
@@ -7903,10 +7751,10 @@ var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObj
|
|
|
7903
7751
|
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7904
7752
|
}, devices.mobile);
|
|
7905
7753
|
|
|
7906
|
-
var _templateObject$
|
|
7907
|
-
var VideoPlayButton$1 = /*#__PURE__*/styled.button(_templateObject$
|
|
7908
|
-
var VideoControlsWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7909
|
-
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7754
|
+
var _templateObject$S, _templateObject2$F, _templateObject3$s, _templateObject4$q;
|
|
7755
|
+
var VideoPlayButton$1 = /*#__PURE__*/styled.button(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 80px;\n height: 80px;\n background-color: var(--color-base-transparent);\n border: none;\n cursor: pointer;\n\n @media ", " {\n width: 60px;\n height: 60px;\n }\n"])), devices.mobile);
|
|
7756
|
+
var VideoControlsWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
7757
|
+
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__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);
|
|
7910
7758
|
var LeftWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7911
7759
|
|
|
7912
7760
|
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
@@ -7950,7 +7798,7 @@ var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
|
7950
7798
|
})))));
|
|
7951
7799
|
};
|
|
7952
7800
|
|
|
7953
|
-
var _excluded$
|
|
7801
|
+
var _excluded$j = ["text"];
|
|
7954
7802
|
var CHAR_LIMIT = 100;
|
|
7955
7803
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7956
7804
|
var mobileVideo = video.mobile || video.desktop;
|
|
@@ -8072,7 +7920,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
|
8072
7920
|
var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
|
|
8073
7921
|
var _ref5 = link || {},
|
|
8074
7922
|
linkText = _ref5.text,
|
|
8075
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
7923
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
|
|
8076
7924
|
var video = {
|
|
8077
7925
|
elementId: 'impact-header-video',
|
|
8078
7926
|
desktop: videoUrlDesktop,
|
|
@@ -8130,19 +7978,19 @@ var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
|
8130
7978
|
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
8131
7979
|
};
|
|
8132
7980
|
|
|
8133
|
-
var _templateObject$
|
|
8134
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7981
|
+
var _templateObject$T, _templateObject2$G, _templateObject3$t, _templateObject4$r, _templateObject5$l;
|
|
7982
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
8135
7983
|
var color = _ref.color;
|
|
8136
7984
|
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 ";
|
|
8137
7985
|
}, devices.mobileAndTablet);
|
|
8138
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
7986
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__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) {
|
|
8139
7987
|
var hasImage = _ref2.hasImage;
|
|
8140
7988
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8141
7989
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8142
7990
|
var hasImage = _ref3.hasImage;
|
|
8143
7991
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8144
7992
|
});
|
|
8145
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
7993
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__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);
|
|
8146
7994
|
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8147
7995
|
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
8148
7996
|
|
|
@@ -8174,10 +8022,10 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8174
8022
|
})))));
|
|
8175
8023
|
};
|
|
8176
8024
|
|
|
8177
|
-
var _templateObject$
|
|
8178
|
-
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$
|
|
8179
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8180
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8025
|
+
var _templateObject$U, _templateObject2$H, _templateObject3$u, _templateObject4$s, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
8026
|
+
var Wrapper$3 = /*#__PURE__*/styled.section(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
8027
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
8028
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
8181
8029
|
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
|
|
8182
8030
|
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
|
|
8183
8031
|
var theme = _ref.theme;
|
|
@@ -8388,7 +8236,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8388
8236
|
})))))))))));
|
|
8389
8237
|
};
|
|
8390
8238
|
|
|
8391
|
-
var _templateObject$
|
|
8239
|
+
var _templateObject$V, _templateObject2$I, _templateObject3$v, _templateObject4$t;
|
|
8392
8240
|
var GRID = {
|
|
8393
8241
|
desktop: {
|
|
8394
8242
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8401,18 +8249,18 @@ var GRID = {
|
|
|
8401
8249
|
right: '2 / 1 / 3 / 15'
|
|
8402
8250
|
}
|
|
8403
8251
|
};
|
|
8404
|
-
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8252
|
+
var HighlightPanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
8405
8253
|
var $background = _ref.$background;
|
|
8406
8254
|
return "var(--color-" + $background + ")";
|
|
8407
8255
|
});
|
|
8408
|
-
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8256
|
+
var LeftPanel$1 = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__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) {
|
|
8409
8257
|
var hasImage = _ref2.hasImage;
|
|
8410
8258
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8411
8259
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8412
8260
|
var hasImage = _ref3.hasImage;
|
|
8413
8261
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8414
8262
|
});
|
|
8415
|
-
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8263
|
+
var RightPanel$1 = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__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);
|
|
8416
8264
|
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8417
8265
|
|
|
8418
8266
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
@@ -8436,10 +8284,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8436
8284
|
})))));
|
|
8437
8285
|
};
|
|
8438
8286
|
|
|
8439
|
-
var _templateObject$
|
|
8440
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
8441
|
-
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$
|
|
8442
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8287
|
+
var _templateObject$W, _templateObject2$J, _templateObject3$w, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$5, _templateObject0$5;
|
|
8288
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8289
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__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"])));
|
|
8290
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8443
8291
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
8444
8292
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8445
8293
|
var invert = _ref.invert,
|
|
@@ -8549,7 +8397,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8549
8397
|
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
8550
8398
|
};
|
|
8551
8399
|
|
|
8552
|
-
var _excluded$
|
|
8400
|
+
var _excluded$k = ["text"];
|
|
8553
8401
|
var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
|
|
8554
8402
|
var mobileVideo = video.mobile || video.desktop;
|
|
8555
8403
|
var desktopVideo = video.desktop || video.mobile;
|
|
@@ -8654,7 +8502,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8654
8502
|
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
|
|
8655
8503
|
var _ref5 = link || {},
|
|
8656
8504
|
linkText = _ref5.text,
|
|
8657
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
8505
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
|
|
8658
8506
|
// const titleSize = title && title.length > 20 ? 4 : 3;
|
|
8659
8507
|
var video = {
|
|
8660
8508
|
elementId: 'compact-header-video',
|
|
@@ -8690,10 +8538,10 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8690
8538
|
}), linkText))))));
|
|
8691
8539
|
};
|
|
8692
8540
|
|
|
8693
|
-
var _templateObject$
|
|
8694
|
-
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8695
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8696
|
-
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8541
|
+
var _templateObject$X, _templateObject2$K, _templateObject3$x, _templateObject4$u, _templateObject5$o, _templateObject6$h, _templateObject7$d;
|
|
8542
|
+
var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
8543
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
8544
|
+
var HighlightTextWrapper = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
8697
8545
|
var HighlightsInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
8698
8546
|
var hasImages = _ref.hasImages;
|
|
8699
8547
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
@@ -8769,10 +8617,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8769
8617
|
}))))));
|
|
8770
8618
|
};
|
|
8771
8619
|
|
|
8772
|
-
var _templateObject$
|
|
8773
|
-
var linkButtonStyles = /*#__PURE__*/css(_templateObject$
|
|
8774
|
-
var PageNav = /*#__PURE__*/styled.a(_templateObject2$
|
|
8775
|
-
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
8620
|
+
var _templateObject$Y, _templateObject2$L, _templateObject3$y, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$a;
|
|
8621
|
+
var linkButtonStyles = /*#__PURE__*/css(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
8622
|
+
var PageNav = /*#__PURE__*/styled.a(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8623
|
+
var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8776
8624
|
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
8777
8625
|
var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8778
8626
|
var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8928,15 +8776,15 @@ var Pagination = function Pagination(_ref) {
|
|
|
8928
8776
|
}))))));
|
|
8929
8777
|
};
|
|
8930
8778
|
|
|
8931
|
-
var _templateObject$
|
|
8932
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8779
|
+
var _templateObject$Z;
|
|
8780
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: ", ";\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
|
|
8933
8781
|
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8934
8782
|
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8935
8783
|
});
|
|
8936
8784
|
|
|
8937
|
-
var _templateObject
|
|
8938
|
-
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject
|
|
8939
|
-
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$
|
|
8785
|
+
var _templateObject$_, _templateObject2$M;
|
|
8786
|
+
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8787
|
+
var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8940
8788
|
|
|
8941
8789
|
var PersonDetails = function PersonDetails(_ref) {
|
|
8942
8790
|
var _role$people;
|
|
@@ -8958,9 +8806,9 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8958
8806
|
})));
|
|
8959
8807
|
};
|
|
8960
8808
|
|
|
8961
|
-
var _templateObject
|
|
8962
|
-
var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject
|
|
8963
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8809
|
+
var _templateObject$$, _templateObject2$N;
|
|
8810
|
+
var PersonWrapper$1 = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8811
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n filter: ", ";\n }\n"])), function (_ref) {
|
|
8964
8812
|
var greyscale = _ref.greyscale;
|
|
8965
8813
|
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8966
8814
|
});
|
|
@@ -9009,13 +8857,13 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
9009
8857
|
}));
|
|
9010
8858
|
};
|
|
9011
8859
|
|
|
9012
|
-
var _templateObject$
|
|
9013
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9014
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
8860
|
+
var _templateObject$10, _templateObject2$O, _templateObject3$z, _templateObject4$v;
|
|
8861
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8862
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__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) {
|
|
9015
8863
|
var columnCount = _ref.columnCount;
|
|
9016
8864
|
return "repeat(" + columnCount + ", 1fr)";
|
|
9017
8865
|
}, devices.mobile, devices.tablet);
|
|
9018
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8866
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
9019
8867
|
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
9020
8868
|
|
|
9021
8869
|
// Get the total character length of a property in an array of objects
|
|
@@ -9143,8 +8991,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9143
8991
|
}, creditEntries);
|
|
9144
8992
|
};
|
|
9145
8993
|
|
|
9146
|
-
var _templateObject$
|
|
9147
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$
|
|
8994
|
+
var _templateObject$11;
|
|
8995
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$11 || (_templateObject$11 = /*#__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"])));
|
|
9148
8996
|
|
|
9149
8997
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
9150
8998
|
var items = _ref.items;
|
|
@@ -9162,14 +9010,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
9162
9010
|
}));
|
|
9163
9011
|
};
|
|
9164
9012
|
|
|
9165
|
-
var _templateObject$
|
|
9013
|
+
var _templateObject$12, _templateObject3$A, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
9166
9014
|
var LENGTH_TEXT = 28;
|
|
9167
9015
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9168
9016
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9169
9017
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9170
9018
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9171
9019
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9172
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9020
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templateObject$12 = /*#__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) {
|
|
9173
9021
|
var imageToLeft = _ref.imageToLeft;
|
|
9174
9022
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9175
9023
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9179,7 +9027,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templa
|
|
|
9179
9027
|
var asCard = _ref3.asCard;
|
|
9180
9028
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9181
9029
|
});
|
|
9182
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9030
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
9183
9031
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9184
9032
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9185
9033
|
}, function (_ref5) {
|
|
@@ -9238,12 +9086,12 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObj
|
|
|
9238
9086
|
var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject16 || (_templateObject16 = /*#__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);
|
|
9239
9087
|
var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9240
9088
|
|
|
9241
|
-
var _excluded$
|
|
9089
|
+
var _excluded$l = ["text"],
|
|
9242
9090
|
_excluded2$2 = ["text"],
|
|
9243
9091
|
_excluded3$1 = ["text"];
|
|
9244
9092
|
var _buttonTypeToButton$1;
|
|
9245
9093
|
var LENGTH_TEXT$1 = 28;
|
|
9246
|
-
var LENGTH_TEXT_PARAGRAPH =
|
|
9094
|
+
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
9247
9095
|
var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
|
|
9248
9096
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
9249
9097
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -9306,7 +9154,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9306
9154
|
var _ref2 = firstButton || {},
|
|
9307
9155
|
_ref2$text = _ref2.text,
|
|
9308
9156
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9309
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9157
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
9310
9158
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
9311
9159
|
var secondButton = links == null ? void 0 : links[1];
|
|
9312
9160
|
var _ref3 = secondButton || {},
|
|
@@ -9434,21 +9282,21 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9434
9282
|
}))));
|
|
9435
9283
|
};
|
|
9436
9284
|
|
|
9437
|
-
var _templateObject$
|
|
9285
|
+
var _templateObject$13, _templateObject2$P, _templateObject3$B, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g;
|
|
9438
9286
|
var LENGTH_TEXT$2 = 28;
|
|
9439
9287
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9440
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9288
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9441
9289
|
var imageToLeft = _ref.imageToLeft;
|
|
9442
9290
|
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'";
|
|
9443
9291
|
}, devices.tablet, function (_ref2) {
|
|
9444
9292
|
var imageToLeft = _ref2.imageToLeft;
|
|
9445
9293
|
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'";
|
|
9446
9294
|
}, devices.mobile);
|
|
9447
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9295
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9448
9296
|
var imageToLeft = _ref3.imageToLeft;
|
|
9449
9297
|
return imageToLeft ? 'left' : 'right';
|
|
9450
9298
|
}, devices.mobile);
|
|
9451
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9299
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__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) {
|
|
9452
9300
|
var imageToLeft = _ref4.imageToLeft;
|
|
9453
9301
|
return imageToLeft ? 'right' : 'left';
|
|
9454
9302
|
}, devices.mobile);
|
|
@@ -9477,8 +9325,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templat
|
|
|
9477
9325
|
return '';
|
|
9478
9326
|
});
|
|
9479
9327
|
|
|
9480
|
-
var _templateObject$
|
|
9481
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9328
|
+
var _templateObject$14;
|
|
9329
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__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) {
|
|
9482
9330
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9483
9331
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9484
9332
|
return aspectRatio;
|
|
@@ -9590,7 +9438,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9590
9438
|
}));
|
|
9591
9439
|
};
|
|
9592
9440
|
|
|
9593
|
-
var _excluded$
|
|
9441
|
+
var _excluded$m = ["text"],
|
|
9594
9442
|
_excluded2$3 = ["text"];
|
|
9595
9443
|
var LENGTH_TEXT$3 = 28;
|
|
9596
9444
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
@@ -9617,7 +9465,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9617
9465
|
var _ref2 = primaryButton || {},
|
|
9618
9466
|
_ref2$text = _ref2.text,
|
|
9619
9467
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9620
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9468
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
|
|
9621
9469
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
9622
9470
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
9623
9471
|
var _ref3 = tertiaryButton || {},
|
|
@@ -9660,10 +9508,10 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9660
9508
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9661
9509
|
};
|
|
9662
9510
|
|
|
9663
|
-
var _templateObject$
|
|
9664
|
-
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$
|
|
9665
|
-
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$
|
|
9666
|
-
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$
|
|
9511
|
+
var _templateObject$15, _templateObject2$Q, _templateObject3$C;
|
|
9512
|
+
var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
9513
|
+
var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
9514
|
+
var AttributionBlock = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject3$C || (_templateObject3$C = /*#__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);
|
|
9667
9515
|
|
|
9668
9516
|
/* eslint-disable react/no-danger */
|
|
9669
9517
|
var Quote = function Quote(_ref) {
|
|
@@ -9693,9 +9541,9 @@ var Quote = function Quote(_ref) {
|
|
|
9693
9541
|
}, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
|
|
9694
9542
|
};
|
|
9695
9543
|
|
|
9696
|
-
var _templateObject$
|
|
9697
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9698
|
-
var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$
|
|
9544
|
+
var _templateObject$16, _templateObject2$R, _templateObject3$D;
|
|
9545
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9546
|
+
var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9699
9547
|
var horizontalMode = _ref.horizontalMode;
|
|
9700
9548
|
if (horizontalMode) return 'row';
|
|
9701
9549
|
return 'column';
|
|
@@ -9703,7 +9551,7 @@ var RadioGroup = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2
|
|
|
9703
9551
|
var gap = _ref2.gap;
|
|
9704
9552
|
return gap + "px";
|
|
9705
9553
|
});
|
|
9706
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9554
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9707
9555
|
var darkMode = _ref3.darkMode;
|
|
9708
9556
|
if (darkMode) return 'var(--base-color-white)';
|
|
9709
9557
|
return 'var(--base-color-errorstate)';
|
|
@@ -9780,10 +9628,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9780
9628
|
}, error))));
|
|
9781
9629
|
};
|
|
9782
9630
|
|
|
9783
|
-
var _templateObject$
|
|
9784
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9785
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9786
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9631
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
9632
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__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);
|
|
9633
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__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"])));
|
|
9634
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__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);
|
|
9787
9635
|
|
|
9788
9636
|
/* eslint-disable react/no-danger */
|
|
9789
9637
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9839,10 +9687,10 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9839
9687
|
return null;
|
|
9840
9688
|
};
|
|
9841
9689
|
|
|
9842
|
-
var _templateObject$
|
|
9843
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9844
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
9845
|
-
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$
|
|
9690
|
+
var _templateObject$18, _templateObject2$T, _templateObject3$F, _templateObject5$s, _templateObject6$l, _templateObject7$h;
|
|
9691
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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);
|
|
9692
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
9693
|
+
var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$F || (_templateObject3$F = /*#__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"])));
|
|
9846
9694
|
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__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);
|
|
9847
9695
|
var TextLinkWrapper$3 = /*#__PURE__*/styled(TextLink)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
9848
9696
|
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"])));
|
|
@@ -9983,8 +9831,8 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
9983
9831
|
})));
|
|
9984
9832
|
};
|
|
9985
9833
|
|
|
9986
|
-
var _templateObject$
|
|
9987
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9834
|
+
var _templateObject$19;
|
|
9835
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9988
9836
|
|
|
9989
9837
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9990
9838
|
var HarmonicSize = {
|
|
@@ -10026,9 +9874,9 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
10026
9874
|
}, description)))));
|
|
10027
9875
|
};
|
|
10028
9876
|
|
|
10029
|
-
var _templateObject$
|
|
10030
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
10031
|
-
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9877
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
|
|
9878
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9879
|
+
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__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) {
|
|
10032
9880
|
var width = _ref.width;
|
|
10033
9881
|
if (!width) return 'none';
|
|
10034
9882
|
return width + "px";
|
|
@@ -10045,7 +9893,7 @@ var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObje
|
|
|
10045
9893
|
if (darkMode) return "0 0 0 1px var(--color-state-medium)";
|
|
10046
9894
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10047
9895
|
}, devices.mobile, devices.mobile);
|
|
10048
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9896
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n\n @media ", " {\n margin: 0 0 12px;\n }\n"])), function (_ref5) {
|
|
10049
9897
|
var darkMode = _ref5.darkMode;
|
|
10050
9898
|
if (darkMode) return "var(--color-base-white)";
|
|
10051
9899
|
return "var(--color-primary-black)";
|
|
@@ -10056,7 +9904,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObjec
|
|
|
10056
9904
|
return "var(--color-state-error)";
|
|
10057
9905
|
});
|
|
10058
9906
|
|
|
10059
|
-
var _excluded$
|
|
9907
|
+
var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
|
|
10060
9908
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10061
9909
|
return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10062
9910
|
iconName: "DropdownArrow"
|
|
@@ -10111,7 +9959,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10111
9959
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10112
9960
|
components = _ref2.components,
|
|
10113
9961
|
className = _ref2.className,
|
|
10114
|
-
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9962
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
|
|
10115
9963
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10116
9964
|
label: label,
|
|
10117
9965
|
error: error,
|
|
@@ -10130,7 +9978,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10130
9978
|
})));
|
|
10131
9979
|
};
|
|
10132
9980
|
|
|
10133
|
-
var _excluded$
|
|
9981
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "components"];
|
|
10134
9982
|
/**
|
|
10135
9983
|
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
10136
9984
|
* component for select instead of regular react-select component. This can be used
|
|
@@ -10152,7 +10000,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10152
10000
|
_ref$darkMode = _ref.darkMode,
|
|
10153
10001
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
10154
10002
|
components = _ref.components,
|
|
10155
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
10003
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
|
|
10156
10004
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10157
10005
|
label: label,
|
|
10158
10006
|
error: error,
|
|
@@ -10169,15 +10017,15 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10169
10017
|
})));
|
|
10170
10018
|
};
|
|
10171
10019
|
|
|
10172
|
-
var _templateObject$
|
|
10173
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10174
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10020
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$H, _templateObject4$z;
|
|
10021
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
10022
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__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) {
|
|
10175
10023
|
if (props.showMenu) {
|
|
10176
10024
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
10177
10025
|
}
|
|
10178
10026
|
return "display: none;";
|
|
10179
10027
|
});
|
|
10180
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10028
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--color-primary-red);\n }\n }\n\n && svg path {\n fill: var(--color-primary-black);\n }\n\n :hover {\n && svg path {\n fill: var(--color-primary-red);\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
10181
10029
|
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 0;\n }\n }\n"])), devices.mobileAndTablet);
|
|
10182
10030
|
|
|
10183
10031
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
@@ -10304,9 +10152,9 @@ var Tabs = function Tabs(_ref) {
|
|
|
10304
10152
|
}, "Menu"))))));
|
|
10305
10153
|
};
|
|
10306
10154
|
|
|
10307
|
-
var _templateObject$
|
|
10308
|
-
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10309
|
-
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$
|
|
10155
|
+
var _templateObject$1c, _templateObject3$I, _templateObject4$A, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$7;
|
|
10156
|
+
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
|
|
10157
|
+
var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-color);\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
|
|
10310
10158
|
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
|
|
10311
10159
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10312
10160
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
@@ -10410,8 +10258,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10410
10258
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10411
10259
|
};
|
|
10412
10260
|
|
|
10413
|
-
var _templateObject$
|
|
10414
|
-
var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$
|
|
10261
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$J;
|
|
10262
|
+
var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
10415
10263
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10416
10264
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10417
10265
|
return aspectRatio;
|
|
@@ -10421,10 +10269,10 @@ var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$1e || (_templateObjec
|
|
|
10421
10269
|
height = _ref2.height;
|
|
10422
10270
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10423
10271
|
});
|
|
10424
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
10425
|
-
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$
|
|
10272
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
10273
|
+
var CaptionContext = /*#__PURE__*/styled(Caption)(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
10426
10274
|
|
|
10427
|
-
var _excluded$
|
|
10275
|
+
var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10428
10276
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
10429
10277
|
var caption = _ref.caption,
|
|
10430
10278
|
altText = _ref.altText,
|
|
@@ -10434,7 +10282,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10434
10282
|
loading = _ref.loading,
|
|
10435
10283
|
aspectRatio = _ref.aspectRatio,
|
|
10436
10284
|
className = _ref.className,
|
|
10437
|
-
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
10285
|
+
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
|
|
10438
10286
|
return /*#__PURE__*/React__default.createElement(Wrapper$6, Object.assign({
|
|
10439
10287
|
aspectRatio: aspectRatio,
|
|
10440
10288
|
className: className
|
|
@@ -10455,10 +10303,10 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10455
10303
|
}, caption))));
|
|
10456
10304
|
};
|
|
10457
10305
|
|
|
10458
|
-
var _templateObject$
|
|
10459
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10460
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10461
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
10306
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$u, _templateObject6$n;
|
|
10307
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
10308
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10309
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10462
10310
|
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10463
10311
|
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
10464
10312
|
var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
@@ -10499,8 +10347,8 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10499
10347
|
}, title)))));
|
|
10500
10348
|
};
|
|
10501
10349
|
|
|
10502
|
-
var _templateObject$
|
|
10503
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10350
|
+
var _templateObject$1f;
|
|
10351
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__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);
|
|
10504
10352
|
|
|
10505
10353
|
var NavTop = function NavTop(_ref) {
|
|
10506
10354
|
var accountText = _ref.accountText,
|
|
@@ -10540,10 +10388,10 @@ var NavTop = function NavTop(_ref) {
|
|
|
10540
10388
|
}));
|
|
10541
10389
|
};
|
|
10542
10390
|
|
|
10543
|
-
var _templateObject$
|
|
10544
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10545
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10546
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
10391
|
+
var _templateObject$1g, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v;
|
|
10392
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3 {\n margin: 0px 0px 12px 0px !important;\n }\n"])));
|
|
10393
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 12px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
10394
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n margin-bottom: 12px;\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10547
10395
|
var isVisible = _ref.isVisible;
|
|
10548
10396
|
return isVisible ? 'visible' : 'hidden';
|
|
10549
10397
|
});
|
|
@@ -10551,7 +10399,36 @@ var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$C || (_templat
|
|
|
10551
10399
|
var isVisible = _ref2.isVisible;
|
|
10552
10400
|
return isVisible ? 'visible' : 'hidden';
|
|
10553
10401
|
});
|
|
10554
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-
|
|
10402
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-family: var(--font-family-sans);\n\n & h1 {\n font-family: var(--font-family-sans);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-family: var(--font-family-sans);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em,\n i {\n font-style: italic;\n }\n\n & strong,\n b {\n font-weight: 500;\n letter-spacing: -0.5px;\n }\n\n font-size: 19px;\n\n @media ", " {\n font-size: 17px;\n }\n\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])), devices.mobile);
|
|
10403
|
+
|
|
10404
|
+
var _templateObject$1h, _templateObject2$Z;
|
|
10405
|
+
var TextLinkWrapper$4 = /*#__PURE__*/styled.a(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 28px;\n color: var(--color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media ", " {\n font-size: 17px;\n }\n"])), function (_ref) {
|
|
10406
|
+
var color = _ref.color;
|
|
10407
|
+
return color;
|
|
10408
|
+
}, devices.mobile);
|
|
10409
|
+
var TextLinkIconWrapper$1 = /*#__PURE__*/styled.span(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
10410
|
+
|
|
10411
|
+
var _excluded$q = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
10412
|
+
var ReadMoreTextLink = function ReadMoreTextLink(_ref) {
|
|
10413
|
+
var children = _ref.children,
|
|
10414
|
+
iconName = _ref.iconName,
|
|
10415
|
+
iconDirection = _ref.iconDirection,
|
|
10416
|
+
textColor = _ref.textColor,
|
|
10417
|
+
_ref$disableTruncatio = _ref.disableTruncation,
|
|
10418
|
+
disableTruncation = _ref$disableTruncatio === void 0 ? false : _ref$disableTruncatio,
|
|
10419
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
|
10420
|
+
var truncatedString = disableTruncation ? children : children.substring(0, 30);
|
|
10421
|
+
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$4, Object.assign({
|
|
10422
|
+
color: textColor,
|
|
10423
|
+
iconName: iconName
|
|
10424
|
+
}, rest), truncatedString, iconName ? (/*#__PURE__*/React__default.createElement(TextLinkIconWrapper$1, {
|
|
10425
|
+
"data-testid": "text-link-icon"
|
|
10426
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10427
|
+
iconName: iconName,
|
|
10428
|
+
direction: iconDirection,
|
|
10429
|
+
color: textColor
|
|
10430
|
+
}))) : null);
|
|
10431
|
+
};
|
|
10555
10432
|
|
|
10556
10433
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10557
10434
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10570,7 +10447,8 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10570
10447
|
hideText = _ref.hideText,
|
|
10571
10448
|
characterLimit = _ref.characterLimit,
|
|
10572
10449
|
_ref$truncate = _ref.truncate,
|
|
10573
|
-
truncate = _ref$truncate === void 0 ? true : _ref$truncate
|
|
10450
|
+
truncate = _ref$truncate === void 0 ? true : _ref$truncate,
|
|
10451
|
+
className = _ref.className;
|
|
10574
10452
|
var _useState = useState(initOpen),
|
|
10575
10453
|
isFullTextOpen = _useState[0],
|
|
10576
10454
|
setIsFullTextOpen = _useState[1];
|
|
@@ -10607,14 +10485,14 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10607
10485
|
var contentContainerId = title + "-read-more-content";
|
|
10608
10486
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, {
|
|
10609
10487
|
tabIndex: 0,
|
|
10610
|
-
onKeyDown: handleKeyDown
|
|
10488
|
+
onKeyDown: handleKeyDown,
|
|
10489
|
+
className: className
|
|
10611
10490
|
}, /*#__PURE__*/React__default.createElement(ReadMoreContainer, {
|
|
10612
10491
|
"aria-label": title,
|
|
10613
10492
|
"aria-expanded": isFullTextOpen,
|
|
10614
10493
|
"aria-controls": contentContainerId
|
|
10615
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10616
|
-
|
|
10617
|
-
semanticLevel: 3
|
|
10494
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
10495
|
+
size: "small"
|
|
10618
10496
|
}, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$5, {
|
|
10619
10497
|
"data-testid": "richcontainer",
|
|
10620
10498
|
ref: readMoreContent,
|
|
@@ -10625,17 +10503,17 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10625
10503
|
}
|
|
10626
10504
|
}, /*#__PURE__*/React__default.createElement(FullTextContainer, {
|
|
10627
10505
|
isVisible: isFullTextOpen
|
|
10628
|
-
}, fullText)), /*#__PURE__*/React__default.createElement(LinkContainer, null, (fullText || isFullTextOpen) && (/*#__PURE__*/React__default.createElement(
|
|
10506
|
+
}, fullText)), /*#__PURE__*/React__default.createElement(LinkContainer, null, (fullText || isFullTextOpen) && (/*#__PURE__*/React__default.createElement(ReadMoreTextLink, {
|
|
10629
10507
|
tabIndex: 0,
|
|
10630
10508
|
role: "button",
|
|
10631
10509
|
onClick: toggleFullText
|
|
10632
10510
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10633
10511
|
};
|
|
10634
10512
|
|
|
10635
|
-
var _templateObject$1i, _templateObject2$_, _templateObject3$
|
|
10513
|
+
var _templateObject$1i, _templateObject2$_, _templateObject3$M, _templateObject4$D, _templateObject5$w;
|
|
10636
10514
|
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10637
10515
|
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$_ || (_templateObject2$_ = /*#__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);
|
|
10638
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
10516
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
10639
10517
|
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
10640
10518
|
var isActive = _ref.isActive;
|
|
10641
10519
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
@@ -10796,10 +10674,10 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10796
10674
|
});
|
|
10797
10675
|
};
|
|
10798
10676
|
|
|
10799
|
-
var _templateObject$1j, _templateObject2$$, _templateObject3$
|
|
10677
|
+
var _templateObject$1j, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o;
|
|
10800
10678
|
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10801
10679
|
var Sections = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10802
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
10680
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10803
10681
|
var color = _ref.color;
|
|
10804
10682
|
return "var(--base-color-" + color + ")";
|
|
10805
10683
|
});
|
|
@@ -10890,10 +10768,10 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10890
10768
|
}, strengthLabel))));
|
|
10891
10769
|
};
|
|
10892
10770
|
|
|
10893
|
-
var _templateObject$1k, _templateObject2$10, _templateObject3$
|
|
10771
|
+
var _templateObject$1k, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
|
|
10894
10772
|
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10895
10773
|
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10896
|
-
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10774
|
+
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10897
10775
|
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10898
10776
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10899
10777
|
}, devices.tablet, devices.mobile);
|
|
@@ -11105,7 +10983,7 @@ var Table = function Table(_ref) {
|
|
|
11105
10983
|
}))));
|
|
11106
10984
|
};
|
|
11107
10985
|
|
|
11108
|
-
var _templateObject$1l, _templateObject2$11, _templateObject3$
|
|
10986
|
+
var _templateObject$1l, _templateObject2$11, _templateObject3$P, _templateObject4$G, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
11109
10987
|
var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11110
10988
|
var theme = _ref.theme;
|
|
11111
10989
|
return "var(--color-" + theme + ")";
|
|
@@ -11114,7 +10992,7 @@ var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1l || (_templateObjec
|
|
|
11114
10992
|
return "var(--color-" + theme + ")";
|
|
11115
10993
|
});
|
|
11116
10994
|
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11117
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
10995
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
11118
10996
|
var Error = /*#__PURE__*/styled.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
11119
10997
|
var Form = /*#__PURE__*/styled.form(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
|
|
11120
10998
|
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
@@ -11693,7 +11571,7 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11693
11571
|
}));
|
|
11694
11572
|
};
|
|
11695
11573
|
|
|
11696
|
-
var _templateObject$1o, _templateObject2$14, _templateObject3$
|
|
11574
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$Q, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11697
11575
|
var color = 'primary-black';
|
|
11698
11576
|
var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
|
|
11699
11577
|
borderColor: color,
|
|
@@ -11702,7 +11580,7 @@ var Button$2 = /*#__PURE__*/styled(SecondaryButton).attrs({
|
|
|
11702
11580
|
textColor: color
|
|
11703
11581
|
})(_templateObject$1o || (_templateObject$1o = /*#__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);
|
|
11704
11582
|
var Container$7 = /*#__PURE__*/styled.div(_templateObject2$14 || (_templateObject2$14 = /*#__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);
|
|
11705
|
-
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$
|
|
11583
|
+
var Description = /*#__PURE__*/styled(BodyContentTextContainer)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11706
11584
|
var Heading = /*#__PURE__*/styled(HarmonicHeader).attrs({
|
|
11707
11585
|
serif: true,
|
|
11708
11586
|
size: 'medium'
|
|
@@ -11929,14 +11807,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11929
11807
|
})))))));
|
|
11930
11808
|
};
|
|
11931
11809
|
|
|
11932
|
-
var _templateObject$1q, _templateObject2$15, _templateObject3$
|
|
11810
|
+
var _templateObject$1q, _templateObject2$15, _templateObject3$R, _templateObject4$J, _templateObject5$C, _templateObject6$s, _templateObject7$m;
|
|
11933
11811
|
var FooterSection = /*#__PURE__*/styled(Grid)(_templateObject$1q || (_templateObject$1q = /*#__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);
|
|
11934
11812
|
var PolicyLinksSection = /*#__PURE__*/styled(GridItem)(_templateObject2$15 || (_templateObject2$15 = /*#__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);
|
|
11935
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$
|
|
11813
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled(GridItem)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
11936
11814
|
var SectionWrapper = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11937
11815
|
var LogoAndDescriptionSection = /*#__PURE__*/styled(GridItem)(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11938
11816
|
var SponsorLogoContainer = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11939
|
-
var TextLinkWrapper$
|
|
11817
|
+
var TextLinkWrapper$5 = /*#__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"])));
|
|
11940
11818
|
|
|
11941
11819
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11942
11820
|
var Footer = function Footer(_ref) {
|
|
@@ -11965,14 +11843,14 @@ var Footer = function Footer(_ref) {
|
|
|
11965
11843
|
"data-testid": "contact-newsletter"
|
|
11966
11844
|
}, /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(SocialLinks, {
|
|
11967
11845
|
items: rawSocialMediaLinks
|
|
11968
|
-
}), /*#__PURE__*/React__default.createElement(TextLinkWrapper$
|
|
11846
|
+
}), /*#__PURE__*/React__default.createElement(TextLinkWrapper$5, {
|
|
11969
11847
|
href: contact.href,
|
|
11970
11848
|
"aria-label": contact.title,
|
|
11971
11849
|
tabIndex: isMobile ? 2 : 0
|
|
11972
11850
|
}, contact.title)), /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11973
11851
|
size: "large",
|
|
11974
11852
|
color: "white"
|
|
11975
|
-
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$
|
|
11853
|
+
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$5, {
|
|
11976
11854
|
href: newsletter.link.href,
|
|
11977
11855
|
"data-roh": newsletter.link.dataRoh,
|
|
11978
11856
|
"aria-label": newsletter.link.title,
|
|
@@ -11994,7 +11872,7 @@ var Footer = function Footer(_ref) {
|
|
|
11994
11872
|
}, additionalInfo))));
|
|
11995
11873
|
};
|
|
11996
11874
|
|
|
11997
|
-
var _templateObject$1r, _templateObject2$16, _templateObject3$
|
|
11875
|
+
var _templateObject$1r, _templateObject2$16, _templateObject3$S, _templateObject4$K, _templateObject5$D, _templateObject8$f, _templateObject9$9, _templateObject0$8;
|
|
11998
11876
|
var LIST_ITEM_GAP = 32;
|
|
11999
11877
|
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1r || (_templateObject$1r = /*#__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) {
|
|
12000
11878
|
var bottomBorder = _ref.bottomBorder;
|
|
@@ -12003,7 +11881,7 @@ var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1r || (_templa
|
|
|
12003
11881
|
var withShadow = _ref2.withShadow;
|
|
12004
11882
|
return withShadow && css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
12005
11883
|
});
|
|
12006
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
11884
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
12007
11885
|
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
12008
11886
|
var TabsList = /*#__PURE__*/styled.ul(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
12009
11887
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
@@ -12275,13 +12153,13 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12275
12153
|
})))) : null))));
|
|
12276
12154
|
};
|
|
12277
12155
|
|
|
12278
|
-
var _templateObject$1s, _templateObject2$17, _templateObject3$
|
|
12156
|
+
var _templateObject$1s, _templateObject2$17, _templateObject3$T, _templateObject4$L, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$a, _templateObject0$9;
|
|
12279
12157
|
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
12280
12158
|
var sticky = _ref.sticky;
|
|
12281
12159
|
return sticky ? 'sticky' : 'initial';
|
|
12282
12160
|
}, zIndexes.anchor);
|
|
12283
12161
|
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
12284
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
12162
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
12285
12163
|
var title = _ref2.title;
|
|
12286
12164
|
return title ? 'row' : 'row-reverse';
|
|
12287
12165
|
}, devices.tablet, devices.mobile);
|
|
@@ -12335,10 +12213,10 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12335
12213
|
}, message))));
|
|
12336
12214
|
};
|
|
12337
12215
|
|
|
12338
|
-
var _templateObject$1t, _templateObject2$18, _templateObject3$
|
|
12216
|
+
var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M;
|
|
12339
12217
|
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__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);
|
|
12340
12218
|
var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$18 || (_templateObject2$18 = /*#__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);
|
|
12341
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12219
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
|
|
12342
12220
|
var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
12343
12221
|
|
|
12344
12222
|
var UpsellSection = function UpsellSection(_ref) {
|
|
@@ -12416,13 +12294,13 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12416
12294
|
}, children)));
|
|
12417
12295
|
};
|
|
12418
12296
|
|
|
12419
|
-
var _templateObject$1v, _templateObject2$1a, _templateObject3$
|
|
12297
|
+
var _templateObject$1v, _templateObject2$1a, _templateObject3$V, _templateObject4$N;
|
|
12420
12298
|
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1v || (_templateObject$1v = /*#__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);
|
|
12421
12299
|
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$1a || (_templateObject2$1a = /*#__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);
|
|
12422
|
-
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
12300
|
+
var ContentWrapper$3 = /*#__PURE__*/styled.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
12423
12301
|
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
12424
12302
|
|
|
12425
|
-
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"
|
|
12303
|
+
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12426
12304
|
var MAX_Z_INDEX = 9999999999;
|
|
12427
12305
|
if (Modal.defaultStyles.content) {
|
|
12428
12306
|
Modal.defaultStyles.content.position = 'static';
|
|
@@ -12496,8 +12374,6 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
12496
12374
|
setIsOpen = _ref.setIsOpen,
|
|
12497
12375
|
children = _ref.children,
|
|
12498
12376
|
appElementId = _ref.appElementId,
|
|
12499
|
-
_ref$closeButtonAriaL = _ref.closeButtonAriaLabel,
|
|
12500
|
-
closeButtonAriaLabel = _ref$closeButtonAriaL === void 0 ? 'Close modal window' : _ref$closeButtonAriaL,
|
|
12501
12377
|
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
|
|
12502
12378
|
var isMobile = useMobile();
|
|
12503
12379
|
var customStyles = {
|
|
@@ -12530,11 +12406,10 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
12530
12406
|
columnSpanSmallDevice: 14
|
|
12531
12407
|
}, /*#__PURE__*/React__default.createElement(InnerModal, null, /*#__PURE__*/React__default.createElement(CloseButton, {
|
|
12532
12408
|
onClick: closeModalHandler,
|
|
12533
|
-
"aria-label":
|
|
12409
|
+
"aria-label": "Close modal window",
|
|
12534
12410
|
tabIndex: 0
|
|
12535
12411
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
12536
|
-
iconName: "Close"
|
|
12537
|
-
"aria-hidden": "true"
|
|
12412
|
+
iconName: "Close"
|
|
12538
12413
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$3, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
12539
12414
|
};
|
|
12540
12415
|
|
|
@@ -12627,7 +12502,7 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12627
12502
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12628
12503
|
};
|
|
12629
12504
|
|
|
12630
|
-
var _templateObject$1w, _templateObject2$1b, _templateObject3$
|
|
12505
|
+
var _templateObject$1w, _templateObject2$1b, _templateObject3$W, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$b;
|
|
12631
12506
|
var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1w || (_templateObject$1w = /*#__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) {
|
|
12632
12507
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12633
12508
|
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 }";
|
|
@@ -12640,7 +12515,7 @@ var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$1b || (_temp
|
|
|
12640
12515
|
isActive = _ref3.isActive;
|
|
12641
12516
|
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 ";
|
|
12642
12517
|
});
|
|
12643
|
-
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
12518
|
+
var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
|
|
12644
12519
|
var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12645
12520
|
var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12646
12521
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
@@ -12664,12 +12539,6 @@ var GRID_OFFSET_MARGIN = {
|
|
|
12664
12539
|
desktop: 3
|
|
12665
12540
|
};
|
|
12666
12541
|
var FULLSCREEN_FIGCAPTION_HEIGHT = 34;
|
|
12667
|
-
var defaultTitleGridConfig = {
|
|
12668
|
-
columnStartDesktop: 3,
|
|
12669
|
-
columnSpanDesktop: 10,
|
|
12670
|
-
columnStartDevice: 2,
|
|
12671
|
-
columnSpanDevice: 9
|
|
12672
|
-
};
|
|
12673
12542
|
var Carousel = function Carousel(_ref) {
|
|
12674
12543
|
var children = _ref.children,
|
|
12675
12544
|
type = _ref.type,
|
|
@@ -12686,10 +12555,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12686
12555
|
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
12687
12556
|
_ref$useOffset = _ref.useOffset,
|
|
12688
12557
|
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset,
|
|
12689
|
-
titleFontFamily = _ref.titleFontFamily
|
|
12690
|
-
titleGrid = _ref.titleGrid,
|
|
12691
|
-
_ref$enableInfiniteOn = _ref.enableInfiniteOnInteraction,
|
|
12692
|
-
enableInfiniteOnInteraction = _ref$enableInfiniteOn === void 0 ? false : _ref$enableInfiniteOn;
|
|
12558
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
12693
12559
|
var _useState = useState(false),
|
|
12694
12560
|
isFullscreen = _useState[0],
|
|
12695
12561
|
setIsFullscreen = _useState[1];
|
|
@@ -12711,15 +12577,11 @@ var Carousel = function Carousel(_ref) {
|
|
|
12711
12577
|
var _useState6 = useState(true),
|
|
12712
12578
|
showRotatorButtons = _useState6[0],
|
|
12713
12579
|
setShowRotatorButtons = _useState6[1];
|
|
12714
|
-
var _useState7 = useState(infinite),
|
|
12715
|
-
isInfinite = _useState7[0],
|
|
12716
|
-
setIsInfinite = _useState7[1];
|
|
12717
12580
|
var swipeRef = useRef(null);
|
|
12718
12581
|
var carouselRef = useRef(null);
|
|
12719
12582
|
var titleButtonsGridRef = useRef(null);
|
|
12720
12583
|
var childrenCount = React__default.Children.count(children);
|
|
12721
12584
|
useEffect(function () {
|
|
12722
|
-
setIsInfinite(infinite);
|
|
12723
12585
|
if (infinite) {
|
|
12724
12586
|
setAvailablePrev(true);
|
|
12725
12587
|
setAvailableNext(true);
|
|
@@ -12762,7 +12624,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12762
12624
|
} else if (window.matchMedia != null && window.matchMedia(devices.tablet).matches) {
|
|
12763
12625
|
setSlidesOffsetBefore(GRID_OFFSET_MARGIN.tablet);
|
|
12764
12626
|
} else {
|
|
12765
|
-
setSlidesOffsetBefore(
|
|
12627
|
+
setSlidesOffsetBefore(infinite ? Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop : 0);
|
|
12766
12628
|
}
|
|
12767
12629
|
var hasNext = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext();
|
|
12768
12630
|
if (typeof hasNext === 'boolean') {
|
|
@@ -12777,16 +12639,10 @@ var Carousel = function Carousel(_ref) {
|
|
|
12777
12639
|
}, [useOffset, active]);
|
|
12778
12640
|
var onNext = function onNext() {
|
|
12779
12641
|
var _swipeRef$current3;
|
|
12780
|
-
if (enableInfiniteOnInteraction && !isInfinite) {
|
|
12781
|
-
setIsInfinite(true);
|
|
12782
|
-
}
|
|
12783
12642
|
(_swipeRef$current3 = swipeRef.current) == null || _swipeRef$current3.nextSlide();
|
|
12784
12643
|
};
|
|
12785
12644
|
var onPrev = function onPrev() {
|
|
12786
12645
|
var _swipeRef$current4;
|
|
12787
|
-
if (enableInfiniteOnInteraction && !isInfinite) {
|
|
12788
|
-
setIsInfinite(true);
|
|
12789
|
-
}
|
|
12790
12646
|
(_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.prevSlide();
|
|
12791
12647
|
};
|
|
12792
12648
|
var onClickFullscreen = function onClickFullscreen() {
|
|
@@ -12823,7 +12679,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12823
12679
|
}
|
|
12824
12680
|
};
|
|
12825
12681
|
var onIndexChangeHandler = function onIndexChangeHandler(index) {
|
|
12826
|
-
if (
|
|
12682
|
+
if (infinite) {
|
|
12827
12683
|
setAvailablePrev(true);
|
|
12828
12684
|
setAvailableNext(true);
|
|
12829
12685
|
return;
|
|
@@ -12835,7 +12691,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12835
12691
|
});
|
|
12836
12692
|
};
|
|
12837
12693
|
var handleOverflowChange = function handleOverflowChange(overflow) {
|
|
12838
|
-
if (!
|
|
12694
|
+
if (!infinite) {
|
|
12839
12695
|
var _swipeRef$current8;
|
|
12840
12696
|
setShowRotatorButtons(overflow);
|
|
12841
12697
|
var hasNext = (_swipeRef$current8 = swipeRef.current) == null ? void 0 : _swipeRef$current8.hasNext();
|
|
@@ -12850,12 +12706,6 @@ var Carousel = function Carousel(_ref) {
|
|
|
12850
12706
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
12851
12707
|
var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
12852
12708
|
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12853
|
-
var titleGridItemPosition = {
|
|
12854
|
-
columnStartDesktop: (titleGrid == null ? void 0 : titleGrid.columnStartDesktop) || defaultTitleGridConfig.columnStartDesktop,
|
|
12855
|
-
columnSpanDesktop: (titleGrid == null ? void 0 : titleGrid.columnSpanDesktop) || defaultTitleGridConfig.columnSpanDesktop,
|
|
12856
|
-
columnStartDevice: (titleGrid == null ? void 0 : titleGrid.columnStartDevice) || defaultTitleGridConfig.columnStartDevice,
|
|
12857
|
-
columnSpanDevice: (titleGrid == null ? void 0 : titleGrid.columnSpanDevice) || defaultTitleGridConfig.columnSpanDevice
|
|
12858
|
-
};
|
|
12859
12709
|
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
12860
12710
|
className: className,
|
|
12861
12711
|
type: type,
|
|
@@ -12868,10 +12718,10 @@ var Carousel = function Carousel(_ref) {
|
|
|
12868
12718
|
}, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, {
|
|
12869
12719
|
ref: titleButtonsGridRef
|
|
12870
12720
|
}, /*#__PURE__*/React__default.createElement(TitleGridItem, {
|
|
12871
|
-
columnStartDesktop:
|
|
12872
|
-
columnSpanDesktop:
|
|
12873
|
-
columnStartDevice:
|
|
12874
|
-
columnSpanDevice:
|
|
12721
|
+
columnStartDesktop: 3,
|
|
12722
|
+
columnSpanDesktop: 10,
|
|
12723
|
+
columnStartDevice: 2,
|
|
12724
|
+
columnSpanDevice: 9
|
|
12875
12725
|
}, title && (/*#__PURE__*/React__default.createElement(CarouselInfoWrapper, {
|
|
12876
12726
|
"data-testid": "carousel-title-wrapper"
|
|
12877
12727
|
}, /*#__PURE__*/React__default.createElement(TitleWrapper$5, {
|
|
@@ -12890,7 +12740,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12890
12740
|
columnSpanDevice: 2
|
|
12891
12741
|
}, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
|
|
12892
12742
|
"data-testid": "carousel-buttons-wrapper"
|
|
12893
|
-
}, (
|
|
12743
|
+
}, (infinite || showRotatorButtons) && (/*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12894
12744
|
onClickNext: onNext,
|
|
12895
12745
|
onClickPrev: onPrev,
|
|
12896
12746
|
availablePrev: availablePrev,
|
|
@@ -12898,12 +12748,12 @@ var Carousel = function Carousel(_ref) {
|
|
|
12898
12748
|
showFullscreen: type === CarouselType.Image,
|
|
12899
12749
|
onClickFullscreen: onClickFullscreen,
|
|
12900
12750
|
isFullscreen: isFullscreen,
|
|
12901
|
-
size:
|
|
12902
|
-
}))))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, Object.assign({},
|
|
12751
|
+
size: infinite ? 'default' : 'small'
|
|
12752
|
+
}))))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, Object.assign({}, infinite ? {
|
|
12903
12753
|
active: active
|
|
12904
12754
|
} : {}, {
|
|
12905
12755
|
columnStartDesktop: 3,
|
|
12906
|
-
columnSpanDesktop:
|
|
12756
|
+
columnSpanDesktop: infinite ? 14 : 13,
|
|
12907
12757
|
columnStartDevice: 2,
|
|
12908
12758
|
columnSpanDevice: 13
|
|
12909
12759
|
}), /*#__PURE__*/React__default.createElement(Swipe, {
|
|
@@ -12914,15 +12764,15 @@ var Carousel = function Carousel(_ref) {
|
|
|
12914
12764
|
onOverflowChange: handleOverflowChange,
|
|
12915
12765
|
"data-testid": "carousel-swipe",
|
|
12916
12766
|
ref: swipeRef,
|
|
12917
|
-
infinite:
|
|
12767
|
+
infinite: infinite,
|
|
12918
12768
|
slidesOffsetBefore: slidesOffsetBefore
|
|
12919
12769
|
}, children))));
|
|
12920
12770
|
};
|
|
12921
12771
|
|
|
12922
|
-
var _templateObject$1x, _templateObject2$1c, _templateObject3$
|
|
12772
|
+
var _templateObject$1x, _templateObject2$1c, _templateObject3$X, _templateObject4$P, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
|
|
12923
12773
|
var HighlightsGrid$1 = /*#__PURE__*/styled(Grid)(_templateObject$1x || (_templateObject$1x = /*#__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);
|
|
12924
12774
|
var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$1c || (_templateObject2$1c = /*#__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);
|
|
12925
|
-
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
12775
|
+
var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12926
12776
|
var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$P || (_templateObject4$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12927
12777
|
var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12928
12778
|
var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
@@ -13107,19 +12957,13 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
|
|
|
13107
12957
|
}));
|
|
13108
12958
|
};
|
|
13109
12959
|
|
|
13110
|
-
var titleHierarchyMap = /*#__PURE__*/new Map([[1, 'h1'], [2, 'h2'], [3, 'h3']]);
|
|
13111
12960
|
var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
13112
12961
|
var logo = _ref.logo,
|
|
13113
12962
|
carouselTitle = _ref.carouselTitle,
|
|
13114
12963
|
slides = _ref.slides,
|
|
13115
|
-
|
|
13116
|
-
titleSemanticLevel = _ref$titleSemanticLev === void 0 ? 2 : _ref$titleSemanticLev,
|
|
12964
|
+
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
13117
12965
|
className = _ref.className,
|
|
13118
|
-
titleFontFamily = _ref.titleFontFamily
|
|
13119
|
-
_ref$titleSize = _ref.titleSize,
|
|
13120
|
-
titleSize = _ref$titleSize === void 0 ? 'medium' : _ref$titleSize,
|
|
13121
|
-
_ref$titleClassName = _ref.titleClassName,
|
|
13122
|
-
titleClassName = _ref$titleClassName === void 0 ? TYPOGRAPHY_CLASS_NAME : _ref$titleClassName;
|
|
12966
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
13123
12967
|
var slidesMedia = useMemo(function () {
|
|
13124
12968
|
return slides.map(function (_ref2) {
|
|
13125
12969
|
var mediaContent = _ref2.mediaContent;
|
|
@@ -13137,7 +12981,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13137
12981
|
return !isVideoSlide(slide);
|
|
13138
12982
|
});
|
|
13139
12983
|
var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
|
|
13140
|
-
var titleSemanticLevelValue =
|
|
12984
|
+
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
13141
12985
|
var carouselRef = useRef(null);
|
|
13142
12986
|
var onNext = function onNext() {
|
|
13143
12987
|
var _carouselRef$current;
|
|
@@ -13161,10 +13005,10 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13161
13005
|
}, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
|
|
13162
13006
|
id: carouselTitleId
|
|
13163
13007
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
13164
|
-
|
|
13008
|
+
className: TYPOGRAPHY_CLASS_NAME,
|
|
13009
|
+
size: "medium",
|
|
13165
13010
|
serif: isVictorTitleFont,
|
|
13166
|
-
hierarchy: titleSemanticLevelValue
|
|
13167
|
-
className: titleClassName
|
|
13011
|
+
hierarchy: titleSemanticLevelValue
|
|
13168
13012
|
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
13169
13013
|
onClickNext: onNext,
|
|
13170
13014
|
onClickPrev: onPrev
|
|
@@ -13255,9 +13099,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13255
13099
|
})));
|
|
13256
13100
|
};
|
|
13257
13101
|
|
|
13258
|
-
var _templateObject$1y, _templateObject3$
|
|
13102
|
+
var _templateObject$1y, _templateObject3$Y;
|
|
13259
13103
|
var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
13260
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
13104
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13261
13105
|
|
|
13262
13106
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13263
13107
|
var children = _ref.children;
|
|
@@ -14800,5 +14644,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1z || (_templa
|
|
|
14800
14644
|
return theme.footer.tablet.paddingBottom;
|
|
14801
14645
|
}, devices.desktop, devices.largeDesktop);
|
|
14802
14646
|
|
|
14803
|
-
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,
|
|
14647
|
+
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, DisplayHeader, 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 };
|
|
14804
14648
|
//# sourceMappingURL=harmonic.esm.js.map
|