@royaloperahouse/harmonic 0.11.0-m → 0.11.0-n

package/dist/harmonic.esm.js

@@ -334,12 +334,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);
 };
@@ -2807,7 +2809,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, {
@@ -3600,17 +3604,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",
@@ -3752,7 +3757,7 @@ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject
 });
 var TabLinkIconWrapper = /*#__PURE__*/styled.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,
@@ -3762,7 +3767,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,
@@ -3812,7 +3817,7 @@ var TextAreaError = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObje
   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.
  *
@@ -3873,7 +3878,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,
@@ -3933,7 +3938,7 @@ var ErrorLabel$1 = /*#__PURE__*/styled.div(_templateObject6$1 || (_templateObjec
 });
 var BodyCopyHarmonicWithWrapper = /*#__PURE__*/styled(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,
@@ -3980,7 +3985,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 = useState(false),
     showPassword = _useState[0],
     setShowPassword = _useState[1];
@@ -4078,7 +4083,7 @@ var ErrorLabel$2 = /*#__PURE__*/styled.p(_templateObject5$3 || (_templateObject5
   return darkMode ? theme.colors.white : theme.colors.error;
 });
 
-var _excluded$a = ["label", "error", "darkMode", "width"];
+var _excluded$b = ["label", "error", "darkMode", "width"];
 /**
  * @deprecated
  *
@@ -4092,7 +4097,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, {
@@ -4121,13 +4126,13 @@ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObjec
 }, devices.mobile);
 var TextLinkIconWrapper = /*#__PURE__*/styled.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,
@@ -4321,7 +4326,7 @@ var ErrorLabel$3 = /*#__PURE__*/styled.div(_templateObject6$2 || (_templateObjec
   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,
@@ -4350,7 +4355,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
@@ -6138,7 +6143,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,
@@ -6148,6 +6153,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 = useRef(null);
   var wrapperRef = useRef(null);
@@ -6168,12 +6175,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);
   };
+  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) {
@@ -6345,7 +6367,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({
@@ -6353,7 +6375,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 === ThemeType.Core ? ThemeColor['primary-red'] : ThemeColor['primary-black']
@@ -6407,7 +6429,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$4
 var MessageWrapper = /*#__PURE__*/styled.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.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,
@@ -6417,7 +6439,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);
@@ -7199,10 +7221,10 @@ var UpsellSection = function UpsellSection(_ref) {
 };
 
 var _templateObject$L, _templateObject2$y;
-var StickyBarWrapper = /*#__PURE__*/styled.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.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(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) {
@@ -7214,12 +7236,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,
@@ -7234,7 +7259,7 @@ var CloseButton = /*#__PURE__*/styled.button(_templateObject2$z || (_templateObj
 var ContentWrapper = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var Overlay = /*#__PURE__*/styled(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';
@@ -7308,7 +7333,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: {
@@ -7502,7 +7527,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) {
@@ -7527,7 +7552,7 @@ var Swipe = /*#__PURE__*/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 = useRef(null);
   var childRefs = useRef([]);
   var startX = useRef(0);
@@ -7923,18 +7948,18 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
 var _templateObject$Q;
 var AuxiliaryButtonWrapper = /*#__PURE__*/styled(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[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
@@ -7945,7 +7970,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,
@@ -8369,7 +8394,7 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject12$2 || (_templa
   return '';
 });
 
-var _excluded$j = ["text"],
+var _excluded$k = ["text"],
   _excluded2$3 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_LARGE_TEXT$1 = 28;
@@ -8419,7 +8444,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 || {},
@@ -8764,7 +8789,7 @@ var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$Z || (_templateO
 var HotFilterOptionsWrapper = /*#__PURE__*/styled.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(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,
@@ -8780,7 +8805,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,
@@ -9109,7 +9134,7 @@ var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObje
 var ButtonWrapper$2 = /*#__PURE__*/styled.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.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,
@@ -9127,7 +9152,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,
@@ -9541,7 +9566,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;
@@ -9646,7 +9671,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',
@@ -10110,7 +10135,7 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObj
 var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled(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(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;
@@ -10171,7 +10196,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 || {},
@@ -10446,7 +10471,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) {
@@ -10473,7 +10498,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 || {},
@@ -11172,7 +11197,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObjec
   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(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -11223,7 +11248,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,
@@ -11241,7 +11266,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
@@ -11263,7 +11288,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,
@@ -12603,11 +12628,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, {
@@ -12624,10 +12649,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, {
@@ -12641,11 +12666,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, {