@royaloperahouse/harmonic 0.7.1-f → 0.7.1-h

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [TBD]
+- Upsell Card, Upsell Cards, Upsell section:
+- Add secondary CTA
+- Update device styling
+
 ## [0.2.3]
 - Restyle PromoWithTitle component
 

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

@@ -3,7 +3,7 @@ import { IGenericTypographyProps, IHarmonicHeaderProps } from '../../types/typog
 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, ...props }: IGenericTypographyProps) => React.JSX.Element;
+export declare const BodyCopyHarmonic: ({ children, size, color, className, bold, ...props }: IGenericTypographyProps) => 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;

package/dist/components/atoms/Buttons/Secondary/utils.d.ts

@@ -8,7 +8,7 @@ export declare const COLORS: {
     readonly hover: "var(--button-secondary-hover-color)";
     readonly pressed: "var(--button-secondary-pressed-color)";
 };
-export declare const getTextColor: ({ disabled, textColor }: SecondaryButtonProps) => string;
-export declare const getBorderColor: ({ disabled, borderColor }: SecondaryButtonProps) => string;
-export declare const getHoveredColor: ({ disabled, hoveredColor }: SecondaryButtonProps) => string;
-export declare const getPressedColor: ({ disabled, pressedColor }: SecondaryButtonProps) => string;
+export declare const getTextColor: ({ disabled, textColor, theme }: SecondaryButtonProps) => string;
+export declare const getBorderColor: ({ disabled, borderColor, theme }: SecondaryButtonProps) => string;
+export declare const getHoveredColor: ({ disabled, hoveredColor, theme }: SecondaryButtonProps) => string;
+export declare const getPressedColor: ({ disabled, pressedColor, theme }: SecondaryButtonProps) => string;

package/dist/components/molecules/SearchBar/SearchBar.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISearchBarProps } from '../../../types/navigation';
-declare const SearchBar: ({ onClick, onClose, className, inputRef }: ISearchBarProps) => React.JSX.Element;
+declare const SearchBar: ({ onClick, onClose, className, inputRef, trapFocus }: ISearchBarProps) => React.JSX.Element;
 export default SearchBar;

package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts

@@ -7,7 +7,9 @@ declare type WithColor = {
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PromoLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PromoLabel: import("styled-components").StyledComponent<"div", any, WithColor, never>;
-export declare const ButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonContainer: import("styled-components").StyledComponent<"div", any, {
+    stackCtasEarly: boolean;
+}, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OfferTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PriceRow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/harmonic.cjs.development.js

@@ -12,7 +12,6 @@ var moment = _interopDefault(require('moment'));
 var Modal = _interopDefault(require('react-modal'));
 var ScrollLock = _interopDefault(require('react-scrolllock'));
 var server = require('react-dom/server');
-var reactRouterDom = require('react-router-dom');
 var Select$1 = require('react-select');
 var Select$1__default = _interopDefault(Select$1);
 var Select$2 = _interopDefault(require('react-select/async'));
@@ -367,7 +366,7 @@ var createClassNames = function createClassNames(baseClass, options, styles) {
 
 var styles = {"display":"typography-module_display__ZHsz9","header":"typography-module_header__FVsLI","subtitle":"typography-module_subtitle__x3sSn","bodycopy":"typography-module_bodycopy__-BY2U","overline":"typography-module_overline__y1yCC","buttontext":"typography-module_buttontext__Gp0W-","captiontext":"typography-module_captiontext__zyA--","navigationtext":"typography-module_navigationtext__Qj6Zw","display--large":"typography-module_display--large__RwPQD","display--small":"typography-module_display--small__XWUSJ","header--large":"typography-module_header--large__2vP3p","header--medium":"typography-module_header--medium__OgzlB","header--small":"typography-module_header--small__zLuFf","subtitle--large":"typography-module_subtitle--large__1Ep9J","subtitle--small":"typography-module_subtitle--small__Vt9bZ","bodycopy--large":"typography-module_bodycopy--large__BNzf2","bodycopy--medium":"typography-module_bodycopy--medium__cwJEu","bodycopy--small":"typography-module_bodycopy--small__fTLSM","overline--large":"typography-module_overline--large__79WUM","overline--small":"typography-module_overline--small__MGEG6","display--primary":"typography-module_display--primary__9sTwU","header--primary":"typography-module_header--primary__KF0PJ","subtitle--primary":"typography-module_subtitle--primary__yL-hS","bodycopy--primary":"typography-module_bodycopy--primary__5Uo2D","overline--primary":"typography-module_overline--primary__a2NSa","buttontext--primary":"typography-module_buttontext--primary__HnmE3","captiontext--primary":"typography-module_captiontext--primary__mmafI","navigationtext--primary":"typography-module_navigationtext--primary__vIsUl","display--black":"typography-module_display--black__8hmsx","header--black":"typography-module_header--black__M3I14","subtitle--black":"typography-module_subtitle--black__IQRSo","bodycopy--black":"typography-module_bodycopy--black__J8BNP","overline--black":"typography-module_overline--black__RUDoj","buttontext--black":"typography-module_buttontext--black__irjmz","captiontext--black":"typography-module_captiontext--black__7axhP","navigationtext--black":"typography-module_navigationtext--black__wDz-G","display--white":"typography-module_display--white__3QA6W","header--white":"typography-module_header--white__mm-ex","subtitle--white":"typography-module_subtitle--white__VzQ3K","bodycopy--white":"typography-module_bodycopy--white__NJ8J8","overline--white":"typography-module_overline--white__cV5QV","buttontext--white":"typography-module_buttontext--white__rrr8U","captiontext--white":"typography-module_captiontext--white__OMFwW","navigationtext--white":"typography-module_navigationtext--white__5YDdY","display--red":"typography-module_display--red__khdLJ","header--red":"typography-module_header--red__hxuj9","subtitle--red":"typography-module_subtitle--red__gSK7d","bodycopy--red":"typography-module_bodycopy--red__P5Mau","overline--red":"typography-module_overline--red__OW5dE","buttontext--red":"typography-module_buttontext--red__mlRi2","captiontext--red":"typography-module_captiontext--red__jMQIK","navigationtext--red":"typography-module_navigationtext--red__-QADV","display--grey":"typography-module_display--grey__RsgTf","header--grey":"typography-module_header--grey__rC0vN","subtitle--grey":"typography-module_subtitle--grey__1nkEx","bodycopy--grey":"typography-module_bodycopy--grey__SNnaU","overline--grey":"typography-module_overline--grey__lGOsK","buttontext--grey":"typography-module_buttontext--grey__1Y4oX","captiontext--grey":"typography-module_captiontext--grey__V0MLc","navigationtext--grey":"typography-module_navigationtext--grey__xi3sz","display--inherit":"typography-module_display--inherit__ZNOHM","header--inherit":"typography-module_header--inherit__qmHQE","subtitle--inherit":"typography-module_subtitle--inherit__mly-X","bodycopy--inherit":"typography-module_bodycopy--inherit__CoC-f","overline--inherit":"typography-module_overline--inherit__Cq4ni","buttontext--inherit":"typography-module_buttontext--inherit__vguWx","captiontext--inherit":"typography-module_captiontext--inherit__ya6gm","navigationtext--inherit":"typography-module_navigationtext--inherit__cJLWf","display--serif":"typography-module_display--serif__C0-Ve","header--serif":"typography-module_header--serif__uTGCc","display--em":"typography-module_display--em__h2bPV","header--em":"typography-module_header--em__UFQIA","display--bold":"typography-module_display--bold__PG-8g","header--bold":"typography-module_header--bold__InvJk","subtitle--bold":"typography-module_subtitle--bold__Subov","bodycopy--bold":"typography-module_bodycopy--bold__nZX3C","overline--bold":"typography-module_overline--bold__3mUXy","buttontext--bold":"typography-module_buttontext--bold__rBKIJ","captiontext--bold":"typography-module_captiontext--bold__ebTyV","navigationtext--bold":"typography-module_navigationtext--bold__SRlV2"};
 
-var _excluded = ["children", "size", "color", "className"],
+var _excluded = ["children", "size", "color", "className", "bold"],
   _excluded2 = ["children", "size", "color", "className"];
 /* ~~~ Headers - size and hierarchy set separately ~~~ */
 var HarmonicHeader = function HarmonicHeader(_ref2) {
@@ -414,10 +413,12 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
     _ref4$color = _ref4.color,
     color = _ref4$color === void 0 ? 'inherit' : _ref4$color,
     className = _ref4.className,
+    bold = _ref4.bold,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded);
   var classNames = createClassNames('bodycopy', {
     size: size,
     color: color,
+    bold: bold,
     className: className
   }, styles);
   return /*#__PURE__*/React__default.createElement("p", Object.assign({
@@ -2828,48 +2829,70 @@ var COLORS$1 = {
   hover: 'var(--button-secondary-hover-color)',
   pressed: 'var(--button-secondary-pressed-color)'
 };
+var isObjectWithKey = function isObjectWithKey(object, key) {
+  return typeof object === 'object' && object !== null && key in object;
+};
+var hasSecondaryButtonColor = function hasSecondaryButtonColor(theme) {
+  return isObjectWithKey(theme, 'colors') && isObjectWithKey(theme.colors, 'secondaryButton') && typeof theme.colors.secondaryButton === 'string';
+};
 var getTextColor$1 = function getTextColor(_ref) {
   var disabled = _ref.disabled,
-    textColor = _ref.textColor;
+    textColor = _ref.textColor,
+    theme = _ref.theme;
   if (disabled) {
     return COLORS$1.darkGrey;
   }
   if (textColor) {
     return "var(--color-" + textColor + ")";
   }
+  if (hasSecondaryButtonColor(theme)) {
+    return theme.colors.secondaryButton;
+  }
   return COLORS$1["default"];
 };
 var getBorderColor = function getBorderColor(_ref2) {
   var disabled = _ref2.disabled,
-    borderColor = _ref2.borderColor;
+    borderColor = _ref2.borderColor,
+    theme = _ref2.theme;
   if (disabled) {
     return COLORS$1.disabled;
   }
   if (borderColor) {
     return "var(--color-" + borderColor + ")";
   }
+  if (hasSecondaryButtonColor(theme)) {
+    return theme.colors.secondaryButton;
+  }
   return COLORS$1.border;
 };
 var getHoveredColor$1 = function getHoveredColor(_ref3) {
   var disabled = _ref3.disabled,
-    hoveredColor = _ref3.hoveredColor;
+    hoveredColor = _ref3.hoveredColor,
+    theme = _ref3.theme;
   if (disabled) {
     return COLORS$1.disabled;
   }
   if (hoveredColor) {
     return "var(--color-" + hoveredColor + ")";
   }
+  if (hasSecondaryButtonColor(theme)) {
+    return theme.colors.secondaryButton;
+  }
   return COLORS$1.hover;
 };
 var getPressedColor$1 = function getPressedColor(_ref4) {
   var disabled = _ref4.disabled,
-    pressedColor = _ref4.pressedColor;
+    pressedColor = _ref4.pressedColor,
+    theme = _ref4.theme;
   if (disabled) {
     return COLORS$1.disabled;
   }
   if (pressedColor) {
     return "var(--color-" + pressedColor + ")";
   }
+  if (hasSecondaryButtonColor(theme)) {
+    return theme.colors.secondaryButton;
+  }
   return COLORS$1.pressed;
 };
 
@@ -5764,8 +5787,12 @@ var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$a || (_te
 var TextLinkWrapper$1 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-red);\n"])));
 var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-right: 8px;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 
-function useFocusTrap(containerRef, onEscape) {
+function useFocusTrap(containerRef, onEscape, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
   React.useEffect(function () {
+    if (!enabled) return undefined;
     var container = containerRef.current;
     if (!container) return undefined;
     var focusableSelectors = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
@@ -5798,7 +5825,9 @@ var SearchBar = function SearchBar(_ref) {
   var onClick = _ref.onClick,
     onClose = _ref.onClose,
     className = _ref.className,
-    inputRef = _ref.inputRef;
+    inputRef = _ref.inputRef,
+    _ref$trapFocus = _ref.trapFocus,
+    trapFocus = _ref$trapFocus === void 0 ? true : _ref$trapFocus;
   var _useState = React.useState(false),
     showSearchLink = _useState[0],
     setShowSearchLink = _useState[1];
@@ -5808,7 +5837,7 @@ var SearchBar = function SearchBar(_ref) {
   var internalRef = React.useRef(null);
   var finalInputRef = inputRef != null ? inputRef : internalRef;
   var containerRef = React.useRef(null);
-  useFocusTrap(containerRef, onClose);
+  useFocusTrap(containerRef, onClose, trapFocus);
   var onSearchHandler = function onSearchHandler(value) {
     onClick(value);
     setSearchValue('');
@@ -5888,7 +5917,7 @@ var SearchBar = function SearchBar(_ref) {
     onClick: onCloseHandler,
     onKeyDown: onKeyboardCloseHandler,
     "data-testid": "close-icon",
-    "aria-label": "Close search bar"
+    "aria-label": "Clear the search bar"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Close"
   })));
@@ -6932,7 +6961,7 @@ var core = /*#__PURE__*/_extends({}, common, {
   colors: /*#__PURE__*/_extends({}, commonColors, colors, {
     primary: colors.core,
     primaryButton: colors.core,
-    secondaryButton: commonColors.white,
+    secondaryButton: colors.core,
     tertiaryButton: 'transparent',
     auxiliaryButton: 'transparent',
     primaryButtonReverseBg: colors.cinema,
@@ -6945,7 +6974,7 @@ var stream = /*#__PURE__*/_extends({}, common, {
     primaryButton: colors.stream,
     primaryButtonReverseBg: colors.cinema,
     primaryButtonReverse: commonColors.white,
-    secondaryButton: commonColors.white,
+    secondaryButton: colors.stream,
     tertiaryButton: 'transparent',
     auxiliaryButton: 'transparent'
   })
@@ -6956,7 +6985,7 @@ var cinema = /*#__PURE__*/_extends({}, common, {
     primaryButton: commonColors.white,
     primaryButtonReverseBg: commonColors.white,
     primaryButtonReverse: colors.cinema,
-    secondaryButton: commonColors.white,
+    secondaryButton: colors.cinema,
     tertiaryButton: 'transparent',
     auxiliaryButton: 'transparent'
   })
@@ -6967,7 +6996,7 @@ var schools = /*#__PURE__*/_extends({}, common, {
     primaryButton: colors.core,
     primaryButtonReverseBg: colors.cinema,
     primaryButtonReverse: commonColors.white,
-    secondaryButton: commonColors.white,
+    secondaryButton: colors.core,
     tertiaryButton: 'transparent',
     auxiliaryButton: 'transparent'
   }),
@@ -7055,17 +7084,23 @@ var TextOnly = function TextOnly(_ref) {
 })(exports.ButtonType || (exports.ButtonType = {}));
 
 var _templateObject$J, _templateObject2$x, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$7, _templateObject8$4;
-var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-light-grey);\n  padding: 40px;\n\n  display: block;\n  position: relative;\n\n  @media ", " {\n    margin-top: 0;\n    padding: 40px 20px;\n  }\n"])), devices.tablet);
+var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-lightgrey);\n  padding: 40px;\n\n  display: block;\n  position: relative;\n\n  @media ", " {\n    margin-top: 0;\n    padding: 40px 20px;\n  }\n"])), devices.tablet);
 var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-self: flex-end;\n  height: 15px;\n"])));
 var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  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  font-family: var(--font-family-header);\n  font-feature-settings:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    'calt' off;\n  font-size: var(--font-size-overline-2);\n  line-height: 12px;\n  text-align: center;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, exports.Colors.White);
-var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n"])));
+var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\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"])), function (_ref2) {
+  var stackCtasEarly = _ref2.stackCtasEarly;
+  return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
+}, function (_ref3) {
+  var stackCtasEarly = _ref3.stackCtasEarly;
+  return stackCtasEarly && "\n      @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n        * {\n          width: 100%;\n        }\n      }\n    ";
+});
 var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
 var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
 var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n  padding: 5px 0 8px 0;\n"])));
-var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--base-color-dark-grey);\n"])));
+var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--base-color-darkgrey);\n"])));
 
 // Set max. character length
 var setMaxCharLength = function setMaxCharLength(value, maxLength) {
@@ -7108,8 +7143,13 @@ var UpsellCard = function UpsellCard(_ref) {
     flag = _ref.flag,
     offerTexts = _ref.offerTexts,
     link = _ref.link,
+    secondaryLink = _ref.secondaryLink,
+    _ref$stackCtasEarly = _ref.stackCtasEarly,
+    stackCtasEarly = _ref$stackCtasEarly === void 0 ? false : _ref$stackCtasEarly,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
+    theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme,
+    _ref$secondaryTheme = _ref.secondaryTheme,
+    secondaryTheme = _ref$secondaryTheme === void 0 ? exports.ThemeType.Core : _ref$secondaryTheme;
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.slice(0, n) : str;
   };
@@ -7128,13 +7168,17 @@ var UpsellCard = function UpsellCard(_ref) {
     level: 4
   }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 4
-  }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText) {
+  }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
     return /*#__PURE__*/React__default.createElement(OfferText, {
-      key: offerText.title,
+      key: "offer-" + index,
       title: offerText.title,
       description: offerText.description
     });
-  }), link && (/*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT))))));
+  }), ((link == null ? void 0 : link.text) || (secondaryLink == null ? void 0 : secondaryLink.text)) && (/*#__PURE__*/React__default.createElement(ButtonContainer, {
+    stackCtasEarly: stackCtasEarly
+  }, (link == null ? void 0 : link.text) && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)), (secondaryLink == null ? void 0 : secondaryLink.text) && (/*#__PURE__*/React__default.createElement(Theme, {
+    theme: secondaryTheme
+  }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT))))))));
 };
 
 var _templateObject$K;
@@ -7144,7 +7188,7 @@ var UpsellCards = function UpsellCards(_ref) {
   var upsellCards = _ref.upsellCards;
   return /*#__PURE__*/React__default.createElement(Wrapper$3, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
     return /*#__PURE__*/React__default.createElement(UpsellCard, {
-      key: "upsell-card-" + index,
+      key: "card-" + index,
       title: card.title,
       subTitle: card.subTitle,
       price: card.price,
@@ -7152,7 +7196,10 @@ var UpsellCards = function UpsellCards(_ref) {
       flag: card.flag,
       offerTexts: card.offerTexts,
       link: card.link,
-      theme: card.theme
+      secondaryLink: card.secondaryLink,
+      stackCtasEarly: true,
+      theme: card.theme,
+      secondaryTheme: card.secondaryTheme
     });
   }));
 };
@@ -7166,7 +7213,8 @@ var UpsellSection = function UpsellSection(_ref) {
     theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
   var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
     return _extends({}, card, {
-      theme: card.theme || theme
+      theme: card.theme || theme,
+      secondaryTheme: card.secondaryTheme || theme
     });
   }) : [];
   return /*#__PURE__*/React__default.createElement(Theme, {
@@ -8682,14 +8730,16 @@ var ContentSummary = function ContentSummary(_ref) {
     "data-roh": "content-summary-item"
   }, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
     "data-testid": "image-wrapper"
-  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: exports.AspectRatio['4:3']
   }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
     href: link.href
+  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
     src: image.src,
     alt: image.alt
-  }))) : (/*#__PURE__*/React__default.createElement("img", {
+  })))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: exports.AspectRatio['4:3']
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: image.src,
     alt: image.alt
   }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
@@ -9718,17 +9768,11 @@ var reducePages = function reducePages(pages, currentPage) {
   // Otherwise, show 3 pages before and 2 pages after
   return pages.slice(currentPage - 2, currentPage + 4);
 };
-var buildUrlWithPage = function buildUrlWithPage(baseUrl, page, search) {
-  var params = new URLSearchParams(search);
-  params.set('page', page.toString());
-  return baseUrl + "?" + params.toString();
-};
 var Pagination = function Pagination(_ref) {
   var pageCount = _ref.pageCount,
     currentPage = _ref.currentPage,
     baseUrl = _ref.baseUrl,
     className = _ref.className;
-  var location = reactRouterDom.useLocation();
   // Array of page numbers starting at 1
   var pageNumbers = Array.from(Array(pageCount + 1).keys()).slice(1);
   var reducedPageNumbers = reducePages(pageNumbers, currentPage);
@@ -9737,7 +9781,7 @@ var Pagination = function Pagination(_ref) {
   },
   // {/* Left arrow only appears after page 1 */
   currentPage > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNav, {
-    href: buildUrlWithPage(baseUrl, 1, location.search)
+    href: baseUrl + "1"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "LastPageArrow",
     direction: "right"
@@ -9745,7 +9789,7 @@ var Pagination = function Pagination(_ref) {
     key: "previous-page",
     "data-testid": "left-arrow"
   }, /*#__PURE__*/React__default.createElement(PageNav, {
-    href: buildUrlWithPage(baseUrl, currentPage - 1, location.search)
+    href: "" + baseUrl + (currentPage - 1)
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "ArrowPagination",
     direction: "right"
@@ -9753,7 +9797,7 @@ var Pagination = function Pagination(_ref) {
     return /*#__PURE__*/React__default.createElement("li", {
       key: page
     }, /*#__PURE__*/React__default.createElement(PaginationLink, {
-      href: buildUrlWithPage(baseUrl, page, location.search),
+      href: "" + baseUrl + page,
       "data-testid": "page-number"
     }, /*#__PURE__*/React__default.createElement(TextLinkPagination, {
       size: "large",
@@ -9763,12 +9807,12 @@ var Pagination = function Pagination(_ref) {
     key: "next-page",
     "data-testid": "right-arrow"
   }, /*#__PURE__*/React__default.createElement(PageNav, {
-    href: buildUrlWithPage(baseUrl, currentPage + 1, location.search)
+    href: "" + baseUrl + (currentPage + 1)
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "ArrowPagination",
     direction: "left"
   }))), /*#__PURE__*/React__default.createElement(LastPageItem, null, /*#__PURE__*/React__default.createElement(PageNav, {
-    href: buildUrlWithPage(baseUrl, pageCount, location.search)
+    href: "" + baseUrl + pageCount
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "LastPageArrow",
     direction: "left"