@royaloperahouse/harmonic 1.0.5-f → 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 +274 -427
- 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 +282 -438
- 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
|
@@ -208,6 +208,26 @@ var typographyStyles = {"display":"typography-module_display__ZHsz9","header":"t
|
|
|
208
208
|
var _excluded = ["children", "size", "em", "color", "serif", "hierarchy", "tag", "className"],
|
|
209
209
|
_excluded2 = ["children", "size", "color", "className", "bold", "tag"],
|
|
210
210
|
_excluded3 = ["children", "size", "color", "className"];
|
|
211
|
+
/* ~~~ Display - (use case) ~~~ */
|
|
212
|
+
var DisplayHeader = function DisplayHeader(_ref) {
|
|
213
|
+
var children = _ref.children,
|
|
214
|
+
size = _ref.size,
|
|
215
|
+
em = _ref.em,
|
|
216
|
+
_ref$color = _ref.color,
|
|
217
|
+
color = _ref$color === void 0 ? 'inherit' : _ref$color,
|
|
218
|
+
serif = _ref.serif,
|
|
219
|
+
className = _ref.className;
|
|
220
|
+
var classNames = createClassNames('display', {
|
|
221
|
+
size: size,
|
|
222
|
+
color: color,
|
|
223
|
+
serif: serif,
|
|
224
|
+
em: em,
|
|
225
|
+
className: className
|
|
226
|
+
}, typographyStyles);
|
|
227
|
+
return /*#__PURE__*/React__default.createElement("h1", {
|
|
228
|
+
className: classNames
|
|
229
|
+
}, children);
|
|
230
|
+
};
|
|
211
231
|
/* ~~~ Headers - size and hierarchy set separately ~~~ */
|
|
212
232
|
var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
213
233
|
var _ref3;
|
|
@@ -2692,7 +2712,6 @@ var Tab = function Tab(_ref) {
|
|
|
2692
2712
|
className = _ref.className,
|
|
2693
2713
|
role = _ref.role,
|
|
2694
2714
|
ariaLabel = _ref.ariaLabel,
|
|
2695
|
-
tabLinkId = _ref.tabLinkId,
|
|
2696
2715
|
color = _ref.color,
|
|
2697
2716
|
dataTestId = _ref.dataTestId,
|
|
2698
2717
|
isOpen = _ref.isOpen;
|
|
@@ -2727,9 +2746,8 @@ var Tab = function Tab(_ref) {
|
|
|
2727
2746
|
className: className,
|
|
2728
2747
|
"data-testid": dataTestId
|
|
2729
2748
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
2730
|
-
id: tabLinkId,
|
|
2731
|
-
trimText: trimText,
|
|
2732
2749
|
color: color,
|
|
2750
|
+
trimText: trimText,
|
|
2733
2751
|
withTextInMobile: withTextInMobile,
|
|
2734
2752
|
"aria-hidden": "true"
|
|
2735
2753
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
@@ -2759,7 +2777,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2759
2777
|
className = _ref.className,
|
|
2760
2778
|
role = _ref.role,
|
|
2761
2779
|
ariaLabel = _ref.ariaLabel,
|
|
2762
|
-
tabLinkId = _ref.tabLinkId,
|
|
2763
2780
|
trimTabText = _ref.trimTabText;
|
|
2764
2781
|
var node = React.useRef();
|
|
2765
2782
|
var _useState = React.useState(false),
|
|
@@ -2856,7 +2873,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2856
2873
|
};
|
|
2857
2874
|
var renderTab = function renderTab() {
|
|
2858
2875
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
|
|
2859
|
-
tabLinkId: tabLinkId,
|
|
2860
2876
|
trimText: trimTabText,
|
|
2861
2877
|
title: title,
|
|
2862
2878
|
titleLink: titleLink,
|
|
@@ -2936,8 +2952,7 @@ var Account = function Account(_ref) {
|
|
|
2936
2952
|
iconName: iconName,
|
|
2937
2953
|
withOptionsInMobile: false,
|
|
2938
2954
|
withIcon: "left",
|
|
2939
|
-
className: className
|
|
2940
|
-
tabLinkId: "account-link"
|
|
2955
|
+
className: className
|
|
2941
2956
|
});
|
|
2942
2957
|
};
|
|
2943
2958
|
|
|
@@ -3072,7 +3087,7 @@ var getPressedColor = function getPressedColor(_ref4) {
|
|
|
3072
3087
|
};
|
|
3073
3088
|
|
|
3074
3089
|
var _templateObject$6, _templateObject2$3;
|
|
3075
|
-
var PrimaryButtonWrapper = /*#__PURE__*/styled__default(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
|
|
3090
|
+
var PrimaryButtonWrapper = /*#__PURE__*/styled__default(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);
|
|
3076
3091
|
var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
3077
3092
|
|
|
3078
3093
|
var _excluded$4 = ["children", "disabled", "className"];
|
|
@@ -5667,7 +5682,6 @@ var Accordion = function Accordion(_ref) {
|
|
|
5667
5682
|
var toggleAccordion = function toggleAccordion() {
|
|
5668
5683
|
if (React__default.Children.count(children) === 0) return;
|
|
5669
5684
|
if (openAccordion) {
|
|
5670
|
-
setIcon(collapsedStateIconData);
|
|
5671
5685
|
setOpenAccordion(false);
|
|
5672
5686
|
setTextHeight('0px');
|
|
5673
5687
|
setIcon(collapsedStateIconData);
|
|
@@ -6020,9 +6034,14 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
6020
6034
|
_ref2$renderGridItem = _ref2.renderGridItem,
|
|
6021
6035
|
renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
|
|
6022
6036
|
var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
|
|
6023
|
-
var content = /*#__PURE__*/React__default.createElement(
|
|
6037
|
+
var content = /*#__PURE__*/React__default.createElement(TextContainer, {
|
|
6038
|
+
tag: "div",
|
|
6039
|
+
size: "large",
|
|
6040
|
+
"data-testid": "text-container",
|
|
6024
6041
|
className: textContainerClassName,
|
|
6025
|
-
|
|
6042
|
+
dangerouslySetInnerHTML: {
|
|
6043
|
+
__html: addTypographyClasses(text)
|
|
6044
|
+
}
|
|
6026
6045
|
});
|
|
6027
6046
|
var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
|
|
6028
6047
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -6831,15 +6850,12 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6831
6850
|
listRoleDescription = _ref.listRoleDescription,
|
|
6832
6851
|
className = _ref.className,
|
|
6833
6852
|
onSelect = _ref.onSelect,
|
|
6834
|
-
onSelectId = _ref.onSelectId,
|
|
6835
6853
|
onApply = _ref.onApply,
|
|
6836
|
-
onApplyIds = _ref.onApplyIds,
|
|
6837
6854
|
onClear = _ref.onClear,
|
|
6838
6855
|
_ref$greyscale = _ref.greyscale,
|
|
6839
6856
|
greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
|
|
6840
6857
|
_ref$selectedIndices = _ref.selectedIndices,
|
|
6841
|
-
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices
|
|
6842
|
-
selectedIds = _ref.selectedIds;
|
|
6858
|
+
selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
|
|
6843
6859
|
var _useViewport = useViewport(),
|
|
6844
6860
|
isMobile = _useViewport.isMobile;
|
|
6845
6861
|
var castWrapperRef = React.useRef(null);
|
|
@@ -6941,51 +6957,14 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
6941
6957
|
isDraggingRef.current = false;
|
|
6942
6958
|
hasDraggedRef.current = false;
|
|
6943
6959
|
}, [isMobile]);
|
|
6944
|
-
var
|
|
6945
|
-
if (person.id !== undefined && person.id !== null) return String(person.id);
|
|
6946
|
-
if (person.slug !== undefined && person.slug !== null) return String(person.slug);
|
|
6947
|
-
return person.name;
|
|
6948
|
-
}, []);
|
|
6949
|
-
var isIdSelectionMode = selectedIds !== undefined;
|
|
6950
|
-
var selectedIdsSet = React.useMemo(function () {
|
|
6951
|
-
var ids = selectedIds != null ? selectedIds : [];
|
|
6952
|
-
return new Set(ids.map(function (id) {
|
|
6953
|
-
return String(id);
|
|
6954
|
-
}));
|
|
6955
|
-
}, [selectedIds]);
|
|
6956
|
-
var selectedStateIndices = React.useMemo(function () {
|
|
6957
|
-
if (!isIdSelectionMode) return selectedIndices;
|
|
6958
|
-
return cast.flatMap(function (person, index) {
|
|
6959
|
-
var itemId = getCastItemSelectionId(person);
|
|
6960
|
-
return selectedIdsSet.has(itemId) ? [index] : [];
|
|
6961
|
-
});
|
|
6962
|
-
}, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
|
|
6963
|
-
var selectedStateIds = React.useMemo(function () {
|
|
6964
|
-
if (isIdSelectionMode) {
|
|
6965
|
-
return cast.filter(function (person) {
|
|
6966
|
-
return selectedIdsSet.has(getCastItemSelectionId(person));
|
|
6967
|
-
}).map(function (person) {
|
|
6968
|
-
return getCastItemSelectionId(person);
|
|
6969
|
-
});
|
|
6970
|
-
}
|
|
6971
|
-
return selectedIndices.map(function (index) {
|
|
6972
|
-
return cast[index];
|
|
6973
|
-
}).filter(function (person) {
|
|
6974
|
-
return person !== undefined;
|
|
6975
|
-
}).map(function (person) {
|
|
6976
|
-
return getCastItemSelectionId(person);
|
|
6977
|
-
});
|
|
6978
|
-
}, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
|
|
6979
|
-
var handleClick = React__default.useCallback(function (index, itemId, onClick) {
|
|
6960
|
+
var handleClick = React__default.useCallback(function (index, onClick) {
|
|
6980
6961
|
if (hasDraggedRef.current) return;
|
|
6981
|
-
if (onSelectId) onSelectId(itemId);
|
|
6982
6962
|
if (onSelect) onSelect(index);
|
|
6983
6963
|
if (onClick) onClick();
|
|
6984
|
-
}, [onSelect
|
|
6985
|
-
var handlePersonKeydown = React__default.useCallback(function (e, index,
|
|
6986
|
-
if (e.key === 'Enter'
|
|
6987
|
-
|
|
6988
|
-
handleClick(index, itemId, onClick);
|
|
6964
|
+
}, [onSelect]);
|
|
6965
|
+
var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
|
|
6966
|
+
if (e.key === 'Enter') {
|
|
6967
|
+
handleClick(index, onClick);
|
|
6989
6968
|
}
|
|
6990
6969
|
}, [handleClick]);
|
|
6991
6970
|
var handleClearKeydown = React__default.useCallback(function (e) {
|
|
@@ -7000,27 +6979,27 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7000
6979
|
image = person.image,
|
|
7001
6980
|
_onClick = person.onClick,
|
|
7002
6981
|
ariaLabel = person['aria-label'];
|
|
7003
|
-
var
|
|
7004
|
-
var isSelected = isIdSelectionMode ? selectedIdsSet.has(personSelectionId) : selectedIndices.includes(index);
|
|
6982
|
+
var isSelected = selectedIndices.includes(index);
|
|
7005
6983
|
var personImage = image || placeholderImage || defaultPlaceholderImage;
|
|
7006
6984
|
return /*#__PURE__*/React__default.createElement(PersonWrapper, {
|
|
7007
|
-
key:
|
|
6985
|
+
key: index,
|
|
7008
6986
|
"aria-selected": isSelected,
|
|
7009
|
-
"aria-label": ariaLabel
|
|
6987
|
+
"aria-label": ariaLabel || (isSelected ? 'Deselect' : 'Select') + " " + name,
|
|
6988
|
+
"aria-posinset": index + 1,
|
|
6989
|
+
"aria-setsize": cast.length,
|
|
7010
6990
|
role: "option",
|
|
7011
6991
|
tabIndex: 0,
|
|
7012
|
-
onClick: function onClick() {
|
|
7013
|
-
return handleClick(index, personSelectionId, _onClick);
|
|
7014
|
-
},
|
|
7015
6992
|
onKeyDown: function onKeyDown(e) {
|
|
7016
|
-
return handlePersonKeydown(e, index,
|
|
6993
|
+
return handlePersonKeydown(e, index, _onClick);
|
|
7017
6994
|
}
|
|
7018
6995
|
}, /*#__PURE__*/React__default.createElement(PersonToggle, {
|
|
7019
6996
|
isSelected: isSelected,
|
|
7020
|
-
|
|
6997
|
+
onClick: function onClick() {
|
|
6998
|
+
return handleClick(index, _onClick);
|
|
6999
|
+
}
|
|
7021
7000
|
}, /*#__PURE__*/React__default.createElement(PersonImage, {
|
|
7022
7001
|
src: personImage,
|
|
7023
|
-
alt: "",
|
|
7002
|
+
alt: image ? name : "Placeholder image for " + name,
|
|
7024
7003
|
draggable: false,
|
|
7025
7004
|
isDefaultPlaceholder: !(!!image || !!placeholderImage),
|
|
7026
7005
|
greyscale: greyscale
|
|
@@ -7056,8 +7035,7 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7056
7035
|
ref: castWrapperRef,
|
|
7057
7036
|
role: "listbox",
|
|
7058
7037
|
"aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
|
|
7059
|
-
"aria-
|
|
7060
|
-
"aria-multiselectable": "true",
|
|
7038
|
+
"aria-multiselectable": true,
|
|
7061
7039
|
onMouseDown: handleMouseDown,
|
|
7062
7040
|
onMouseMove: handleMouseMove,
|
|
7063
7041
|
onMouseUp: handleMouseUp,
|
|
@@ -7068,15 +7046,14 @@ var CastFilters = function CastFilters(_ref) {
|
|
|
7068
7046
|
ref: swipeRef,
|
|
7069
7047
|
onOverflowChange: handleOverflowChange,
|
|
7070
7048
|
limitDragToNavigableRange: true
|
|
7071
|
-
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null,
|
|
7049
|
+
}, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
7072
7050
|
size: "medium",
|
|
7073
7051
|
className: "mobile-only"
|
|
7074
|
-
}, emptySelectionText)),
|
|
7052
|
+
}, 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, {
|
|
7075
7053
|
onClick: function onClick() {
|
|
7076
|
-
|
|
7077
|
-
if (onApplyIds) onApplyIds(selectedStateIds);
|
|
7054
|
+
return onApply(selectedIndices);
|
|
7078
7055
|
}
|
|
7079
|
-
}, ctaText != null ? ctaText : 'Apply')
|
|
7056
|
+
}, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
|
|
7080
7057
|
tabIndex: 0,
|
|
7081
7058
|
role: "button",
|
|
7082
7059
|
onClick: onClear,
|
|
@@ -7323,7 +7300,7 @@ var Editorial = function Editorial(_ref) {
|
|
|
7323
7300
|
var _templateObject$O, _templateObject2$B, _templateObject3$o;
|
|
7324
7301
|
var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__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"])));
|
|
7325
7302
|
var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__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);
|
|
7326
|
-
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n
|
|
7303
|
+
var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$o || (_templateObject3$o = /*#__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"])));
|
|
7327
7304
|
|
|
7328
7305
|
var _excluded$i = ["text", "onClick"];
|
|
7329
7306
|
var HotFilters = function HotFilters(_ref) {
|
|
@@ -7358,123 +7335,6 @@ var HotFilters = function HotFilters(_ref) {
|
|
|
7358
7335
|
})));
|
|
7359
7336
|
};
|
|
7360
7337
|
|
|
7361
|
-
var _templateObject$P, _templateObject2$C, _templateObject3$p;
|
|
7362
|
-
var ScrollContainer = /*#__PURE__*/styled__default.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"])));
|
|
7363
|
-
var TabsContainerWrapper = /*#__PURE__*/styled__default.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);
|
|
7364
|
-
var StyledTab = /*#__PURE__*/styled__default(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"])));
|
|
7365
|
-
|
|
7366
|
-
var _excluded$j = ["text", "id", "isSelected"];
|
|
7367
|
-
/**
|
|
7368
|
-
* A horizontally scrollable tabs filter component used to display
|
|
7369
|
-
* selectable strategy tabs with configurable styling and selection behavior.
|
|
7370
|
-
*
|
|
7371
|
-
* Features:
|
|
7372
|
-
* - Supports both single-select and multi-select tab scenarios
|
|
7373
|
-
* - Displays an optional icon on selected tabs
|
|
7374
|
-
* - Allows customization of colors and selected icon through `customViewConfig`
|
|
7375
|
-
* - Applies default styling when configuration values are omitted
|
|
7376
|
-
* - Emits the clicked tab item through `onClick`
|
|
7377
|
-
*
|
|
7378
|
-
* @component
|
|
7379
|
-
*
|
|
7380
|
-
* @param {TCustomStrategyTabsFilterProps['items']} items
|
|
7381
|
-
* Collection of tabs to render.
|
|
7382
|
-
*
|
|
7383
|
-
* @param {string} [className]
|
|
7384
|
-
* Optional CSS class name applied to the root scroll container.
|
|
7385
|
-
*
|
|
7386
|
-
* @param {<T>(item: TCustomStrategyTabsFilterProps['items'][number]) => T} onClick
|
|
7387
|
-
* Called when a tab is clicked. Receives the full clicked item (including
|
|
7388
|
-
* `allowedSelectedWith`). The parent is responsible for computing the next
|
|
7389
|
-
* `items` array and passing it back down with updated `isSelected` values.
|
|
7390
|
-
* as long as no return statement `type` is inferred automatically as void
|
|
7391
|
-
*
|
|
7392
|
-
* @param [customViewConfig]
|
|
7393
|
-
* Optional visual configuration used to customize:
|
|
7394
|
-
* - selected tab icon
|
|
7395
|
-
* - selected/unselected background colors
|
|
7396
|
-
* - selected/unselected text colors
|
|
7397
|
-
* - hover color
|
|
7398
|
-
* - pressed color
|
|
7399
|
-
*
|
|
7400
|
-
* Any omitted configuration values will fall back to the component defaults.
|
|
7401
|
-
*
|
|
7402
|
-
* @returns { React.JSX.Element}
|
|
7403
|
-
*
|
|
7404
|
-
* @example
|
|
7405
|
-
* ```tsx
|
|
7406
|
-
* * @example Controlled selection with custom rules
|
|
7407
|
-
* * The component does not manage selection itself. The parent owns `items` (including
|
|
7408
|
-
* * `isSelected`) and updates that state in `onClick`. Use `allowedSelectedWith` on each
|
|
7409
|
-
* * item to describe which other tab IDs may stay selected when that tab is chosen.
|
|
7410
|
-
* *
|
|
7411
|
-
* * ```tsx
|
|
7412
|
-
* * const [items, setItems] = useState<TCustomStrategyTabsFilterItem[]>([
|
|
7413
|
-
* * { id: 'all', text: 'All events', isSelected: true, allowedSelectedWith: [] },
|
|
7414
|
-
* * { id: 'opera', text: 'Opera', isSelected: false, allowedSelectedWith: ['ballet'] },
|
|
7415
|
-
* * { id: 'ballet', text: 'Ballet', isSelected: false, allowedSelectedWith: ['opera'] },
|
|
7416
|
-
* * ]);
|
|
7417
|
-
* *
|
|
7418
|
-
* * const handleClick = (clickedItem: TCustomStrategyTabsFilterItem) => {
|
|
7419
|
-
* * setItems((current) =>
|
|
7420
|
-
* * current.map((item) => {
|
|
7421
|
-
* * if (item.id === clickedItem.id) {
|
|
7422
|
-
* * return { ...item, isSelected: !item.isSelected };
|
|
7423
|
-
* * }
|
|
7424
|
-
* *
|
|
7425
|
-
* * const mayStaySelected = clickedItem.allowedSelectedWith?.includes(item.id);
|
|
7426
|
-
* * return { ...item, isSelected: mayStaySelected ? !item.isSelected : false };
|
|
7427
|
-
* * })
|
|
7428
|
-
* * );
|
|
7429
|
-
* * };
|
|
7430
|
-
* *
|
|
7431
|
-
* * return <CustomStrategyTabsFilter items={items} onClick={handleClick} />;
|
|
7432
|
-
*/
|
|
7433
|
-
var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
|
|
7434
|
-
var _customViewConfig$bac, _customViewConfig$bac2, _customViewConfig$tex, _customViewConfig$tex2;
|
|
7435
|
-
var items = _ref.items,
|
|
7436
|
-
className = _ref.className,
|
|
7437
|
-
onClick = _ref.onClick,
|
|
7438
|
-
customViewConfig = _ref.customViewConfig;
|
|
7439
|
-
var handleClick = React__default.useCallback(function (item) {
|
|
7440
|
-
onClick(item);
|
|
7441
|
-
}, [onClick]);
|
|
7442
|
-
// in case of any partially passed configuration, config defaults non defined
|
|
7443
|
-
var config = {
|
|
7444
|
-
selectIcon: (customViewConfig == null ? void 0 : customViewConfig.selectIcon) || 'Confirm',
|
|
7445
|
-
backgroundColor: {
|
|
7446
|
-
select: (customViewConfig == null || (_customViewConfig$bac = customViewConfig.backgroundColor) == null ? void 0 : _customViewConfig$bac.select) || 'base-black',
|
|
7447
|
-
unselect: (customViewConfig == null || (_customViewConfig$bac2 = customViewConfig.backgroundColor) == null ? void 0 : _customViewConfig$bac2.unselect) || 'base-white'
|
|
7448
|
-
},
|
|
7449
|
-
textColor: {
|
|
7450
|
-
select: (customViewConfig == null || (_customViewConfig$tex = customViewConfig.textColor) == null ? void 0 : _customViewConfig$tex.select) || 'base-white',
|
|
7451
|
-
unselect: (customViewConfig == null || (_customViewConfig$tex2 = customViewConfig.textColor) == null ? void 0 : _customViewConfig$tex2.unselect) || 'base-black'
|
|
7452
|
-
},
|
|
7453
|
-
hoveredColor: (customViewConfig == null ? void 0 : customViewConfig.hoveredColor) || 'base-black',
|
|
7454
|
-
pressedColor: (customViewConfig == null ? void 0 : customViewConfig.pressedColor) || 'black-pressed'
|
|
7455
|
-
};
|
|
7456
|
-
return /*#__PURE__*/React__default.createElement(ScrollContainer, {
|
|
7457
|
-
className: className
|
|
7458
|
-
}, /*#__PURE__*/React__default.createElement(TabsContainerWrapper, null, items.map(function (item) {
|
|
7459
|
-
var text = item.text,
|
|
7460
|
-
id = item.id,
|
|
7461
|
-
isSelected = item.isSelected,
|
|
7462
|
-
rest = _objectWithoutPropertiesLoose(item, _excluded$j);
|
|
7463
|
-
return /*#__PURE__*/React__default.createElement(StyledTab, Object.assign({
|
|
7464
|
-
key: id,
|
|
7465
|
-
onClick: function onClick() {
|
|
7466
|
-
return handleClick(item);
|
|
7467
|
-
},
|
|
7468
|
-
iconName: isSelected ? config.selectIcon : undefined,
|
|
7469
|
-
backgroundColor: isSelected ? config.backgroundColor.select : config.backgroundColor.unselect,
|
|
7470
|
-
textColor: isSelected ? config.textColor.select : config.textColor.unselect,
|
|
7471
|
-
hoveredColor: config.hoveredColor,
|
|
7472
|
-
pressedColor: config.pressedColor,
|
|
7473
|
-
"aria-pressed": isSelected
|
|
7474
|
-
}, rest), text);
|
|
7475
|
-
})));
|
|
7476
|
-
};
|
|
7477
|
-
|
|
7478
7338
|
var InformationCtaVariants = {
|
|
7479
7339
|
Primary: 'Primary',
|
|
7480
7340
|
Secondary: 'Secondary',
|
|
@@ -7504,10 +7364,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
|
7504
7364
|
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
|
|
7505
7365
|
};
|
|
7506
7366
|
|
|
7507
|
-
var _templateObject$
|
|
7508
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7509
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
7510
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
7367
|
+
var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$n;
|
|
7368
|
+
var InfoWrapper = /*#__PURE__*/styled__default(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);
|
|
7369
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7370
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('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) {
|
|
7511
7371
|
var variant = _ref.variant,
|
|
7512
7372
|
theme = _ref.theme;
|
|
7513
7373
|
return getTextColor$4(variant, theme, COLORS$4.background);
|
|
@@ -7730,39 +7590,33 @@ var Information = function Information(_ref) {
|
|
|
7730
7590
|
})))));
|
|
7731
7591
|
};
|
|
7732
7592
|
|
|
7733
|
-
var _templateObject$
|
|
7734
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
7593
|
+
var _templateObject$Q, _templateObject2$D, _templateObject3$q, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$6;
|
|
7594
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default('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) {
|
|
7735
7595
|
var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
|
|
7736
7596
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7737
7597
|
}, devices.mobile);
|
|
7738
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
7739
|
-
|
|
7740
|
-
|
|
7741
|
-
}, devices.mobile, devices.tablet, function (_ref3) {
|
|
7742
|
-
var isMultipleRow = _ref3.isMultipleRow;
|
|
7743
|
-
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 ";
|
|
7744
|
-
});
|
|
7745
|
-
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref4) {
|
|
7746
|
-
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7598
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(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);
|
|
7599
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
|
|
7600
|
+
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7747
7601
|
return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
|
|
7748
7602
|
});
|
|
7749
|
-
var TitleWrapper$2 = /*#__PURE__*/styled__default.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 (
|
|
7750
|
-
var isPageHeadingWithoutTitle =
|
|
7603
|
+
var TitleWrapper$2 = /*#__PURE__*/styled__default.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) {
|
|
7604
|
+
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7751
7605
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7752
7606
|
}, devices.mobile);
|
|
7753
|
-
var ChildrenWrapper = /*#__PURE__*/styled__default.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 (
|
|
7754
|
-
var isPageHeadingWithoutTitle =
|
|
7607
|
+
var ChildrenWrapper = /*#__PURE__*/styled__default.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) {
|
|
7608
|
+
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7755
7609
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7756
7610
|
}, devices.mobile);
|
|
7757
7611
|
var TextWrapper = /*#__PURE__*/styled__default.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"])));
|
|
7758
|
-
var LogoWrapper$1 = /*#__PURE__*/styled__default.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"])),
|
|
7759
|
-
var isPageHeadingWithoutTitle =
|
|
7612
|
+
var LogoWrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
7613
|
+
var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
|
|
7614
|
+
return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
|
|
7615
|
+
}, devices.mobile, function (_ref6) {
|
|
7616
|
+
var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
|
|
7760
7617
|
return isPageHeadingWithoutTitle && "\n margin-top: 15px;\n ";
|
|
7761
7618
|
});
|
|
7762
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n
|
|
7763
|
-
var isMultipleRow = _ref8.isMultipleRow;
|
|
7764
|
-
return isMultipleRow ? "margin: 0" : "margin: 10px 0";
|
|
7765
|
-
}, devices.mobile);
|
|
7619
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7766
7620
|
|
|
7767
7621
|
var PageHeading = function PageHeading(_ref) {
|
|
7768
7622
|
var title = _ref.title,
|
|
@@ -7802,14 +7656,11 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7802
7656
|
return null;
|
|
7803
7657
|
}
|
|
7804
7658
|
};
|
|
7805
|
-
var isMultiRowContainer = !!text || !!title || sponsor;
|
|
7806
7659
|
return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
|
|
7807
7660
|
className: className,
|
|
7808
7661
|
"data-testid": "page-heading-wrapper",
|
|
7809
7662
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
7810
|
-
}, /*#__PURE__*/React__default.createElement(PageHeadingGrid, {
|
|
7811
|
-
isMultipleRow: isMultiRowContainer
|
|
7812
|
-
}, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
|
|
7663
|
+
}, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
|
|
7813
7664
|
"data-testid": "page-heading-title",
|
|
7814
7665
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
7815
7666
|
}, renderBadge(theme), children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
|
|
@@ -7835,9 +7686,9 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7835
7686
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
|
|
7836
7687
|
};
|
|
7837
7688
|
|
|
7838
|
-
var _templateObject$
|
|
7839
|
-
var ImpactHeaderWrapper = /*#__PURE__*/styled__default.header(_templateObject$
|
|
7840
|
-
var ImpactTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7689
|
+
var _templateObject$R, _templateObject2$E, _templateObject3$r, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$7;
|
|
7690
|
+
var ImpactHeaderWrapper = /*#__PURE__*/styled__default.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);
|
|
7691
|
+
var ImpactTitleWrapper = /*#__PURE__*/styled__default.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) {
|
|
7841
7692
|
var hasButton = _ref.hasButton,
|
|
7842
7693
|
sponsorPresent = _ref.sponsorPresent;
|
|
7843
7694
|
if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
|
|
@@ -7846,7 +7697,7 @@ var ImpactTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F ||
|
|
|
7846
7697
|
var sponsorPresent = _ref2.sponsorPresent;
|
|
7847
7698
|
return sponsorPresent ? '1fr 20px auto' : '1fr';
|
|
7848
7699
|
});
|
|
7849
|
-
var TitleButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7700
|
+
var TitleButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
|
|
7850
7701
|
var sponsorWidth = _ref3.sponsorWidth;
|
|
7851
7702
|
return sponsorWidth ? sponsorWidth + "px" : 'auto';
|
|
7852
7703
|
});
|
|
@@ -7862,10 +7713,10 @@ var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_te
|
|
|
7862
7713
|
return buttonWidth ? buttonWidth + "px" : 'auto';
|
|
7863
7714
|
}, devices.mobile);
|
|
7864
7715
|
|
|
7865
|
-
var _templateObject$
|
|
7866
|
-
var VideoPlayButton$1 = /*#__PURE__*/styled__default.button(_templateObject$
|
|
7867
|
-
var VideoControlsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7868
|
-
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7716
|
+
var _templateObject$S, _templateObject2$F, _templateObject3$s, _templateObject4$q;
|
|
7717
|
+
var VideoPlayButton$1 = /*#__PURE__*/styled__default.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);
|
|
7718
|
+
var VideoControlsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
|
|
7719
|
+
var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7869
7720
|
var LeftWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
7870
7721
|
|
|
7871
7722
|
var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
@@ -7909,7 +7760,7 @@ var VideoControlsImpact = function VideoControlsImpact(_ref) {
|
|
|
7909
7760
|
})))));
|
|
7910
7761
|
};
|
|
7911
7762
|
|
|
7912
|
-
var _excluded$
|
|
7763
|
+
var _excluded$j = ["text"];
|
|
7913
7764
|
var CHAR_LIMIT = 100;
|
|
7914
7765
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7915
7766
|
var mobileVideo = video.mobile || video.desktop;
|
|
@@ -8031,7 +7882,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
|
8031
7882
|
var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
|
|
8032
7883
|
var _ref5 = link || {},
|
|
8033
7884
|
linkText = _ref5.text,
|
|
8034
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
7885
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
|
|
8035
7886
|
var video = {
|
|
8036
7887
|
elementId: 'impact-header-video',
|
|
8037
7888
|
desktop: videoUrlDesktop,
|
|
@@ -8089,19 +7940,19 @@ var PageHeadingImpact = function PageHeadingImpact(_ref4) {
|
|
|
8089
7940
|
}), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
|
|
8090
7941
|
};
|
|
8091
7942
|
|
|
8092
|
-
var _templateObject$
|
|
8093
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7943
|
+
var _templateObject$T, _templateObject2$G, _templateObject3$t, _templateObject4$r, _templateObject5$l;
|
|
7944
|
+
var PanelGrid = /*#__PURE__*/styled__default(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) {
|
|
8094
7945
|
var color = _ref.color;
|
|
8095
7946
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
8096
7947
|
}, devices.mobileAndTablet);
|
|
8097
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7948
|
+
var LeftPanel = /*#__PURE__*/styled__default.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) {
|
|
8098
7949
|
var hasImage = _ref2.hasImage;
|
|
8099
7950
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8100
7951
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8101
7952
|
var hasImage = _ref3.hasImage;
|
|
8102
7953
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
8103
7954
|
});
|
|
8104
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7955
|
+
var RightPanel = /*#__PURE__*/styled__default.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);
|
|
8105
7956
|
var InfoWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
8106
7957
|
var ScrollDownWrapper = /*#__PURE__*/styled__default.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);
|
|
8107
7958
|
|
|
@@ -8133,10 +7984,10 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8133
7984
|
})))));
|
|
8134
7985
|
};
|
|
8135
7986
|
|
|
8136
|
-
var _templateObject$
|
|
8137
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$
|
|
8138
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8139
|
-
var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7987
|
+
var _templateObject$U, _templateObject2$H, _templateObject3$u, _templateObject4$s, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject0$4, _templateObject1$3;
|
|
7988
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
7989
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
7990
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
8140
7991
|
var ImageButtonWrapper = /*#__PURE__*/styled__default.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);
|
|
8141
7992
|
var ContentSection = /*#__PURE__*/styled__default.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) {
|
|
8142
7993
|
var theme = _ref.theme;
|
|
@@ -8347,7 +8198,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
8347
8198
|
})))))))))));
|
|
8348
8199
|
};
|
|
8349
8200
|
|
|
8350
|
-
var _templateObject$
|
|
8201
|
+
var _templateObject$V, _templateObject2$I, _templateObject3$v, _templateObject4$t;
|
|
8351
8202
|
var GRID = {
|
|
8352
8203
|
desktop: {
|
|
8353
8204
|
leftWithImage: '1 / 1 / 3 / 7',
|
|
@@ -8360,18 +8211,18 @@ var GRID = {
|
|
|
8360
8211
|
right: '2 / 1 / 3 / 15'
|
|
8361
8212
|
}
|
|
8362
8213
|
};
|
|
8363
|
-
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8214
|
+
var HighlightPanelGrid = /*#__PURE__*/styled__default(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) {
|
|
8364
8215
|
var $background = _ref.$background;
|
|
8365
8216
|
return "var(--color-" + $background + ")";
|
|
8366
8217
|
});
|
|
8367
|
-
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8218
|
+
var LeftPanel$1 = /*#__PURE__*/styled__default.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) {
|
|
8368
8219
|
var hasImage = _ref2.hasImage;
|
|
8369
8220
|
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
8370
8221
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
8371
8222
|
var hasImage = _ref3.hasImage;
|
|
8372
8223
|
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
8373
8224
|
});
|
|
8374
|
-
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8225
|
+
var RightPanel$1 = /*#__PURE__*/styled__default.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);
|
|
8375
8226
|
var Wrapper$4 = /*#__PURE__*/styled__default.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);
|
|
8376
8227
|
|
|
8377
8228
|
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
@@ -8395,10 +8246,10 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
8395
8246
|
})))));
|
|
8396
8247
|
};
|
|
8397
8248
|
|
|
8398
|
-
var _templateObject$
|
|
8399
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8400
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8401
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8249
|
+
var _templateObject$W, _templateObject2$J, _templateObject3$w, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$5, _templateObject0$5;
|
|
8250
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.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);
|
|
8251
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.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"])));
|
|
8252
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8402
8253
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.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);
|
|
8403
8254
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(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) {
|
|
8404
8255
|
var invert = _ref.invert,
|
|
@@ -8508,7 +8359,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8508
8359
|
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
8509
8360
|
};
|
|
8510
8361
|
|
|
8511
|
-
var _excluded$
|
|
8362
|
+
var _excluded$k = ["text"];
|
|
8512
8363
|
var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
|
|
8513
8364
|
var mobileVideo = video.mobile || video.desktop;
|
|
8514
8365
|
var desktopVideo = video.desktop || video.mobile;
|
|
@@ -8613,7 +8464,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8613
8464
|
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
|
|
8614
8465
|
var _ref5 = link || {},
|
|
8615
8466
|
linkText = _ref5.text,
|
|
8616
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
8467
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
|
|
8617
8468
|
// const titleSize = title && title.length > 20 ? 4 : 3;
|
|
8618
8469
|
var video = {
|
|
8619
8470
|
elementId: 'compact-header-video',
|
|
@@ -8649,10 +8500,10 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8649
8500
|
}), linkText))))));
|
|
8650
8501
|
};
|
|
8651
8502
|
|
|
8652
|
-
var _templateObject$
|
|
8653
|
-
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8654
|
-
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8655
|
-
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8503
|
+
var _templateObject$X, _templateObject2$K, _templateObject3$x, _templateObject4$u, _templateObject5$o, _templateObject6$h, _templateObject7$d;
|
|
8504
|
+
var HighlightsGrid = /*#__PURE__*/styled__default(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);
|
|
8505
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled__default.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"])));
|
|
8506
|
+
var HighlightTextWrapper = /*#__PURE__*/styled__default.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);
|
|
8656
8507
|
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.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) {
|
|
8657
8508
|
var hasImages = _ref.hasImages;
|
|
8658
8509
|
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
@@ -8728,10 +8579,10 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
|
8728
8579
|
}))))));
|
|
8729
8580
|
};
|
|
8730
8581
|
|
|
8731
|
-
var _templateObject$
|
|
8732
|
-
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8733
|
-
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$
|
|
8734
|
-
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8582
|
+
var _templateObject$Y, _templateObject2$L, _templateObject3$y, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$a;
|
|
8583
|
+
var linkButtonStyles = /*#__PURE__*/styled.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"])));
|
|
8584
|
+
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8585
|
+
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
8735
8586
|
var PageNumberWrapper = /*#__PURE__*/styled__default.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"])));
|
|
8736
8587
|
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
8737
8588
|
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
@@ -8887,15 +8738,15 @@ var Pagination = function Pagination(_ref) {
|
|
|
8887
8738
|
}))))));
|
|
8888
8739
|
};
|
|
8889
8740
|
|
|
8890
|
-
var _templateObject$
|
|
8891
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8741
|
+
var _templateObject$Z;
|
|
8742
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(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) {
|
|
8892
8743
|
var $largeDesktopColumns = _ref.$largeDesktopColumns;
|
|
8893
8744
|
return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
|
|
8894
8745
|
});
|
|
8895
8746
|
|
|
8896
|
-
var _templateObject
|
|
8897
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject
|
|
8898
|
-
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$
|
|
8747
|
+
var _templateObject$_, _templateObject2$M;
|
|
8748
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8749
|
+
var RoleContent = /*#__PURE__*/styled__default(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"])));
|
|
8899
8750
|
|
|
8900
8751
|
var PersonDetails = function PersonDetails(_ref) {
|
|
8901
8752
|
var _role$people;
|
|
@@ -8917,9 +8768,9 @@ var PersonDetails = function PersonDetails(_ref) {
|
|
|
8917
8768
|
})));
|
|
8918
8769
|
};
|
|
8919
8770
|
|
|
8920
|
-
var _templateObject
|
|
8921
|
-
var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject
|
|
8922
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8771
|
+
var _templateObject$$, _templateObject2$N;
|
|
8772
|
+
var PersonWrapper$1 = /*#__PURE__*/styled__default.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"])));
|
|
8773
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.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) {
|
|
8923
8774
|
var greyscale = _ref.greyscale;
|
|
8924
8775
|
return greyscale ? 'grayscale(100%)' : 'none';
|
|
8925
8776
|
});
|
|
@@ -8968,13 +8819,13 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8968
8819
|
}));
|
|
8969
8820
|
};
|
|
8970
8821
|
|
|
8971
|
-
var _templateObject$
|
|
8972
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8973
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
8822
|
+
var _templateObject$10, _templateObject2$O, _templateObject3$z, _templateObject4$v;
|
|
8823
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8824
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(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) {
|
|
8974
8825
|
var columnCount = _ref.columnCount;
|
|
8975
8826
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8976
8827
|
}, devices.mobile, devices.tablet);
|
|
8977
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8828
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.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"])));
|
|
8978
8829
|
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8979
8830
|
|
|
8980
8831
|
// Get the total character length of a property in an array of objects
|
|
@@ -9102,8 +8953,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9102
8953
|
}, creditEntries);
|
|
9103
8954
|
};
|
|
9104
8955
|
|
|
9105
|
-
var _templateObject$
|
|
9106
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$
|
|
8956
|
+
var _templateObject$11;
|
|
8957
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(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"])));
|
|
9107
8958
|
|
|
9108
8959
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
9109
8960
|
var items = _ref.items;
|
|
@@ -9121,14 +8972,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
9121
8972
|
}));
|
|
9122
8973
|
};
|
|
9123
8974
|
|
|
9124
|
-
var _templateObject$
|
|
8975
|
+
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;
|
|
9125
8976
|
var LENGTH_TEXT = 28;
|
|
9126
8977
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9127
8978
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
9128
8979
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
9129
8980
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
9130
8981
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
9131
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8982
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(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) {
|
|
9132
8983
|
var imageToLeft = _ref.imageToLeft;
|
|
9133
8984
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
9134
8985
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9138,7 +8989,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 ||
|
|
|
9138
8989
|
var asCard = _ref3.asCard;
|
|
9139
8990
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9140
8991
|
});
|
|
9141
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8992
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
9142
8993
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9143
8994
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9144
8995
|
}, function (_ref5) {
|
|
@@ -9197,12 +9048,12 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_te
|
|
|
9197
9048
|
var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(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);
|
|
9198
9049
|
var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9199
9050
|
|
|
9200
|
-
var _excluded$
|
|
9051
|
+
var _excluded$l = ["text"],
|
|
9201
9052
|
_excluded2$2 = ["text"],
|
|
9202
9053
|
_excluded3$1 = ["text"];
|
|
9203
9054
|
var _buttonTypeToButton$1;
|
|
9204
9055
|
var LENGTH_TEXT$1 = 28;
|
|
9205
|
-
var LENGTH_TEXT_PARAGRAPH =
|
|
9056
|
+
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
9206
9057
|
var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
|
|
9207
9058
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
9208
9059
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -9265,7 +9116,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9265
9116
|
var _ref2 = firstButton || {},
|
|
9266
9117
|
_ref2$text = _ref2.text,
|
|
9267
9118
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9268
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9119
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
9269
9120
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
9270
9121
|
var secondButton = links == null ? void 0 : links[1];
|
|
9271
9122
|
var _ref3 = secondButton || {},
|
|
@@ -9393,21 +9244,21 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9393
9244
|
}))));
|
|
9394
9245
|
};
|
|
9395
9246
|
|
|
9396
|
-
var _templateObject$
|
|
9247
|
+
var _templateObject$13, _templateObject2$P, _templateObject3$B, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g;
|
|
9397
9248
|
var LENGTH_TEXT$2 = 28;
|
|
9398
9249
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9399
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9250
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(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) {
|
|
9400
9251
|
var imageToLeft = _ref.imageToLeft;
|
|
9401
9252
|
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'";
|
|
9402
9253
|
}, devices.tablet, function (_ref2) {
|
|
9403
9254
|
var imageToLeft = _ref2.imageToLeft;
|
|
9404
9255
|
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'";
|
|
9405
9256
|
}, devices.mobile);
|
|
9406
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9257
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.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) {
|
|
9407
9258
|
var imageToLeft = _ref3.imageToLeft;
|
|
9408
9259
|
return imageToLeft ? 'left' : 'right';
|
|
9409
9260
|
}, devices.mobile);
|
|
9410
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9261
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.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) {
|
|
9411
9262
|
var imageToLeft = _ref4.imageToLeft;
|
|
9412
9263
|
return imageToLeft ? 'right' : 'left';
|
|
9413
9264
|
}, devices.mobile);
|
|
@@ -9436,8 +9287,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
|
|
|
9436
9287
|
return '';
|
|
9437
9288
|
});
|
|
9438
9289
|
|
|
9439
|
-
var _templateObject$
|
|
9440
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9290
|
+
var _templateObject$14;
|
|
9291
|
+
var VideoContainer = /*#__PURE__*/styled__default.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) {
|
|
9441
9292
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9442
9293
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9443
9294
|
return aspectRatio;
|
|
@@ -9549,7 +9400,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9549
9400
|
}));
|
|
9550
9401
|
};
|
|
9551
9402
|
|
|
9552
|
-
var _excluded$
|
|
9403
|
+
var _excluded$m = ["text"],
|
|
9553
9404
|
_excluded2$3 = ["text"];
|
|
9554
9405
|
var LENGTH_TEXT$3 = 28;
|
|
9555
9406
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
@@ -9576,7 +9427,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9576
9427
|
var _ref2 = primaryButton || {},
|
|
9577
9428
|
_ref2$text = _ref2.text,
|
|
9578
9429
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9579
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9430
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
|
|
9580
9431
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
9581
9432
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
9582
9433
|
var _ref3 = tertiaryButton || {},
|
|
@@ -9619,10 +9470,10 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9619
9470
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9620
9471
|
};
|
|
9621
9472
|
|
|
9622
|
-
var _templateObject$
|
|
9623
|
-
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
9624
|
-
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$
|
|
9625
|
-
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$
|
|
9473
|
+
var _templateObject$15, _templateObject2$Q, _templateObject3$C;
|
|
9474
|
+
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
9475
|
+
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
9476
|
+
var AttributionBlock = /*#__PURE__*/styled__default(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);
|
|
9626
9477
|
|
|
9627
9478
|
/* eslint-disable react/no-danger */
|
|
9628
9479
|
var Quote = function Quote(_ref) {
|
|
@@ -9652,9 +9503,9 @@ var Quote = function Quote(_ref) {
|
|
|
9652
9503
|
}, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
|
|
9653
9504
|
};
|
|
9654
9505
|
|
|
9655
|
-
var _templateObject$
|
|
9656
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9657
|
-
var RadioGroup = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9506
|
+
var _templateObject$16, _templateObject2$R, _templateObject3$D;
|
|
9507
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9508
|
+
var RadioGroup = /*#__PURE__*/styled__default.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) {
|
|
9658
9509
|
var horizontalMode = _ref.horizontalMode;
|
|
9659
9510
|
if (horizontalMode) return 'row';
|
|
9660
9511
|
return 'column';
|
|
@@ -9662,7 +9513,7 @@ var RadioGroup = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templa
|
|
|
9662
9513
|
var gap = _ref2.gap;
|
|
9663
9514
|
return gap + "px";
|
|
9664
9515
|
});
|
|
9665
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9516
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9666
9517
|
var darkMode = _ref3.darkMode;
|
|
9667
9518
|
if (darkMode) return 'var(--base-color-white)';
|
|
9668
9519
|
return 'var(--base-color-errorstate)';
|
|
@@ -9739,10 +9590,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9739
9590
|
}, error))));
|
|
9740
9591
|
};
|
|
9741
9592
|
|
|
9742
|
-
var _templateObject$
|
|
9743
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9744
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9745
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9593
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$E;
|
|
9594
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.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);
|
|
9595
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.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"])));
|
|
9596
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.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);
|
|
9746
9597
|
|
|
9747
9598
|
/* eslint-disable react/no-danger */
|
|
9748
9599
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9798,10 +9649,10 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9798
9649
|
return null;
|
|
9799
9650
|
};
|
|
9800
9651
|
|
|
9801
|
-
var _templateObject$
|
|
9802
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9803
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9804
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
9652
|
+
var _templateObject$18, _templateObject2$T, _templateObject3$F, _templateObject5$s, _templateObject6$l, _templateObject7$h;
|
|
9653
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.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);
|
|
9654
|
+
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
9655
|
+
var SvgContainerClose = /*#__PURE__*/styled__default.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"])));
|
|
9805
9656
|
var InputContainer = /*#__PURE__*/styled__default.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);
|
|
9806
9657
|
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
|
|
9807
9658
|
var SearchArrowContainer = /*#__PURE__*/styled__default.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"])));
|
|
@@ -9942,8 +9793,8 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
9942
9793
|
})));
|
|
9943
9794
|
};
|
|
9944
9795
|
|
|
9945
|
-
var _templateObject$
|
|
9946
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9796
|
+
var _templateObject$19;
|
|
9797
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
9947
9798
|
|
|
9948
9799
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9949
9800
|
var HarmonicSize = {
|
|
@@ -9985,9 +9836,9 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9985
9836
|
}, description)))));
|
|
9986
9837
|
};
|
|
9987
9838
|
|
|
9988
|
-
var _templateObject$
|
|
9989
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9990
|
-
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9839
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
|
|
9840
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9841
|
+
var SelectWrapper = /*#__PURE__*/styled__default.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) {
|
|
9991
9842
|
var width = _ref.width;
|
|
9992
9843
|
if (!width) return 'none';
|
|
9993
9844
|
return width + "px";
|
|
@@ -10004,7 +9855,7 @@ var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject2$V || (_tem
|
|
|
10004
9855
|
if (darkMode) return "0 0 0 1px var(--color-state-medium)";
|
|
10005
9856
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10006
9857
|
}, devices.mobile, devices.mobile);
|
|
10007
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9858
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.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) {
|
|
10008
9859
|
var darkMode = _ref5.darkMode;
|
|
10009
9860
|
if (darkMode) return "var(--color-base-white)";
|
|
10010
9861
|
return "var(--color-primary-black)";
|
|
@@ -10015,7 +9866,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_temp
|
|
|
10015
9866
|
return "var(--color-state-error)";
|
|
10016
9867
|
});
|
|
10017
9868
|
|
|
10018
|
-
var _excluded$
|
|
9869
|
+
var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
|
|
10019
9870
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10020
9871
|
return /*#__PURE__*/React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10021
9872
|
iconName: "DropdownArrow"
|
|
@@ -10070,7 +9921,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10070
9921
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10071
9922
|
components = _ref2.components,
|
|
10072
9923
|
className = _ref2.className,
|
|
10073
|
-
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9924
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
|
|
10074
9925
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10075
9926
|
label: label,
|
|
10076
9927
|
error: error,
|
|
@@ -10089,7 +9940,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10089
9940
|
})));
|
|
10090
9941
|
};
|
|
10091
9942
|
|
|
10092
|
-
var _excluded$
|
|
9943
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "components"];
|
|
10093
9944
|
/**
|
|
10094
9945
|
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
10095
9946
|
* component for select instead of regular react-select component. This can be used
|
|
@@ -10111,7 +9962,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10111
9962
|
_ref$darkMode = _ref.darkMode,
|
|
10112
9963
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
10113
9964
|
components = _ref.components,
|
|
10114
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9965
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
|
|
10115
9966
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10116
9967
|
label: label,
|
|
10117
9968
|
error: error,
|
|
@@ -10128,15 +9979,15 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10128
9979
|
})));
|
|
10129
9980
|
};
|
|
10130
9981
|
|
|
10131
|
-
var _templateObject$
|
|
10132
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10133
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9982
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$H, _templateObject4$z;
|
|
9983
|
+
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
9984
|
+
var ItemsContainer = /*#__PURE__*/styled__default.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) {
|
|
10134
9985
|
if (props.showMenu) {
|
|
10135
9986
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 28px;\n ";
|
|
10136
9987
|
}
|
|
10137
9988
|
return "display: none;";
|
|
10138
9989
|
});
|
|
10139
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9990
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.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);
|
|
10140
9991
|
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 0;\n }\n }\n"])), devices.mobileAndTablet);
|
|
10141
9992
|
|
|
10142
9993
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
@@ -10263,9 +10114,9 @@ var Tabs = function Tabs(_ref) {
|
|
|
10263
10114
|
}, "Menu"))))));
|
|
10264
10115
|
};
|
|
10265
10116
|
|
|
10266
|
-
var _templateObject$
|
|
10267
|
-
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10268
|
-
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$
|
|
10117
|
+
var _templateObject$1c, _templateObject3$I, _templateObject4$A, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$7;
|
|
10118
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.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"])));
|
|
10119
|
+
var PromoLabel = /*#__PURE__*/styled__default(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"])));
|
|
10269
10120
|
var ButtonContainer = /*#__PURE__*/styled__default.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) {
|
|
10270
10121
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
10271
10122
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
@@ -10369,8 +10220,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
10369
10220
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
10370
10221
|
};
|
|
10371
10222
|
|
|
10372
|
-
var _templateObject$
|
|
10373
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
10223
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$J;
|
|
10224
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.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) {
|
|
10374
10225
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10375
10226
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10376
10227
|
return aspectRatio;
|
|
@@ -10380,10 +10231,10 @@ var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$1e || (_temp
|
|
|
10380
10231
|
height = _ref2.height;
|
|
10381
10232
|
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
10382
10233
|
});
|
|
10383
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
10384
|
-
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$
|
|
10234
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
10235
|
+
var CaptionContext = /*#__PURE__*/styled__default(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"])));
|
|
10385
10236
|
|
|
10386
|
-
var _excluded$
|
|
10237
|
+
var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
10387
10238
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
10388
10239
|
var caption = _ref.caption,
|
|
10389
10240
|
altText = _ref.altText,
|
|
@@ -10393,7 +10244,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10393
10244
|
loading = _ref.loading,
|
|
10394
10245
|
aspectRatio = _ref.aspectRatio,
|
|
10395
10246
|
className = _ref.className,
|
|
10396
|
-
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
10247
|
+
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
|
|
10397
10248
|
return /*#__PURE__*/React__default.createElement(Wrapper$6, Object.assign({
|
|
10398
10249
|
aspectRatio: aspectRatio,
|
|
10399
10250
|
className: className
|
|
@@ -10414,10 +10265,10 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10414
10265
|
}, caption))));
|
|
10415
10266
|
};
|
|
10416
10267
|
|
|
10417
|
-
var _templateObject$
|
|
10418
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10419
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10420
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
10268
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$u, _templateObject6$n;
|
|
10269
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.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"])));
|
|
10270
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10271
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10421
10272
|
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10422
10273
|
var IconWrapper$3 = /*#__PURE__*/styled__default.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);
|
|
10423
10274
|
var TitleWrapper$4 = /*#__PURE__*/styled__default.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);
|
|
@@ -10458,8 +10309,8 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10458
10309
|
}, title)))));
|
|
10459
10310
|
};
|
|
10460
10311
|
|
|
10461
|
-
var _templateObject$
|
|
10462
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10312
|
+
var _templateObject$1f;
|
|
10313
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.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);
|
|
10463
10314
|
|
|
10464
10315
|
var NavTop = function NavTop(_ref) {
|
|
10465
10316
|
var accountText = _ref.accountText,
|
|
@@ -10499,10 +10350,10 @@ var NavTop = function NavTop(_ref) {
|
|
|
10499
10350
|
}));
|
|
10500
10351
|
};
|
|
10501
10352
|
|
|
10502
|
-
var _templateObject$
|
|
10503
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10504
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10505
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10353
|
+
var _templateObject$1g, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v;
|
|
10354
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3 {\n margin: 0px 0px 12px 0px !important;\n }\n"])));
|
|
10355
|
+
var LinkContainer = /*#__PURE__*/styled__default.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"])));
|
|
10356
|
+
var FullTextContainer = /*#__PURE__*/styled__default.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) {
|
|
10506
10357
|
var isVisible = _ref.isVisible;
|
|
10507
10358
|
return isVisible ? 'visible' : 'hidden';
|
|
10508
10359
|
});
|
|
@@ -10510,7 +10361,36 @@ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$C ||
|
|
|
10510
10361
|
var isVisible = _ref2.isVisible;
|
|
10511
10362
|
return isVisible ? 'visible' : 'hidden';
|
|
10512
10363
|
});
|
|
10513
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-
|
|
10364
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.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);
|
|
10365
|
+
|
|
10366
|
+
var _templateObject$1h, _templateObject2$Z;
|
|
10367
|
+
var TextLinkWrapper$4 = /*#__PURE__*/styled__default.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) {
|
|
10368
|
+
var color = _ref.color;
|
|
10369
|
+
return color;
|
|
10370
|
+
}, devices.mobile);
|
|
10371
|
+
var TextLinkIconWrapper$1 = /*#__PURE__*/styled__default.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"])));
|
|
10372
|
+
|
|
10373
|
+
var _excluded$q = ["children", "iconName", "iconDirection", "textColor", "disableTruncation"];
|
|
10374
|
+
var ReadMoreTextLink = function ReadMoreTextLink(_ref) {
|
|
10375
|
+
var children = _ref.children,
|
|
10376
|
+
iconName = _ref.iconName,
|
|
10377
|
+
iconDirection = _ref.iconDirection,
|
|
10378
|
+
textColor = _ref.textColor,
|
|
10379
|
+
_ref$disableTruncatio = _ref.disableTruncation,
|
|
10380
|
+
disableTruncation = _ref$disableTruncatio === void 0 ? false : _ref$disableTruncatio,
|
|
10381
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
|
|
10382
|
+
var truncatedString = disableTruncation ? children : children.substring(0, 30);
|
|
10383
|
+
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$4, Object.assign({
|
|
10384
|
+
color: textColor,
|
|
10385
|
+
iconName: iconName
|
|
10386
|
+
}, rest), truncatedString, iconName ? (/*#__PURE__*/React__default.createElement(TextLinkIconWrapper$1, {
|
|
10387
|
+
"data-testid": "text-link-icon"
|
|
10388
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10389
|
+
iconName: iconName,
|
|
10390
|
+
direction: iconDirection,
|
|
10391
|
+
color: textColor
|
|
10392
|
+
}))) : null);
|
|
10393
|
+
};
|
|
10514
10394
|
|
|
10515
10395
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10516
10396
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10529,7 +10409,8 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10529
10409
|
hideText = _ref.hideText,
|
|
10530
10410
|
characterLimit = _ref.characterLimit,
|
|
10531
10411
|
_ref$truncate = _ref.truncate,
|
|
10532
|
-
truncate = _ref$truncate === void 0 ? true : _ref$truncate
|
|
10412
|
+
truncate = _ref$truncate === void 0 ? true : _ref$truncate,
|
|
10413
|
+
className = _ref.className;
|
|
10533
10414
|
var _useState = React.useState(initOpen),
|
|
10534
10415
|
isFullTextOpen = _useState[0],
|
|
10535
10416
|
setIsFullTextOpen = _useState[1];
|
|
@@ -10566,14 +10447,14 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10566
10447
|
var contentContainerId = title + "-read-more-content";
|
|
10567
10448
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, {
|
|
10568
10449
|
tabIndex: 0,
|
|
10569
|
-
onKeyDown: handleKeyDown
|
|
10450
|
+
onKeyDown: handleKeyDown,
|
|
10451
|
+
className: className
|
|
10570
10452
|
}, /*#__PURE__*/React__default.createElement(ReadMoreContainer, {
|
|
10571
10453
|
"aria-label": title,
|
|
10572
10454
|
"aria-expanded": isFullTextOpen,
|
|
10573
10455
|
"aria-controls": contentContainerId
|
|
10574
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10575
|
-
|
|
10576
|
-
semanticLevel: 3
|
|
10456
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
10457
|
+
size: "small"
|
|
10577
10458
|
}, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$5, {
|
|
10578
10459
|
"data-testid": "richcontainer",
|
|
10579
10460
|
ref: readMoreContent,
|
|
@@ -10584,17 +10465,17 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10584
10465
|
}
|
|
10585
10466
|
}, /*#__PURE__*/React__default.createElement(FullTextContainer, {
|
|
10586
10467
|
isVisible: isFullTextOpen
|
|
10587
|
-
}, fullText)), /*#__PURE__*/React__default.createElement(LinkContainer, null, (fullText || isFullTextOpen) && (/*#__PURE__*/React__default.createElement(
|
|
10468
|
+
}, fullText)), /*#__PURE__*/React__default.createElement(LinkContainer, null, (fullText || isFullTextOpen) && (/*#__PURE__*/React__default.createElement(ReadMoreTextLink, {
|
|
10588
10469
|
tabIndex: 0,
|
|
10589
10470
|
role: "button",
|
|
10590
10471
|
onClick: toggleFullText
|
|
10591
10472
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10592
10473
|
};
|
|
10593
10474
|
|
|
10594
|
-
var _templateObject$1i, _templateObject2$_, _templateObject3$
|
|
10475
|
+
var _templateObject$1i, _templateObject2$_, _templateObject3$M, _templateObject4$D, _templateObject5$w;
|
|
10595
10476
|
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10596
10477
|
var MenuList = /*#__PURE__*/styled__default.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"])), exports.Colors.LightGrey);
|
|
10597
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
10478
|
+
var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
10598
10479
|
var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref) {
|
|
10599
10480
|
var isActive = _ref.isActive;
|
|
10600
10481
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
@@ -10755,10 +10636,10 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10755
10636
|
});
|
|
10756
10637
|
};
|
|
10757
10638
|
|
|
10758
|
-
var _templateObject$1j, _templateObject2$$, _templateObject3$
|
|
10639
|
+
var _templateObject$1j, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o;
|
|
10759
10640
|
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10760
10641
|
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10761
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10642
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10762
10643
|
var color = _ref.color;
|
|
10763
10644
|
return "var(--base-color-" + color + ")";
|
|
10764
10645
|
});
|
|
@@ -10849,10 +10730,10 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10849
10730
|
}, strengthLabel))));
|
|
10850
10731
|
};
|
|
10851
10732
|
|
|
10852
|
-
var _templateObject$1k, _templateObject2$10, _templateObject3$
|
|
10733
|
+
var _templateObject$1k, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
|
|
10853
10734
|
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10854
10735
|
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10855
|
-
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10736
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10856
10737
|
var TableHeader = /*#__PURE__*/styled__default.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) {
|
|
10857
10738
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10858
10739
|
}, devices.tablet, devices.mobile);
|
|
@@ -11064,7 +10945,7 @@ var Table = function Table(_ref) {
|
|
|
11064
10945
|
}))));
|
|
11065
10946
|
};
|
|
11066
10947
|
|
|
11067
|
-
var _templateObject$1l, _templateObject2$11, _templateObject3$
|
|
10948
|
+
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;
|
|
11068
10949
|
var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11069
10950
|
var theme = _ref.theme;
|
|
11070
10951
|
return "var(--color-" + theme + ")";
|
|
@@ -11073,7 +10954,7 @@ var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1l || (_temp
|
|
|
11073
10954
|
return "var(--color-" + theme + ")";
|
|
11074
10955
|
});
|
|
11075
10956
|
var SignUpFormWrapper = /*#__PURE__*/styled__default(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);
|
|
11076
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
10957
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled__default('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);
|
|
11077
10958
|
var Error = /*#__PURE__*/styled__default.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"])));
|
|
11078
10959
|
var Form = /*#__PURE__*/styled__default.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);
|
|
11079
10960
|
var FormFooterWrapper = /*#__PURE__*/styled__default.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);
|
|
@@ -11652,7 +11533,7 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11652
11533
|
}));
|
|
11653
11534
|
};
|
|
11654
11535
|
|
|
11655
|
-
var _templateObject$1o, _templateObject2$14, _templateObject3$
|
|
11536
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$Q, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11656
11537
|
var color = 'primary-black';
|
|
11657
11538
|
var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
11658
11539
|
borderColor: color,
|
|
@@ -11661,7 +11542,7 @@ var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
|
11661
11542
|
textColor: color
|
|
11662
11543
|
})(_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);
|
|
11663
11544
|
var Container$7 = /*#__PURE__*/styled__default.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);
|
|
11664
|
-
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$
|
|
11545
|
+
var Description = /*#__PURE__*/styled__default(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);
|
|
11665
11546
|
var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
|
|
11666
11547
|
serif: true,
|
|
11667
11548
|
size: 'medium'
|
|
@@ -11888,14 +11769,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11888
11769
|
})))))));
|
|
11889
11770
|
};
|
|
11890
11771
|
|
|
11891
|
-
var _templateObject$1q, _templateObject2$15, _templateObject3$
|
|
11772
|
+
var _templateObject$1q, _templateObject2$15, _templateObject3$R, _templateObject4$J, _templateObject5$C, _templateObject6$s, _templateObject7$m;
|
|
11892
11773
|
var FooterSection = /*#__PURE__*/styled__default(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);
|
|
11893
11774
|
var PolicyLinksSection = /*#__PURE__*/styled__default(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);
|
|
11894
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$
|
|
11775
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(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);
|
|
11895
11776
|
var SectionWrapper = /*#__PURE__*/styled__default.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);
|
|
11896
11777
|
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(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);
|
|
11897
11778
|
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11898
|
-
var TextLinkWrapper$
|
|
11779
|
+
var TextLinkWrapper$5 = /*#__PURE__*/styled__default(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"])));
|
|
11899
11780
|
|
|
11900
11781
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11901
11782
|
var Footer = function Footer(_ref) {
|
|
@@ -11924,14 +11805,14 @@ var Footer = function Footer(_ref) {
|
|
|
11924
11805
|
"data-testid": "contact-newsletter"
|
|
11925
11806
|
}, /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(SocialLinks, {
|
|
11926
11807
|
items: rawSocialMediaLinks
|
|
11927
|
-
}), /*#__PURE__*/React__default.createElement(TextLinkWrapper$
|
|
11808
|
+
}), /*#__PURE__*/React__default.createElement(TextLinkWrapper$5, {
|
|
11928
11809
|
href: contact.href,
|
|
11929
11810
|
"aria-label": contact.title,
|
|
11930
11811
|
tabIndex: isMobile ? 2 : 0
|
|
11931
11812
|
}, contact.title)), /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11932
11813
|
size: "large",
|
|
11933
11814
|
color: "white"
|
|
11934
|
-
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$
|
|
11815
|
+
}, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$5, {
|
|
11935
11816
|
href: newsletter.link.href,
|
|
11936
11817
|
"data-roh": newsletter.link.dataRoh,
|
|
11937
11818
|
"aria-label": newsletter.link.title,
|
|
@@ -11953,7 +11834,7 @@ var Footer = function Footer(_ref) {
|
|
|
11953
11834
|
}, additionalInfo))));
|
|
11954
11835
|
};
|
|
11955
11836
|
|
|
11956
|
-
var _templateObject$1r, _templateObject2$16, _templateObject3$
|
|
11837
|
+
var _templateObject$1r, _templateObject2$16, _templateObject3$S, _templateObject4$K, _templateObject5$D, _templateObject8$f, _templateObject9$9, _templateObject0$8;
|
|
11957
11838
|
var LIST_ITEM_GAP = 32;
|
|
11958
11839
|
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.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) {
|
|
11959
11840
|
var bottomBorder = _ref.bottomBorder;
|
|
@@ -11962,7 +11843,7 @@ var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1r ||
|
|
|
11962
11843
|
var withShadow = _ref2.withShadow;
|
|
11963
11844
|
return withShadow && styled.css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11964
11845
|
});
|
|
11965
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
11846
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
11966
11847
|
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11967
11848
|
var TabsList = /*#__PURE__*/styled__default.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) {
|
|
11968
11849
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
@@ -12234,13 +12115,13 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
12234
12115
|
})))) : null))));
|
|
12235
12116
|
};
|
|
12236
12117
|
|
|
12237
|
-
var _templateObject$1s, _templateObject2$17, _templateObject3$
|
|
12118
|
+
var _templateObject$1s, _templateObject2$17, _templateObject3$T, _templateObject4$L, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$a, _templateObject0$9;
|
|
12238
12119
|
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.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) {
|
|
12239
12120
|
var sticky = _ref.sticky;
|
|
12240
12121
|
return sticky ? 'sticky' : 'initial';
|
|
12241
12122
|
}, zIndexes.anchor);
|
|
12242
12123
|
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
12243
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12124
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.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) {
|
|
12244
12125
|
var title = _ref2.title;
|
|
12245
12126
|
return title ? 'row' : 'row-reverse';
|
|
12246
12127
|
}, devices.tablet, devices.mobile);
|
|
@@ -12294,10 +12175,10 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
12294
12175
|
}, message))));
|
|
12295
12176
|
};
|
|
12296
12177
|
|
|
12297
|
-
var _templateObject$1t, _templateObject2$18, _templateObject3$
|
|
12178
|
+
var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M;
|
|
12298
12179
|
var UpsellBorderBox = /*#__PURE__*/styled__default.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);
|
|
12299
12180
|
var TitleContent = /*#__PURE__*/styled__default(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);
|
|
12300
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12181
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.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);
|
|
12301
12182
|
var TextContent = /*#__PURE__*/styled__default(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);
|
|
12302
12183
|
|
|
12303
12184
|
var UpsellSection = function UpsellSection(_ref) {
|
|
@@ -12375,13 +12256,13 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
12375
12256
|
}, children)));
|
|
12376
12257
|
};
|
|
12377
12258
|
|
|
12378
|
-
var _templateObject$1v, _templateObject2$1a, _templateObject3$
|
|
12259
|
+
var _templateObject$1v, _templateObject2$1a, _templateObject3$V, _templateObject4$N;
|
|
12379
12260
|
var InnerModal = /*#__PURE__*/styled__default.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);
|
|
12380
12261
|
var CloseButton = /*#__PURE__*/styled__default.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);
|
|
12381
|
-
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12262
|
+
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
12382
12263
|
var Overlay = /*#__PURE__*/styled__default(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"])));
|
|
12383
12264
|
|
|
12384
|
-
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"
|
|
12265
|
+
var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
12385
12266
|
var MAX_Z_INDEX = 9999999999;
|
|
12386
12267
|
if (Modal.defaultStyles.content) {
|
|
12387
12268
|
Modal.defaultStyles.content.position = 'static';
|
|
@@ -12455,8 +12336,6 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
12455
12336
|
setIsOpen = _ref.setIsOpen,
|
|
12456
12337
|
children = _ref.children,
|
|
12457
12338
|
appElementId = _ref.appElementId,
|
|
12458
|
-
_ref$closeButtonAriaL = _ref.closeButtonAriaLabel,
|
|
12459
|
-
closeButtonAriaLabel = _ref$closeButtonAriaL === void 0 ? 'Close modal window' : _ref$closeButtonAriaL,
|
|
12460
12339
|
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
|
|
12461
12340
|
var isMobile = useMobile();
|
|
12462
12341
|
var customStyles = {
|
|
@@ -12489,11 +12368,10 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
12489
12368
|
columnSpanSmallDevice: 14
|
|
12490
12369
|
}, /*#__PURE__*/React__default.createElement(InnerModal, null, /*#__PURE__*/React__default.createElement(CloseButton, {
|
|
12491
12370
|
onClick: closeModalHandler,
|
|
12492
|
-
"aria-label":
|
|
12371
|
+
"aria-label": "Close modal window",
|
|
12493
12372
|
tabIndex: 0
|
|
12494
12373
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
12495
|
-
iconName: "Close"
|
|
12496
|
-
"aria-hidden": "true"
|
|
12374
|
+
iconName: "Close"
|
|
12497
12375
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$3, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
12498
12376
|
};
|
|
12499
12377
|
|
|
@@ -12586,7 +12464,7 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
|
12586
12464
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
12587
12465
|
};
|
|
12588
12466
|
|
|
12589
|
-
var _templateObject$1w, _templateObject2$1b, _templateObject3$
|
|
12467
|
+
var _templateObject$1w, _templateObject2$1b, _templateObject3$W, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$b;
|
|
12590
12468
|
var ImageCarouselWrapper = /*#__PURE__*/styled__default.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) {
|
|
12591
12469
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12592
12470
|
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 }";
|
|
@@ -12599,7 +12477,7 @@ var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$1b
|
|
|
12599
12477
|
isActive = _ref3.isActive;
|
|
12600
12478
|
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 ";
|
|
12601
12479
|
});
|
|
12602
|
-
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
12480
|
+
var TitleButtonsGrid = /*#__PURE__*/styled__default(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);
|
|
12603
12481
|
var CarouselInfoWrapper = /*#__PURE__*/styled__default.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"])));
|
|
12604
12482
|
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
12605
12483
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
@@ -12623,12 +12501,6 @@ var GRID_OFFSET_MARGIN = {
|
|
|
12623
12501
|
desktop: 3
|
|
12624
12502
|
};
|
|
12625
12503
|
var FULLSCREEN_FIGCAPTION_HEIGHT = 34;
|
|
12626
|
-
var defaultTitleGridConfig = {
|
|
12627
|
-
columnStartDesktop: 3,
|
|
12628
|
-
columnSpanDesktop: 10,
|
|
12629
|
-
columnStartDevice: 2,
|
|
12630
|
-
columnSpanDevice: 9
|
|
12631
|
-
};
|
|
12632
12504
|
var Carousel = function Carousel(_ref) {
|
|
12633
12505
|
var children = _ref.children,
|
|
12634
12506
|
type = _ref.type,
|
|
@@ -12645,10 +12517,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12645
12517
|
infinite = _ref$infinite === void 0 ? true : _ref$infinite,
|
|
12646
12518
|
_ref$useOffset = _ref.useOffset,
|
|
12647
12519
|
useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset,
|
|
12648
|
-
titleFontFamily = _ref.titleFontFamily
|
|
12649
|
-
titleGrid = _ref.titleGrid,
|
|
12650
|
-
_ref$enableInfiniteOn = _ref.enableInfiniteOnInteraction,
|
|
12651
|
-
enableInfiniteOnInteraction = _ref$enableInfiniteOn === void 0 ? false : _ref$enableInfiniteOn;
|
|
12520
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
12652
12521
|
var _useState = React.useState(false),
|
|
12653
12522
|
isFullscreen = _useState[0],
|
|
12654
12523
|
setIsFullscreen = _useState[1];
|
|
@@ -12670,15 +12539,11 @@ var Carousel = function Carousel(_ref) {
|
|
|
12670
12539
|
var _useState6 = React.useState(true),
|
|
12671
12540
|
showRotatorButtons = _useState6[0],
|
|
12672
12541
|
setShowRotatorButtons = _useState6[1];
|
|
12673
|
-
var _useState7 = React.useState(infinite),
|
|
12674
|
-
isInfinite = _useState7[0],
|
|
12675
|
-
setIsInfinite = _useState7[1];
|
|
12676
12542
|
var swipeRef = React.useRef(null);
|
|
12677
12543
|
var carouselRef = React.useRef(null);
|
|
12678
12544
|
var titleButtonsGridRef = React.useRef(null);
|
|
12679
12545
|
var childrenCount = React__default.Children.count(children);
|
|
12680
12546
|
React.useEffect(function () {
|
|
12681
|
-
setIsInfinite(infinite);
|
|
12682
12547
|
if (infinite) {
|
|
12683
12548
|
setAvailablePrev(true);
|
|
12684
12549
|
setAvailableNext(true);
|
|
@@ -12721,7 +12586,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12721
12586
|
} else if (window.matchMedia != null && window.matchMedia(devices.tablet).matches) {
|
|
12722
12587
|
setSlidesOffsetBefore(GRID_OFFSET_MARGIN.tablet);
|
|
12723
12588
|
} else {
|
|
12724
|
-
setSlidesOffsetBefore(
|
|
12589
|
+
setSlidesOffsetBefore(infinite ? Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop : 0);
|
|
12725
12590
|
}
|
|
12726
12591
|
var hasNext = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext();
|
|
12727
12592
|
if (typeof hasNext === 'boolean') {
|
|
@@ -12736,16 +12601,10 @@ var Carousel = function Carousel(_ref) {
|
|
|
12736
12601
|
}, [useOffset, active]);
|
|
12737
12602
|
var onNext = function onNext() {
|
|
12738
12603
|
var _swipeRef$current3;
|
|
12739
|
-
if (enableInfiniteOnInteraction && !isInfinite) {
|
|
12740
|
-
setIsInfinite(true);
|
|
12741
|
-
}
|
|
12742
12604
|
(_swipeRef$current3 = swipeRef.current) == null || _swipeRef$current3.nextSlide();
|
|
12743
12605
|
};
|
|
12744
12606
|
var onPrev = function onPrev() {
|
|
12745
12607
|
var _swipeRef$current4;
|
|
12746
|
-
if (enableInfiniteOnInteraction && !isInfinite) {
|
|
12747
|
-
setIsInfinite(true);
|
|
12748
|
-
}
|
|
12749
12608
|
(_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.prevSlide();
|
|
12750
12609
|
};
|
|
12751
12610
|
var onClickFullscreen = function onClickFullscreen() {
|
|
@@ -12782,7 +12641,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12782
12641
|
}
|
|
12783
12642
|
};
|
|
12784
12643
|
var onIndexChangeHandler = function onIndexChangeHandler(index) {
|
|
12785
|
-
if (
|
|
12644
|
+
if (infinite) {
|
|
12786
12645
|
setAvailablePrev(true);
|
|
12787
12646
|
setAvailableNext(true);
|
|
12788
12647
|
return;
|
|
@@ -12794,7 +12653,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12794
12653
|
});
|
|
12795
12654
|
};
|
|
12796
12655
|
var handleOverflowChange = function handleOverflowChange(overflow) {
|
|
12797
|
-
if (!
|
|
12656
|
+
if (!infinite) {
|
|
12798
12657
|
var _swipeRef$current8;
|
|
12799
12658
|
setShowRotatorButtons(overflow);
|
|
12800
12659
|
var hasNext = (_swipeRef$current8 = swipeRef.current) == null ? void 0 : _swipeRef$current8.hasNext();
|
|
@@ -12809,12 +12668,6 @@ var Carousel = function Carousel(_ref) {
|
|
|
12809
12668
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
12810
12669
|
var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
12811
12670
|
var isVictorTitleFont = titleFontFamily === 'Victor';
|
|
12812
|
-
var titleGridItemPosition = {
|
|
12813
|
-
columnStartDesktop: (titleGrid == null ? void 0 : titleGrid.columnStartDesktop) || defaultTitleGridConfig.columnStartDesktop,
|
|
12814
|
-
columnSpanDesktop: (titleGrid == null ? void 0 : titleGrid.columnSpanDesktop) || defaultTitleGridConfig.columnSpanDesktop,
|
|
12815
|
-
columnStartDevice: (titleGrid == null ? void 0 : titleGrid.columnStartDevice) || defaultTitleGridConfig.columnStartDevice,
|
|
12816
|
-
columnSpanDevice: (titleGrid == null ? void 0 : titleGrid.columnSpanDevice) || defaultTitleGridConfig.columnSpanDevice
|
|
12817
|
-
};
|
|
12818
12671
|
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
12819
12672
|
className: className,
|
|
12820
12673
|
type: type,
|
|
@@ -12827,10 +12680,10 @@ var Carousel = function Carousel(_ref) {
|
|
|
12827
12680
|
}, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, {
|
|
12828
12681
|
ref: titleButtonsGridRef
|
|
12829
12682
|
}, /*#__PURE__*/React__default.createElement(TitleGridItem, {
|
|
12830
|
-
columnStartDesktop:
|
|
12831
|
-
columnSpanDesktop:
|
|
12832
|
-
columnStartDevice:
|
|
12833
|
-
columnSpanDevice:
|
|
12683
|
+
columnStartDesktop: 3,
|
|
12684
|
+
columnSpanDesktop: 10,
|
|
12685
|
+
columnStartDevice: 2,
|
|
12686
|
+
columnSpanDevice: 9
|
|
12834
12687
|
}, title && (/*#__PURE__*/React__default.createElement(CarouselInfoWrapper, {
|
|
12835
12688
|
"data-testid": "carousel-title-wrapper"
|
|
12836
12689
|
}, /*#__PURE__*/React__default.createElement(TitleWrapper$5, {
|
|
@@ -12849,7 +12702,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
12849
12702
|
columnSpanDevice: 2
|
|
12850
12703
|
}, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
|
|
12851
12704
|
"data-testid": "carousel-buttons-wrapper"
|
|
12852
|
-
}, (
|
|
12705
|
+
}, (infinite || showRotatorButtons) && (/*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12853
12706
|
onClickNext: onNext,
|
|
12854
12707
|
onClickPrev: onPrev,
|
|
12855
12708
|
availablePrev: availablePrev,
|
|
@@ -12857,12 +12710,12 @@ var Carousel = function Carousel(_ref) {
|
|
|
12857
12710
|
showFullscreen: type === exports.CarouselType.Image,
|
|
12858
12711
|
onClickFullscreen: onClickFullscreen,
|
|
12859
12712
|
isFullscreen: isFullscreen,
|
|
12860
|
-
size:
|
|
12861
|
-
}))))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, Object.assign({},
|
|
12713
|
+
size: infinite ? 'default' : 'small'
|
|
12714
|
+
}))))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, Object.assign({}, infinite ? {
|
|
12862
12715
|
active: active
|
|
12863
12716
|
} : {}, {
|
|
12864
12717
|
columnStartDesktop: 3,
|
|
12865
|
-
columnSpanDesktop:
|
|
12718
|
+
columnSpanDesktop: infinite ? 14 : 13,
|
|
12866
12719
|
columnStartDevice: 2,
|
|
12867
12720
|
columnSpanDevice: 13
|
|
12868
12721
|
}), /*#__PURE__*/React__default.createElement(Swipe, {
|
|
@@ -12873,15 +12726,15 @@ var Carousel = function Carousel(_ref) {
|
|
|
12873
12726
|
onOverflowChange: handleOverflowChange,
|
|
12874
12727
|
"data-testid": "carousel-swipe",
|
|
12875
12728
|
ref: swipeRef,
|
|
12876
|
-
infinite:
|
|
12729
|
+
infinite: infinite,
|
|
12877
12730
|
slidesOffsetBefore: slidesOffsetBefore
|
|
12878
12731
|
}, children))));
|
|
12879
12732
|
};
|
|
12880
12733
|
|
|
12881
|
-
var _templateObject$1x, _templateObject2$1c, _templateObject3$
|
|
12734
|
+
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;
|
|
12882
12735
|
var HighlightsGrid$1 = /*#__PURE__*/styled__default(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);
|
|
12883
12736
|
var CarouselTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
12884
|
-
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12737
|
+
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12885
12738
|
var InfoWrapper$2 = /*#__PURE__*/styled__default.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);
|
|
12886
12739
|
var InfoLogoWrapper = /*#__PURE__*/styled__default.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);
|
|
12887
12740
|
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
@@ -13066,19 +12919,13 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
|
|
|
13066
12919
|
}));
|
|
13067
12920
|
};
|
|
13068
12921
|
|
|
13069
|
-
var titleHierarchyMap = /*#__PURE__*/new Map([[1, 'h1'], [2, 'h2'], [3, 'h3']]);
|
|
13070
12922
|
var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
13071
12923
|
var logo = _ref.logo,
|
|
13072
12924
|
carouselTitle = _ref.carouselTitle,
|
|
13073
12925
|
slides = _ref.slides,
|
|
13074
|
-
|
|
13075
|
-
titleSemanticLevel = _ref$titleSemanticLev === void 0 ? 2 : _ref$titleSemanticLev,
|
|
12926
|
+
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
13076
12927
|
className = _ref.className,
|
|
13077
|
-
titleFontFamily = _ref.titleFontFamily
|
|
13078
|
-
_ref$titleSize = _ref.titleSize,
|
|
13079
|
-
titleSize = _ref$titleSize === void 0 ? 'medium' : _ref$titleSize,
|
|
13080
|
-
_ref$titleClassName = _ref.titleClassName,
|
|
13081
|
-
titleClassName = _ref$titleClassName === void 0 ? TYPOGRAPHY_CLASS_NAME : _ref$titleClassName;
|
|
12928
|
+
titleFontFamily = _ref.titleFontFamily;
|
|
13082
12929
|
var slidesMedia = React.useMemo(function () {
|
|
13083
12930
|
return slides.map(function (_ref2) {
|
|
13084
12931
|
var mediaContent = _ref2.mediaContent;
|
|
@@ -13096,7 +12943,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13096
12943
|
return !isVideoSlide(slide);
|
|
13097
12944
|
});
|
|
13098
12945
|
var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
|
|
13099
|
-
var titleSemanticLevelValue =
|
|
12946
|
+
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
13100
12947
|
var carouselRef = React.useRef(null);
|
|
13101
12948
|
var onNext = function onNext() {
|
|
13102
12949
|
var _carouselRef$current;
|
|
@@ -13120,10 +12967,10 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
|
|
|
13120
12967
|
}, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
|
|
13121
12968
|
id: carouselTitleId
|
|
13122
12969
|
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
13123
|
-
|
|
12970
|
+
className: TYPOGRAPHY_CLASS_NAME,
|
|
12971
|
+
size: "medium",
|
|
13124
12972
|
serif: isVictorTitleFont,
|
|
13125
|
-
hierarchy: titleSemanticLevelValue
|
|
13126
|
-
className: titleClassName
|
|
12973
|
+
hierarchy: titleSemanticLevelValue
|
|
13127
12974
|
}, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
13128
12975
|
onClickNext: onNext,
|
|
13129
12976
|
onClickPrev: onPrev
|
|
@@ -13214,9 +13061,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
13214
13061
|
})));
|
|
13215
13062
|
};
|
|
13216
13063
|
|
|
13217
|
-
var _templateObject$1y, _templateObject3$
|
|
13064
|
+
var _templateObject$1y, _templateObject3$Y;
|
|
13218
13065
|
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
13219
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
13066
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
13220
13067
|
|
|
13221
13068
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
13222
13069
|
var children = _ref.children;
|
|
@@ -14784,7 +14631,7 @@ exports.ContactNewsletter = ContactNewsletter;
|
|
|
14784
14631
|
exports.ContentSummary = ContentSummary;
|
|
14785
14632
|
exports.ControlledDropdown = ControlledDropdown;
|
|
14786
14633
|
exports.CreditListing = CreditListing;
|
|
14787
|
-
exports.
|
|
14634
|
+
exports.DisplayHeader = DisplayHeader;
|
|
14788
14635
|
exports.Dropdown = Dropdown;
|
|
14789
14636
|
exports.Editorial = Editorial;
|
|
14790
14637
|
exports.Footer = Footer;
|