@royaloperahouse/chord 1.2.0 → 1.3.0-a-chord-development

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';
 
@@ -2659,10 +2659,11 @@ var SponsorLogo = function SponsorLogo(_ref) {
 };
 
 var _templateObject$d;
+var SponsorshipStyledIframe = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  height: 80px;\n  margin: 0px;\n  overflow: hidden;\n  padding: 0;\n  width: 80px;\n\n  & > iframe {\n    border: 0;\n    display: block;\n    margin: 0px;\n    padding: 0px;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n  }\n"])), devices.mobile);
+
 var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v3/rolex.html?size=80';
 var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
 var DEFAULT_DATA_ROH = 'ImgAdvert';
-var SponsorshipStyled = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  height: 80px;\n  margin: 0px;\n  overflow: hidden;\n  padding: 0;\n  width: 80px;\n\n  & > iframe {\n    border: 0;\n    display: block;\n    margin: 0px;\n    padding: 0px;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n  }\n"])), devices.mobile);
 
 var Sponsorship = function Sponsorship(_ref) {
   var _ref$src = _ref.src,
@@ -2670,8 +2671,15 @@ var Sponsorship = function Sponsorship(_ref) {
       _ref$dataRoh = _ref.dataRoh,
       dataRoh = _ref$dataRoh === void 0 ? DEFAULT_DATA_ROH : _ref$dataRoh,
       _ref$title = _ref.title,
-      title = _ref$title === void 0 ? DEFAULT_SPONSORSHIP_TITLE : _ref$title;
-  return /*#__PURE__*/React__default.createElement(SponsorshipStyled, null, /*#__PURE__*/React__default.createElement("iframe", {
+      title = _ref$title === void 0 ? DEFAULT_SPONSORSHIP_TITLE : _ref$title,
+      isCustomImage = _ref.isCustomImage;
+  if (isCustomImage) return /*#__PURE__*/React__default.createElement("img", {
+    src: src,
+    alt: title,
+    "data-roh": dataRoh,
+    "data-testid": "custom-sponsor"
+  });
+  return /*#__PURE__*/React__default.createElement(SponsorshipStyledIframe, null, /*#__PURE__*/React__default.createElement("iframe", {
     src: src,
     scrolling: "no",
     "data-roh": dataRoh,
@@ -2978,9 +2986,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",
@@ -5589,6 +5598,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
       link = _ref.link,
       _ref$sponsor = _ref.sponsor,
       sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
+      customSponsorData = _ref.customSponsorData,
       scrollHref = _ref.scrollHref,
       bgUrlDesktop = _ref.bgUrlDesktop,
       bgUrlDevice = _ref.bgUrlDevice;
@@ -5604,7 +5614,11 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
     "data-testid": "impact-wrapper"
   }, sponsor ? /*#__PURE__*/React__default.createElement(SponsorWrapper, {
     "data-testid": "impact-sponsor"
-  }, /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$2, {
+  }, customSponsorData ? /*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
+    "data-testid": "impact-custom-sponsor"
+  }, customSponsorData, {
+    isCustomImage: true
+  })) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$2, {
     "data-testid": "impact-logo"
   }, children) : null, text ? /*#__PURE__*/React__default.createElement(TextWrapper$1, {
     "data-testid": "impact-text"
@@ -5701,47 +5715,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) {
@@ -5749,11 +5757,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) {
@@ -5762,22 +5770,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,
@@ -5795,7 +5821,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],
@@ -5805,8 +5837,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";
 
@@ -5836,6 +5880,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,
@@ -5845,24 +5890,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: {
@@ -5877,12 +5926,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']