@royaloperahouse/harmonic 0.11.0-m → 0.11.0-n

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [0.12.0]
+- AnchorBar: add visual improvements
+- Footer: align the grid
+
 ## [0.11.0]
 - CreditListing line groups
 

package/dist/components/Typography/Typography.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { IBodyCopyHarmonicProps, IGenericTypographyProps, IHarmonicHeaderProps } from '../../types/typography';
+import { IGenericTypographyProps, IHarmonicHeaderProps, ITaggedTypographyProps } from '../../types/typography';
 export declare const DisplayHeader: ({ children, size, em, color, serif, className }: IGenericTypographyProps) => React.JSX.Element;
 export declare const HarmonicHeader: ({ children, size, em, color, serif, hierarchy: Tag, className, }: IHarmonicHeaderProps) => React.JSX.Element;
 export declare const HarmonicSubtitle: ({ children, size, color, className }: IGenericTypographyProps) => React.JSX.Element;
-export declare const BodyCopyHarmonic: ({ children, size, color, className, bold, tag: Tag, ...props }: IBodyCopyHarmonicProps) => React.JSX.Element;
+export declare const BodyCopyHarmonic: ({ children, size, color, className, bold, tag: Tag, ...props }: ITaggedTypographyProps) => React.JSX.Element;
 export declare const HarmonicOverline: ({ children, size, color, className, ...props }: IGenericTypographyProps) => React.JSX.Element;
 export declare const ButtonText: ({ children, color, className }: IGenericTypographyProps) => React.JSX.Element;
 export declare const Caption: ({ children, color, className }: IGenericTypographyProps) => React.JSX.Element;
-export declare const NavigationText: ({ children, color, className }: IGenericTypographyProps) => React.JSX.Element;
+export declare const NavigationText: ({ children, color, tag: Tag, className }: ITaggedTypographyProps) => React.JSX.Element;

package/dist/components/organisms/StickyBar/StickyBar.style.d.ts

@@ -1,5 +1,5 @@
 interface IStickyBarGridProps {
-    hideBottomBorder: boolean;
+    bottomBorder?: boolean;
 }
 export declare const StickyBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StickyBarGrid: import("styled-components").StyledComponent<"div", any, IStickyBarGridProps, never>;

package/dist/harmonic.cjs.development.js

@@ -314,12 +314,14 @@ var NavigationText = function NavigationText(_ref8) {
   var children = _ref8.children,
     _ref8$color = _ref8.color,
     color = _ref8$color === void 0 ? 'inherit' : _ref8$color,
+    _ref8$tag = _ref8.tag,
+    Tag = _ref8$tag === void 0 ? 'p' : _ref8$tag,
     className = _ref8.className;
   var classNames = createClassNames('navigationtext', {
     color: color,
     className: className
   }, typographyStyles);
-  return /*#__PURE__*/React__default.createElement("p", {
+  return /*#__PURE__*/React__default.createElement(Tag, {
     className: classNames
   }, children);
 };
@@ -2784,7 +2786,9 @@ var TertiaryButton = function TertiaryButton(_ref) {
     if (rest != null && rest.disabled) return;
     rest.onClick == null || rest.onClick(e);
   }, [rest.disabled, rest.onClick]);
-  return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({
+    "data-testid": "tertiary-button"
+  }, rest, {
     className: className,
     onClick: handleClick
   }), /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -3576,17 +3580,18 @@ var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?
 var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
 var DEFAULT_DATA_ROH = 'ImgAdvert';
 
-/* eslint-disable jsx-a11y/iframe-has-title */
+var _excluded$7 = ["src", "dataRoh", "title"];
 var Sponsorship = function Sponsorship(_ref) {
   var _ref$src = _ref.src,
     src = _ref$src === void 0 ? DEFAULT_SPONSORSHIP_IFRAME : _ref$src,
     _ref$dataRoh = _ref.dataRoh,
     dataRoh = _ref$dataRoh === void 0 ? DEFAULT_DATA_ROH : _ref$dataRoh,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? DEFAULT_SPONSORSHIP_TITLE : _ref$title;
+    title = _ref$title === void 0 ? DEFAULT_SPONSORSHIP_TITLE : _ref$title,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var linkText = title + " sponsorship";
   var linkDescription = linkText + " - visit " + title + "'s website (opens in new tab)";
-  return /*#__PURE__*/React__default.createElement(SponsorshipWrapper, null, /*#__PURE__*/React__default.createElement(SponsorshipLink, {
+  return /*#__PURE__*/React__default.createElement(SponsorshipWrapper, Object.assign({}, rest), /*#__PURE__*/React__default.createElement(SponsorshipLink, {
     href: "https://www.rolex.com",
     target: "_blank",
     rel: "noopener noreferrer",
@@ -3728,7 +3733,7 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templ
 });
 var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n"])));
 
-var _excluded$7 = ["children", "iconName", "iconDirection", "color", "hoverColor", "className"];
+var _excluded$8 = ["children", "iconName", "iconDirection", "color", "hoverColor", "className"];
 var TabLink = function TabLink(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
@@ -3738,7 +3743,7 @@ var TabLink = function TabLink(_ref) {
     _ref$hoverColor = _ref.hoverColor,
     hoverColor = _ref$hoverColor === void 0 ? ThemeColor['primary-red'] : _ref$hoverColor,
     className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
     color: color,
     iconName: iconName,
@@ -3788,7 +3793,7 @@ var TextAreaError = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_tem
   return darkMode ? 'var(--base-color-white)' : 'var(--base-color-errorstate)';
 });
 
-var _excluded$8 = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
+var _excluded$9 = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
 /**
  * An HTML textarea component for Harmonic.
  *
@@ -3849,7 +3854,7 @@ var TextArea = function TextArea(_ref) {
     maxLength = _ref$maxLength === void 0 ? 950 : _ref$maxLength,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-    textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   return /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
     columnSpanDesktop: columnSpanDesktop,
@@ -3909,7 +3914,7 @@ var ErrorLabel$1 = /*#__PURE__*/styled__default.div(_templateObject6$1 || (_temp
 });
 var BodyCopyHarmonicWithWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-state-error);\n"])));
 
-var _excluded$9 = ["label", "type", "error", "darkMode", "width"];
+var _excluded$a = ["label", "type", "error", "darkMode", "width"];
 /**
  * A text field component, that wraps around the native `<input />` element
  * and adds some extra states and information around it (i.e. a text and an error labels,
@@ -3956,7 +3961,7 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     width = _ref.width,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var _useState = React.useState(false),
     showPassword = _useState[0],
     setShowPassword = _useState[1];
@@ -4054,7 +4059,7 @@ var ErrorLabel$2 = /*#__PURE__*/styled__default.p(_templateObject5$3 || (_templa
   return darkMode ? theme.colors.white : theme.colors.error;
 });
 
-var _excluded$a = ["label", "error", "darkMode", "width"];
+var _excluded$b = ["label", "error", "darkMode", "width"];
 /**
  * @deprecated
  *
@@ -4068,7 +4073,7 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     width = _ref.width,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", {
     htmlFor: "text-field-input"
   }, /*#__PURE__*/React__default.createElement(TextLabel$2, {
@@ -4097,13 +4102,13 @@ var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_temp
 }, devices.mobile);
 var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
 
-var _excluded$b = ["children", "iconName", "iconDirection", "textColor"];
+var _excluded$c = ["children", "iconName", "iconDirection", "textColor"];
 var TextLink = function TextLink(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
     textColor = _ref.textColor,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
     color: textColor,
@@ -4296,7 +4301,7 @@ var ErrorLabel$3 = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_temp
   return 'var(--base-color-errorstate)';
 });
 
-var _excluded$c = ["children", "disabled", "error", "darkMode", "blackBox"];
+var _excluded$d = ["children", "disabled", "error", "darkMode", "blackBox"];
 /**
  * A Tickbox component, that wraps around the native `<input type="checkbox"/>` element
  * and adds some extra styling, states and information around it (i.e. an error label,
@@ -4325,7 +4330,7 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     _ref$blackBox = _ref.blackBox,
     blackBox = _ref$blackBox === void 0 ? false : _ref$blackBox,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   return /*#__PURE__*/React__default.createElement(Container$2, null, /*#__PURE__*/React__default.createElement(TickboxLabel$2, {
     darkMode: darkMode,
     blackBox: blackBox
@@ -6097,7 +6102,7 @@ var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
   }, themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren));
 };
 
-var _excluded$d = ["id", "text"];
+var _excluded$e = ["id", "text"];
 var AnchorTabBar = function AnchorTabBar(_ref) {
   var tabs = _ref.tabs,
     onTabClick = _ref.onTabClick,
@@ -6107,6 +6112,8 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
     bottomBorder = _ref$bottomBorder === void 0 ? false : _ref$bottomBorder,
     _ref$withShadow = _ref.withShadow,
     withShadow = _ref$withShadow === void 0 ? false : _ref$withShadow,
+    _ref$offsetHeight = _ref.offsetHeight,
+    offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight,
     className = _ref.className;
   var tabListRef = React.useRef(null);
   var wrapperRef = React.useRef(null);
@@ -6127,12 +6134,27 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   var isSelectedItem = function isSelectedItem(id) {
     return id === selectedItem;
   };
-  var onClicktab = function onClicktab(e, id) {
+  var onClickTab = function onClickTab(e, id) {
+    e.preventDefault();
     if (onTabClick) {
       onTabClick(e, id);
     }
     setSelectedItem(id);
   };
+  React.useEffect(function () {
+    if (!selectedItem) return;
+    var targetSectionElement = document.getElementById(selectedItem);
+    if (targetSectionElement) {
+      var sectionTop = targetSectionElement.getBoundingClientRect().top;
+      var scrollPosition = window.scrollY + sectionTop - offsetHeight;
+      // Instant scroll
+      window.scrollTo(0, scrollPosition);
+    }
+    var clickedTab = document.getElementById("tablink-" + selectedItem);
+    if (clickedTab) {
+      clickedTab.focus();
+    }
+  }, [selectedItem, offsetHeight]);
   var getScrollWidth = function getScrollWidth() {
     var width = 0;
     var selectedItemIndex = tabs.findIndex(function (el) {
@@ -6304,7 +6326,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, tabs.map(function (_ref4) {
     var id = _ref4.id,
       text = _ref4.text,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$d);
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$e);
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
     }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
@@ -6312,7 +6334,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
       className: "anchor-tab-bar-tablink",
       id: "tablink-" + id,
       onClick: function onClick(e) {
-        return onClicktab(e, id);
+        return onClickTab(e, id);
       },
       tabIndex: 0,
       hoverColor: theme === exports.ThemeType.Core ? ThemeColor['primary-red'] : ThemeColor['primary-black']
@@ -6366,7 +6388,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
 var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: var(--grid-outer-margin);\n  height: var(--button-height);\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      margin-right: var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      align-items: center;\n      margin-left: var(--grid-margin);\n      padding: 12px 0;\n    }\n  }\n"])), devices.mobile);
 
-var _excluded$e = ["text"],
+var _excluded$f = ["text"],
   _excluded2$1 = ["text"];
 var TitleWithCTA = function TitleWithCTA(_ref) {
   var title = _ref.title,
@@ -6376,7 +6398,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
     message = _ref.message;
   var _ref2 = (links == null ? void 0 : links[0]) || {},
     primaryButtonText = _ref2.text,
-    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
+    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
   var _ref3 = (links == null ? void 0 : links[1]) || {},
     secondaryButtonText = _ref3.text,
     secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
@@ -7158,10 +7180,10 @@ var UpsellSection = function UpsellSection(_ref) {
 };
 
 var _templateObject$L, _templateObject2$y;
-var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--base-color-white);\n"])), zIndexes.anchor);
+var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--color-base-white);\n"])), zIndexes.anchor);
 var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
-  var hideBottomBorder = _ref.hideBottomBorder;
-  return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-light-grey);';
+  var bottomBorder = _ref.bottomBorder;
+  return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
 }, devices.mobileAndTablet, devices.mobile);
 
 var StickyBar = function StickyBar(_ref) {
@@ -7173,12 +7195,15 @@ var StickyBar = function StickyBar(_ref) {
     columnStartDevice = _ref$columnStartDevic === void 0 ? 2 : _ref$columnStartDevic,
     _ref$columnSpanDevice = _ref.columnSpanDevice,
     columnSpanDevice = _ref$columnSpanDevice === void 0 ? 12 : _ref$columnSpanDevice,
-    hideBottomBorder = _ref.hideBottomBorder,
-    children = _ref.children;
+    _ref$bottomBorder = _ref.bottomBorder,
+    bottomBorder = _ref$bottomBorder === void 0 ? true : _ref$bottomBorder,
+    children = _ref.children,
+    className = _ref.className;
   return /*#__PURE__*/React__default.createElement(StickyBarWrapper, {
-    "data-testid": "sticky-bar-block"
+    "data-testid": "sticky-bar-block",
+    className: className
   }, /*#__PURE__*/React__default.createElement(StickyBarGrid, {
-    hideBottomBorder: hideBottomBorder != null ? hideBottomBorder : false
+    bottomBorder: bottomBorder
   }, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
     columnSpanDesktop: columnSpanDesktop,
@@ -7193,7 +7218,7 @@ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$z || (_te
 var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$j || (_templateObject4$j = /*#__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"])));
 
-var _excluded$f = ["isOpen", "setIsOpen", "children", "appElementId"];
+var _excluded$g = ["isOpen", "setIsOpen", "children", "appElementId"];
 var MAX_Z_INDEX = 9999999999;
 if (Modal.defaultStyles.content) {
   Modal.defaultStyles.content.position = 'static';
@@ -7267,7 +7292,7 @@ var ModalWindow = function ModalWindow(_ref) {
     setIsOpen = _ref.setIsOpen,
     children = _ref.children,
     appElementId = _ref.appElementId,
-    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var isMobile = useMobile();
   var customStyles = {
     overlay: {
@@ -7461,7 +7486,7 @@ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
   return movedSlides;
 };
 
-var _excluded$g = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange"];
+var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange"];
 var MAX_CLONES_NUMBER = 6;
 var CLICK_DRAG_THRESHOLD = 10;
 var getClonesCount = function getClonesCount(infinite, childrenLength) {
@@ -7486,7 +7511,7 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$slidesAriaHidden = _ref.slidesAriaHidden,
     slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
     onActiveChange = _ref.onActiveChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var containerRef = React.useRef(null);
   var childRefs = React.useRef([]);
   var startX = React.useRef(0);
@@ -7882,18 +7907,18 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
 var _templateObject$Q;
 var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 20px;\n  border: none;\n  padding: 0;\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n\n  && span svg * {\n    fill: ", ";\n  }\n\n  .auxiliaryButtonIcon {\n    width: 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
 
-var _excluded$h = ["children", "className"];
+var _excluded$i = ["children", "className"];
 var AuxiliaryButton = function AuxiliaryButton(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
     iconClassName: "auxiliaryButtonIcon",
     className: className
   }), children);
 };
 
-var _excluded$i = ["text"],
+var _excluded$j = ["text"],
   _excluded2$2 = ["text"];
 var _buttonTypeToButton;
 var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
@@ -7904,7 +7929,7 @@ var Buttons = function Buttons(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
@@ -8328,7 +8353,7 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject12$2 ||
   return '';
 });
 
-var _excluded$j = ["text"],
+var _excluded$k = ["text"],
   _excluded2$3 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_LARGE_TEXT$1 = 28;
@@ -8378,7 +8403,7 @@ var Card = function Card(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
   var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -8723,7 +8748,7 @@ var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$Z || (_
 var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__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);
 var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$x || (_templateObject3$x = /*#__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"])));
 
-var _excluded$k = ["text", "onClick"];
+var _excluded$l = ["text", "onClick"];
 var HotFilters = function HotFilters(_ref) {
   var items = _ref.items,
     className = _ref.className,
@@ -8739,7 +8764,7 @@ var HotFilters = function HotFilters(_ref) {
   }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
     var text = item.text,
       _onClick = item.onClick,
-      rest = _objectWithoutPropertiesLoose(item, _excluded$k);
+      rest = _objectWithoutPropertiesLoose(item, _excluded$l);
     var isSelected = index === selectedIndex;
     return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
       key: index,
@@ -9068,7 +9093,7 @@ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_tem
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0px;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
 var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\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    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 
-var _excluded$l = ["text"];
+var _excluded$m = ["text"];
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
     text = _ref.text,
@@ -9086,7 +9111,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var truncatedText = text == null ? void 0 : text.substring(0, 75);
   var _ref2 = link || {},
     linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
     bgUrlDevice: bgUrlDevice,
@@ -9500,7 +9525,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
 
-var _excluded$m = ["text"];
+var _excluded$n = ["text"];
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -9605,7 +9630,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$m);
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$n);
   // const titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
     elementId: 'compact-header-video',
@@ -10069,7 +10094,7 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_te
 var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject15$1 || (_templateObject15$1 = /*#__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);
 var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
 
-var _excluded$n = ["text"],
+var _excluded$o = ["text"],
   _excluded2$4 = ["text"],
   _excluded3 = ["text"];
 var _buttonTypeToButton$2;
@@ -10130,7 +10155,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -10405,7 +10430,7 @@ var PromoChild = function PromoChild(_ref) {
   }));
 };
 
-var _excluded$o = ["text"],
+var _excluded$p = ["text"],
   _excluded2$5 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -10432,7 +10457,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
@@ -11131,7 +11156,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$C || (_temp
   return "var(--base-color-errorstate)";
 });
 
-var _excluded$p = ["label", "error", "width", "darkMode", "isSearchable", "components"];
+var _excluded$q = ["label", "error", "width", "darkMode", "isSearchable", "components"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -11182,7 +11207,7 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -11200,7 +11225,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
 
-var _excluded$q = ["label", "error", "width", "darkMode", "components"];
+var _excluded$r = ["label", "error", "width", "darkMode", "components"];
 /**
  * The Select2Async component is similar to Select 2, but uses react-select async
  * component for select instead of regular react-select component. This can be used
@@ -11222,7 +11247,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     components = _ref.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -12562,11 +12587,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   })));
 };
 
-var _excluded$r = ["logo", "slides"];
+var _excluded$s = ["logo", "slides"];
 var HighlightsCinema = function HighlightsCinema(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12583,10 +12608,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
   })));
 };
 
-var _excluded$s = ["slides"];
+var _excluded$t = ["slides"];
 var HighlightsCore = function HighlightsCore(_ref) {
   var slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12600,11 +12625,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
   })));
 };
 
-var _excluded$t = ["logo", "slides"];
+var _excluded$u = ["logo", "slides"];
 var HighlightsStream = function HighlightsStream(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {