@royaloperahouse/chord 1.1.0 → 1.3.0

package/dist/chord.esm.js

@@ -1,5 +1,5 @@
 import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, useMemo } from 'react';
-import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
+import styled, { ThemeProvider, css, createGlobalStyle } from 'styled-components';
 import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
 import 'swiper/swiper-bundle.css';
 
@@ -2978,9 +2978,10 @@ var BodyText = function BodyText(_ref3) {
   }, children);
 };
 var Header = function Header(_ref4) {
-  var level = _ref4.level,
+  var semanticLevel = _ref4.semanticLevel,
+      level = _ref4.level,
       children = _ref4.children;
-  var renderedTag = "h" + level;
+  var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
   return /*#__PURE__*/React__default.createElement(StyledTag, {
     tag: renderedTag,
     typography: "header",
@@ -4989,10 +4990,15 @@ var getButtonsOpacity = function getButtonsOpacity(_ref4) {
   return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
 };
 
-var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref5) {
-  var size = _ref5.size,
-      primaryButtonTextLength = _ref5.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref5.tertiaryButtonTextLength;
+var getButtonsMinHeight = function getButtonsMinHeight(_ref5) {
+  var onlyShowButtonsOnHover = _ref5.onlyShowButtonsOnHover;
+  return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
+};
+
+var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__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 (_ref6) {
+  var size = _ref6.size,
+      primaryButtonTextLength = _ref6.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref6.tertiaryButtonTextLength;
   var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -5000,9 +5006,15 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templat
   }
 
   return '';
-}, devices.mobile, devices.tablet, function (_ref6) {
-  var primaryButtonTextLength = _ref6.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref6.tertiaryButtonTextLength;
+}, devices.mobile, getButtonsMinHeight, function (_ref7) {
+  var fullWidth = _ref7.fullWidth;
+  return fullWidth ? '0' : '20px';
+}, function (_ref8) {
+  var fullWidth = _ref8.fullWidth;
+  return fullWidth ? '0' : '20px';
+}, devices.tablet, getButtonsMinHeight, function (_ref9) {
+  var primaryButtonTextLength = _ref9.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref9.tertiaryButtonTextLength;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
 
   if (isLinksLayoutColumnTablet) {
@@ -5151,7 +5163,8 @@ var Card = function Card(_ref) {
     size: size,
     primaryButtonTextLength: firstButtonText.length,
     tertiaryButtonTextLength: secondButtonText.length,
-    onlyShowButtonsOnHover: onlyShowButtonsOnHover
+    onlyShowButtonsOnHover: onlyShowButtonsOnHover,
+    fullWidth: fullWidth
   }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
 };
 
@@ -5190,7 +5203,8 @@ var Cards = function Cards(_ref) {
       links: card.links,
       tags: card.tags,
       withContinueWatching: card.withContinueWatching,
-      onlyShowButtonsOnHover: card.onlyShowButtonsOnHover
+      onlyShowButtonsOnHover: card.onlyShowButtonsOnHover,
+      fullWidth: card.fullWidth
     }));
   }));
 };
@@ -5688,47 +5702,41 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 var LENGTH_TEXT = 28;
-var LENGTH_TEXT_TABLET$1 = 10;
-var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
+var LENGTH_TEXT_TABLET$1 = 12;
+var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
+var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
+var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
+var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
+var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
-  return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
+  return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
 }, devices.tablet, function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
-}, devices.mobile);
-var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
-  var imageToLeft = _ref3.imageToLeft;
-  return imageToLeft ? 'left' : 'right';
-}, devices.mobile);
-var PromoWithTagsContentWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      display: ", ";\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
-  var imageToLeft = _ref4.imageToLeft;
-  return imageToLeft ? 'right' : 'left';
-}, devices.mobile, function (_ref5) {
-  var hideSection = _ref5.hideSection;
-  return hideSection ? 'none' : 'block';
+}, devices.mobile, function (asCard) {
+  return asCard ? "\n    grid-template-areas: " + GridTemplateAsCard + ";\n    @media " + devices.tablet + " {\n      grid-template-areas: " + GridTemplateAsCardTablet + ";\n    }\n  " : "";
 });
-var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 16px;\n  }\n"])));
-var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject5$e || (_templateObject5$e = /*#__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-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__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: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\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    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref6) {
-  var theme = _ref6.theme;
+var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$x || (_templateObject2$x = /*#__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-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__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: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\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    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
   return theme.colors.black;
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, function (_ref4) {
+  var theme = _ref4.theme;
   return theme.colors.darkgrey;
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref9) {
-  var hasTextLinks = _ref9.hasTextLinks;
+var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref6) {
+  var hasTextLinks = _ref6.hasTextLinks;
   return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
-}, function (_ref10) {
-  var _ref10$primaryButtonT = _ref10.primaryButtonTextLength,
-      primaryButtonTextLength = _ref10$primaryButtonT === void 0 ? 0 : _ref10$primaryButtonT,
-      _ref10$tertiaryButton = _ref10.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref10$tertiaryButton === void 0 ? 0 : _ref10$tertiaryButton;
+}, function (_ref7) {
+  var _ref7$primaryButtonTe = _ref7.primaryButtonTextLength,
+      primaryButtonTextLength = _ref7$primaryButtonTe === void 0 ? 0 : _ref7$primaryButtonTe,
+      _ref7$tertiaryButtonT = _ref7.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref7$tertiaryButtonT === void 0 ? 0 : _ref7$tertiaryButtonT;
   var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -5736,11 +5744,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
   }
 
   return '';
-}, devices.mobile, devices.tablet, function (_ref11) {
-  var _ref11$primaryButtonT = _ref11.primaryButtonTextLength,
-      primaryButtonTextLength = _ref11$primaryButtonT === void 0 ? 0 : _ref11$primaryButtonT,
-      _ref11$tertiaryButton = _ref11.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref11$tertiaryButton === void 0 ? 0 : _ref11$tertiaryButton;
+}, devices.mobile, devices.tablet, function (_ref8) {
+  var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
+      primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
+      _ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
 
   if (isLinksLayoutColumnTablet) {
@@ -5749,22 +5757,40 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
 
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref12) {
-  var marginBottom = _ref12.marginBottom;
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref9) {
+  var marginBottom = _ref9.marginBottom;
   return marginBottom + "px";
 });
-var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
-var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
-var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__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(_templateObject12$1 || (_templateObject12$1 = /*#__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(_templateObject13 || (_templateObject13 = /*#__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(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n"])));
-var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject15 || (_templateObject15 = /*#__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 PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
+var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
+var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__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$4 || (_templateObject9$4 = /*#__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$3 || (_templateObject10$3 = /*#__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"])));
+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 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var asCardOverrides = /*#__PURE__*/css(_templateObject15 || (_templateObject15 = /*#__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"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet);
+var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: left;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref10) {
+  var imageToLeft = _ref10.imageToLeft;
+  return imageToLeft ? 'left' : 'right';
+}, devices.mobile);
+var PromoWithTagsContentWrapper = /*#__PURE__*/styled.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      display: ", ";\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n\n  ", "\n"])), function (_ref11) {
+  var imageToLeft = _ref11.imageToLeft;
+  return imageToLeft ? 'right' : 'left';
+}, devices.mobile, function (_ref12) {
+  var hideSection = _ref12.hideSection;
+  return hideSection ? 'none' : 'block';
+}, function (asCard) {
+  return asCard && asCardOverrides;
+});
+var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 16px;\n  }\n"])));
 
 var _excluded$j = ["text"],
     _excluded2$3 = ["text"],
     _excluded3 = ["text"];
 var LENGTH_TEXT$1 = 28;
+var LENGTH_TEXT_PARAGRAPH = 130;
 
 var PromoWithTags = function PromoWithTags(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -5782,7 +5808,13 @@ var PromoWithTags = function PromoWithTags(_ref) {
       belowTitleTags = _ref.belowTitleTags,
       middleText = _ref.middleText,
       bottomText = _ref.bottomText,
-      image = _ref.image;
+      image = _ref.image,
+      _ref$asCard = _ref.asCard,
+      asCard = _ref$asCard === void 0 ? false : _ref$asCard,
+      _ref$disableCTA = _ref.disableCTA,
+      disableCTA = _ref$disableCTA === void 0 ? false : _ref$disableCTA,
+      _ref$disabledCTACopy = _ref.disabledCTACopy,
+      disabledCTACopy = _ref$disabledCTACopy === void 0 ? 'Sold Out' : _ref$disabledCTACopy;
 
   var _useState = useState(false),
       showExtraContent = _useState[0],
@@ -5792,8 +5824,20 @@ var PromoWithTags = function PromoWithTags(_ref) {
     return str.length >= n ? str.substr(0, n) : str;
   };
 
+  var getTitleLevel = function getTitleLevel(titleSize, isCard) {
+    if (isCard) {
+      return 5;
+    }
+
+    if (titleSize === 'large') {
+      return 3;
+    }
+
+    return 2;
+  };
+
   var imageToLeft = imagePosition === 'left';
-  var titleLevel = titleSize === 'large' ? 2 : 3;
+  var titleLevel = getTitleLevel(titleSize, asCard);
   var isExtraContentPresent = !!children;
   var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
 
@@ -5823,6 +5867,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
       restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
 
   var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$1);
+  var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
   var textLinkItems = textLinks ? textLinks.map(function (link) {
     var _link$text = link.text,
         textLinkText = _link$text === void 0 ? '' : _link$text,
@@ -5832,24 +5877,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }) : null;
   return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
     id: anchorLink,
-    imageToLeft: imageToLeft
+    "data-testid": "grid-wrapper",
+    imageToLeft: imageToLeft,
+    asCard: asCard
   }, /*#__PURE__*/React__default.createElement(PromoWithTagsContentWrapper, {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft,
-    hideSection: showExtraContent
+    hideSection: showExtraContent,
+    asCard: asCard
   }, /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
     marginBottom: 16
-  }, /*#__PURE__*/React__default.createElement(TypeTags, {
+  }, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
     list: aboveTitleTags
-  })), /*#__PURE__*/React__default.createElement(Header, {
+  })), /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
+    semanticLevel: 2,
     level: titleLevel
   }, title)), subtitle && /*#__PURE__*/React__default.createElement(PromoWithTagsSubtitle, null, subtitle), !!(belowTitleTags != null && belowTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
     marginBottom: 8
-  }, /*#__PURE__*/React__default.createElement(TypeTags, {
+  }, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
     list: belowTitleTags
   })), /*#__PURE__*/React__default.createElement(PromoWithTagsText, {
     dangerouslySetInnerHTML: {
-      __html: text
+      __html: textTruncate
     }
   }), middleText && /*#__PURE__*/React__default.createElement(PromoWithTagsAdditionalText, {
     dangerouslySetInnerHTML: {
@@ -5864,12 +5913,19 @@ var PromoWithTags = function PromoWithTags(_ref) {
     "data-testid": "buttons-wrapper",
     primaryButtonTextLength: primaryButtonText.length,
     tertiaryButtonTextLength: tertiaryButtonText.length
-  }, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, !showExtraContent && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
+  }, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, disableCTA ? /*#__PURE__*/React__default.createElement(PrimaryButton, {
+    bgColor: Colors.MidGrey,
+    onClick: function onClick() {
+      return null;
+    },
+    "data-testid": "diabled-link"
+  }, disabledCTACopy || primaryButtonTextTruncate) : !showExtraContent && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
     onClick: defaultOnClickHandler
   }, restPrimaryButton), primaryButtonTextTruncate)), tertiaryButton && /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate))), /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
     "data-testid": "extra-content-wrapper",
     imageToLeft: imageToLeft
-  }, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
+  }, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
+    semanticLevel: 2,
     level: titleLevel
   }, title)), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: AspectRatio['4:3']