@royaloperahouse/harmonic 0.13.1-g → 0.13.2-a

package/dist/harmonic.cjs.development.js

@@ -281,7 +281,8 @@ BodyCopyHarmonic.displayName = 'BodyCopyHarmonic';
 /* ~~~ Overline - (use case) ~~~ */
 var HarmonicOverline = function HarmonicOverline(_ref6) {
   var children = _ref6.children,
-    size = _ref6.size,
+    _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'large' : _ref6$size,
     _ref6$color = _ref6.color,
     color = _ref6$color === void 0 ? 'inherit' : _ref6$color,
     className = _ref6.className,
@@ -9251,773 +9252,213 @@ var SelectComponent$1 = function SelectComponent(_ref) {
   })));
 };
 
-var colors = {
-  core: '#C8102E',
-  stream: '#1866DC',
-  cinema: '#1A1A1A'
+var _templateObject$15, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h;
+var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-light-grey);\n  padding: 40px 20px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  align-items: stretch;\n"])));
+var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: var(--upsell-border-color);\n  padding: 6px 8px;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  right: 20px;\n  top: 0;\n  width: auto;\n  margin: auto;\n\n  && {\n    color: var(--color-base-white);\n  }\n\n  font-feature-settings:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    'calt' off;\n  text-align: center;\n"])));
+var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  padding-top: 10px;\n  width: fit-content;\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media ", " {\n    width: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  ", "\n\n  @media ", " {\n    a {\n      text-align: center;\n    }\n  }\n"])), function (_ref) {
+  var stackCtasEarly = _ref.stackCtasEarly;
+  return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
+}, function (_ref2) {
+  var stackCtasEarly = _ref2.stackCtasEarly;
+  return stackCtasEarly && "\n      @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n        * {\n          width: 100%;\n        }\n      }\n    ";
+}, devices.mobileAndTablet);
+var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-black);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: stretch;\n"])));
+var PriceRow = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n"])));
+var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--color-base-dark-grey);\n"])));
+
+// Set max. character length
+var setMaxCharLength = function setMaxCharLength(value, maxLength) {
+  return value.slice(0, maxLength);
 };
-var commonColors = {
-  black: '#1A1A1A',
-  white: '#FFFFFF',
-  darkgrey: '#727272',
-  midgrey: '#B2B2B2',
-  lightgrey: '#F0F0F0',
-  error: '#C8102E',
-  medium: '#D79233',
-  good: '#4EAA33',
-  progress: '#1866DC',
-  navigation: '#C8102E',
-  lemonChiffon: '#fffbbe',
-  lapisLazuli: '#0060a0',
-  blue: '#1866DC',
-  red: '#C8102E'
+// Format price to contain £ if not already present
+var formatPrice = function formatPrice(value) {
+  if (Number.isNaN(Number(value))) return value != null ? value : '';
+  return "\xA3" + Number(value).toFixed(2);
 };
-var fontFamilies = {
-  adobeGaramondPro: 'adobe-garamond-pro',
-  adobeGaramondProItalics: 'adobe-garamond-pro',
-  gothamSSmMedium: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
-  gothamSSm: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
-  sabonNextLTProRegular: 'Sabon Next LT Pro Regular',
-  sabonNextLTProRegularItalics: 'Sabon Next LT Pro Regular Italics',
-  sansSerifFallback: 'Montserrat, sans-serif'
+var capitalizeFirstLetter = function capitalizeFirstLetter(string) {
+  return string.substring(0, 1).toUpperCase() + string.substring(1);
 };
-var common = {
-  fonts: {
-    desktop: {
-      sizes: {
-        headers: {
-          1: '96px',
-          2: '68px',
-          3: '44px',
-          4: '34px',
-          5: '24px',
-          6: '20px'
-        },
-        altHeaders: {
-          3: '44px',
-          4: '34px',
-          5: '24px',
-          6: '20px'
-        },
-        subtitles: {
-          1: '18px',
-          2: '14px'
-        },
-        titleDescription: '20px',
-        body: {
-          1: '19px',
-          2: '16px',
-          3: '14px'
-        },
-        listing: '19px',
-        buttons: '14px',
-        overline: {
-          1: '14px',
-          2: '12px',
-          3: '10px',
-          4: '8px'
-        },
-        navigation: '13px',
-        search: '24px'
-      },
-      letterSpacing: {
-        headers: {
-          1: '2px',
-          2: '1px',
-          3: '1px',
-          4: '1px',
-          5: '1px',
-          6: '1px'
-        },
-        altHeaders: {
-          3: 'normal',
-          4: 'normal',
-          5: 'normal',
-          6: 'normal'
-        },
-        overline: {
-          1: '1px',
-          2: '1px',
-          3: '1px',
-          4: '1px'
-        },
-        subtitles: {
-          1: '1px',
-          2: '1px'
-        },
-        body: {
-          1: 'normal',
-          2: 'normal',
-          3: 'normal'
-        },
-        navigation: '1px'
+
+/* eslint-disable react/no-danger */
+var OfferText = function OfferText(_ref) {
+  var title = _ref.title,
+    description = _ref.description;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, null, title), description && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large",
+    dangerouslySetInnerHTML: {
+      __html: description
+    }
+  }));
+};
+
+var LENGTH_SMALL_TEXT$2 = 19;
+var OFFER_TEXTS_LIMIT = 3;
+var FLAG_CHAR_LIMIT = 30;
+var UpsellCard = function UpsellCard(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '' : _ref$title,
+    subTitle = _ref.subTitle,
+    price = _ref.price,
+    promoPrice = _ref.promoPrice,
+    flag = _ref.flag,
+    offerTexts = _ref.offerTexts,
+    link = _ref.link,
+    secondaryLink = _ref.secondaryLink,
+    _ref$stackCtasEarly = _ref.stackCtasEarly,
+    stackCtasEarly = _ref$stackCtasEarly === void 0 ? false : _ref$stackCtasEarly,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme,
+    _ref$secondaryTheme = _ref.secondaryTheme,
+    secondaryTheme = _ref$secondaryTheme === void 0 ? exports.ThemeType.Core : _ref$secondaryTheme;
+  var truncate = function truncate(str, n) {
+    return str.length >= n ? str.slice(0, n) : str;
+  };
+  var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React__default.createElement(Wrapper$6, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabel, {
+    tag: "div",
+    size: "small"
+  }, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    tag: "div",
+    size: "small",
+    serif: true
+  }, title), subTitle && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
+  }, subTitle), promoPrice ? (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, {
+    tag: "p",
+    size: "small",
+    serif: true
+  }, formatPrice(price)), /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    tag: "p",
+    size: "small",
+    serif: true
+  }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    tag: "p",
+    size: "small",
+    serif: true
+  }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
+    return /*#__PURE__*/React__default.createElement(OfferText, {
+      key: "offer-" + index,
+      title: offerText.title,
+      description: offerText.description
+    });
+  }), ((link == null ? void 0 : link.text) || (secondaryLink == null ? void 0 : secondaryLink.text)) && (/*#__PURE__*/React__default.createElement(ButtonContainer, {
+    stackCtasEarly: stackCtasEarly
+  }, (link == null ? void 0 : link.text) && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT$2)), (secondaryLink == null ? void 0 : secondaryLink.text) && (/*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
+    theme: secondaryTheme
+  }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
+};
+
+var _templateObject$16, _templateObject2$Q;
+var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0;\n\n  ", " {\n    height: calc(100% - 34px);\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n\n    @media ", " {\n      height: calc(100% - 30px);\n      @supports not (aspect-ratio: ", ") {\n        width: ", ";\n      }\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
+  var _ref$aspectRatio = _ref.aspectRatio,
+    aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
+  return aspectRatio;
+}, function (_ref2) {
+  var _ref2$aspectRatio = _ref2.aspectRatio,
+    aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio,
+    height = _ref2.height;
+  return "calc(calc(" + height + "px - 34px) * " + AspectRatioWidth[aspectRatio] + ")";
+}, devices.mobile, function (_ref3) {
+  var _ref3$aspectRatio = _ref3.aspectRatio,
+    aspectRatio = _ref3$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref3$aspectRatio;
+  return aspectRatio;
+}, function (_ref4) {
+  var _ref4$aspectRatio = _ref4.aspectRatio,
+    aspectRatio = _ref4$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref4$aspectRatio,
+    height = _ref4.height;
+  return "calc(calc(" + height + "px - 30px) * " + AspectRatioWidth[aspectRatio] + ")";
+});
+var CaptionWrapper = /*#__PURE__*/styled__default(Caption)(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-top: 12px;\n    max-width: var(--caption-max-width, 100%);\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    overflow-wrap: normal;\n  }\n  height: 22px;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n  word-break: var(--word-break-body);\n\n  @media ", " {\n    height: 18px;\n  }\n"])), devices.mobile);
+
+var ImageWithCaption = function ImageWithCaption(_ref) {
+  var caption = _ref.caption,
+    altText = _ref.altText,
+    children = _ref.children,
+    aspectRatio = _ref.aspectRatio;
+  var wrapperRef = React.useRef(null);
+  var imgRef = React.useRef(null);
+  var _useState = React.useState(0),
+    height = _useState[0],
+    setHeight = _useState[1];
+  var updateWrapperHeight = React__default.useCallback(function () {
+    var _wrapperRef$current;
+    setHeight((wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
+  }, []);
+  var updateCaptionWidth = React__default.useCallback(function () {
+    var img = imgRef.current;
+    var wrapper = wrapperRef.current;
+    if (img && wrapper) {
+      var w = img.getBoundingClientRect().width;
+      wrapper.style.setProperty('--caption-max-width', Math.round(w) + "px");
+    }
+  }, []);
+  React.useEffect(function () {
+    updateWrapperHeight();
+    updateCaptionWidth();
+    window.addEventListener('resize', updateWrapperHeight);
+    window.addEventListener('resize', updateCaptionWidth);
+    var imageResizeObserver = null;
+    if (typeof ResizeObserver !== 'undefined' && imgRef.current) {
+      imageResizeObserver = new ResizeObserver(updateCaptionWidth);
+      imageResizeObserver.observe(imgRef.current);
+    }
+    return function () {
+      window.removeEventListener('resize', updateWrapperHeight);
+      window.removeEventListener('resize', updateCaptionWidth);
+      if (imageResizeObserver && imgRef.current) imageResizeObserver.unobserve(imgRef.current);
+    };
+  }, [updateWrapperHeight, updateCaptionWidth]);
+  var clonedChildren = React__default.Children.map(children, function (child) {
+    if (! /*#__PURE__*/React__default.isValidElement(child)) return child;
+    var childElement = child;
+    var originalRef = child.ref;
+    var newProps = {
+      alt: altText,
+      tabIndex: 0,
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          var _imgRef$current;
+          e.preventDefault();
+          (_imgRef$current = imgRef.current) == null || _imgRef$current.click();
+        }
+        var originalOnKeyDownHandler = childElement.props.onKeyDown;
+        if (originalOnKeyDownHandler) originalOnKeyDownHandler(e);
       },
-      lineHeights: {
-        headers: {
-          1: '110px',
-          2: '72px',
-          3: '48px',
-          4: '40px',
-          5: '30px',
-          6: '28px'
-        },
-        altHeaders: {
-          3: '48px',
-          4: '44px',
-          5: '30px',
-          6: '28px'
-        },
-        subtitles: {
-          1: '22px',
-          2: '22px'
-        },
-        titleDescription: '28px',
-        body: {
-          1: '26px',
-          2: '22px',
-          3: '20px'
-        },
-        peopleListing: '24px',
-        listing: '36px',
-        buttons: '20px',
-        overline: {
-          1: '16px',
-          2: '14px',
-          3: '12px',
-          4: '10px'
-        },
-        navigation: '16px'
-      },
-      families: {
-        headers: fontFamilies.gothamSSmMedium,
-        altHeaders: fontFamilies.adobeGaramondPro,
-        subtitles: fontFamilies.gothamSSmMedium,
-        body: fontFamilies.adobeGaramondPro,
-        bodyItalics: fontFamilies.adobeGaramondProItalics,
-        listing: fontFamilies.adobeGaramondPro,
-        listingItalics: fontFamilies.adobeGaramondProItalics,
-        buttons: fontFamilies.gothamSSm,
-        overline: fontFamilies.gothamSSmMedium,
-        navigation: fontFamilies.gothamSSmMedium,
-        peopleListingRole: fontFamilies.gothamSSm,
-        search: fontFamilies.adobeGaramondPro
-      },
-      weights: {
-        headers: {
-          1: '500',
-          2: '500',
-          3: '500',
-          4: '500',
-          5: '500',
-          6: '500'
-        },
-        altHeaders: {
-          3: 'normal',
-          4: 'normal',
-          5: 'normal',
-          6: 'normal'
-        },
-        buttons: '400',
-        overline: {
-          1: '500',
-          2: '500',
-          3: '500',
-          4: '500'
-        },
-        body: {
-          1: '400',
-          2: '400',
-          3: '400'
-        },
-        subtitles: {
-          1: '500',
-          2: '500'
-        },
-        navigation: '500'
-      },
-      transforms: {
-        headers: 'uppercase',
-        altHeaders: 'none',
-        overline: 'uppercase',
-        subtitles: 'uppercase',
-        body: 'none',
-        navigation: 'uppercase'
-      },
-      fontFeatureSettings: {
-        headers: "'tnum' on, 'lnum' on",
-        altHeaders: "'pnum' on, 'onum' on",
-        overline: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off",
-        subtitles: "'tnum' on, 'lnum' on",
-        body: "'pnum' on, 'onum' on, 'liga' off",
-        navigation: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off"
-      },
-      wordBreak: {
-        headers: 'break-word',
-        altHeaders: 'break-word',
-        overline: 'break-word',
-        subtitles: 'break-word',
-        body: 'break-word'
-      },
-      margins: {
-        headers: {
-          // These margins use the Chrome defaults to enable proper fallbacks when using semantic level -
-          // https://www.w3schools.com/cssref/css_default_values.php
-          1: '0.67em 0',
-          2: '0.83em 0',
-          3: '1em 0',
-          4: '1.33em 0',
-          5: '1.67em 0',
-          6: '2.33em 0'
+      ref: function ref(node) {
+        imgRef.current = node;
+        if (node) updateCaptionWidth();
+        if (!originalRef) return;
+        if (typeof originalRef === 'function') {
+          originalRef(node);
+        } else {
+          originalRef.current = node;
         }
       }
-    },
-    mobile: {
-      sizes: {
-        headers: {
-          1: '38px',
-          2: '30px',
-          3: '26px',
-          4: '24px',
-          5: '20px',
-          6: '17px'
-        },
-        altHeaders: {
-          3: '26px',
-          4: '24px',
-          5: '20px',
-          6: '17px'
-        },
-        subtitles: {
-          1: '16px',
-          2: '14px'
-        },
-        titleDescription: '17px',
-        body: {
-          1: '17px',
-          2: '12px',
-          3: '11px'
-        },
-        listing: '16px',
-        buttons: '14px',
-        overline: {
-          1: '14px',
-          2: '12px',
-          3: '10px',
-          4: '8px'
-        },
-        navigation: '13px',
-        search: '20px'
-      },
-      letterSpacing: {
-        headers: {
-          1: '1px',
-          2: '1px',
-          3: '1px',
-          4: '1px',
-          5: '1px',
-          6: '1px'
-        },
-        altHeaders: {
-          3: 'normal',
-          4: 'normal',
-          5: 'normal',
-          6: 'normal'
-        },
-        overline: {
-          1: '1px',
-          2: '1px'
-        },
-        subtitles: {
-          1: '1px',
-          2: '1px'
-        },
-        body: {
-          1: 'normal',
-          2: 'normal',
-          3: 'normal'
-        },
-        navigation: '1px'
-      },
-      lineHeights: {
-        headers: {
-          1: '42px',
-          2: '34px',
-          3: '30px',
-          4: '28px',
-          5: '28px',
-          6: '24px'
-        },
-        altHeaders: {
-          3: '30px',
-          4: '28px',
-          5: '28px',
-          6: '24px'
-        },
-        subtitles: {
-          1: '24px',
-          2: '18px'
-        },
-        titleDescription: '24px',
-        body: {
-          1: '24px',
-          2: '18px',
-          3: '16px'
-        },
-        listing: '34px',
-        buttons: '20px',
-        overline: {
-          1: '16px',
-          2: '14px'
-        },
-        navigation: '16px'
-      },
-      families: {
-        headers: fontFamilies.gothamSSm,
-        altHeaders: fontFamilies.adobeGaramondPro,
-        subtitles: fontFamilies.gothamSSmMedium,
-        body: fontFamilies.adobeGaramondPro,
-        bodyItalics: fontFamilies.adobeGaramondProItalics,
-        listing: fontFamilies.adobeGaramondPro,
-        listingItalics: fontFamilies.adobeGaramondProItalics,
-        buttons: fontFamilies.gothamSSm,
-        overline: fontFamilies.gothamSSmMedium,
-        navigation: fontFamilies.gothamSSmMedium,
-        search: fontFamilies.adobeGaramondPro
-      },
-      weights: {
-        headers: {
-          1: '500',
-          2: '500',
-          3: '500',
-          4: '500',
-          5: '500',
-          6: '500'
-        },
-        altHeaders: {
-          3: 'normal',
-          4: 'normal',
-          5: 'normal',
-          6: 'normal'
-        },
-        buttons: '400',
-        overline: {
-          1: '500',
-          2: '500'
-        },
-        body: {
-          1: '400',
-          2: '400',
-          3: '400'
-        },
-        subtitles: {
-          1: '500',
-          2: '500'
-        },
-        navigation: '500'
-      },
-      transforms: {
-        headers: 'uppercase',
-        altHeaders: 'none',
-        overline: 'uppercase',
-        subtitles: 'uppercase',
-        body: 'none',
-        navigation: 'uppercase'
-      },
-      fontFeatureSettings: {
-        headers: "'tnum' on, 'lnum' on",
-        altHeaders: "'pnum' on, 'onum' on",
-        overline: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off",
-        subtitles: "'tnum' on, 'lnum' on",
-        body: "'pnum' on, 'onum' on, 'liga' off",
-        navigation: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off"
-      },
-      wordBreak: {
-        headers: 'break-word',
-        altHeaders: 'break-word',
-        overline: 'break-word',
-        subtitles: 'break-word',
-        body: 'break-word'
-      }
-    },
-    tablet: {
-      sizes: {
-        headers: {
-          6: '17px'
-        },
-        altHeaders: {
-          4: '24px'
-        },
-        body: {
-          1: '17px'
-        }
-      }
-    }
-  },
-  spacing: {
-    1: '4px',
-    2: '8px',
-    3: '12px',
-    4: '16px',
-    5: '20px',
-    6: '24px',
-    7: '28px',
-    8: '32px',
-    9: '36px',
-    10: '40px',
-    12: '48px',
-    15: '60px',
-    18: '72px',
-    20: '80px',
-    30: '120px',
-    35: '140px',
-    40: '160px',
-    45: '180px',
-    50: '200px'
-  },
-  grid: {
-    mobile: {
-      margin: '20px',
-      outerMargin: '0',
-      gap: '12px'
-    },
-    tablet: {
-      margin: '32px',
-      outerMargin: '0',
-      gap: '20px'
-    },
-    desktop: {
-      margin: '10%',
-      outerMargin: '50px',
-      gap: '36px'
-    }
-  },
-  buttons: {
-    paddingX: '20px',
-    paddingY: '14px',
-    paddingYIcon: '12px',
-    iconWidth: '20px',
-    iconHeight: '20px',
-    iconMargin: '12px'
-  },
-  footer: {
-    desktop: {
-      height: '380px',
-      paddingTop: '44px',
-      paddingBottom: '44px',
-      itemsGap: '32px',
-      mediaGap: '24px',
-      mediaIconWidth: '24px',
-      mediaIconHeight: '24px',
-      verticalSpacingLarge: '58px',
-      verticalSpacingSmall: '16px'
-    },
-    tablet: {
-      paddingTop: '40px',
-      paddingBottom: '40px'
-    },
-    mobile: {
-      height: 'auto',
-      paddingTop: '20px',
-      paddingBottom: '20px',
-      itemsGap: '12px',
-      mediaGap: '32px',
-      mediaIconWidth: '28px',
-      mediaIconHeight: '28px',
-      verticalSpacingLarge: '24px',
-      verticalSpacingSmall: '24px'
-    }
-  }
-};
-var core = /*#__PURE__*/_extends({}, common, {
-  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
-    primary: colors.core,
-    primaryButton: colors.core,
-    secondaryButton: colors.core,
-    tertiaryButton: 'transparent',
-    auxiliaryButton: 'transparent',
-    primaryButtonReverseBg: colors.cinema,
-    primaryButtonReverse: commonColors.white
-  })
-});
-var stream = /*#__PURE__*/_extends({}, common, {
-  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
-    primary: colors.stream,
-    primaryButton: colors.stream,
-    primaryButtonReverseBg: colors.cinema,
-    primaryButtonReverse: commonColors.white,
-    secondaryButton: colors.stream,
-    tertiaryButton: 'transparent',
-    auxiliaryButton: 'transparent'
-  })
-});
-var cinema = /*#__PURE__*/_extends({}, common, {
-  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
-    primary: colors.cinema,
-    primaryButton: commonColors.white,
-    primaryButtonReverseBg: commonColors.white,
-    primaryButtonReverse: colors.cinema,
-    secondaryButton: colors.cinema,
-    tertiaryButton: 'transparent',
-    auxiliaryButton: 'transparent'
-  })
-});
-var schools = /*#__PURE__*/_extends({}, common, {
-  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
-    primary: colors.core,
-    primaryButton: colors.core,
-    primaryButtonReverseBg: colors.cinema,
-    primaryButtonReverse: commonColors.white,
-    secondaryButton: colors.core,
-    tertiaryButton: 'transparent',
-    auxiliaryButton: 'transparent'
-  }),
-  fonts: /*#__PURE__*/_extends({}, common.fonts, {
-    desktop: /*#__PURE__*/_extends({}, common.fonts.desktop, {
-      transforms: {
-        headers: 'none',
-        altHeaders: 'none',
-        overline: 'none',
-        subtitles: 'none',
-        body: 'none',
-        navigation: 'uppercase'
-      }
-    }),
-    mobile: /*#__PURE__*/_extends({}, common.fonts.mobile, {
-      transforms: {
-        headers: 'none',
-        altHeaders: 'none',
-        overline: 'none',
-        subtitles: 'none',
-        body: 'none',
-        navigation: 'uppercase'
-      }
-    })
-  })
-});
-var themes = {
-  core: core,
-  stream: stream,
-  cinema: cinema,
-  fontFamilies: fontFamilies,
-  schools: schools
-};
-
-var Theme = function Theme(_ref) {
-  var children = _ref.children,
-    theme = _ref.theme;
-  var chosenTheme = themes[theme];
-  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-    theme: chosenTheme
-  }, children);
-};
-
-var _templateObject$15, _templateObject2$Q, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b;
-var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-lightgrey);\n  padding: 40px;\n\n  display: block;\n  position: relative;\n\n  @media ", " {\n    margin-top: 0;\n    padding: 40px 20px;\n  }\n"])), devices.tablet);
-var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-self: flex-end;\n  height: 15px;\n"])));
-var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__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  right: 20px;\n  top: 0;\n  width: auto;\n  margin: auto;\n  font-family: var(--font-family-header);\n  font-feature-settings:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    '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"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.colors.primary;
-}, exports.Colors.White);
-var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media ", " {\n    width: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  ", "\n"])), function (_ref2) {
-  var stackCtasEarly = _ref2.stackCtasEarly;
-  return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
-}, function (_ref3) {
-  var stackCtasEarly = _ref3.stackCtasEarly;
-  return stackCtasEarly && "\n      @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n        * {\n          width: 100%;\n        }\n      }\n    ";
-});
-var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
-var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
-var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n  padding: 5px 0 8px 0;\n"])));
-var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--base-color-darkgrey);\n"])));
-
-// Set max. character length
-var setMaxCharLength = function setMaxCharLength(value, maxLength) {
-  return value.slice(0, maxLength);
-};
-// Format price to contain £ if not already present
-var formatPrice = function formatPrice(value) {
-  if (Number.isNaN(Number(value))) return value != null ? value : '';
-  return "\xA3" + Number(value).toFixed(2);
-};
-var capitalizeFirstLetter = function capitalizeFirstLetter(string) {
-  return string.substring(0, 1).toUpperCase() + string.substring(1);
+    };
+    return /*#__PURE__*/React__default.cloneElement(childElement, newProps);
+  });
+  return /*#__PURE__*/React__default.createElement(Wrapper$7, {
+    aspectRatio: aspectRatio,
+    ref: wrapperRef,
+    height: height
+  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: aspectRatio
+  }, clonedChildren), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, {
+    tag: "figcaption"
+  }, caption));
 };
 
-/* eslint-disable react/no-danger */
-var OfferText = function OfferText(_ref) {
-  var title = _ref.title,
-    description = _ref.description;
-  return /*#__PURE__*/React__default.createElement(OfferTextWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
-    semanticLevel: 5,
-    level: 1
-  }, title), /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, /*#__PURE__*/React__default.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: description != null ? description : ''
-    }
-  })));
-};
+var _templateObject$17, _templateObject2$R, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m;
+var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
+var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
+var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
 
-var LENGTH_SMALL_TEXT$2 = 19;
-var OFFER_TEXTS_LIMIT = 3;
-var FLAG_CHAR_LIMIT = 30;
-var UpsellCard = function UpsellCard(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? '' : _ref$title,
-    subTitle = _ref.subTitle,
-    price = _ref.price,
-    promoPrice = _ref.promoPrice,
-    flag = _ref.flag,
-    offerTexts = _ref.offerTexts,
-    link = _ref.link,
-    secondaryLink = _ref.secondaryLink,
-    _ref$stackCtasEarly = _ref.stackCtasEarly,
-    stackCtasEarly = _ref$stackCtasEarly === void 0 ? false : _ref$stackCtasEarly,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme,
-    _ref$secondaryTheme = _ref.secondaryTheme,
-    secondaryTheme = _ref$secondaryTheme === void 0 ? exports.ThemeType.Core : _ref$secondaryTheme;
-  var truncate = function truncate(str, n) {
-    return str.length >= n ? str.slice(0, n) : str;
-  };
-  var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
-  return /*#__PURE__*/React__default.createElement(Theme, {
-    theme: theme
-  }, /*#__PURE__*/React__default.createElement(Wrapper$6, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabelWrapper, null, /*#__PURE__*/React__default.createElement(PromoLabel, null, setMaxCharLength(flag, FLAG_CHAR_LIMIT)))), /*#__PURE__*/React__default.createElement(TitleContainer$3, null, /*#__PURE__*/React__default.createElement(Subtitle, {
-    semanticLevel: 2,
-    level: 1
-  }, title), subTitle && (/*#__PURE__*/React__default.createElement(Overline, {
-    semanticLevel: 3,
-    level: 1
-  }, subTitle)), promoPrice ? (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, null, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 4
-  }, formatPrice(price))), /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 4
-  }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 4
-  }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
-    return /*#__PURE__*/React__default.createElement(OfferText, {
-      key: "offer-" + index,
-      title: offerText.title,
-      description: offerText.description
-    });
-  }), ((link == null ? void 0 : link.text) || (secondaryLink == null ? void 0 : secondaryLink.text)) && (/*#__PURE__*/React__default.createElement(ButtonContainer, {
-    stackCtasEarly: stackCtasEarly
-  }, (link == null ? void 0 : link.text) && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT$2)), (secondaryLink == null ? void 0 : secondaryLink.text) && (/*#__PURE__*/React__default.createElement(Theme, {
-    theme: secondaryTheme
-  }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
-};
-
-var _templateObject$16, _templateObject2$R;
-var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0;\n\n  ", " {\n    height: calc(100% - 34px);\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n\n    @media ", " {\n      height: calc(100% - 30px);\n      @supports not (aspect-ratio: ", ") {\n        width: ", ";\n      }\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
-  var _ref$aspectRatio = _ref.aspectRatio,
-    aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
-  return aspectRatio;
-}, function (_ref2) {
-  var _ref2$aspectRatio = _ref2.aspectRatio,
-    aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio,
-    height = _ref2.height;
-  return "calc(calc(" + height + "px - 34px) * " + AspectRatioWidth[aspectRatio] + ")";
-}, devices.mobile, function (_ref3) {
-  var _ref3$aspectRatio = _ref3.aspectRatio,
-    aspectRatio = _ref3$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref3$aspectRatio;
-  return aspectRatio;
-}, function (_ref4) {
-  var _ref4$aspectRatio = _ref4.aspectRatio,
-    aspectRatio = _ref4$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref4$aspectRatio,
-    height = _ref4.height;
-  return "calc(calc(" + height + "px - 30px) * " + AspectRatioWidth[aspectRatio] + ")";
-});
-var CaptionWrapper = /*#__PURE__*/styled__default(Caption)(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-top: 12px;\n    max-width: var(--caption-max-width, 100%);\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    overflow-wrap: normal;\n  }\n  height: 22px;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n  word-break: var(--word-break-body);\n\n  @media ", " {\n    height: 18px;\n  }\n"])), devices.mobile);
-
-var ImageWithCaption = function ImageWithCaption(_ref) {
-  var caption = _ref.caption,
-    altText = _ref.altText,
-    children = _ref.children,
-    aspectRatio = _ref.aspectRatio;
-  var wrapperRef = React.useRef(null);
-  var imgRef = React.useRef(null);
-  var _useState = React.useState(0),
-    height = _useState[0],
-    setHeight = _useState[1];
-  var updateWrapperHeight = React__default.useCallback(function () {
-    var _wrapperRef$current;
-    setHeight((wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
-  }, []);
-  var updateCaptionWidth = React__default.useCallback(function () {
-    var img = imgRef.current;
-    var wrapper = wrapperRef.current;
-    if (img && wrapper) {
-      var w = img.getBoundingClientRect().width;
-      wrapper.style.setProperty('--caption-max-width', Math.round(w) + "px");
-    }
-  }, []);
-  React.useEffect(function () {
-    updateWrapperHeight();
-    updateCaptionWidth();
-    window.addEventListener('resize', updateWrapperHeight);
-    window.addEventListener('resize', updateCaptionWidth);
-    var imageResizeObserver = null;
-    if (typeof ResizeObserver !== 'undefined' && imgRef.current) {
-      imageResizeObserver = new ResizeObserver(updateCaptionWidth);
-      imageResizeObserver.observe(imgRef.current);
-    }
-    return function () {
-      window.removeEventListener('resize', updateWrapperHeight);
-      window.removeEventListener('resize', updateCaptionWidth);
-      if (imageResizeObserver && imgRef.current) imageResizeObserver.unobserve(imgRef.current);
-    };
-  }, [updateWrapperHeight, updateCaptionWidth]);
-  var clonedChildren = React__default.Children.map(children, function (child) {
-    if (! /*#__PURE__*/React__default.isValidElement(child)) return child;
-    var childElement = child;
-    var originalRef = child.ref;
-    var newProps = {
-      alt: altText,
-      tabIndex: 0,
-      onKeyDown: function onKeyDown(e) {
-        if (e.key === 'Enter' || e.key === ' ') {
-          var _imgRef$current;
-          e.preventDefault();
-          (_imgRef$current = imgRef.current) == null || _imgRef$current.click();
-        }
-        var originalOnKeyDownHandler = childElement.props.onKeyDown;
-        if (originalOnKeyDownHandler) originalOnKeyDownHandler(e);
-      },
-      ref: function ref(node) {
-        imgRef.current = node;
-        if (node) updateCaptionWidth();
-        if (!originalRef) return;
-        if (typeof originalRef === 'function') {
-          originalRef(node);
-        } else {
-          originalRef.current = node;
-        }
-      }
-    };
-    return /*#__PURE__*/React__default.cloneElement(childElement, newProps);
-  });
-  return /*#__PURE__*/React__default.createElement(Wrapper$7, {
-    aspectRatio: aspectRatio,
-    ref: wrapperRef,
-    height: height
-  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: aspectRatio
-  }, clonedChildren), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, {
-    tag: "figcaption"
-  }, caption));
-};
-
-var _templateObject$17, _templateObject2$S, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m;
-var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
-var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
-var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
-
-var MiniCard = function MiniCard(_ref) {
+var MiniCard = function MiniCard(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
     subtitle = _ref.subtitle,
@@ -10053,9 +9494,9 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$18, _templateObject2$T, _templateObject3$I, _templateObject4$A, _templateObject5$u;
+var _templateObject$18, _templateObject2$S, _templateObject3$I, _templateObject4$A, _templateObject5$u;
 var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
-var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
+var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
 var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
   var isVisible = _ref.isVisible;
   return isVisible ? 'visible' : 'hidden';
@@ -10145,9 +9586,9 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
 
-var _templateObject$19, _templateObject2$U, _templateObject3$J, _templateObject4$B, _templateObject5$v;
+var _templateObject$19, _templateObject2$T, _templateObject3$J, _templateObject4$B, _templateObject5$v;
 var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), exports.Colors.LightGrey);
+var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), exports.Colors.LightGrey);
 var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
 var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), exports.Colors.Black, function (_ref) {
   var isActive = _ref.isActive;
@@ -10309,9 +9750,9 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1a, _templateObject2$V, _templateObject3$K, _templateObject4$C, _templateObject5$w, _templateObject6$n;
+var _templateObject$1a, _templateObject2$U, _templateObject3$K, _templateObject4$C, _templateObject5$w, _templateObject6$n;
 var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Sections = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 var Section = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
   var color = _ref.color;
   return "var(--base-color-" + color + ")";
@@ -10403,9 +9844,9 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1b, _templateObject2$W, _templateObject3$L, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
+var _templateObject$1b, _templateObject2$V, _templateObject3$L, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$b;
 var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
-var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
+var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  text-align: left;\n  text-transform: capitalize;\n  border: 1px solid var(--color-primary-black);\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    min-width: 150px;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
@@ -10415,7 +9856,7 @@ var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_template
 }, devices.mobile);
 var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 40px;\n  padding-bottom: 80px;\n\n  @media ", " {\n    padding-top: 24px;\n    padding-bottom: 60px;\n  }\n"])), devices.mobile);
 var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 60px 0 24px 0;\n\n  div:hover {\n    background-color: var(--color-base-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--color-base-light-grey);\n  }\n\n  svg path {\n    fill: var(--color-base-black) !important;\n  }\n"])));
-var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
+var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 /* eslint-disable react/no-danger */
 var Content = function Content(_ref) {
@@ -10618,7 +10059,7 @@ var Table = function Table(_ref) {
   }))));
 };
 
-var _templateObject$1c, _templateObject2$X, _templateObject3$M, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$7, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
+var _templateObject$1c, _templateObject2$W, _templateObject3$M, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
 var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return "var(--color-" + theme + ")";
@@ -10626,13 +10067,13 @@ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1c || (_temp
   var theme = _ref2.theme;
   return "var(--color-" + theme + ")";
 });
-var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
+var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
 var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  height: 52px;\n  background: var(--color-base-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    height: 37px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
 var Error = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--color-base-errorstate);\n\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
 var Form = /*#__PURE__*/styled__default.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error);
 var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 28px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), devices.mobile);
 var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--color-base-errorstate);\n"])));
-var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n\n  @media ", " {\n    text-decoration: underline;\n  }\n"])), devices.mobile);
+var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n\n  @media ", " {\n    text-decoration: underline;\n  }\n"])), devices.mobile);
 var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n  color: var(--base-color-white);\n  text-decoration: none;\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 36px;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n"])), devices.mobile);
 var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
@@ -11043,10 +10484,10 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
   }))))));
 };
 
-var _templateObject$1d, _templateObject2$Y, _templateObject4$F, _templateObject5$z;
+var _templateObject$1d, _templateObject2$X, _templateObject4$F, _templateObject5$z;
 var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  min-height: 70px;\n  background: var(--color-base-white);\n  z-index: ", ";\n  align-content: center;\n  border-bottom: 1px solid var(--color-base-light-grey);\n\n  ", "\n\n  @media ", " {\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, function (_ref) {
   var withShadow = _ref.withShadow;
-  return withShadow && styled.css(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && styled.css(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 }, devices.mobile);
 var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 24px;\n  min-width: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  border: none;\n  padding: 0;\n  background: none;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media ", " {\n    min-height: 12px;\n    min-width: 12px;\n    max-height: 12px;\n    max-width: 12px;\n  }\n"])), devices.mobile);
 var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
@@ -11104,12 +10545,12 @@ var AnchorBar = function AnchorBar(_ref) {
   return null;
 };
 
-var _templateObject$1e, _templateObject2$Z;
+var _templateObject$1e, _templateObject2$Y;
 var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  &:not(:active):not(:focus) {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    border: 0;\n    white-space: nowrap;\n    user-select: none;\n  }\n\n  @media ", " {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    border: 0;\n    white-space: nowrap;\n    user-select: none;\n  }\n"])), function (_ref) {
   var $hide = _ref.$hide;
   return $hide && "\n    display: none;\n  ";
 }, devices.mobileAndTablet);
-var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 29px 50px;\n  display: inline-block;\n  width: 100%;\n  height: fit-content;\n  border-bottom: solid 2px gray;\n  overflow: hidden;\n  &:not(:has(div:focus)) {\n    border-bottom: 0;\n  }\n  @media ", " {\n    border-bottom: 0;\n  }\n"])), devices.mobileAndTablet);
+var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 29px 50px;\n  display: inline-block;\n  width: 100%;\n  height: fit-content;\n  border-bottom: solid 2px gray;\n  overflow: hidden;\n  &:not(:has(div:focus)) {\n    border-bottom: 0;\n  }\n  @media ", " {\n    border-bottom: 0;\n  }\n"])), devices.mobileAndTablet);
 
 var SkipToMain = function SkipToMain(_ref) {
   var skipToId = _ref.skipToId;
@@ -11157,7 +10598,8 @@ var SkipToMain = function SkipToMain(_ref) {
     title: "Skip to main content",
     onClick: clickHandler,
     "$hide": !targetElement,
-    ariaLabel: "Skip to main content, in-page link"
+    ariaLabel: "Skip to main content, in-page",
+    role: "link"
   }));
 };
 
@@ -11327,9 +10769,9 @@ var Navigation = function Navigation(_ref) {
   })))))));
 };
 
-var _templateObject$1f, _templateObject2$_, _templateObject3$N, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
+var _templateObject$1f, _templateObject2$Z, _templateObject3$N, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
 var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-black);\n  color: var(--color-base-white);\n  padding: 44px 0px;\n  grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n  @media ", " {\n    padding: 40px 0px;\n    gap: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 0px;\n    row-gap: 40px;\n    grid-template-areas:\n      '. social social social social social social social social social social social social .'\n      '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n      '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n  }\n"])), devices.tablet, devices.mobile);
-var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: policy;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  @media ", " {\n    gap: 20px;\n  }\n\n  @media ", " {\n    gap: 12px;\n  }\n"])), devices.tablet, devices.mobile);
+var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: policy;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  @media ", " {\n    gap: 20px;\n  }\n\n  @media ", " {\n    gap: 12px;\n  }\n"])), devices.tablet, devices.mobile);
 var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: social;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 20px;\n\n  @media ", " {\n    gap: 40px;\n  }\n"])), devices.mobile);
 var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  @media ", " {\n    gap: 24px;\n  }\n"])), devices.mobile);
 var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  @media ", " {\n    gap: 24px;\n  }\n"])), devices.mobile);
@@ -11392,14 +10834,14 @@ var Footer = function Footer(_ref) {
   }, additionalInfo))));
 };
 
-var _templateObject$1g, _templateObject2$$, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject8$e, _templateObject9$8, _templateObject0$8;
+var _templateObject$1g, _templateObject2$_, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject8$d, _templateObject9$8, _templateObject0$8;
 var LIST_ITEM_GAP = 32;
 var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  width: 100%;\n  top: 0;\n  border-bottom: ", ";\n  background-color: var(--color-base-white);\n  z-index: ", ";\n\n  ", "\n"])), function (_ref) {
   var bottomBorder = _ref.bottomBorder;
   return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
 }, zIndexes.anchor, function (_ref2) {
   var withShadow = _ref2.withShadow;
-  return withShadow && styled.css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && styled.css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 });
 var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
 var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
@@ -11414,7 +10856,7 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$B || (_templateO
     hasTwoArrows = _ref5.hasTwoArrows;
   return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
 });
-var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 74px;\n  height: var(--anchor-tabs-height);\n  background-color: var(--color-base-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n\n  ", "\n"])), function (_ref7) {
+var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 74px;\n  height: var(--anchor-tabs-height);\n  background-color: var(--color-base-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n\n  ", "\n"])), function (_ref7) {
   var withShadow = _ref7.withShadow;
   return withShadow && styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 });
@@ -11673,12 +11115,12 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   })))) : null))));
 };
 
-var _templateObject$1h, _templateObject2$10, _templateObject3$P, _templateObject4$I, _templateObject6$r, _templateObject7$l, _templateObject8$f, _templateObject9$9, _templateObject0$9;
+var _templateObject$1h, _templateObject2$$, _templateObject3$P, _templateObject4$I, _templateObject6$r, _templateObject7$l, _templateObject8$e, _templateObject9$9, _templateObject0$9;
 var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -1px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
   var sticky = _ref.sticky;
   return sticky ? 'sticky' : 'initial';
 }, zIndexes.anchor);
-var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-light-grey);\n"])));
+var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-light-grey);\n"])));
 var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2 / span 15;\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  gap: 40px;\n  justify-content: space-between;\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 13;\n      gap: 20px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 12;\n    }\n  }\n"])), function (_ref2) {
   var title = _ref2.title;
   return title ? 'row' : 'row-reverse';
@@ -11686,7 +11128,7 @@ var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$P || (_
 var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  min-height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      min-height: 50px;\n    }\n  }\n"])), devices.mobile);
 var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n\n  a {\n    width: max-content;\n  }\n"])), devices.mobile);
 var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
-var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref3) {
+var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.primaryButtonReverseBg;
 }, function (_ref4) {
@@ -11733,13 +11175,10 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
   }, message))));
 };
 
-var _templateObject$1i, _templateObject2$11, _templateObject3$Q;
-var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__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) {
-  var theme = _ref.theme;
-  return theme.colors.primary;
-}, devices.mobile, devices.tablet);
-var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  @media ", " {\n    margin-left: 1.5em;\n    margin-right: 1.5em;\n  }\n"])), devices.mobile);
-var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__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);
+var _templateObject$1i, _templateObject2$10, _templateObject3$Q;
+var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: solid 4px;\n  border-color: var(--upsell-border-color);\n  padding: 66px 74px 70px;\n\n  @media ", " {\n    & {\n      border-left: none;\n      border-right: none;\n      padding: 40px 0px;\n    }\n  }\n"])), devices.mobile);
+var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n\n    @media ", " {\n      margin-left: 20px;\n      margin-right: 20px;\n    }\n  }\n"])), devices.mobile);
+var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 60px;\n\n  @media ", " {\n    margin-bottom: 40px;\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobile);
 
 var _templateObject$1j;
 var TextContainer$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-black);\n  font-feature-settings: var(--font-feature-settings-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\n    font-feature-settings: var(--font-feature-settings-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: var(--color-base-black);\n    text-decoration: underline;\n    cursor: pointer;\n    text-underline-offset: 4px;\n\n    &:hover {\n      color: var(--color-rbo-black-hovered);\n    }\n\n    &:active {\n      color: var(--color-rbo-black-pressed);\n    }\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  p:has(+ ul),\n  p:has(+ ol) {\n    margin-bottom: 12px;\n  }\n\n  & ul,\n  & ol {\n    padding: 0;\n    list-style: none;\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  & ul li,\n  & ol li {\n    position: relative;\n    padding-left: 32px;\n    padding-top: 6px;\n    padding-bottom: 6px;\n\n    @media ", " {\n      padding-left: 28px;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    position: absolute;\n    left: 0;\n    width: 20px;\n    text-align: right;\n    margin-right: 12px;\n\n    @media ", " {\n      width: 16px;\n      margin-right: 12px;\n    }\n  }\n\n  & ol {\n    counter-reset: custom-ol;\n  }\n\n  & ol > li {\n    counter-increment: custom-ol;\n  }\n\n  & ol > li::before {\n    content: counter(custom-ol, decimal-leading-zero) '';\n    position: absolute;\n    left: 0;\n    min-width: 20px;\n    text-align: right;\n    margin-right: 12px;\n    display: inline-block;\n\n    @media ", " {\n      min-width: 16px;\n      margin-right: 12px;\n    }\n  }\n"])), devices.mobile, devices.mobile, devices.mobile);
@@ -11790,7 +11229,7 @@ var BodyContent = function BodyContent(_ref) {
 };
 
 var _templateObject$1k;
-var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1k || (_templateObject$1k = /*#__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);
+var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 60px 74px;\n  grid-template-columns: repeat(2, 1fr);\n  width: 100%;\n\n  @media ", " {\n    gap: 40px 74px;\n    width: 100%;\n    padding-left: 0;\n    padding-right: 0;\n    grid-template-columns: 1fr;\n  }\n"])), devices.mobile);
 
 var UpsellCards = function UpsellCards(_ref) {
   var upsellCards = _ref.upsellCards;
@@ -11818,25 +11257,28 @@ var UpsellSection = function UpsellSection(_ref) {
     link = _ref.link,
     upsellCards = _ref.upsellCards,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
+    theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme,
+    className = _ref.className;
   var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
     return _extends({}, card, {
       theme: card.theme || theme,
-      secondaryTheme: card.secondaryTheme || theme
+      secondaryTheme: card.secondaryTheme || card.theme || theme
     });
   }) : [];
-  return /*#__PURE__*/React__default.createElement(Theme, {
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
     theme: theme
-  }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 12,
     columnStartDevice: 2,
     columnSpanDevice: 12,
     columnStartSmallDevice: 1,
     columnSpanSmallDevice: 14
-  }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$4, null, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 4
-  }, title)), /*#__PURE__*/React__default.createElement(TextContainer$1, null, /*#__PURE__*/React__default.createElement(BodyContent, {
+  }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
+    serif: true
+  }, title), /*#__PURE__*/React__default.createElement(TextContainer$1, null, /*#__PURE__*/React__default.createElement(BodyContent, {
     text: richText != null ? richText : '',
     columnStartDesktop: 1,
     columnSpanDesktop: 14,
@@ -11849,9 +11291,9 @@ var UpsellSection = function UpsellSection(_ref) {
   })))));
 };
 
-var _templateObject$1l, _templateObject2$12;
+var _templateObject$1l, _templateObject2$11;
 var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--color-base-white);\n"])), zIndexes.anchor);
-var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
+var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
   var bottomBorder = _ref.bottomBorder;
   return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
 }, devices.mobileAndTablet, devices.mobile);
@@ -11882,9 +11324,9 @@ var StickyBar = function StickyBar(_ref) {
   }, children)));
 };
 
-var _templateObject$1m, _templateObject2$13, _templateObject3$R, _templateObject4$J;
+var _templateObject$1m, _templateObject2$12, _templateObject3$R, _templateObject4$J;
 var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 62px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n  position: relative;\n\n  @media ", ", ", " {\n    height: 100vh;\n    padding: 62px 0 0;\n  }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
-var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
+var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
 var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
 
@@ -12063,7 +11505,7 @@ var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
   return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
 };
 
-var _templateObject$1n, _templateObject2$14, _templateObject3$S, _templateObject4$K, _templateObject5$C, _templateObject6$s, _templateObject7$m, _templateObject8$g, _templateObject9$a;
+var _templateObject$1n, _templateObject2$13, _templateObject3$S, _templateObject4$K, _templateObject5$C, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a;
 var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    ", "\n  }}\n  \n  &:fullscreen {\n    background: var(--color-base-white);\n    padding-top: 44px;\n    padding-bottom: 84px;\n\n    .swipe-slide > figure {\n       height: var(--fullscreen-figure-height);\n    }\n  }\n"])), function (_ref) {
   var imagesHeightDesktop = _ref.imagesHeightDesktop;
   return "& {\n      .swipe-slide {\n        height: fit-content;\n        width: auto;\n        margin-right: var(--grid-column-gap);\n\n        > figure {\n          margin: 0px;\n          " + getImageSlideStyles(imagesHeightDesktop) + "\n        }\n      }\n    }";
@@ -12071,7 +11513,7 @@ var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1n |
   var imagesHeightDevice = _ref2.imagesHeightDevice;
   return "&&& {\n        .swipe-slide > figure {\n          " + getImageSlideStyles(imagesHeightDevice) + "\n        }\n      }";
 });
-var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    && {\n      .swipe-slide {\n        ", "\n      }\n    }\n  }\n}"])), function (_ref3) {
+var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    && {\n      .swipe-slide {\n        ", "\n      }\n    }\n  }\n}"])), function (_ref3) {
   var type = _ref3.type,
     isActive = _ref3.isActive;
   return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type, isActive) + "\n        }\n      }\n\n      @media " + devices.tablet + " {\n        & {\n          .swipe-slide {\n            width: " + (type === exports.CarouselType.SmallCard ? '30%' : '40%') + ";\n          }\n        }\n      }\n    ";
@@ -12084,7 +11526,7 @@ var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$C || (_te
 });
 var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n"])));
 var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n"])));
-var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
+var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
 var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  @media ", " {\n    grid-column: ", ";\n  }\n\n  @media ", " {\n    grid-column: 2 / span 13;\n  }\n"])), function (_ref5) {
   var active = _ref5.active;
   return active ? 'grid-column: 1 / span 16' : '';
@@ -12093,10 +11535,10 @@ var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$a
   return active ? '1 / span 14' : '2 / span 14';
 }, devices.mobile);
 
-var _templateObject$1o, _templateObject2$15;
+var _templateObject$1o, _templateObject2$14;
 var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
 var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n"])));
-var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  transition: ", ";\n  transform: translateX(", ");\n\n  .", " {\n    flex-shrink: 0;\n  }\n"])), function (_ref) {
+var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  transition: ", ";\n  transform: translateX(", ");\n\n  .", " {\n    flex-shrink: 0;\n  }\n"])), function (_ref) {
   var transitioning = _ref.transitioning;
   return transitioning ? 'transform 0.3s ease' : 'none';
 }, function (_ref2) {
@@ -12568,15 +12010,15 @@ var Carousel = function Carousel(_ref) {
   }, children))));
 };
 
-var _templateObject$1p, _templateObject2$16, _templateObject3$T, _templateObject4$L, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$h, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1;
+var _templateObject$1p, _templateObject2$15, _templateObject3$T, _templateObject4$L, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1;
 var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--color-base-black);\n  user-select: none;\n\n  .highlight-carousel-text {\n    color: var(--color-base-white);\n  }\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
-var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 12;\n      padding: 12px 0 12px var(--grid-margin);\n      min-height: 64px;\n      box-sizing: border-box;\n      width: 100%;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 12;\n      padding: 12px 0 12px var(--grid-margin);\n      min-height: 64px;\n      box-sizing: border-box;\n      width: 100%;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
 var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 2 / 1 / 2 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 2 / 7;\n      padding: 0 12px 12px var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 3 / 1 / 4 / 15;\n      width: 100%;\n      padding: 0 20px;\n      margin: 24px 0;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n  width: 132px;\n  height: 36px;\n\n  @media ", " {\n    & {\n      margin-bottom: 16px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-bottom: 20px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n\n  h1,\n  h2,\n  h3 {\n    margin-bottom: 8px;\n  }\n"])));
 var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n  }\n"])), devices.mobileAndTablet);
-var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  flex-direction: row;\n\n  @media ", " {\n    & {\n      margin-top: 16px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n    display: flex;\n    flex-direction: column;\n  }\n"])), devices.tablet, devices.mobile);
+var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  flex-direction: row;\n\n  @media ", " {\n    & {\n      margin-top: 16px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n    display: flex;\n    flex-direction: column;\n  }\n"])), devices.tablet, devices.mobile);
 var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  .swipe-slide {\n    width: calc(100% - 50px - var(--rotator-button-width));\n    -webkit-transform: translate3d(0, 0, 0);\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 7 / 3 / 15;\n\n      .swipe-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swipe-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 50px;\n  top: calc(50% - calc(var(--rotator-button-width) / 2));\n  z-index: 2;\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.mobileAndTablet);
 var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    div {\n      background-color: var(--color-base-black);\n    }\n    svg path {\n      fill: var(--color-base-white);\n    }\n\n    & {\n      display: flex;\n      grid-area: 1 / 12 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n\n  @media ", " {\n    div {\n      background-color: var(--color-base-black);\n    }\n    svg path {\n      fill: var(--color-base-white);\n    }\n\n    & {\n      display: flex;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.tablet, devices.mobile);
@@ -12859,63 +12301,623 @@ var HighlightsCore = function HighlightsCore(_ref) {
     slides: slidesWithLinks
   })));
 };
-
-var _excluded$u = ["logo", "slides"];
-var HighlightsStream = function HighlightsStream(_ref) {
-  var logo = _ref.logo,
-    slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
-  var slidesWithLinks = slides.map(function (slide) {
-    var links = processSlideLinks(slide.links);
-    return _extends({}, slide, {
-      links: links
-    });
-  });
-  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
-    theme: exports.ThemeType.Stream
-  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
-    slides: slidesWithLinks,
-    logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, {
-      align: "left"
-    }) : null
-  })));
+
+var _excluded$u = ["logo", "slides"];
+var HighlightsStream = function HighlightsStream(_ref) {
+  var logo = _ref.logo,
+    slides = _ref.slides,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+  var slidesWithLinks = slides.map(function (slide) {
+    var links = processSlideLinks(slide.links);
+    return _extends({}, slide, {
+      links: links
+    });
+  });
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
+    theme: exports.ThemeType.Stream
+  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
+    slides: slidesWithLinks,
+    logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, {
+      align: "left"
+    }) : null
+  })));
+};
+
+var _templateObject$1q, _templateObject3$U;
+var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  .swipe-slide {\n    width: 100%;\n  }\n"])));
+var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
+
+var MinimalCarousel = function MinimalCarousel(_ref) {
+  var children = _ref.children;
+  var carouselRef = React.useRef(null);
+  var hasMultipleChildren = React__default.Children.count(children) > 1;
+  var onNext = function onNext() {
+    var _carouselRef$current;
+    return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
+  };
+  var onPrev = function onPrev() {
+    var _carouselRef$current2;
+    return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
+  };
+  return /*#__PURE__*/React__default.createElement(CarouselWrapper$1, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 1,
+    columnSpanDesktop: 16,
+    columnStartDevice: 1,
+    columnSpanDevice: 14
+  }, /*#__PURE__*/React__default.createElement(Swipe, {
+    ref: carouselRef,
+    infinite: hasMultipleChildren,
+    "data-testid": "carousel-swipe"
+  }, React__default.Children.toArray(children).map(function (child, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: "swipe-minimal-carousel-slide-" + index
+    }, child);
+  })))), hasMultipleChildren && (/*#__PURE__*/React__default.createElement(ButtonsWrapper$1, {
+    "data-testid": "carousel-buttons-wrapper"
+  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    onClickNext: onNext,
+    onClickPrev: onPrev
+  }))));
+};
+
+var colors = {
+  core: '#C8102E',
+  stream: '#1866DC',
+  cinema: '#1A1A1A'
+};
+var commonColors = {
+  black: '#1A1A1A',
+  white: '#FFFFFF',
+  darkgrey: '#727272',
+  midgrey: '#B2B2B2',
+  lightgrey: '#F0F0F0',
+  error: '#C8102E',
+  medium: '#D79233',
+  good: '#4EAA33',
+  progress: '#1866DC',
+  navigation: '#C8102E',
+  lemonChiffon: '#fffbbe',
+  lapisLazuli: '#0060a0',
+  blue: '#1866DC',
+  red: '#C8102E'
+};
+var fontFamilies = {
+  adobeGaramondPro: 'adobe-garamond-pro',
+  adobeGaramondProItalics: 'adobe-garamond-pro',
+  gothamSSmMedium: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
+  gothamSSm: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
+  sabonNextLTProRegular: 'Sabon Next LT Pro Regular',
+  sabonNextLTProRegularItalics: 'Sabon Next LT Pro Regular Italics',
+  sansSerifFallback: 'Montserrat, sans-serif'
+};
+var common = {
+  fonts: {
+    desktop: {
+      sizes: {
+        headers: {
+          1: '96px',
+          2: '68px',
+          3: '44px',
+          4: '34px',
+          5: '24px',
+          6: '20px'
+        },
+        altHeaders: {
+          3: '44px',
+          4: '34px',
+          5: '24px',
+          6: '20px'
+        },
+        subtitles: {
+          1: '18px',
+          2: '14px'
+        },
+        titleDescription: '20px',
+        body: {
+          1: '19px',
+          2: '16px',
+          3: '14px'
+        },
+        listing: '19px',
+        buttons: '14px',
+        overline: {
+          1: '14px',
+          2: '12px',
+          3: '10px',
+          4: '8px'
+        },
+        navigation: '13px',
+        search: '24px'
+      },
+      letterSpacing: {
+        headers: {
+          1: '2px',
+          2: '1px',
+          3: '1px',
+          4: '1px',
+          5: '1px',
+          6: '1px'
+        },
+        altHeaders: {
+          3: 'normal',
+          4: 'normal',
+          5: 'normal',
+          6: 'normal'
+        },
+        overline: {
+          1: '1px',
+          2: '1px',
+          3: '1px',
+          4: '1px'
+        },
+        subtitles: {
+          1: '1px',
+          2: '1px'
+        },
+        body: {
+          1: 'normal',
+          2: 'normal',
+          3: 'normal'
+        },
+        navigation: '1px'
+      },
+      lineHeights: {
+        headers: {
+          1: '110px',
+          2: '72px',
+          3: '48px',
+          4: '40px',
+          5: '30px',
+          6: '28px'
+        },
+        altHeaders: {
+          3: '48px',
+          4: '44px',
+          5: '30px',
+          6: '28px'
+        },
+        subtitles: {
+          1: '22px',
+          2: '22px'
+        },
+        titleDescription: '28px',
+        body: {
+          1: '26px',
+          2: '22px',
+          3: '20px'
+        },
+        peopleListing: '24px',
+        listing: '36px',
+        buttons: '20px',
+        overline: {
+          1: '16px',
+          2: '14px',
+          3: '12px',
+          4: '10px'
+        },
+        navigation: '16px'
+      },
+      families: {
+        headers: fontFamilies.gothamSSmMedium,
+        altHeaders: fontFamilies.adobeGaramondPro,
+        subtitles: fontFamilies.gothamSSmMedium,
+        body: fontFamilies.adobeGaramondPro,
+        bodyItalics: fontFamilies.adobeGaramondProItalics,
+        listing: fontFamilies.adobeGaramondPro,
+        listingItalics: fontFamilies.adobeGaramondProItalics,
+        buttons: fontFamilies.gothamSSm,
+        overline: fontFamilies.gothamSSmMedium,
+        navigation: fontFamilies.gothamSSmMedium,
+        peopleListingRole: fontFamilies.gothamSSm,
+        search: fontFamilies.adobeGaramondPro
+      },
+      weights: {
+        headers: {
+          1: '500',
+          2: '500',
+          3: '500',
+          4: '500',
+          5: '500',
+          6: '500'
+        },
+        altHeaders: {
+          3: 'normal',
+          4: 'normal',
+          5: 'normal',
+          6: 'normal'
+        },
+        buttons: '400',
+        overline: {
+          1: '500',
+          2: '500',
+          3: '500',
+          4: '500'
+        },
+        body: {
+          1: '400',
+          2: '400',
+          3: '400'
+        },
+        subtitles: {
+          1: '500',
+          2: '500'
+        },
+        navigation: '500'
+      },
+      transforms: {
+        headers: 'uppercase',
+        altHeaders: 'none',
+        overline: 'uppercase',
+        subtitles: 'uppercase',
+        body: 'none',
+        navigation: 'uppercase'
+      },
+      fontFeatureSettings: {
+        headers: "'tnum' on, 'lnum' on",
+        altHeaders: "'pnum' on, 'onum' on",
+        overline: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off",
+        subtitles: "'tnum' on, 'lnum' on",
+        body: "'pnum' on, 'onum' on, 'liga' off",
+        navigation: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off"
+      },
+      wordBreak: {
+        headers: 'break-word',
+        altHeaders: 'break-word',
+        overline: 'break-word',
+        subtitles: 'break-word',
+        body: 'break-word'
+      },
+      margins: {
+        headers: {
+          // These margins use the Chrome defaults to enable proper fallbacks when using semantic level -
+          // https://www.w3schools.com/cssref/css_default_values.php
+          1: '0.67em 0',
+          2: '0.83em 0',
+          3: '1em 0',
+          4: '1.33em 0',
+          5: '1.67em 0',
+          6: '2.33em 0'
+        }
+      }
+    },
+    mobile: {
+      sizes: {
+        headers: {
+          1: '38px',
+          2: '30px',
+          3: '26px',
+          4: '24px',
+          5: '20px',
+          6: '17px'
+        },
+        altHeaders: {
+          3: '26px',
+          4: '24px',
+          5: '20px',
+          6: '17px'
+        },
+        subtitles: {
+          1: '16px',
+          2: '14px'
+        },
+        titleDescription: '17px',
+        body: {
+          1: '17px',
+          2: '12px',
+          3: '11px'
+        },
+        listing: '16px',
+        buttons: '14px',
+        overline: {
+          1: '14px',
+          2: '12px',
+          3: '10px',
+          4: '8px'
+        },
+        navigation: '13px',
+        search: '20px'
+      },
+      letterSpacing: {
+        headers: {
+          1: '1px',
+          2: '1px',
+          3: '1px',
+          4: '1px',
+          5: '1px',
+          6: '1px'
+        },
+        altHeaders: {
+          3: 'normal',
+          4: 'normal',
+          5: 'normal',
+          6: 'normal'
+        },
+        overline: {
+          1: '1px',
+          2: '1px'
+        },
+        subtitles: {
+          1: '1px',
+          2: '1px'
+        },
+        body: {
+          1: 'normal',
+          2: 'normal',
+          3: 'normal'
+        },
+        navigation: '1px'
+      },
+      lineHeights: {
+        headers: {
+          1: '42px',
+          2: '34px',
+          3: '30px',
+          4: '28px',
+          5: '28px',
+          6: '24px'
+        },
+        altHeaders: {
+          3: '30px',
+          4: '28px',
+          5: '28px',
+          6: '24px'
+        },
+        subtitles: {
+          1: '24px',
+          2: '18px'
+        },
+        titleDescription: '24px',
+        body: {
+          1: '24px',
+          2: '18px',
+          3: '16px'
+        },
+        listing: '34px',
+        buttons: '20px',
+        overline: {
+          1: '16px',
+          2: '14px'
+        },
+        navigation: '16px'
+      },
+      families: {
+        headers: fontFamilies.gothamSSm,
+        altHeaders: fontFamilies.adobeGaramondPro,
+        subtitles: fontFamilies.gothamSSmMedium,
+        body: fontFamilies.adobeGaramondPro,
+        bodyItalics: fontFamilies.adobeGaramondProItalics,
+        listing: fontFamilies.adobeGaramondPro,
+        listingItalics: fontFamilies.adobeGaramondProItalics,
+        buttons: fontFamilies.gothamSSm,
+        overline: fontFamilies.gothamSSmMedium,
+        navigation: fontFamilies.gothamSSmMedium,
+        search: fontFamilies.adobeGaramondPro
+      },
+      weights: {
+        headers: {
+          1: '500',
+          2: '500',
+          3: '500',
+          4: '500',
+          5: '500',
+          6: '500'
+        },
+        altHeaders: {
+          3: 'normal',
+          4: 'normal',
+          5: 'normal',
+          6: 'normal'
+        },
+        buttons: '400',
+        overline: {
+          1: '500',
+          2: '500'
+        },
+        body: {
+          1: '400',
+          2: '400',
+          3: '400'
+        },
+        subtitles: {
+          1: '500',
+          2: '500'
+        },
+        navigation: '500'
+      },
+      transforms: {
+        headers: 'uppercase',
+        altHeaders: 'none',
+        overline: 'uppercase',
+        subtitles: 'uppercase',
+        body: 'none',
+        navigation: 'uppercase'
+      },
+      fontFeatureSettings: {
+        headers: "'tnum' on, 'lnum' on",
+        altHeaders: "'pnum' on, 'onum' on",
+        overline: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off",
+        subtitles: "'tnum' on, 'lnum' on",
+        body: "'pnum' on, 'onum' on, 'liga' off",
+        navigation: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off"
+      },
+      wordBreak: {
+        headers: 'break-word',
+        altHeaders: 'break-word',
+        overline: 'break-word',
+        subtitles: 'break-word',
+        body: 'break-word'
+      }
+    },
+    tablet: {
+      sizes: {
+        headers: {
+          6: '17px'
+        },
+        altHeaders: {
+          4: '24px'
+        },
+        body: {
+          1: '17px'
+        }
+      }
+    }
+  },
+  spacing: {
+    1: '4px',
+    2: '8px',
+    3: '12px',
+    4: '16px',
+    5: '20px',
+    6: '24px',
+    7: '28px',
+    8: '32px',
+    9: '36px',
+    10: '40px',
+    12: '48px',
+    15: '60px',
+    18: '72px',
+    20: '80px',
+    30: '120px',
+    35: '140px',
+    40: '160px',
+    45: '180px',
+    50: '200px'
+  },
+  grid: {
+    mobile: {
+      margin: '20px',
+      outerMargin: '0',
+      gap: '12px'
+    },
+    tablet: {
+      margin: '32px',
+      outerMargin: '0',
+      gap: '20px'
+    },
+    desktop: {
+      margin: '10%',
+      outerMargin: '50px',
+      gap: '36px'
+    }
+  },
+  buttons: {
+    paddingX: '20px',
+    paddingY: '14px',
+    paddingYIcon: '12px',
+    iconWidth: '20px',
+    iconHeight: '20px',
+    iconMargin: '12px'
+  },
+  footer: {
+    desktop: {
+      height: '380px',
+      paddingTop: '44px',
+      paddingBottom: '44px',
+      itemsGap: '32px',
+      mediaGap: '24px',
+      mediaIconWidth: '24px',
+      mediaIconHeight: '24px',
+      verticalSpacingLarge: '58px',
+      verticalSpacingSmall: '16px'
+    },
+    tablet: {
+      paddingTop: '40px',
+      paddingBottom: '40px'
+    },
+    mobile: {
+      height: 'auto',
+      paddingTop: '20px',
+      paddingBottom: '20px',
+      itemsGap: '12px',
+      mediaGap: '32px',
+      mediaIconWidth: '28px',
+      mediaIconHeight: '28px',
+      verticalSpacingLarge: '24px',
+      verticalSpacingSmall: '24px'
+    }
+  }
+};
+var core = /*#__PURE__*/_extends({}, common, {
+  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
+    primary: colors.core,
+    primaryButton: colors.core,
+    secondaryButton: colors.core,
+    tertiaryButton: 'transparent',
+    auxiliaryButton: 'transparent',
+    primaryButtonReverseBg: colors.cinema,
+    primaryButtonReverse: commonColors.white
+  })
+});
+var stream = /*#__PURE__*/_extends({}, common, {
+  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
+    primary: colors.stream,
+    primaryButton: colors.stream,
+    primaryButtonReverseBg: colors.cinema,
+    primaryButtonReverse: commonColors.white,
+    secondaryButton: colors.stream,
+    tertiaryButton: 'transparent',
+    auxiliaryButton: 'transparent'
+  })
+});
+var cinema = /*#__PURE__*/_extends({}, common, {
+  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
+    primary: colors.cinema,
+    primaryButton: commonColors.white,
+    primaryButtonReverseBg: commonColors.white,
+    primaryButtonReverse: colors.cinema,
+    secondaryButton: colors.cinema,
+    tertiaryButton: 'transparent',
+    auxiliaryButton: 'transparent'
+  })
+});
+var schools = /*#__PURE__*/_extends({}, common, {
+  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
+    primary: colors.core,
+    primaryButton: colors.core,
+    primaryButtonReverseBg: colors.cinema,
+    primaryButtonReverse: commonColors.white,
+    secondaryButton: colors.core,
+    tertiaryButton: 'transparent',
+    auxiliaryButton: 'transparent'
+  }),
+  fonts: /*#__PURE__*/_extends({}, common.fonts, {
+    desktop: /*#__PURE__*/_extends({}, common.fonts.desktop, {
+      transforms: {
+        headers: 'none',
+        altHeaders: 'none',
+        overline: 'none',
+        subtitles: 'none',
+        body: 'none',
+        navigation: 'uppercase'
+      }
+    }),
+    mobile: /*#__PURE__*/_extends({}, common.fonts.mobile, {
+      transforms: {
+        headers: 'none',
+        altHeaders: 'none',
+        overline: 'none',
+        subtitles: 'none',
+        body: 'none',
+        navigation: 'uppercase'
+      }
+    })
+  })
+});
+var themes = {
+  core: core,
+  stream: stream,
+  cinema: cinema,
+  fontFamilies: fontFamilies,
+  schools: schools
 };
 
-var _templateObject$1q, _templateObject3$U;
-var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  .swipe-slide {\n    width: 100%;\n  }\n"])));
-var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
-
-var MinimalCarousel = function MinimalCarousel(_ref) {
-  var children = _ref.children;
-  var carouselRef = React.useRef(null);
-  var hasMultipleChildren = React__default.Children.count(children) > 1;
-  var onNext = function onNext() {
-    var _carouselRef$current;
-    return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
-  };
-  var onPrev = function onPrev() {
-    var _carouselRef$current2;
-    return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
-  };
-  return /*#__PURE__*/React__default.createElement(CarouselWrapper$1, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 1,
-    columnSpanDesktop: 16,
-    columnStartDevice: 1,
-    columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(Swipe, {
-    ref: carouselRef,
-    infinite: hasMultipleChildren,
-    "data-testid": "carousel-swipe"
-  }, React__default.Children.toArray(children).map(function (child, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: "swipe-minimal-carousel-slide-" + index
-    }, child);
-  })))), hasMultipleChildren && (/*#__PURE__*/React__default.createElement(ButtonsWrapper$1, {
-    "data-testid": "carousel-buttons-wrapper"
-  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
-    onClickNext: onNext,
-    onClickPrev: onPrev
-  }))));
+var Theme = function Theme(_ref) {
+  var children = _ref.children,
+    theme = _ref.theme;
+  var chosenTheme = themes[theme];
+  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+    theme: chosenTheme
+  }, children);
 };
 
 var _templateObject$1r;
@@ -13866,9 +13868,9 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1r || (
   return theme.footer.tablet.paddingBottom;
 }, devices.desktop, devices.largeDesktop);
 
-var _templateObject$1s, _templateObject2$17, _templateObject3$V;
+var _templateObject$1s, _templateObject2$16, _templateObject3$V;
 var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
 var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 32px 0;\n\n  & cite {\n    font-style: normal;\n  }\n\n  @media ", " {\n    padding: 24px 0;\n  }\n"])), devices.mobile);
 
 /* eslint-disable react/no-danger */