@royaloperahouse/chord 1.21.1-chord-development → 1.21.1-e-chord-development

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/chord.cjs.development.js +92 -83
  2. package/dist/chord.cjs.development.js.map +1 -1
  3. package/dist/chord.cjs.production.min.js +1 -1
  4. package/dist/chord.cjs.production.min.js.map +1 -1
  5. package/dist/chord.esm.js +90 -79
  6. package/dist/chord.esm.js.map +1 -1
  7. package/dist/helpers/formatStrings.d.ts +2 -0
  8. package/dist/index.d.ts +2 -2
  9. package/dist/types/index.d.ts +2 -2
  10. package/package.json +1 -1
package/dist/chord.cjs.development.js CHANGED
@@ -2182,6 +2182,13 @@ var AspectRatioWidth;
2182
2182
  ButtonType["Tertiary"] = "Tertiary";
2183
2183
  })(exports.ButtonType || (exports.ButtonType = {}));
2184
2184
 
2185
+ (function (BrandingStyle) {
2186
+ BrandingStyle["BlockText"] = "BlockText";
2187
+ BrandingStyle["BodyText"] = "BodyText";
2188
+ BrandingStyle["StreamLogo"] = "StreamLogo";
2189
+ BrandingStyle["CinemaLogo"] = "CinemaLogo";
2190
+ })(exports.BrandingStyle || (exports.BrandingStyle = {}));
2191
+
2185
2192
  var _excluded$1 = ["children"];
2186
2193
 
2187
2194
  var PrimaryButton = function PrimaryButton(_ref) {
@@ -5492,23 +5499,27 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
5492
5499
  }, message)));
5493
5500
  };
5494
5501
 
5495
- var _templateObject$G, _templateObject3$k, _templateObject4$e, _templateObject5$a, _templateObject6$9, _templateObject7$7, _templateObject8$5;
5502
+ var _templateObject$G, _templateObject2$r, _templateObject3$k, _templateObject4$e, _templateObject5$a, _templateObject6$9, _templateObject7$7, _templateObject8$5;
5496
5503
  var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: #f0f0f0;\n padding: 40px;\n\n display: block;\n position: relative;\n"])));
5497
- var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: #ffffff;\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n height: 24px;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n font-weight: 500;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
5504
+ var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
5505
+ var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n height: 24px;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n ::selection {\n background: ", ";\n color: ", ";\n border: solid black 3px;\n /* TODO: figure out how to make this conditional: only apply when Stream theme is active */\n }\n"])), function (_ref) {
5498
5506
  var theme = _ref.theme;
5499
5507
  return theme.colors.primary;
5508
+ }, exports.Colors.White, exports.Colors.White, function (_ref2) {
5509
+ var theme = _ref2.theme;
5510
+ return theme.colors.primary;
5500
5511
  });
5501
5512
  var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
5502
5513
  var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
5503
5514
  var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
5504
- var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > h4 {\n font-size: 34px;\n }\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
5505
- var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > h4 {\n font-size: 34px;\n }\n text-decoration-line: line-through;\n color: #727272;\n"])));
5515
+ var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > h4 {\n /* font-size: 34px; TODO: use variable */\n }\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
5516
+ var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > h4 {\n /* font-size: 34px; TODO: use variable */\n }\n text-decoration-line: line-through;\n color: ", "; // Used the closest variable I could find, as the original colour #727272; isn't included. Is DarkGrey too light?\n"])), exports.Colors.DarkGrey);
5506
5517
 
5507
5518
  var OfferText = function OfferText(_ref) {
5508
5519
  var title = _ref.title,
5509
5520
  description = _ref.description;
5510
5521
  return /*#__PURE__*/React__default.createElement(OfferTextWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
5511
- semanticLevel: 1,
5522
+ semanticLevel: 5,
5512
5523
  level: 1
5513
5524
  }, title), /*#__PURE__*/React__default.createElement(BodyText, {
5514
5525
  level: 1
@@ -5519,14 +5530,19 @@ var OfferText = function OfferText(_ref) {
5519
5530
  })));
5520
5531
  };
5521
5532
 
5522
- var LENGTH_SMALL_TEXT = 19;
5523
- var OFFER_TEXTS_LIMIT = 3;
5533
+ // Set max. character length
5534
+ var setMaxCharLength = function setMaxCharLength(value, maxLength) {
5535
+ return value.slice(0, maxLength);
5536
+ }; // Format price to contain £ if not already present
5524
5537
 
5525
5538
  var formatPrice = function formatPrice(value) {
5526
5539
  if (Number.isNaN(Number(value))) return value != null ? value : '';
5527
5540
  return "\xA3" + Number(value).toFixed(2);
5528
5541
  };
5529
5542
 
5543
+ var LENGTH_SMALL_TEXT = 19;
5544
+ var OFFER_TEXTS_LIMIT = 3;
5545
+
5530
5546
  var UpsellCard = function UpsellCard(_ref) {
5531
5547
  var _ref$title = _ref.title,
5532
5548
  title = _ref$title === void 0 ? '' : _ref$title,
@@ -5546,11 +5562,11 @@ var UpsellCard = function UpsellCard(_ref) {
5546
5562
  var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
5547
5563
  return /*#__PURE__*/React__default.createElement(Theme, {
5548
5564
  theme: theme
5549
- }, /*#__PURE__*/React__default.createElement(Wrapper$2, null, flag && /*#__PURE__*/React__default.createElement(PromoLabel, null, flag), /*#__PURE__*/React__default.createElement(TitleContainer$1, null, /*#__PURE__*/React__default.createElement(Subtitle, {
5550
- semanticLevel: 1,
5565
+ }, /*#__PURE__*/React__default.createElement(Wrapper$2, null, flag && /*#__PURE__*/React__default.createElement(PromoLabelWrapper, null, /*#__PURE__*/React__default.createElement(PromoLabel, null, setMaxCharLength(flag, 15))), /*#__PURE__*/React__default.createElement(TitleContainer$1, null, /*#__PURE__*/React__default.createElement(Subtitle, {
5566
+ semanticLevel: 2,
5551
5567
  level: 1
5552
5568
  }, title), subTitle && /*#__PURE__*/React__default.createElement(Overline, {
5553
- semanticLevel: 1,
5569
+ semanticLevel: 3,
5554
5570
  level: 1
5555
5571
  }, subTitle), promoPrice ? /*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, null, /*#__PURE__*/React__default.createElement(AltHeader, {
5556
5572
  level: 4
@@ -5567,7 +5583,7 @@ var UpsellCard = function UpsellCard(_ref) {
5567
5583
  };
5568
5584
 
5569
5585
  var _templateObject$H;
5570
- var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n width: 100%;\n padding-left: 0px;\n padding-right: 0px;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
5586
+ var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n padding-left: 0;\n padding-right: 0;\n }\n\n @media ", " {\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.tablet, devices.mobile);
5571
5587
 
5572
5588
  var UpsellCards = function UpsellCards(_ref) {
5573
5589
  var upsellCards = _ref.upsellCards;
@@ -5585,17 +5601,17 @@ var UpsellCards = function UpsellCards(_ref) {
5585
5601
  }));
5586
5602
  };
5587
5603
 
5588
- var _templateObject$I, _templateObject2$r, _templateObject3$l;
5589
- var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: ", ";\n padding: 80px;\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding-left: 0;\n padding-right: 0;\n padding-top: 2.5em;\n }\n }\n"])), function (_ref) {
5604
+ var _templateObject$I, _templateObject2$s, _templateObject3$l;
5605
+ var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: ", ";\n padding: 80px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding-top: 2.5em;\n padding-left: 0;\n padding-right: 0;\n padding-bottom: 2.5em;\n }\n }\n\n @media ", " {\n & {\n padding: 25px;\n padding-top: 2.5em;\n }\n }\n"])), function (_ref) {
5590
5606
  var theme = _ref.theme;
5591
5607
  return theme.colors.primary;
5592
- }, devices.mobile);
5593
- var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
5594
- var TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 2.5em;\n div > :first-child {\n margin-top: 1.5em;\n }\n\n @media ", " {\n & {\n div > :first-child {\n margin-top: 1em;\n }\n }\n }\n"])), devices.mobile);
5608
+ }, devices.mobile, devices.tablet);
5609
+ var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n }\n"])), devices.mobile);
5610
+ var TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 2.5em;\n div > :first-child {\n margin-top: 1.5em;\n }\n\n @media ", " {\n margin-top: 0;\n div > :first-child {\n margin-top: 0.5em;\n }\n }\n\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n & {\n div > :first-child {\n margin-top: 1em;\n }\n }\n }\n"])), devices.tablet, devices.mobile);
5595
5611
 
5596
- var _templateObject$J, _templateObject2$s, _templateObject3$m, _templateObject4$f, _templateObject5$b;
5612
+ var _templateObject$J, _templateObject2$t, _templateObject3$m, _templateObject4$f, _templateObject5$b;
5597
5613
  var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
5598
- var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
5614
+ var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
5599
5615
  var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
5600
5616
  var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && a {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 28px 20px;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
5601
5617
  var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
@@ -5700,12 +5716,12 @@ var Accordions = function Accordions(_ref) {
5700
5716
  }));
5701
5717
  };
5702
5718
 
5703
- var _templateObject$L, _templateObject2$t, _templateObject3$n;
5719
+ var _templateObject$L, _templateObject2$u, _templateObject3$n;
5704
5720
  var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: ", ";\n color: var(--base-color-white);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), function (_ref) {
5705
5721
  var theme = _ref.theme;
5706
5722
  return theme.colors.primary;
5707
5723
  }, devices.mobile);
5708
- var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n @media ", " {\n align-items: flex-start;\n }\n"])), devices.mobile);
5724
+ var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n @media ", " {\n align-items: flex-start;\n }\n"])), devices.mobile);
5709
5725
  var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-white);\n a {\n color: var(--base-color-white);\n text-decoration: underline;\n }\n"])));
5710
5726
 
5711
5727
  var AnnouncementBanner = function AnnouncementBanner(_ref) {
@@ -5743,7 +5759,7 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
5743
5759
  }))))));
5744
5760
  };
5745
5761
 
5746
- var _templateObject$M, _templateObject2$u, _templateObject3$o, _templateObject4$g, _templateObject5$c, _templateObject6$a, _templateObject7$8, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$1;
5762
+ var _templateObject$M, _templateObject2$v, _templateObject3$o, _templateObject4$g, _templateObject5$c, _templateObject6$a, _templateObject7$8, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$1;
5747
5763
  var LENGTH_LARGE_TEXT = 28;
5748
5764
  var LENGTH_SMALL_TEXT$1 = 19;
5749
5765
  var LENGTH_TEXT_TABLET = 10;
@@ -5754,7 +5770,7 @@ var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$M || (_temp
5754
5770
  var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
5755
5771
  return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
5756
5772
  });
5757
- var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
5773
+ var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
5758
5774
  var lineColor = _ref3.lineColor,
5759
5775
  theme = _ref3.theme;
5760
5776
  if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
@@ -5966,9 +5982,9 @@ var Card = function Card(_ref) {
5966
5982
  }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
5967
5983
  };
5968
5984
 
5969
- var _templateObject$N, _templateObject2$v;
5985
+ var _templateObject$N, _templateObject2$w;
5970
5986
  var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
5971
- var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
5987
+ var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
5972
5988
 
5973
5989
  var Cards = function Cards(_ref) {
5974
5990
  var cards = _ref.cards,
@@ -6011,9 +6027,9 @@ var Cards = function Cards(_ref) {
6011
6027
  }));
6012
6028
  };
6013
6029
 
6014
- var _templateObject$O, _templateObject2$w, _templateObject3$p, _templateObject4$h, _templateObject5$d;
6030
+ var _templateObject$O, _templateObject2$x, _templateObject3$p, _templateObject4$h, _templateObject5$d;
6015
6031
  var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
6016
- var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
6032
+ var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
6017
6033
  var hideBottomBorder = _ref.hideBottomBorder;
6018
6034
  return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
6019
6035
  }, function (_ref2) {
@@ -6079,9 +6095,9 @@ var ContactCard = function ContactCard(_ref) {
6079
6095
  }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
6080
6096
  };
6081
6097
 
6082
- var _templateObject$P, _templateObject2$x, _templateObject3$q, _templateObject4$i, _templateObject5$e;
6098
+ var _templateObject$P, _templateObject2$y, _templateObject3$q, _templateObject4$i, _templateObject5$e;
6083
6099
  var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), devices.mobile);
6084
- var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
6100
+ var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
6085
6101
  var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 22px;\n\n & > * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n gap: 12px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
6086
6102
  return props.showImage ? 2 : '1 / span 4';
6087
6103
  }, devices.mobile);
@@ -6146,12 +6162,12 @@ var ContentSummary = function ContentSummary(_ref) {
6146
6162
  }), link.text)));
6147
6163
  };
6148
6164
 
6149
- var _templateObject$Q, _templateObject2$y, _templateObject3$r, _templateObject4$j, _templateObject5$f;
6165
+ var _templateObject$Q, _templateObject2$z, _templateObject3$r, _templateObject4$j, _templateObject5$f;
6150
6166
  var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
6151
6167
  var imageToLeft = _ref.imageToLeft;
6152
6168
  return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
6153
6169
  }, devices.mobile);
6154
- var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
6170
+ var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
6155
6171
  var imageToLeft = _ref2.imageToLeft;
6156
6172
  return imageToLeft ? 'left' : 'right';
6157
6173
  }, devices.mobile);
@@ -6224,9 +6240,9 @@ var BackgroundColour;
6224
6240
  BackgroundColour["White"] = "white";
6225
6241
  })(BackgroundColour || (BackgroundColour = {}));
6226
6242
 
6227
- var _templateObject$R, _templateObject2$z, _templateObject3$s, _templateObject4$k;
6243
+ var _templateObject$R, _templateObject2$A, _templateObject3$s, _templateObject4$k;
6228
6244
  var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
6229
- var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
6245
+ var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
6230
6246
  var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
6231
6247
  if (!props.infoThemed) {
6232
6248
  return;
@@ -6351,7 +6367,7 @@ var Information = function Information(_ref) {
6351
6367
  }))));
6352
6368
  };
6353
6369
 
6354
- var _templateObject$S, _templateObject2$A, _templateObject3$t, _templateObject4$l, _templateObject5$g, _templateObject6$b, _templateObject7$9, _templateObject8$7;
6370
+ var _templateObject$S, _templateObject2$B, _templateObject3$t, _templateObject4$l, _templateObject5$g, _templateObject6$b, _templateObject7$9, _templateObject8$7;
6355
6371
  var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
6356
6372
  var theme = _ref.theme;
6357
6373
  return theme.colors.primary;
@@ -6359,7 +6375,7 @@ var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$S || (
6359
6375
  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
6360
6376
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
6361
6377
  }, devices.mobile);
6362
- var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
6378
+ var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
6363
6379
  var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
6364
6380
  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
6365
6381
  return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
@@ -6449,9 +6465,9 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
6449
6465
  }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
6450
6466
  };
6451
6467
 
6452
- var _templateObject$T, _templateObject2$B, _templateObject3$u, _templateObject4$m, _templateObject5$h, _templateObject6$c, _templateObject7$a;
6468
+ var _templateObject$T, _templateObject2$C, _templateObject3$u, _templateObject4$m, _templateObject5$h, _templateObject6$c, _templateObject7$a;
6453
6469
  var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$T || (_templateObject$T = /*#__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(--base-color-black);\n color: var(--base-color-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
6454
- var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref) {
6470
+ var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref) {
6455
6471
  var theme = _ref.theme;
6456
6472
  return theme.fonts.mobile.sizes.headers[3];
6457
6473
  }, function (_ref2) {
@@ -6574,9 +6590,9 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
6574
6590
  }))));
6575
6591
  };
6576
6592
 
6577
- var _templateObject$U, _templateObject2$C, _templateObject3$v, _templateObject4$n, _templateObject5$i, _templateObject6$d, _templateObject7$b, _templateObject8$8;
6593
+ var _templateObject$U, _templateObject2$D, _templateObject3$v, _templateObject4$n, _templateObject5$i, _templateObject6$d, _templateObject7$b, _templateObject8$8;
6578
6594
  var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
6579
- var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
6595
+ var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
6580
6596
  var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
6581
6597
  var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
6582
6598
  var LogoWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
@@ -6647,12 +6663,12 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
6647
6663
  }, "Scroll Down")) : null);
6648
6664
  };
6649
6665
 
6650
- var _templateObject$V, _templateObject2$D, _templateObject3$w, _templateObject4$o, _templateObject5$j;
6666
+ var _templateObject$V, _templateObject2$E, _templateObject3$w, _templateObject4$o, _templateObject5$j;
6651
6667
  var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
6652
6668
  var color = _ref.color;
6653
6669
  return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
6654
6670
  }, devices.mobileAndTablet);
6655
- var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
6671
+ var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
6656
6672
  var hasImage = _ref2.hasImage;
6657
6673
  return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
6658
6674
  }, devices.mobileAndTablet, function (_ref3) {
@@ -6713,21 +6729,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
6713
6729
  }), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
6714
6730
  };
6715
6731
 
6716
- var BrandingStyle;
6717
-
6718
- (function (BrandingStyle) {
6719
- BrandingStyle["BlockText"] = "BlockText";
6720
- BrandingStyle["BodyText"] = "BodyText";
6721
- BrandingStyle["StreamLogo"] = "StreamLogo";
6722
- BrandingStyle["CinemaLogo"] = "CinemaLogo";
6723
- })(BrandingStyle || (BrandingStyle = {}));
6724
-
6725
- var _templateObject$X, _templateObject2$E, _templateObject3$x, _templateObject5$k, _templateObject6$e, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4;
6732
+ var _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject5$k, _templateObject6$e, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4;
6726
6733
  var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-overline-4);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
6727
- var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
6734
+ var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
6728
6735
  var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
6729
6736
  var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
6730
- var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n svg {\n max-width: 155px;\n fill: ", ";\n }\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n }\n"])), function (_ref) {
6737
+ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n max-width: 155px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n }\n"])), function (_ref) {
6731
6738
  var invert = _ref.invert,
6732
6739
  theme = _ref.theme;
6733
6740
  return invert ? theme.colors.white : theme.colors.primary;
@@ -6739,18 +6746,17 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
6739
6746
  var invert = _ref3.invert,
6740
6747
  theme = _ref3.theme;
6741
6748
  return invert ? theme.colors.black : theme.colors.white;
6749
+ }, function (_ref4) {
6750
+ var theme = _ref4.theme;
6751
+ return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
6742
6752
  }, devices.mobile);
6743
6753
  var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
6744
6754
  var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
6745
6755
  var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
6746
- var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref4) {
6747
- var invert = _ref4.invert,
6748
- theme = _ref4.theme;
6749
- return invert ? theme.colors.primary : theme.colors.white;
6750
- }, function (_ref5) {
6756
+ var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
6751
6757
  var invert = _ref5.invert,
6752
6758
  theme = _ref5.theme;
6753
- return invert ? theme.colors.white : theme.colors.black;
6759
+ return invert ? theme.colors.primary : theme.colors.white;
6754
6760
  }, function (_ref6) {
6755
6761
  var invert = _ref6.invert,
6756
6762
  theme = _ref6.theme;
@@ -6759,30 +6765,34 @@ var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_te
6759
6765
  var invert = _ref7.invert,
6760
6766
  theme = _ref7.theme;
6761
6767
  return invert ? theme.colors.white : theme.colors.black;
6768
+ }, function (_ref8) {
6769
+ var invert = _ref8.invert,
6770
+ theme = _ref8.theme;
6771
+ return invert ? theme.colors.white : theme.colors.black;
6762
6772
  });
6763
6773
 
6764
6774
  var renderBranding = function renderBranding(brandingStyle, brandingText, invert) {
6765
6775
  var color = invert ? exports.Colors.Black : exports.Colors.White;
6766
6776
 
6767
6777
  switch (brandingStyle) {
6768
- case BrandingStyle.BlockText:
6778
+ case exports.BrandingStyle.BlockText:
6769
6779
  return /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
6770
6780
 
6771
- case BrandingStyle.BodyText:
6781
+ case exports.BrandingStyle.BodyText:
6772
6782
  return /*#__PURE__*/React__default.createElement(BrandingTextBody, {
6773
6783
  dangerouslySetInnerHTML: {
6774
6784
  __html: truncateHtmlString(brandingText, 65)
6775
6785
  }
6776
6786
  });
6777
6787
 
6778
- case BrandingStyle.StreamLogo:
6788
+ case exports.BrandingStyle.StreamLogo:
6779
6789
  return /*#__PURE__*/React__default.createElement(Logo, {
6780
6790
  color: color,
6781
6791
  fontSize: 12,
6782
6792
  productName: TextLogoProduct.Stream
6783
6793
  });
6784
6794
 
6785
- case BrandingStyle.CinemaLogo:
6795
+ case exports.BrandingStyle.CinemaLogo:
6786
6796
  return /*#__PURE__*/React__default.createElement(Logo, {
6787
6797
  color: color,
6788
6798
  fontSize: 12,
@@ -6961,9 +6971,8 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
6961
6971
  _ref4$invert = _ref4.invert,
6962
6972
  invert = _ref4$invert === void 0 ? false : _ref4$invert,
6963
6973
  _ref4$brandingStyle = _ref4.brandingStyle,
6964
- brandingStyle = _ref4$brandingStyle === void 0 ? BrandingStyle.BlockText : _ref4$brandingStyle,
6965
- _ref4$brandingText = _ref4.brandingText,
6966
- brandingText = _ref4$brandingText === void 0 ? 'Royal Opera House' : _ref4$brandingText;
6974
+ brandingStyle = _ref4$brandingStyle === void 0 ? exports.BrandingStyle.BlockText : _ref4$brandingStyle,
6975
+ brandingText = _ref4.brandingText;
6967
6976
 
6968
6977
  var _ref5 = link || {},
6969
6978
  linkText = _ref5.text,
@@ -6992,7 +7001,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
6992
7001
  })), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
6993
7002
  className: "page-heading-compact__background",
6994
7003
  invert: invert
6995
- }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
7004
+ }, (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
6996
7005
  brandingStyle: brandingStyle,
6997
7006
  brandingText: brandingText,
6998
7007
  invert: invert
@@ -7005,9 +7014,9 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
7005
7014
  }), linkText))));
7006
7015
  };
7007
7016
 
7008
- var _templateObject$Y, _templateObject2$F, _templateObject3$y, _templateObject4$p;
7017
+ var _templateObject$Y, _templateObject2$G, _templateObject3$y, _templateObject4$p;
7009
7018
  var MorePages = /*#__PURE__*/styled__default.span(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
7010
- var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"]))); // PageNumber extends bodyText but uses subtitle-1 font size
7019
+ var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"]))); // PageNumber extends bodyText but uses subtitle-1 font size
7011
7020
 
7012
7021
  var PageNumber = /*#__PURE__*/styled__default(reactRouterDom.Link)(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
7013
7022
  var active = _ref.active;
@@ -7082,9 +7091,9 @@ var Pagination = function Pagination(_ref) {
7082
7091
  }))));
7083
7092
  };
7084
7093
 
7085
- var _templateObject$Z, _templateObject2$G, _templateObject3$z, _templateObject4$q, _templateObject5$l, _templateObject6$f;
7094
+ var _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject4$q, _templateObject5$l, _templateObject6$f;
7086
7095
  var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
7087
- var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
7096
+ var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
7088
7097
  var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
7089
7098
  var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
7090
7099
  var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
@@ -7139,7 +7148,7 @@ var PeopleListing = function PeopleListing(_ref) {
7139
7148
  }));
7140
7149
  };
7141
7150
 
7142
- var _templateObject$_, _templateObject2$H, _templateObject3$A, _templateObject4$r, _templateObject5$m, _templateObject6$g, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3, _templateObject12$2, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
7151
+ var _templateObject$_, _templateObject2$I, _templateObject3$A, _templateObject4$r, _templateObject5$m, _templateObject6$g, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3, _templateObject12$2, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
7143
7152
  var LENGTH_TEXT = 28;
7144
7153
  var LENGTH_TEXT_TABLET$1 = 12;
7145
7154
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -7156,7 +7165,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$_ ||
7156
7165
  var asCard = _ref3.asCard;
7157
7166
  return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
7158
7167
  });
7159
- var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$H || (_templateObject2$H = /*#__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"])));
7168
+ var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$I || (_templateObject2$I = /*#__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"])));
7160
7169
  var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__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 (_ref4) {
7161
7170
  var theme = _ref4.theme;
7162
7171
  return theme.colors.black;
@@ -7421,7 +7430,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
7421
7430
  }))));
7422
7431
  };
7423
7432
 
7424
- var _templateObject$$, _templateObject2$I, _templateObject3$B, _templateObject4$s, _templateObject5$n, _templateObject6$h, _templateObject7$e;
7433
+ var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$s, _templateObject5$n, _templateObject6$h, _templateObject7$e;
7425
7434
  var LENGTH_TEXT$2 = 28;
7426
7435
  var LENGTH_TEXT_TABLET$2 = 10;
7427
7436
  var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$$ || (_templateObject$$ = /*#__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) {
@@ -7431,7 +7440,7 @@ var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$$ ||
7431
7440
  var imageToLeft = _ref2.imageToLeft;
7432
7441
  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'";
7433
7442
  }, devices.mobile);
7434
- var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
7443
+ var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
7435
7444
  var imageToLeft = _ref3.imageToLeft;
7436
7445
  return imageToLeft ? 'left' : 'right';
7437
7446
  }, devices.mobile);
@@ -7565,7 +7574,7 @@ var SectionTitle = function SectionTitle(_ref) {
7565
7574
  }, description))));
7566
7575
  };
7567
7576
 
7568
- var _templateObject$11, _templateObject2$J, _templateObject3$C, _templateObject4$t, _templateObject5$o, _templateObject6$i, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$4;
7577
+ var _templateObject$11, _templateObject2$K, _templateObject3$C, _templateObject4$t, _templateObject5$o, _templateObject6$i, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$4;
7569
7578
  var stateStyles = /*#__PURE__*/styled.css(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
7570
7579
  var theme = _ref.theme;
7571
7580
  return "3px solid " + theme.colors.lapisLazuli;
@@ -7576,7 +7585,7 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$11 || (_templateObject
7576
7585
  var theme = _ref3.theme;
7577
7586
  return theme.colors.lightgrey;
7578
7587
  });
7579
- var borderStyles = /*#__PURE__*/styled.css(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
7588
+ var borderStyles = /*#__PURE__*/styled.css(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
7580
7589
  var theme = _ref4.theme;
7581
7590
  return theme.colors.darkgrey;
7582
7591
  });
@@ -8016,7 +8025,7 @@ var TextOnly = function TextOnly(_ref) {
8016
8025
  })));
8017
8026
  };
8018
8027
 
8019
- var _templateObject$13, _templateObject2$K;
8028
+ var _templateObject$13, _templateObject2$L;
8020
8029
  var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
8021
8030
  var _ref$aspectRatio = _ref.aspectRatio,
8022
8031
  aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
@@ -8027,7 +8036,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templat
8027
8036
  height = _ref2.height;
8028
8037
  return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
8029
8038
  });
8030
- var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
8039
+ var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
8031
8040
 
8032
8041
  var ImageWithCaption = function ImageWithCaption(_ref) {
8033
8042
  var caption = _ref.caption,
@@ -8065,9 +8074,9 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
8065
8074
  }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
8066
8075
  };
8067
8076
 
8068
- var _templateObject$14, _templateObject2$L, _templateObject3$D;
8077
+ var _templateObject$14, _templateObject2$M, _templateObject3$D;
8069
8078
  var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
8070
- var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
8079
+ var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
8071
8080
  var displayAttribution = _ref.displayAttribution;
8072
8081
  return "display: " + (displayAttribution ? 'block' : 'none') + ";";
8073
8082
  });
@@ -8117,7 +8126,7 @@ var UpsellSection = function UpsellSection(_ref) {
8117
8126
  columnStartSmallDevice: 1,
8118
8127
  columnSpanSmallDevice: 14
8119
8128
  }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement(AltHeader, {
8120
- level: 3
8129
+ level: 4
8121
8130
  }, title)), /*#__PURE__*/React__default.createElement(TextContainer, null, /*#__PURE__*/React__default.createElement(TextOnly, {
8122
8131
  text: richText != null ? richText : '',
8123
8132
  columnStartDesktop: 1,
@@ -8181,9 +8190,9 @@ var LiveChat = function LiveChat() {
8181
8190
  });
8182
8191
  };
8183
8192
 
8184
- var _templateObject$15, _templateObject2$M;
8193
+ var _templateObject$15, _templateObject2$N;
8185
8194
  var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
8186
- var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 2px solid var(--base-color-lightgrey);\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), devices.mobileAndTablet, devices.mobile);
8195
+ var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 2px solid var(--base-color-lightgrey);\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), devices.mobileAndTablet, devices.mobile);
8187
8196
 
8188
8197
  var StickyBar = function StickyBar(_ref) {
8189
8198
  var _ref$columnStartDeskt = _ref.columnStartDesktop,