@royaloperahouse/chord 2.2.5-a-chord-development → 2.2.5-c-chord-development

package/dist/chord.cjs.development.js

@@ -3410,7 +3410,7 @@ var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$b || (_temp
   if (!width) return 'none';
   return width + 'px';
 });
-var Input = /*#__PURE__*/styled__default.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  font-family: var(--font-family-altHeader);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  text-transform: var(--text-transform-altHeader);\n  width: 100%;\n  height: 48px;\n  padding-left: 20px;\n  -moz-appearance: textfield;\n  padding-right: ", ";\n  outline: none;\n  border: ", ";\n  &:disabled {\n    background-color: var(--base-color-lightgrey);\n    border: 1px solid transparent;\n    outline: none;\n  }\n\n  &:focus {\n    outline: ", ";\n  }\n\n  /* remove search decoration */\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  /* remove number decoration */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (_ref2) {
+var Input = /*#__PURE__*/styled__default.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  font-family: var(--font-family-altHeader);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  text-transform: var(--text-transform-altHeader);\n  width: 100%;\n  height: 48px;\n  padding-left: 20px;\n  -moz-appearance: textfield;\n  padding-right: ", ";\n  outline: none;\n  border: ", ";\n  &:disabled {\n    background-color: var(--base-color-lightgrey);\n    border: 1px solid transparent;\n    outline: none;\n  }\n\n  &:focus {\n    outline: ", ";\n  }\n\n  /* remove search decoration */\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n   display: none; \n  }\n\n  /* remove number decoration */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (_ref2) {
   var isPasswordField = _ref2.isPasswordField;
   if (isPasswordField) return "80px";
   return "20px";
@@ -3519,7 +3519,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "data-testid": "text-field-input",
     ref: ref
   }, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
-    type: "button",
+    type: 'button',
     onClick: showHideClickHandler
   }, /*#__PURE__*/React__default.createElement(Overline, {
     level: 1
@@ -5844,7 +5844,7 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
   }))))));
 };
 
-var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$i, _templateObject5$c, _templateObject6$a, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12;
+var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$i, _templateObject5$c, _templateObject6$a, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT$1 = 19;
 var LENGTH_TEXT_TABLET = 10;
@@ -5872,20 +5872,21 @@ var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$i ||
 var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobileAndTablet);
 var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin-top: var(--editorial-spacing-hover);\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
-var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref6) {
+var HighlightTextContainer = /*#__PURE__*/styled__default(TextContainer$1)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-primary);\n  margin-top: 4px;\n"])));
+var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref6) {
   var isVisible = _ref6.isVisible;
   return isVisible ? "visible" : 'hidden';
 }, devices.mobile, function (_ref7) {
   var isGridCard = _ref7.isGridCard;
   return isGridCard ? '20px' : '0';
 });
-var LabelElements = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref8) {
+var LabelElements = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref8) {
   var bgColor = _ref8.bgColor,
       theme = _ref8.theme;
   return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
 });
-var LabelIconWrapper = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
+var LabelIconWrapper = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 
 var getButtonsOpacity = function getButtonsOpacity(_ref9) {
   var onlyShowButtonsOnHover = _ref9.onlyShowButtonsOnHover;
@@ -5897,7 +5898,7 @@ var getButtonsMinHeight = function getButtonsMinHeight(_ref10) {
   return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
 };
 
-var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref11) {
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref11) {
   var size = _ref11.size,
       primaryButtonTextLength = _ref11.primaryButtonTextLength,
       tertiaryButtonTextLength = _ref11.tertiaryButtonTextLength;
@@ -6010,6 +6011,8 @@ var Card = function Card(_ref) {
       subtitle = _ref.subtitle,
       _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$highlightText = _ref.highlightText,
+      highlightText = _ref$highlightText === void 0 ? '' : _ref$highlightText,
       links = _ref.links,
       _ref$tags = _ref.tags,
       tags = _ref$tags === void 0 ? [] : _ref$tags,
@@ -6122,7 +6125,9 @@ var Card = function Card(_ref) {
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
-  }))), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
+  }), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
+    level: 1
+  }, highlightText)))), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
     ref: node,
     "data-testid": "buttonscontainer",
     size: size,
@@ -6166,6 +6171,7 @@ var Cards = function Cards(_ref) {
       title: card.title,
       subtitle: card.subtitle,
       text: card.text,
+      highlightText: card.highlightText,
       links: card.links,
       tags: card.tags,
       withContinueWatching: card.withContinueWatching,
@@ -7319,7 +7325,7 @@ var CreditListing = function CreditListing(_ref) {
   }));
 };
 
-var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$l, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$l, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 12;
 var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -7386,7 +7392,7 @@ var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 ||
 var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__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__default.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__default.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__default(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var PromoWithTagsTextLink = /*#__PURE__*/styled__default(TextLink)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var asCardOverrides = /*#__PURE__*/styled.css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", " {\n    font-size: var(--font-size-subtitle-2);\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-1);\n  }\n\n  ", " {\n    flex-direction: row;\n    @media ", " {\n      flex-direction: row;\n    }\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-2);\n    font-weight: var(--font-weight-overline-2);\n    line-height: var(--line-height-overline-2);\n    letter-spacing: var(--letter-spacing-overline-2);\n  }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);