@royaloperahouse/harmonic 1.0.5-e → 1.0.6-a

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