@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.
Files changed (28) hide show
  1. package/CHANGELOG.md +3 -27
  2. package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
  3. package/dist/components/atoms/Tab/Tab.d.ts +1 -1
  4. package/dist/components/index.d.ts +2 -2
  5. package/dist/components/molecules/PageHeading/PageHeading.style.d.ts +2 -3
  6. package/dist/components/molecules/ReadMore/ReadMoreTextLink.d.ts +4 -0
  7. package/dist/components/molecules/ReadMore/ReadMoreTextLink.style.d.ts +3 -0
  8. package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
  9. package/dist/components/molecules/index.d.ts +1 -2
  10. package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +3 -1
  11. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +3 -1
  12. package/dist/harmonic.cjs.development.css +0 -319
  13. package/dist/harmonic.cjs.development.js +274 -427
  14. package/dist/harmonic.cjs.development.js.map +1 -1
  15. package/dist/harmonic.cjs.production.min.js +1 -1
  16. package/dist/harmonic.cjs.production.min.js.map +1 -1
  17. package/dist/harmonic.esm.js +282 -438
  18. package/dist/harmonic.esm.js.map +1 -1
  19. package/dist/index.d.ts +4 -4
  20. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  21. package/dist/types/carousel.d.ts +1 -24
  22. package/dist/types/index.d.ts +2 -2
  23. package/dist/types/modalWindow.d.ts +0 -4
  24. package/dist/types/types.d.ts +6 -93
  25. package/package.json +1 -1
  26. package/dist/components/molecules/CustomStrategyTabsFilter/CustomStrategyTabsFilter.d.ts +0 -70
  27. package/dist/components/molecules/CustomStrategyTabsFilter/index.d.ts +0 -2
  28. 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 @media (hover: hover) and (pointer: fine) {\n :hover:not(:active) {\n background-color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\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);
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(BodyContentTextContainer, {
6037
+ var content = /*#__PURE__*/React__default.createElement(TextContainer, {
6038
+ tag: "div",
6039
+ size: "large",
6040
+ "data-testid": "text-container",
6024
6041
  className: textContainerClassName,
6025
- html: text
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 getCastItemSelectionId = React.useCallback(function (person) {
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, onSelectId]);
6985
- var handlePersonKeydown = React__default.useCallback(function (e, index, itemId, onClick) {
6986
- if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
6987
- e.preventDefault();
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 personSelectionId = getCastItemSelectionId(person);
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: personSelectionId,
6985
+ key: index,
7008
6986
  "aria-selected": isSelected,
7009
- "aria-label": ariaLabel != null ? ariaLabel : name,
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, personSelectionId, _onClick);
6993
+ return handlePersonKeydown(e, index, _onClick);
7017
6994
  }
7018
6995
  }, /*#__PURE__*/React__default.createElement(PersonToggle, {
7019
6996
  isSelected: isSelected,
7020
- "aria-hidden": "true"
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-label": "filter list",
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, selectedStateIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
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)), selectedStateIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedStateIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (onApply || onApplyIds) && (/*#__PURE__*/React__default.createElement(PrimaryButton, {
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
- if (onApply) onApply(selectedStateIndices);
7077
- if (onApplyIds) onApplyIds(selectedStateIds);
7054
+ return onApply(selectedIndices);
7078
7055
  }
7079
- }, ctaText != null ? ctaText : 'Apply')), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
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 @media (hover: hover) and (pointer: fine) {\n :hover {\n color: var(--color-base-white);\n }\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$Q, _templateObject2$D, _templateObject3$q, _templateObject4$n;
7508
- var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$Q || (_templateObject$Q = /*#__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);
7509
- var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
7510
- var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$q || (_templateObject3$q = /*#__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) {
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$R, _templateObject2$E, _templateObject3$r, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$6;
7734
- var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$R || (_templateObject$R = /*#__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) {
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$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n ", "\n }\n }\n"])), function (_ref2) {
7739
- var isMultipleRow = _ref2.isMultipleRow;
7740
- return isMultipleRow ? "\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n " : "\n grid-template-rows: min-content;\n grid-template-areas:\n '. . title title title title title title title title title title button button button . .';\n ";
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 (_ref5) {
7750
- var isPageHeadingWithoutTitle = _ref5.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 (_ref6) {
7754
- var isPageHeadingWithoutTitle = _ref6.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"])), devices.mobile, function (_ref7) {
7759
- var isPageHeadingWithoutTitle = _ref7.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 ", ";\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin: 16px 0 0 0;\n }\n }\n"])), function (_ref8) {
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$S, _templateObject2$F, _templateObject3$s, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$7;
7839
- var ImpactHeaderWrapper = /*#__PURE__*/styled__default.header(_templateObject$S || (_templateObject$S = /*#__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);
7840
- var ImpactTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__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) {
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$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n display: flex;\n align-items: center;\n min-width: ", ";\n"])), function (_ref3) {
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$T, _templateObject2$G, _templateObject3$t, _templateObject4$q;
7866
- var VideoPlayButton$1 = /*#__PURE__*/styled__default.button(_templateObject$T || (_templateObject$T = /*#__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);
7867
- var VideoControlsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 100%;\n"])));
7868
- var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__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);
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$k = ["text"];
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$k);
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$U, _templateObject2$H, _templateObject3$u, _templateObject4$r, _templateObject5$l;
8093
- var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$U || (_templateObject$U = /*#__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) {
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$H || (_templateObject2$H = /*#__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) {
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$u || (_templateObject3$u = /*#__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);
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$V, _templateObject2$I, _templateObject3$v, _templateObject4$s, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject0$4, _templateObject1$3;
8137
- var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
8138
- var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
8139
- var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__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);
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$W, _templateObject2$J, _templateObject3$w, _templateObject4$t;
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$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
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$J || (_templateObject2$J = /*#__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) {
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$w || (_templateObject3$w = /*#__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);
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$X, _templateObject2$K, _templateObject3$x, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$5, _templateObject0$5;
8399
- var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__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);
8400
- var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__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"])));
8401
- var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
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$l = ["text"];
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$l);
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$Y, _templateObject2$L, _templateObject3$y, _templateObject4$u, _templateObject5$o, _templateObject6$h, _templateObject7$d;
8653
- var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__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);
8654
- var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
8655
- var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
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$Z, _templateObject2$M, _templateObject3$z, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$a;
8732
- var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$Z || (_templateObject$Z = /*#__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"])));
8733
- var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8734
- var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
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$_ || (_templateObject$_ = /*#__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) {
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$$, _templateObject2$N;
8897
- 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"])));
8898
- var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
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$10, _templateObject2$O;
8921
- var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
8922
- var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n filter: ", ";\n }\n"])), function (_ref) {
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$11, _templateObject2$P, _templateObject3$A, _templateObject4$v;
8972
- var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8973
- var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$P || (_templateObject2$P = /*#__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) {
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$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
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$12;
9106
- var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$12 || (_templateObject$12 = /*#__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"])));
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$13, _templateObject3$B, _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;
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$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\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
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$B || (_templateObject3$B = /*#__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) {
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$m = ["text"],
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 = 185;
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$m);
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$14, _templateObject2$Q, _templateObject3$C, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g;
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$14 || (_templateObject$14 = /*#__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) {
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$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
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$C || (_templateObject3$C = /*#__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) {
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$15;
9440
- var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__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) {
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$n = ["text"],
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$n);
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$16, _templateObject2$R, _templateObject3$D;
9623
- var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
9624
- var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
9625
- var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$D || (_templateObject3$D = /*#__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);
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$17, _templateObject2$S, _templateObject3$E;
9656
- var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9657
- var RadioGroup = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
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$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
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$18, _templateObject2$T, _templateObject3$F;
9743
- var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__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);
9744
- var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__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"])));
9745
- var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__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);
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$19, _templateObject2$U, _templateObject3$G, _templateObject5$s, _templateObject6$l, _templateObject7$h;
9802
- var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__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);
9803
- var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
9804
- var SvgContainerClose = /*#__PURE__*/styled__default.button(_templateObject3$G || (_templateObject3$G = /*#__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"])));
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$1a;
9946
- var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__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);
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$1b, _templateObject2$V, _templateObject3$H, _templateObject4$y;
9989
- var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9990
- var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__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) {
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$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n\n @media ", " {\n margin: 0 0 12px;\n }\n"])), function (_ref5) {
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$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
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$o);
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$p = ["label", "error", "width", "darkMode", "components"];
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$p);
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$1c, _templateObject2$W, _templateObject3$I, _templateObject4$z;
10132
- var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
10133
- var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__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) {
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$I || (_templateObject3$I = /*#__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);
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$1d, _templateObject3$J, _templateObject4$A, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$7;
10267
- var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__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"])));
10268
- var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$J || (_templateObject3$J = /*#__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"])));
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$1e, _templateObject2$X, _templateObject3$K;
10373
- var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$1e || (_templateObject$1e = /*#__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) {
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$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
10384
- var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$K || (_templateObject3$K = /*#__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"])));
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$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
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$q);
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$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$B, _templateObject5$u, _templateObject6$n;
10418
- var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__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"])));
10419
- var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
10420
- var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
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$1g;
10462
- var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__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);
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$1h, _templateObject2$Z, _templateObject3$M, _templateObject4$C, _templateObject5$v;
10503
- var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
10504
- var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
10505
- var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
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-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
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(Header, {
10575
- level: 5,
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(TextLink, {
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$N, _templateObject4$D, _templateObject5$w;
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$N || (_templateObject3$N = /*#__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);
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$O, _templateObject4$E, _templateObject5$x, _templateObject6$o;
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$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
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$P, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
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$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
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$Q, _templateObject4$G, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
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$Q || (_templateObject3$Q = /*#__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);
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$R, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
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$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
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$S, _templateObject4$J, _templateObject5$C, _templateObject6$s, _templateObject7$m;
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$S || (_templateObject3$S = /*#__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);
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$4 = /*#__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"])));
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$4, {
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$4, {
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$T, _templateObject4$K, _templateObject5$D, _templateObject8$f, _templateObject9$9, _templateObject0$8;
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$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
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$U, _templateObject4$L, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$a, _templateObject0$9;
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$U || (_templateObject3$U = /*#__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) {
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$V, _templateObject4$M;
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$V || (_templateObject3$V = /*#__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);
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$W, _templateObject4$N;
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$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
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", "closeButtonAriaLabel"];
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": closeButtonAriaLabel,
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$X, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$b;
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$X || (_templateObject3$X = /*#__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);
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(isInfinite ? Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop : 0);
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 (isInfinite) {
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 (!isInfinite) {
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: titleGridItemPosition.columnStartDesktop,
12831
- columnSpanDesktop: titleGridItemPosition.columnSpanDesktop,
12832
- columnStartDevice: titleGridItemPosition.columnStartDevice,
12833
- columnSpanDevice: titleGridItemPosition.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
- }, (isInfinite || showRotatorButtons) && (/*#__PURE__*/React__default.createElement(RotatorButtons, {
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: isInfinite || enableInfiniteOnInteraction ? 'default' : 'small'
12861
- }))))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, Object.assign({}, isInfinite ? {
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: isInfinite ? 14 : 13,
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: isInfinite,
12729
+ infinite: infinite,
12877
12730
  slidesOffsetBefore: slidesOffsetBefore
12878
12731
  }, children))));
12879
12732
  };
12880
12733
 
12881
- var _templateObject$1x, _templateObject2$1c, _templateObject3$Y, _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;
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$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
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
- _ref$titleSemanticLev = _ref.titleSemanticLevel,
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 = titleHierarchyMap.get(titleSemanticLevel);
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
- size: titleSize,
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$Z;
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$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
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.CustomStrategyTabsFilter = CustomStrategyTabsFilter;
14634
+ exports.DisplayHeader = DisplayHeader;
14788
14635
  exports.Dropdown = Dropdown;
14789
14636
  exports.Editorial = Editorial;
14790
14637
  exports.Footer = Footer;