@royaloperahouse/harmonic 0.13.2-c → 0.13.2-d

package/dist/harmonic.esm.js

@@ -9296,14 +9296,17 @@ var SelectComponent$1 = function SelectComponent(_ref) {
 var _templateObject$15, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b;
 var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-light-grey);\n  padding: 40px 20px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  align-items: stretch;\n"])));
 var PromoLabel = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: var(--upsell-border-color);\n  padding: 6px 8px;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  right: 20px;\n  top: 0;\n  width: auto;\n  margin: auto;\n\n  && {\n    color: var(--color-base-white);\n  }\n\n  font-feature-settings:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    'calt' off;\n  text-align: center;\n"])));
-var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  padding-top: 10px;\n  width: fit-content;\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media ", " {\n    width: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  ", "\n\n  @media ", " {\n    a {\n      text-align: center;\n    }\n  }\n"])), function (_ref) {
+var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  padding-top: 10px;\n  width: fit-content;\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media ", " {\n    width: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  ", "\n\n  @media ", ", ", " {\n    a {\n      text-align: center;\n    }\n  }\n"])), function (_ref) {
   var stackCtasEarly = _ref.stackCtasEarly;
   return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
 }, function (_ref2) {
   var stackCtasEarly = _ref2.stackCtasEarly;
   return stackCtasEarly && "\n      @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n        * {\n          width: 100%;\n        }\n      }\n    ";
-}, devices.mobileAndTablet);
-var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-black);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: stretch;\n"])));
+}, devices.smallDesktop, devices.mobileAndTablet);
+var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-black);\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  align-items: stretch;\n"])), function (_ref3) {
+  var singleChild = _ref3.singleChild;
+  return singleChild ? '0' : '10px';
+});
 var DescriptionWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && p {\n    margin: 0;\n    padding: 0;\n  }\n"])));
 var PriceRow = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n"])));
 var LineThrough = /*#__PURE__*/styled(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--color-base-dark-grey);\n"])));
@@ -9362,13 +9365,14 @@ var UpsellCard = function UpsellCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(Wrapper$6, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabel, {
     tag: "div",
     size: "small"
-  }, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+  }, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
+    singleChild: !subTitle && !promoPrice && !price
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
     tag: "div",
-    size: "small",
-    serif: true
+    size: "small"
   }, title), subTitle && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "large"
-  }, subTitle), promoPrice ? (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, {
+  }, subTitle), (price || promoPrice) && (/*#__PURE__*/React__default.createElement(PriceRow, null, promoPrice ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LineThrough, {
     tag: "p",
     size: "small",
     serif: true
@@ -9376,11 +9380,11 @@ var UpsellCard = function UpsellCard(_ref) {
     tag: "p",
     size: "small",
     serif: true
-  }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+  }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
     tag: "p",
     size: "small",
     serif: true
-  }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
+  }, formatPrice(price)))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
     return /*#__PURE__*/React__default.createElement(OfferText, {
       key: "offer-" + index,
       title: offerText.title,
@@ -11270,7 +11274,7 @@ var _templateObject$1j, _templateObject2$10, _templateObject3$Q, _templateObject
 var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: solid 4px;\n  border-color: var(--upsell-border-color);\n  padding: 66px 74px 70px;\n\n  @media ", " {\n    & {\n      border-left: none;\n      border-right: none;\n      padding: 40px 0px;\n    }\n  }\n"])), devices.mobile);
 var TitleContent = /*#__PURE__*/styled(HarmonicHeader)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n\n    @media ", " {\n      margin-left: 20px;\n      margin-right: 20px;\n    }\n  }\n"])), devices.mobile);
 var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 60px;\n\n  @media ", " {\n    margin-bottom: 40px;\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobile);
-var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n    margin: 35px 0 10px;\n  }\n\n  && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n    margin-bottom: 0;\n  }\n"])));
+var TextContent = /*#__PURE__*/styled(BodyContent)(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n    margin: 35px 0 10px;\n\n    @media ", " {\n      margin-top: 24px;\n    }\n  }\n\n  && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n    margin-bottom: 0;\n  }\n"])), devices.mobile);
 
 var _templateObject$1k;
 var Wrapper$a = /*#__PURE__*/styled.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 60px 74px;\n  grid-template-columns: repeat(2, 1fr);\n  width: 100%;\n\n  @media ", " {\n    gap: 40px 74px;\n    width: 100%;\n    padding-left: 0;\n    padding-right: 0;\n    grid-template-columns: 1fr;\n  }\n"])), devices.mobile);