@royaloperahouse/harmonic 0.2.3-j → 0.2.3-k

package/dist/harmonic.esm.js

@@ -7963,7 +7963,7 @@ var Carousel = function Carousel(_ref) {
 };
 
 var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17;
-var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--color-base-black);\n  color: var(--color-base-white);\n  user-select: none;\n\n  .color-primary {\n    color: var(--color-base-white);\n  }\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
+var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--color-base-black);\n  user-select: none;\n\n  .highlight-carousel-text {\n    color: var(--color-base-white);\n  }\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
 var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 12;\n      padding: 12px 0 12px var(--grid-margin);\n      min-height: 64px;\n      box-sizing: border-box;\n      width: 100%;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
 var InfoWrapper = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 2 / 1 / 2 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 2 / 7;\n      padding: 0 12px 12px var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 3 / 1 / 4 / 15;\n      width: 100%;\n      padding: 0 20px;\n      margin: 24px 0;\n    }\n  }\n"])), devices.tablet, devices.mobile);
@@ -8112,6 +8112,7 @@ var InfoSection = function InfoSection(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, timerParams && (/*#__PURE__*/React__default.createElement(TimerWrapper$1, {
     "data-testid": "highlight-carousel-timer-wrapper"
   }, finishedTimers.includes(currentSlideIndex) ? (/*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
+    className: "highlight-carousel-text",
     size: "large"
   }, timerParams.endDateText)) : (/*#__PURE__*/React__default.createElement(Timer, {
     color: Colors.White,
@@ -8119,19 +8120,24 @@ var InfoSection = function InfoSection(_ref) {
     endDate: timerParams.endDate,
     title: timerParams.title
   })))), logo ? /*#__PURE__*/React__default.createElement(InfoLogoWrapper, null, logo) : null, /*#__PURE__*/React__default.createElement(InfoTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    className: TYPOGRAPHY_CLASS_NAME,
     size: "large",
     hierarchy: "h3"
   }, infoTitle), /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    className: TYPOGRAPHY_CLASS_NAME,
     size: "large"
   }, infoTimeframe)), /*#__PURE__*/React__default.createElement(InfoTextWrapper, null, /*#__PURE__*/React__default.createElement(InfoSubtitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    className: TYPOGRAPHY_CLASS_NAME,
     size: "large"
   }, infoSubtitle)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    className: TYPOGRAPHY_CLASS_NAME,
     size: "large"
   }, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
     dangerouslySetInnerHTML: {
       __html: description
     }
   })), additionalInfo && (/*#__PURE__*/React__default.createElement(AdditionalInfoWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    className: TYPOGRAPHY_CLASS_NAME,
     size: "large"
   }, additionalInfo)))));
 };
@@ -12364,6 +12370,7 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
   }));
 };
 
+var TYPOGRAPHY_CLASS_NAME = 'highlight-carousel-text';
 var HighlightsCarousel = function HighlightsCarousel(_ref) {
   var logo = _ref.logo,
     carouselTitle = _ref.carouselTitle,
@@ -12410,6 +12417,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
     id: carouselTitleId
   }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    className: TYPOGRAPHY_CLASS_NAME,
     size: "medium",
     serif: true,
     hierarchy: titleSemanticLevelValue