@royaloperahouse/chord 2.9.1-b-development → 2.9.1-c-development

package/dist/chord.esm.js

@@ -2845,10 +2845,12 @@ var PrimaryButton = function PrimaryButton(_ref) {
 };
 
 var _templateObject$5;
-var PrimaryButtonWrapper$1 = /*#__PURE__*/styled(Button)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-transparent);\n  border-color: ", ";\n"])), function (_ref) {
+var SecondaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-transparent);\n\n  ", "\n"])), function (_ref) {
   var color = _ref.color,
       theme = _ref.theme;
-  return color ? "var(--base-color-" + color + ")" : theme.colors.primary;
+  var themeColor = (theme == null ? void 0 : theme.colors) && color && theme.colors[color];
+  if (!themeColor) themeColor = color ? "var(--base-color-" + color + ")" : theme.colors.primary;
+  return "\n      border-color: " + themeColor + ";\n      color: " + themeColor + ";\n    ";
 });
 
 var _excluded$2 = ["children"];
@@ -2857,7 +2859,7 @@ var SecondaryButton = function SecondaryButton(_ref) {
   var children = _ref.children,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(SecondaryButtonWrapper, Object.assign({
     color: Colors.Primary
   }, props), children);
 };
@@ -7424,7 +7426,9 @@ var UpsellCard = function UpsellCard(_ref) {
       _ref$stackCtasEarly = _ref.stackCtasEarly,
       stackCtasEarly = _ref$stackCtasEarly === void 0 ? false : _ref$stackCtasEarly,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme;
+      theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme,
+      _ref$secondaryTheme = _ref.secondaryTheme,
+      secondaryTheme = _ref$secondaryTheme === void 0 ? ThemeType.Core : _ref$secondaryTheme;
 
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.slice(0, n) : str;
@@ -7451,9 +7455,11 @@ var UpsellCard = function UpsellCard(_ref) {
       title: offerText.title,
       description: offerText.description
     });
-  }), link && /*#__PURE__*/React__default.createElement(ButtonContainer, {
+  }), ((link == null ? void 0 : link.text) || (secondaryLink == null ? void 0 : secondaryLink.text)) && /*#__PURE__*/React__default.createElement(ButtonContainer, {
     stackCtasEarly: stackCtasEarly
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)), secondaryLink && /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT)))));
+  }, (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$L;
@@ -7473,7 +7479,8 @@ var UpsellCards = function UpsellCards(_ref) {
       link: card.link,
       secondaryLink: card.secondaryLink,
       stackCtasEarly: true,
-      theme: card.theme
+      theme: card.theme,
+      secondaryTheme: card.secondaryTheme
     });
   }));
 };
@@ -9328,7 +9335,7 @@ var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$d || (_templat
 var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
 var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
 var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
-var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
+var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
@@ -9510,7 +9517,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
     "data-testid": "buttons-wrapper",
     primaryButtonTextLength: firstButtonText.length,
     tertiaryButtonTextLength: secondButtonText.length
-  }, firstButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, disableCTA ? /*#__PURE__*/React__default.createElement(FirstButtonComponent, {
+  }, firstButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, null, disableCTA ? /*#__PURE__*/React__default.createElement(FirstButtonComponent, {
     bgColor: Colors.MidGrey,
     onClick: function onClick() {
       return null;
@@ -11849,7 +11856,8 @@ var UpsellSection = function UpsellSection(_ref) {
       theme = _ref$theme === void 0 ? 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, {