@royaloperahouse/harmonic 0.18.2-d → 0.18.2-e

package/dist/harmonic.cjs.development.js

@@ -2551,7 +2551,7 @@ var Icon = /*#__PURE__*/React.memo(function (props) {
 Icon.displayName = 'Icon';
 
 var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
-var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Button = function Button(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
@@ -2561,7 +2561,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     href = _ref.href,
     onClick = _ref.onClick,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var truncatedString = children == null ? void 0 : children.substring(0, 30);
+  var truncatedString = children.substring(0, 30);
   var handleClick = React.useCallback(function (e) {
     if (!href) e.preventDefault();
     onClick == null || onClick(e);
@@ -2573,8 +2573,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     href: href != null ? href : '#',
     onClick: handleClick,
     iconName: iconName,
-    className: className,
-    ref: ref
+    className: className
   }), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
     "data-testid": "button-icon",
     className: iconClassName
@@ -2585,8 +2584,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
     color: "inherit"
   }, truncatedString));
-});
-Button.displayName = 'Button';
+};
 
 var getPointerEvents = function getPointerEvents(_ref) {
   var disabled = _ref.disabled;
@@ -2651,7 +2649,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
 var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 var _excluded$3 = ["children", "disabled", "className"];
-var PrimaryButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var PrimaryButton = function PrimaryButton(_ref) {
   var children = _ref.children,
     disabled = _ref.disabled,
     className = _ref.className,
@@ -2666,7 +2664,6 @@ var PrimaryButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
       id: disabledButtonDescriptionId
     }, disabledButtonDescription), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
-      ref: ref,
       disabled: true,
       "aria-disabled": "true",
       role: "button",
@@ -2676,13 +2673,10 @@ var PrimaryButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClick: handleClick
     }), children));
   }
-  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({}, props, {
     className: className
   }), children);
-});
-PrimaryButton.displayName = 'PrimaryButton';
+};
 
 var COLORS$1 = {
   disabled: 'var(--color-state-disabled)',
@@ -3830,6 +3824,7 @@ var Tab = function Tab(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
     color = _ref.color,
     dataTestId = _ref.dataTestId,
     isOpen = _ref.isOpen;
@@ -3864,8 +3859,9 @@ var Tab = function Tab(_ref) {
     className: className,
     "data-testid": dataTestId
   }, /*#__PURE__*/React__default.createElement(TabText, {
-    color: color,
+    id: tabLinkId,
     trimText: trimText,
+    color: color,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -5344,6 +5340,7 @@ var Dropdown = function Dropdown(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
     trimTabText = _ref.trimTabText;
   var node = React.useRef();
   var _useState = React.useState(false),
@@ -5440,6 +5437,7 @@ var Dropdown = function Dropdown(_ref) {
   };
   var renderTab = function renderTab() {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
+      tabLinkId: tabLinkId,
       trimText: trimTabText,
       title: title,
       titleLink: titleLink,
@@ -5519,7 +5517,8 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className
+    className: className,
+    tabLinkId: "account-link"
   });
 };
 
@@ -5938,6 +5937,7 @@ var Accordion = function Accordion(_ref) {
   var toggleAccordion = function toggleAccordion() {
     if (React__default.Children.count(children) === 0) return;
     if (openAccordion) {
+      setIcon(collapsedStateIconData);
       setOpenAccordion(false);
       setTextHeight('0px');
       setIcon(collapsedStateIconData);
@@ -6466,1802 +6466,1859 @@ var Cards = function Cards(_ref) {
   }));
 };
 
-var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7;
-var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobileAndTablet);
-var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), devices.mobileAndTablet);
-var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 4px;\n"])));
-var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: baseline;\n  gap: 3px;\n"])));
-var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
-var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  a {\n    font-family: var(--font-family-sans);\n    font-weight: 400;\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n    color: var(--color-base-black);\n    text-decoration: underline;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n    margin-right: 13px;\n    display: inline-block;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    @media ", " {\n      font-size: 17px;\n      line-height: 24px;\n    }\n  }\n"])), devices.mobile);
+var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
+var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  @media ", " {\n    flex-direction: column-reverse;\n    gap: 15px;\n  }\n"])), devices.mobile);
+var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n\n  @media ", " {\n    gap: 15px;\n  }\n"])), devices.mobile);
+var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 44px;\n  display: flex;\n  align-items: center;\n"])));
+var RotatorButtonsWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  overflow-x: scroll;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media ", " {\n    flex-direction: column;\n    gap: 10px;\n  }\n"])), devices.mobile);
+var ActionButtons = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  gap: 32px;\n\n  .mobile-only {\n    visibility: hidden;\n\n    p {\n      font-size: 14px;\n      line-height: 17px;\n    }\n  }\n\n  @media ", " {\n    .mobile-only {\n      visibility: visible;\n      padding-block: 24px;\n      font-size: 17px;\n      line-height: 24px;\n    }\n\n    flex-direction: row-reverse;\n    gap: unset;\n    justify-content: space-between;\n    border-block-end: 2px solid var(--base-color-light-grey);\n\n    :has(.mobile-only) {\n      justify-content: left;\n    }\n\n    :not(:has(.mobile-only)) {\n      padding-block: 12px;\n    }\n\n    a {\n      width: fit-content;\n    }\n  }\n"])), devices.mobile);
+var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  margin-block-start: 2px;\n  margin-inline: 2px;\n\n  p {\n    font-size: 14px;\n    line-height: 17px;\n  }\n\n  :focus-visible {\n    outline: none;\n\n    & > div:first-child {\n      outline: 2px solid var(--color-base-black);\n    }\n  }\n\n  @media ", " {\n    flex-direction: row;\n    gap: 20px;\n    margin-block-end: 2px;\n    margin-inline-end: unset;\n\n    p {\n      font-size: 17px;\n      line-height: 24px;\n    }\n  }\n"])), devices.mobile);
+var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 86px;\n  height: 86px;\n  min-width: 86px;\n  border: 4px solid;\n  border-color: ", ";\n  border-radius: 50%;\n  background: var(--color-base-white);\n  position: relative;\n  box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
+  var isSelected = _ref.isSelected;
+  return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
+});
+var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 8px);\n  height: calc(100% - 8px);\n  margin: 4px;\n  object-fit: cover;\n  border-radius: 50%;\n\n  // This is really specific to the SVG that we have been provided\n  // as a fallback person image. I don't think there's a simpler and\n  // more general way to handle this, so if we're given a new placeholder\n  // image later, we may have to change the scale here\n  ", "\n"])), function (_ref2) {
+  var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
+  return isDefaultPlaceholder && "\n    transform: scale(1.24);\n  ";
+});
+var PersonName = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 86px;\n  display: flex;\n  flex-wrap: wrap;\n  text-align: center;\n\n  @media ", " {\n    max-width: unset;\n    text-align: left;\n    font-size: 17px;\n    line-height: 24px;\n  }\n"])), devices.mobile);
+var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--color-primary-red);\n  display: ", ";\n  position: absolute;\n  top: 6px;\n  right: -6px;\n  align-items: center;\n  justify-content: center;\n\n  span {\n    display: ", ";\n    width: 65%;\n    height: 65%;\n  }\n"])), function (_ref3) {
+  var isSelected = _ref3.isSelected;
+  return isSelected ? 'flex' : 'none';
+}, function (_ref4) {
+  var isSelected = _ref4.isSelected;
+  return isSelected ? 'flex' : 'none';
+});
+var EmptySelectionTextSpacer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: hidden;\n\n  @media ", " {\n    visibility: visible;\n    min-height: var(--button-height);\n  }\n"])), devices.mobile);
 
-var ContactCard = function ContactCard(_ref) {
-  var title = _ref.title,
-    titleSuffix = _ref.titleSuffix,
-    description = _ref.description,
-    email = _ref.email,
-    phone = _ref.phone,
-    website = _ref.website,
-    address = _ref.address,
-    className = _ref.className;
-  var hasDetails = email || phone || website;
-  var addressString = address == null ? void 0 : address.substring(0, 110);
-  var descriptionText = description == null ? void 0 : description.substring(0, 110);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 3,
-    columnSpanDesktop: 12,
-    columnStartDevice: 1,
-    columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
-    "data-testid": "contact-card-wrapper"
-  }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
-    size: "large"
-  }, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
-    size: "small"
-  }, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
-    size: "small"
-  }, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
-    size: "large"
-  }, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
-    "data-testid": "contact-card-details-block"
-  }, email && (/*#__PURE__*/React__default.createElement("a", {
-    tabIndex: 0,
-    href: "mailto:" + email
-  }, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
-    tabIndex: 0,
-    href: "tel:" + phone
-  }, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
-    tabIndex: 0,
-    href: website,
-    target: "_blank",
-    rel: "noreferrer"
-  }, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
-    "data-testid": "contact-card-address-block"
-  }, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
-    size: "large"
-  }, addressString)))))))));
-};
+var defaultPlaceholderImage = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c9c9c9%3Bstroke%3A%23c9c9c9%3B%7D.cls-1%2C.cls-2%2C.cls-3%7Bstroke-miterlimit%3A10%3B%7D.cls-2%7Bfill-rule%3Aevenodd%3B%7D.cls-2%2C.cls-3%7Bfill%3A%2372767c%3Bstroke%3A%2372767c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M50.42%2C89.58c21.86%2C0%2C39.58-17.72%2C39.58-39.58S72.28%2C10.42%2C50.42%2C10.42%2C10.83%2C28.14%2C10.83%2C50s17.72%2C39.58%2C39.58%2C39.58Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M50.4%2C89.58c10.88%2C0%2C20.75-4.42%2C27.92-11.54-4.96-10.46-15.58-17.71-27.92-17.71s-22.96%2C7.25-27.92%2C17.71c7.17%2C7.12%2C17%2C11.54%2C27.92%2C11.54Z%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M50.4%2C55.67c8.05%2C0%2C14.58-6.53%2C14.58-14.58s-6.53-14.58-14.58-14.58-14.58%2C6.53-14.58%2C14.58%2C6.53%2C14.58%2C14.58%2C14.58Z%22%2F%3E%3C%2Fsvg%3E";
 
-var _templateObject$K, _templateObject2$y, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b;
-var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 36px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
-  return props.clickable ? 'pointer' : 'default';
-}, devices.mobile);
-var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
-var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  gap: 20px;\n\n  & * {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  @media ", " {\n    margin: 0 20px;\n  }\n\n  & .content-summary-text-link {\n    height: unset;\n  }\n"])), function (props) {
-  return props.showImage ? 2 : '1 / span 4';
-}, devices.mobile);
-var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n"])));
-var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & p:not(:last-child):after {\n    content: '\\A\\A';\n    white-space: pre;\n  }\n\n  ", "\n"], ["\n  & p:not(:last-child):after {\n    content: '\\\\A\\\\A';\n    white-space: pre;\n  }\n\n  ", "\n"])), function (props) {
-  return !!props.truncate && "\n    overflow: hidden;\n    position: relative;\n    display: -webkit-box;\n    -webkit-line-clamp: " + props.truncate + ";\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    min-height: 1em;\n    max-height: 3em;\n  ";
-});
+var _templateObject$K, _templateObject2$y;
+var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
+var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n"])));
+var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__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) {
+  var translateX = _ref2.translateX;
+  return translateX + "px";
+}, SWIPE_SLIDE_CLASS_NAME);
 
-/* eslint-disable no-shadow */
-(function (CarouselType) {
-  CarouselType["Image"] = "image";
-  CarouselType["SmallCard"] = "SmallCard";
-  CarouselType["LargeCard"] = "LargeCard";
-  CarouselType["PersonCard"] = "PersonCard";
-})(exports.CarouselType || (exports.CarouselType = {}));
+/**
+ * Generates a random string in the format XXX-XXX.
+ * Does not meet UUID standards.
+ * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
+ *
+ * @return {string} A random string in the format XXX-XXX.
+ */
+var generateDomElementId = function generateDomElementId() {
+  var randomPart = Math.floor(100 + Math.random() * 900).toString();
+  var datePart = Date.now().toString().slice(-3);
+  return randomPart + "-" + datePart;
+};
 
-var clickHandler = function clickHandler(link) {
-  if (link != null && link.href && document) {
-    document.location.href = link.href;
-  }
+var DISABLED_TABBING_TAGS = 'a, button';
+var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
+  if (!element) return;
+  var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
+  focusables.forEach(function (el) {
+    if (shouldDisable) el.setAttribute('tabindex', '-1');
+  });
 };
-var ContentSummary = function ContentSummary(_ref) {
-  var title = _ref.title,
-    subtitle = _ref.subtitle,
-    bodyText = _ref.bodyText,
-    link = _ref.link,
-    image = _ref.image,
-    _ref$largeTitle = _ref.largeTitle,
-    largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
-    _ref$showImage = _ref.showImage,
-    showImage = _ref$showImage === void 0 ? false : _ref$showImage,
-    _ref$truncate = _ref.truncate,
-    truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
-    _ref$fullyClickable = _ref.fullyClickable,
-    fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
-    _ref$headerSemanticLe = _ref.headerSemanticLevel,
-    headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
-    className = _ref.className;
-  return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
-    className: className,
-    onClick: function onClick() {
-      if (fullyClickable) {
-        clickHandler(link);
-      }
-    },
-    clickable: fullyClickable,
-    "data-roh": "content-summary-item"
-  }, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
-    "data-testid": "image-wrapper"
-  }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
-    href: link.href
-  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: exports.AspectRatio['4:3']
-  }, /*#__PURE__*/React__default.createElement("img", {
-    src: image.src,
-    alt: image.alt
-  })))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: exports.AspectRatio['4:3']
-  }, /*#__PURE__*/React__default.createElement("img", {
-    src: image.src,
-    alt: image.alt
-  }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
-    showImage: showImage
-  }, title && (/*#__PURE__*/React__default.createElement("div", {
-    "data-testid": largeTitle ? 'large-title' : 'default-title'
-  }, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    size: "large",
-    hierarchy: headerSemanticLevel
-  }, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    size: "medium",
-    hierarchy: headerSemanticLevel
-  }, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
-    size: "large"
-  }, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
-    truncate: truncate,
-    dangerouslySetInnerHTML: {
-      __html: bodyText
-    },
-    "data-testid": "body-text"
-  })))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
-    className: "content-summary-text-link"
-  }), link.text))));
+var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
+  return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
 };
-
-var _templateObject$L, _templateObject2$z, _templateObject3$o, _templateObject4$l, _templateObject5$h;
-var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-column-gap);\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content 24px min-content;\n      grid-template-areas:\n        'row1'\n        '.'\n        'row2';\n    }\n  }\n"])), function (_ref) {
-  var imageToLeft = _ref.imageToLeft;
-  return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
-}, devices.mobile);
-var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-self: center;\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
-  var imageToLeft = _ref2.imageToLeft;
-  return imageToLeft ? 'left' : 'right';
-}, devices.mobile);
-var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref3) {
-  var imageToLeft = _ref3.imageToLeft;
-  return imageToLeft ? 'right' : 'left';
-}, devices.mobile);
-var EditorialSubtitle = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var EditorialText = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
-
-var Editorial = function Editorial(_ref) {
-  var _ref$imagePosition = _ref.imagePosition,
-    imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
-    subtitle = _ref.subtitle,
-    text = _ref.text,
-    children = _ref.children,
-    className = _ref.className;
-  var imageToLeft = imagePosition === 'left';
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    className: className,
-    "data-testid": "editorial-component"
-  }, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 3,
-    columnSpanDesktop: 12,
-    columnStartDevice: 2,
-    columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(EditorialGrid, {
-    imageToLeft: imageToLeft
-  }, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
-    "data-testid": "image-wrapper",
-    imageToLeft: imageToLeft
-  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: exports.AspectRatio['1:1']
-  }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
-    "data-testid": "text-wrapper",
-    imageToLeft: imageToLeft
-  }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
-    tag: "span"
-  }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
-    tag: "div",
-    size: "large",
-    dangerouslySetInnerHTML: {
-      __html: text
+var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
+  var widthSoFar = 0;
+  var visible = [];
+  for (var i = currentIndex; i < slidesLength; i++) {
+    var _slideWidths$i;
+    var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
+    if (widthSoFar + width > containerWidth) break;
+    visible.push(i);
+    widthSoFar += width;
+  }
+  return visible;
+};
+var getMovedSlides = function getMovedSlides(delta, slideWidths) {
+  var absDelta = Math.abs(delta);
+  var movedSlides = 0;
+  var accumulated = 0;
+  for (var i = 0; i < slideWidths.length; i++) {
+    accumulated += slideWidths[i];
+    // Allow partial slide (e.g. 50% of next slide) to count
+    var partialThreshold = slideWidths[i] * 0.5;
+    if (absDelta > accumulated - partialThreshold) {
+      movedSlides++;
+    } else {
+      break;
     }
-  })))));
+  }
+  return movedSlides;
 };
 
-var _templateObject$M, _templateObject2$A, _templateObject3$p;
-var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: scroll;\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  min-width: 400px;\n  justify-content: space-between;\n  gap: 16px;\n  font-family: var(--font-family-sans);\n\n  @media ", " {\n    gap: 10px;\n  }\n"])), devices.mobile);
-var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-base-black);\n  min-width: fit-content;\n\n  :hover {\n    color: var(--color-base-white);\n  }\n"])));
-
-var _excluded$h = ["text", "onClick"];
-var HotFilters = function HotFilters(_ref) {
-  var items = _ref.items,
-    className = _ref.className,
-    _ref$selectedIndex = _ref.selectedIndex,
-    selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex,
-    onSelect = _ref.onSelect;
-  var handleClick = React__default.useCallback(function (index, onClick) {
-    if (onSelect) onSelect(index);
-    if (onClick) onClick();
-  }, [onSelect]);
-  return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, {
-    className: className
-  }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
-    var text = item.text,
-      _onClick = item.onClick,
-      rest = _objectWithoutPropertiesLoose(item, _excluded$h);
-    var isSelected = index === selectedIndex;
-    return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
-      key: index,
-      onClick: function onClick() {
-        return handleClick(index, _onClick);
-      },
-      iconName: isSelected ? 'Confirm' : undefined,
-      backgroundColor: isSelected ? 'base-black' : 'base-white',
-      textColor: isSelected ? 'base-white' : 'base-black',
-      hoveredColor: "base-black",
-      pressedColor: "black-pressed",
-      "aria-pressed": isSelected
-    }, rest), text);
-  })));
-};
-
-var InformationCtaVariants = {
-  Primary: 'Primary',
-  Secondary: 'Secondary',
-  Tertiary: 'Tertiary',
-  TextLink: 'TextLink'
-};
-
-var COLORS$4 = {
-  "default": 'var(--information-panel-button-color)',
-  background: 'var(--information-panel-button-bg-color)',
-  hover: 'var(--information-panel-button-hover-color)',
-  pressed: 'var(--information-panel-button-pressed-color)'
-};
-var getTextColor$4 = function getTextColor(variant, theme, colorValue) {
-  if (theme === exports.ThemeType.Cinema && (variant === InformationCtaVariants.Tertiary || variant === InformationCtaVariants.TextLink)) {
-    return 'var(--color-primary-black)';
-  }
-  if (variant === InformationCtaVariants.Primary) {
-    return COLORS$4["default"];
-  }
-  return colorValue;
-};
-var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
-  return variant === InformationCtaVariants.Primary || variant === undefined ? "background-color: " + colorValue + ";" : '';
-};
-var getBorderColor$1 = function getBorderColor(variant, colorValue) {
-  return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
-};
-
-var _templateObject$N, _templateObject2$B, _templateObject3$q, _templateObject4$m;
-var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: var(--information-panel-color);\n  background-color: var(--information-panel-bg-color);\n\n  @media ", " {\n    padding: 40px 0;\n  }\n"])), devices.mobile);
-var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
-var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 16px;\n  }\n\n  a {\n    color: ", ";\n    ", "\n    ", "\n\n    svg path {\n      fill: ", ";\n    }\n\n    :hover:not(:active) {\n      color: ", ";\n      ", "\n      ", "\n\n      svg path {\n        fill: ", ";\n      }\n    }\n\n    :active {\n      color: ", ";\n      ", "\n      ", "\n\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n"])), devices.mobile, function (_ref) {
-  var variant = _ref.variant,
-    theme = _ref.theme;
-  return getTextColor$4(variant, theme, COLORS$4.background);
-}, function (_ref2) {
-  var variant = _ref2.variant;
-  return getBackgroundColor$2(variant, COLORS$4.background);
-}, function (_ref3) {
-  var variant = _ref3.variant;
-  return getBorderColor$1(variant, COLORS$4.background);
-}, function (_ref4) {
-  var variant = _ref4.variant,
-    theme = _ref4.theme;
-  return getTextColor$4(variant, theme, COLORS$4.background);
-}, function (_ref5) {
-  var variant = _ref5.variant,
-    theme = _ref5.theme;
-  return getTextColor$4(variant, theme, COLORS$4.hover);
-}, function (_ref6) {
-  var variant = _ref6.variant;
-  return getBackgroundColor$2(variant, COLORS$4.hover);
-}, function (_ref7) {
-  var variant = _ref7.variant;
-  return getBorderColor$1(variant, COLORS$4.hover);
-}, function (_ref8) {
-  var variant = _ref8.variant,
-    theme = _ref8.theme;
-  return getTextColor$4(variant, theme, COLORS$4.hover);
-}, function (_ref9) {
-  var variant = _ref9.variant,
-    theme = _ref9.theme;
-  return getTextColor$4(variant, theme, COLORS$4.pressed);
-}, function (_ref0) {
-  var variant = _ref0.variant;
-  return getBackgroundColor$2(variant, COLORS$4.pressed);
-}, function (_ref1) {
-  var variant = _ref1.variant;
-  return getBorderColor$1(variant, COLORS$4.pressed);
-}, function (_ref10) {
-  var variant = _ref10.variant,
-    theme = _ref10.theme;
-  return getTextColor$4(variant, theme, COLORS$4.pressed);
-});
-var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--information-panel-color);\n\n  a {\n    text-decoration: underline;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n    color: var(--information-panel-color);\n  }\n\n  @media ", " {\n    padding-top: 4px;\n  }\n"])), devices.mobile);
-
-var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
-
-var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
-
-var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
-
-var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
-
-/* eslint-disable react/jsx-no-useless-fragment */
-var DEFAULT_THEME = exports.ThemeType.Core;
-var getThemeClass = function getThemeClass(theme) {
-  // Always include the base (core) theme class
-  var baseThemeClass = coreThemeStyles.coreTheme;
-  var overrideClass = '';
-  switch (theme) {
-    case exports.ThemeType.Core:
-      overrideClass = '';
-      break;
-    case exports.ThemeType.Stream:
-      overrideClass = streamThemeStyles.streamTheme;
-      break;
-    case exports.ThemeType.Cinema:
-      overrideClass = cinemaThemeStyles.cinemaTheme;
-      break;
-    case exports.ThemeType.Schools:
-      overrideClass = schoolsThemeStyles.schoolsTheme;
-      break;
-    default:
-      overrideClass = '';
-  }
-  // Return the combined classes
-  return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
-};
-var HarmonicThemeContext = /*#__PURE__*/React__default.createContext(DEFAULT_THEME);
-var useHarmonicTheme = function useHarmonicTheme() {
-  return React__default.useContext(HarmonicThemeContext);
-};
-var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
-  var _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? DEFAULT_THEME : _ref$theme,
-    children = _ref.children;
-  var themeClass = getThemeClass(theme);
-  // Convert children to an array (assuming they accept a className prop)
-  var childrenArray = React__default.Children.toArray(children);
-  var themedChildren = childrenArray.map(function (child) {
-    return /*#__PURE__*/React__default.cloneElement(child, {
-      className: ((child.props.className || '') + " " + themeClass).trim()
-    });
-  });
-  return /*#__PURE__*/React__default.createElement(HarmonicThemeContext.Provider, {
-    value: theme
-  }, themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren));
-};
-
-// Helper function for rendering buttons based on the variant
-var renderButton = function renderButton(_ref) {
-  var variant = _ref.variant,
-    link = _ref.link,
-    text = _ref.text,
-    iconName = _ref.iconName,
-    iconDirection = _ref.iconDirection,
-    target = _ref.target;
-  switch (variant) {
-    case InformationCtaVariants.Secondary:
-      return /*#__PURE__*/React__default.createElement(SecondaryButton, {
-        href: link,
-        iconName: iconName,
-        iconDirection: iconDirection,
-        target: target,
-        "aria-label": text
-      }, text);
-    case InformationCtaVariants.Tertiary:
-      return /*#__PURE__*/React__default.createElement(TertiaryButton, {
-        href: link,
-        target: target,
-        "aria-label": text
-      }, text);
-    case InformationCtaVariants.TextLink:
-      return /*#__PURE__*/React__default.createElement(TextLink, {
-        href: link,
-        iconName: iconName,
-        iconDirection: iconDirection,
-        target: target,
-        "aria-label": text
-      }, text);
-    default:
-      return /*#__PURE__*/React__default.createElement(PrimaryButton, {
-        href: link,
-        iconName: iconName,
-        iconDirection: iconDirection,
-        target: target,
-        "aria-label": text
-      }, text);
-  }
-};
-var InfoCta = function InfoCta(_ref2) {
-  var _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? InformationCtaVariants.Primary : _ref2$variant,
-    link = _ref2.link,
-    text = _ref2.text,
-    iconName = _ref2.iconName,
-    iconDirection = _ref2.iconDirection,
-    _ref2$target = _ref2.target,
-    target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target;
-  var theme = useHarmonicTheme();
-  return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
-    variant: variant,
-    theme: theme
-  }, renderButton({
-    variant: variant,
-    link: link,
-    text: text,
-    iconName: iconName,
-    iconDirection: iconDirection,
-    target: target
-  }));
+var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
+var MAX_CLONES_NUMBER = 6;
+var CLICK_DRAG_THRESHOLD = 10;
+var getClonesCount = function getClonesCount(infinite, childrenLength) {
+  if (!infinite) return 0;
+  return Math.min(childrenLength, MAX_CLONES_NUMBER);
 };
-
-/* eslint-disable react/no-danger */
-var defaultColumnSpan = 6;
-var smallColumnSpan = 4;
-var largeColumnSpan = 9;
-var mediumWordBreakpoint = 8;
-var longWordBreakpoint = 13;
-var getColumnSpan = function getColumnSpan(longestWordLength) {
-  if (longestWordLength > longWordBreakpoint) return largeColumnSpan;
-  if (longestWordLength < mediumWordBreakpoint) return smallColumnSpan;
-  return defaultColumnSpan;
+var getSlidedWidth = function getSlidedWidth(slide) {
+  if (!slide) return 0;
+  var style = window.getComputedStyle(slide);
+  var marginLeft = parseFloat(style.marginLeft) || 0;
+  var marginRight = parseFloat(style.marginRight) || 0;
+  return slide.getBoundingClientRect().width + marginLeft + marginRight;
 };
-var Information = function Information(_ref) {
-  var body = _ref.body,
-    title = _ref.title,
-    cta = _ref.cta,
-    className = _ref.className;
-  var _useViewport = useViewport(),
-    hydrated = _useViewport.hydrated;
-  var safeTitle = title || {
-    text: '',
-    textSize: 'medium'
-  }; // Provide a fallback
-  var titleWords = safeTitle.text.split(' ');
-  var titleWordLengths = titleWords.map(function (word) {
-    return word.length;
-  });
-  var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
-  var titleColumnSpan = getColumnSpan(maxTitleWordLength);
-  if (!hydrated) return null;
-  return /*#__PURE__*/React__default.createElement(InfoWrapper, {
-    "data-testid": "infoWrapper",
-    className: className
-  }, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 2,
-    columnStartDevice: 2,
-    columnSpanDesktop: titleColumnSpan,
-    columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(InfoTitle, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    hierarchy: "h2",
-    size: safeTitle.textSize,
-    color: "inherit"
-  }, safeTitle.text))), /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: titleColumnSpan + 2,
-    columnStartDevice: 2,
-    columnSpanDesktop: 14 - titleColumnSpan,
-    columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, null, /*#__PURE__*/React__default.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: body
+var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$infinite = _ref.infinite,
+    infinite = _ref$infinite === void 0 ? false : _ref$infinite,
+    onIndexChange = _ref.onIndexChange,
+    _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
+    slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
+    _ref$slidesAriaHidden = _ref.slidesAriaHidden,
+    slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
+    onActiveChange = _ref.onActiveChange,
+    onOverflowChange = _ref.onOverflowChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+  var containerRef = React.useRef(null);
+  var childRefs = React.useRef([]);
+  var startX = React.useRef(0);
+  var currentTranslate = React.useRef(0);
+  var isDragging = React.useRef(false);
+  var isMouseDown = React.useRef(false);
+  var isActive = React.useRef(false);
+  var isClickPrevented = React.useRef(false);
+  var uniqueIdRef = React.useRef(generateDomElementId());
+  var _useState = React.useState(null),
+    dragTranslateX = _useState[0],
+    setDragTranslateX = _useState[1];
+  var _useState2 = React.useState(false),
+    transitioning = _useState2[0],
+    setTransitioning = _useState2[1];
+  var _useState3 = React.useState([]),
+    slideWidths = _useState3[0],
+    setSlideWidths = _useState3[1];
+  var _useState4 = React.useState(0),
+    containerWidth = _useState4[0],
+    setContainerWidth = _useState4[1];
+  var _useMemo = React.useMemo(function () {
+      var count = getClonesCount(infinite, children.length);
+      var leftClones = infinite ? children.slice(-count) : [];
+      var rightClones = infinite ? children.slice(0, count) : [];
+      var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
+      return {
+        slides: allSlides,
+        clonesCount: count
+      };
+    }, [children, infinite]),
+    slides = _useMemo.slides,
+    clonesCount = _useMemo.clonesCount;
+  var _useState5 = React.useState(infinite ? clonesCount : 0),
+    currentIndex = _useState5[0],
+    setCurrentIndex = _useState5[1];
+  React.useEffect(function () {
+    var handler = function handler(e) {
+      if (isClickPrevented.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    var containerElement = containerRef.current;
+    containerElement == null || containerElement.addEventListener('click', handler, true);
+    return function () {
+      return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
+    };
+  }, []);
+  React.useEffect(function () {
+    if (!onIndexChange) return;
+    if (!infinite) {
+      onIndexChange(currentIndex);
+    } else {
+      var offset = currentIndex - clonesCount + children.length;
+      var realIndex = offset % children.length;
+      onIndexChange(realIndex);
     }
-  })), cta && (/*#__PURE__*/React__default.createElement(InfoCta, {
-    link: cta.link,
-    variant: cta.variant,
-    text: cta.text,
-    iconName: cta.iconName,
-    iconDirection: cta.iconDirection,
-    target: cta.target
-  })))));
-};
-
-var _templateObject$O, _templateObject2$C, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$c, _templateObject7$8, _templateObject8$4;
-var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: var(--page-header-bg-color);\n  color: var(--color-base-white);\n\n  ", ";\n\n  h1,\n  h2,\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
-  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
-  return isPageHeadingWithoutTitle && "\n    padding-bottom: 42px;\n  ";
-}, devices.mobile);
-var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
-var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 35px;\n  padding-bottom: 20px;\n\n  ", ";\n"])), function (_ref2) {
-  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
-  return isPageHeadingWithoutTitle && "\n    height: 50px;\n    padding-bottom: 0;\n    margin: 10px 0;\n  ";
-});
-var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
-  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
-  return isPageHeadingWithoutTitle && "\n    margin-top: 42px;\n  ";
-}, devices.mobile);
-var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 43px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 33px;\n      margin-top: 10px;\n      margin-bottom: 20px;\n    }\n  }\n"])), function (_ref4) {
-  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
-  return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
-}, devices.mobile);
-var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-white);\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
-var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  ", ";\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n\n      ", ";\n    }\n  }\n"])), function (_ref5) {
-  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
-  return isPageHeadingWithoutTitle && "\n    margin-top: 40px;\n  ";
-}, devices.mobile, function (_ref6) {
-  var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
-  return isPageHeadingWithoutTitle && "\n    margin-top: 15px;\n   ";
-});
-var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
-
-var PageHeading = function PageHeading(_ref) {
-  var title = _ref.title,
-    hierarchy = _ref.hierarchy,
-    text = _ref.text,
-    link = _ref.link,
-    _ref$sponsor = _ref.sponsor,
-    sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
-    children = _ref.children,
-    className = _ref.className,
-    showBadge = _ref.showBadge,
-    theme = _ref.theme;
-  var themedLink = link && _extends({}, link, {
-    textColor: ThemeColor['base-black'],
-    backgroundColor: ThemeColor['base-white'],
-    hoveredColor: ThemeColor['white-hovered'],
-    pressedColor: ThemeColor['white-pressed']
-  });
-  var linkText = themedLink == null ? void 0 : themedLink.text;
-  var isTitleUnAvailable = !title;
-  var renderBadge = function renderBadge(currentTheme) {
-    if (!showBadge) return null;
-    switch (currentTheme) {
-      case exports.ThemeType.Cinema:
-        return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
-          isPageHeadingWithoutTitle: isTitleUnAvailable
-        }, /*#__PURE__*/React__default.createElement(CinemaBadge, {
-          align: "left"
-        }));
-      case exports.ThemeType.Stream:
-        return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
-          isPageHeadingWithoutTitle: isTitleUnAvailable
-        }, /*#__PURE__*/React__default.createElement(StreamBadge, {
-          align: "left"
-        }));
-      default:
-        return null;
+  }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
+  var updateDimensions = React.useCallback(function () {
+    var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
+    var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
+    setContainerWidth(cw);
+    setSlideWidths(widths);
+    if (!infinite) {
+      var totalWidth = widths.reduce(function (acc, w) {
+        return acc + w;
+      }, 0);
+      var visibleSpace = cw - (slidesOffsetBefore || 0);
+      var overflow = totalWidth > Math.max(0, visibleSpace);
+      onOverflowChange == null || onOverflowChange(overflow);
     }
-  };
-  return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
-    className: className,
-    "data-testid": "page-heading-wrapper",
-    isPageHeadingWithoutTitle: isTitleUnAvailable
-  }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
-    "data-testid": "page-heading-title",
-    isPageHeadingWithoutTitle: isTitleUnAvailable
-  }, renderBadge(theme), children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
-    isPageHeadingWithoutTitle: isTitleUnAvailable
-  }, children)) : null, !isTitleUnAvailable && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    color: "white",
-    size: "large",
-    hierarchy: hierarchy
-  }, title))), text ? (/*#__PURE__*/React__default.createElement(TextWrapper, {
-    "data-testid": "page-heading-text"
-  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
-    tag: "div",
-    color: "white",
-    size: "large",
-    dangerouslySetInnerHTML: {
-      __html: text
+  }, []);
+  React.useEffect(function () {
+    var animationFrameRequestId = requestAnimationFrame(updateDimensions);
+    return function () {
+      return cancelAnimationFrame(animationFrameRequestId);
+    };
+  }, [children]);
+  React.useEffect(function () {
+    var observer = new ResizeObserver(updateDimensions);
+    if (containerRef.current) observer.observe(containerRef.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [children]);
+  var setIsActive = function setIsActive() {
+    if (!isActive.current) {
+      isActive.current = true;
+      onActiveChange == null || onActiveChange(true);
     }
-  }))) : null, sponsor ? (/*#__PURE__*/React__default.createElement(LogoWrapper, {
-    "data-testid": "page-heading-sponsor",
-    isPageHeadingWithoutTitle: isTitleUnAvailable
-  }, /*#__PURE__*/React__default.createElement(Sponsorship, null))) : null, themedLink ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
-    "data-testid": "page-heading-link"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
-};
-
-var _templateObject$P, _templateObject2$D, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
-var ImpactHeaderWrapper = /*#__PURE__*/styled__default.header(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--color-base-black);\n  padding: 36px 0;\n\n  @media ", " {\n    padding: 21px 0;\n  }\n"])), devices.mobile);
-var ImpactTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: grid;\n  grid-template-columns: ", ";\n  padding: 0 50px;\n\n  @media ", " {\n    padding: 0 50px;\n  }\n\n  @media ", " {\n    padding: 0 20px;\n    grid-template-columns: ", ";\n  }\n"])), function (_ref) {
-  var hasButton = _ref.hasButton,
-    sponsorPresent = _ref.sponsorPresent;
-  if (hasButton || sponsorPresent) return 'auto 80px 1fr 80px auto';
-  return '1fr';
-}, devices.tablet, devices.mobile, function (_ref2) {
-  var sponsorPresent = _ref2.sponsorPresent;
-  return sponsorPresent ? '1fr 20px auto' : '1fr';
-});
-var TitleButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1;\n  display: flex;\n  align-items: center;\n  min-width: ", ";\n"])), function (_ref3) {
-  var sponsorWidth = _ref3.sponsorWidth;
-  return sponsorWidth ? sponsorWidth + "px" : 'auto';
-});
-var TitleButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    position: static;\n    margin-right: 0;\n  }\n"])), devices.mobile);
-var MobileButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 20px 16px 20px;\n"])));
-var ImpactTitle = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  align-self: center;\n  grid-column: ", ";\n  min-width: 0;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 2;\n  max-height: calc(48px * 2);\n  text-align: center;\n  padding-bottom: 2px;\n\n  @media ", " {\n    grid-column: 1;\n    -webkit-line-clamp: 4;\n    max-height: calc(34px * 4);\n    text-align: left;\n  }\n"])), function (_ref4) {
-  var hasColumns = _ref4.hasColumns;
-  return hasColumns ? '3' : '1';
-}, devices.mobile);
-var ImpactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  aspect-ratio: 21 / 9;\n  height: auto;\n  &::before {\n    content: '';\n    display: block;\n    padding-top: calc(9 / 21 * 100%);\n  }\n\n  > picture,\n  img,\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n  img {\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: cover;\n    }\n  }\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    &::before {\n      padding-top: 100%;\n    }\n    max-height: 100vh;\n    img {\n      object-fit: cover;\n    }\n  }\n"])), devices.mobile, devices.mobile);
-var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 5;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  z-index: ", ";\n  min-width: ", ";\n\n  @media ", " {\n    grid-column: 3;\n    justify-content: flex-start;\n    min-width: unset;\n  }\n"])), zIndexes.sponsorship, function (_ref5) {
-  var buttonWidth = _ref5.buttonWidth;
-  return buttonWidth ? buttonWidth + "px" : 'auto';
-}, devices.mobile);
-
-var _templateObject$Q, _templateObject2$E, _templateObject3$t, _templateObject4$p;
-var VideoPlayButton$1 = /*#__PURE__*/styled__default.button(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 80px;\n  height: 80px;\n  background-color: var(--color-base-transparent);\n  border: none;\n  cursor: pointer;\n\n  @media ", " {\n    width: 60px;\n    height: 60px;\n  }\n"])), devices.mobile);
-var VideoControlsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])));
-var VideoControlsInnerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 20px;\n\n  @media ", " {\n    margin: 20px 4px;\n  }\n"])), devices.mobile);
-var LeftWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-
-var VideoControlsImpact = function VideoControlsImpact(_ref) {
-  var videoElementId = _ref.videoElementId,
-    _ref$loop = _ref.loop,
-    loop = _ref$loop === void 0 ? false : _ref$loop;
-  var _React$useState = React__default.useState(false),
-    playing = _React$useState[0],
-    setPlaying = _React$useState[1];
-  var getVideoElement = function getVideoElement() {
-    return document.querySelector("#" + videoElementId);
   };
-  React__default.useEffect(function () {
-    var video = getVideoElement();
-    if (video) {
-      video.loop = loop;
-    }
-  }, [loop]);
-  var handlePlay = React__default.useCallback(function () {
-    var video = getVideoElement();
-    if (!video) return;
-    if (playing) {
-      video.pause();
-      setPlaying(false);
+  var getTranslateX = function getTranslateX() {
+    var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
+      return acc + width;
+    }, 0);
+    return (slidesOffsetBefore || 0) - widthsBefore;
+  };
+  var getTranslateForIndex = function getTranslateForIndex(index) {
+    var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
+      return acc + width;
+    }, 0);
+    return (slidesOffsetBefore || 0) - widthsBefore;
+  };
+  var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
+    var delta = currentTranslate.current - getTranslateX();
+    var direction = delta > 0 ? -1 : 1;
+    var movedSlides = getMovedSlides(delta, slideWidths);
+    if (Math.abs(delta) > 20) {
+      movedSlides = Math.max(1, movedSlides);
+      var targetIndex = currentIndex + direction * movedSlides;
+      var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
+      if (!infinite) {
+        currentTranslate.current = getTranslateForIndex(finalIndex);
+        setDragTranslateX(null);
+      }
+      setTransitioning(true);
+      setCurrentIndex(finalIndex);
     } else {
-      video == null || video.play();
-      setPlaying(true);
+      setTransitioning(true);
+      setCurrentIndex(function (prev) {
+        return prev;
+      });
     }
-  }, [playing]);
-  return /*#__PURE__*/React__default.createElement(VideoControlsWrapper$1, {
-    className: "video-controls-container"
-  }, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper$1, null, /*#__PURE__*/React__default.createElement(LeftWrapper$1, null, /*#__PURE__*/React__default.createElement(VideoPlayButton$1, {
-    id: "play",
-    onClick: handlePlay,
-    className: "video-play-button",
-    "data-testid": "video-play-button",
-    "aria-label": !playing ? 'Play' : 'Pause'
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: !playing ? 'Play' : 'Pause',
-    color: "white"
-  })))));
-};
-
-var _excluded$i = ["text"];
-var CHAR_LIMIT = 100;
-var useResponsiveVideo = function useResponsiveVideo(video, poster) {
-  var mobileVideo = video.mobile || video.desktop;
-  var desktopVideo = video.desktop || video.mobile;
-  var mobilePoster = poster.mobile || poster.desktop;
-  var desktopPoster = poster.desktop || poster.mobile;
-  var _useState = React.useState(desktopPoster),
-    posterUrl = _useState[0],
-    setPoster = _useState[1];
-  var _useState2 = React.useState(desktopVideo),
-    videoUrl = _useState2[0],
-    setVideoUrl = _useState2[1];
-  var isMobile = useMobile();
-  React.useEffect(function () {
-    setPoster(isMobile ? mobilePoster : desktopPoster);
-    setVideoUrl(isMobile ? mobileVideo : desktopVideo);
-  }, [isMobile]);
-  return {
-    posterUrl: posterUrl,
-    videoUrl: videoUrl
+    setDragTranslateX(null);
   };
-};
-var VideoWithControls = function VideoWithControls(_ref) {
-  var video = _ref.video,
-    poster = _ref.poster;
-  var _useResponsiveVideo = useResponsiveVideo(video, poster),
-    posterUrl = _useResponsiveVideo.posterUrl,
-    videoUrl = _useResponsiveVideo.videoUrl;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
-    id: video.elementId,
-    width: "100%",
-    height: "100%",
-    poster: posterUrl,
-    src: videoUrl,
-    "data-testid": "impact-video",
-    playsInline: true
-  }, /*#__PURE__*/React__default.createElement("source", {
-    src: videoUrl
-  }), /*#__PURE__*/React__default.createElement("img", {
-    src: posterUrl,
-    alt: poster.alt,
-    "data-testid": "impact-image"
-  })), /*#__PURE__*/React__default.createElement(VideoControlsImpact, {
-    loop: true,
-    videoElementId: video.elementId
-  }));
-};
-var ImpactHeaderImage = function ImpactHeaderImage(_ref2) {
-  var mobile = _ref2.mobile,
-    desktop = _ref2.desktop,
-    alt = _ref2.alt;
-  return /*#__PURE__*/React__default.createElement("picture", {
-    "data-testid": "impact-picture"
-  }, mobile && /*#__PURE__*/React__default.createElement("source", {
-    srcSet: mobile,
-    media: "" + devices.mobile,
-    "data-testid": "impact-mobile-image-source"
-  }), /*#__PURE__*/React__default.createElement("source", {
-    srcSet: desktop,
-    media: "" + devices.desktop,
-    "data-testid": "impact-desktop-image-source"
-  }), /*#__PURE__*/React__default.createElement("img", {
-    src: desktop,
-    alt: alt,
-    "data-testid": "impact-image"
-  }));
-};
-var ImpactHeaderVideo = function ImpactHeaderVideo(_ref3) {
-  var video = _ref3.video,
-    poster = _ref3.poster;
-  if (!video.desktop && !video.mobile) {
-    return /*#__PURE__*/React__default.createElement(ImpactHeaderImage, Object.assign({}, poster));
-  }
-  return /*#__PURE__*/React__default.createElement(VideoWithControls, {
-    video: video,
-    poster: poster
-  });
-};
-var useElementWidth = function useElementWidth() {
-  var _React$useState = React__default.useState(undefined),
-    width = _React$useState[0],
-    setWidth = _React$useState[1];
-  var observerRef = React__default.useRef(null);
-  var ref = React__default.useCallback(function (node) {
-    if (observerRef.current) {
-      observerRef.current.disconnect();
-      observerRef.current = null;
-    }
-    if (!node) return;
-    observerRef.current = new ResizeObserver(function () {
-      setWidth(node.offsetWidth);
+  var canMoveNext = function canMoveNext() {
+    if (infinite) return true;
+    if (slideWidths.length === 0 || containerWidth === 0) return false;
+    var totalWidth = slideWidths.reduce(function (acc, w) {
+      return acc + w;
+    }, 0);
+    var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
+      return acc + w;
+    }, 0);
+    var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
+    var remainingToRight = totalWidth - widthsBefore - visibleSpace;
+    var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
+    var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
+    var nextIndex = lastVisibleIndex + 1;
+    if (nextIndex >= slideWidths.length) return false;
+    var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
+    if (nextSlideWidth === 0) return false;
+    var EPS = 1; // pixel tolerance
+    // full next slide fits
+    if (remainingToRight + EPS >= nextSlideWidth) return true;
+    return remainingToRight > 0;
+  };
+  var handleTransitionEnd = function handleTransitionEnd() {
+    setTransitioning(false);
+    if (!infinite) return;
+    if (currentIndex >= children.length + clonesCount) {
+      setCurrentIndex(clonesCount);
+    } else if (currentIndex < clonesCount) {
+      setCurrentIndex(children.length + currentIndex);
+    }
+  };
+  var goToPrev = function goToPrev() {
+    if (transitioning) return;
+    setIsActive();
+    setTransitioning(true);
+    setCurrentIndex(function (prev) {
+      var target = infinite ? prev - 1 : Math.max(0, prev - 1);
+      if (!infinite) {
+        currentTranslate.current = getTranslateForIndex(target);
+        setDragTranslateX(null);
+      }
+      return target;
     });
-    observerRef.current.observe(node);
-  }, []);
-  return [ref, width];
-};
-var PageHeadingImpact = function PageHeadingImpact(_ref4) {
-  var text = _ref4.text,
-    link = _ref4.link,
-    _ref4$sponsor = _ref4.sponsor,
-    sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
-    customSponsorImage = _ref4.customSponsorImage,
-    bgUrlDesktop = _ref4.bgUrlDesktop,
-    bgUrlDevice = _ref4.bgUrlDevice,
-    _ref4$bgImageAltText = _ref4.bgImageAltText,
-    bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
-    videoUrlDesktop = _ref4.videoUrlDesktop,
-    videoUrlMobile = _ref4.videoUrlMobile,
-    className = _ref4.className;
-  var _useViewport = useViewport(),
-    isMobile = _useViewport.isMobile,
-    hydrated = _useViewport.hydrated;
-  var _useElementWidth = useElementWidth(),
-    buttonRef = _useElementWidth[0],
-    buttonWidth = _useElementWidth[1];
-  var _useElementWidth2 = useElementWidth(),
-    sponsorRef = _useElementWidth2[0],
-    sponsorWidth = _useElementWidth2[1];
-  var truncatedText = text && text.length > CHAR_LIMIT ? text.slice(0, CHAR_LIMIT).trimEnd() + "\u2026" : text;
-  var _ref5 = link || {},
-    linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$i);
-  var video = {
-    elementId: 'impact-header-video',
-    desktop: videoUrlDesktop,
-    mobile: videoUrlMobile
   };
-  var poster = {
-    desktop: bgUrlDesktop,
-    mobile: bgUrlDevice,
-    alt: bgImageAltText
+  var goToNext = function goToNext() {
+    if (transitioning || !canMoveNext()) return;
+    setIsActive();
+    setTransitioning(true);
+    setCurrentIndex(function (prev) {
+      var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
+      if (!infinite) {
+        currentTranslate.current = getTranslateForIndex(target);
+        setDragTranslateX(null);
+      }
+      return target;
+    });
   };
-  var sponsorContent = sponsor ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
-    "data-testid": customSponsorImage ? 'impact-custom-sponsor' : undefined
-  }, customSponsorImage != null ? customSponsorImage : {}))) : null;
-  var hasButton = !isMobile && !!(link && linkText);
-  var showSideColumns = hasButton || !!sponsor;
-  var showTitleBar = !!(text || hasButton || sponsor);
-  var renderSponsor = function renderSponsor() {
-    if (isMobile) {
-      if (!sponsorContent) return null;
-      return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
-        "data-testid": "impact-sponsor"
-      }, sponsorContent);
-    }
-    if (!showSideColumns) return null;
-    return /*#__PURE__*/React__default.createElement(SponsorWrapper, {
-      ref: sponsorRef,
-      buttonWidth: buttonWidth,
-      "data-testid": "impact-sponsor"
-    }, sponsorContent);
+  React.useImperativeHandle(ref, function () {
+    return {
+      nextSlide: goToNext,
+      prevSlide: goToPrev,
+      hasOverflow: function hasOverflow() {
+        var totalWidth = slideWidths.reduce(function (acc, w) {
+          return acc + w;
+        }, 0);
+        var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
+        return totalWidth > Math.max(0, visibleSpace);
+      },
+      hasNext: function hasNext() {
+        return canMoveNext();
+      }
+    };
+  });
+  var handleTouchStart = function handleTouchStart(e) {
+    setIsActive();
+    startX.current = e.touches[0].clientX;
+    isDragging.current = true;
+    isClickPrevented.current = false;
+    setTransitioning(false);
   };
-  if (!hydrated) return null;
-  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
-    theme: exports.ThemeType.Cinema
-  }, showTitleBar ? (/*#__PURE__*/React__default.createElement(ImpactHeaderWrapper, {
-    className: className
-  }, /*#__PURE__*/React__default.createElement(ImpactTitleWrapper, {
-    "data-testid": "impact-title-wrapper",
-    sponsorPresent: !!sponsor,
-    hasButton: hasButton
-  }, !isMobile && showSideColumns ? (/*#__PURE__*/React__default.createElement(TitleButtonWrapper, {
-    sponsorWidth: sponsorWidth
-  }, hasButton ? (/*#__PURE__*/React__default.createElement(TitleButton, Object.assign({
-    ref: buttonRef
-  }, restLink, {
-    "data-testid": "impact-link"
-  }), linkText)) : null)) : null, text ? (/*#__PURE__*/React__default.createElement(ImpactTitle, {
-    size: "large",
-    color: "white",
-    hasColumns: !isMobile && showSideColumns
-  }, truncatedText)) : null, renderSponsor()))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderAssetWrapper, {
-    className: className
-  }, /*#__PURE__*/React__default.createElement(ImpactHeaderVideo, {
-    video: video,
-    poster: poster
-  }), isMobile && link && linkText ? (/*#__PURE__*/React__default.createElement(MobileButtonWrapper, null, /*#__PURE__*/React__default.createElement(TitleButton, Object.assign({}, restLink), linkText))) : null));
-};
-
-var _templateObject$R, _templateObject2$F, _templateObject3$u, _templateObject4$q, _templateObject5$k;
-var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
-  var color = _ref.color;
-  return "\n    background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n    color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n  ";
-}, devices.mobileAndTablet);
-var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0px 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
-  var hasImage = _ref2.hasImage;
-  return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
-}, devices.mobileAndTablet, function (_ref3) {
-  var hasImage = _ref3.hasImage;
-  return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
-});
-var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--base-color-black);\n\n  @media ", " {\n    grid-area: 2 / 1 / 3 / 15;\n  }\n"])), devices.mobileAndTablet);
-var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px;\n  max-height: 33vw;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
-var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
-
-var PageHeadingPanel = function PageHeadingPanel(_ref) {
-  var _image$src, _image$alt;
-  var info = _ref.info,
-    image = _ref.image,
-    color = _ref.color,
-    scrollTo = _ref.scrollTo;
-  var hasImage = !!image;
-  return /*#__PURE__*/React__default.createElement(PanelGrid, {
-    color: color,
-    "data-testid": "wrapper"
-  }, /*#__PURE__*/React__default.createElement(LeftPanel, {
-    hasImage: hasImage
-  }, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
-    "data-testid": "scroll-link"
-  }, /*#__PURE__*/React__default.createElement(TabLink, {
-    iconName: "Arrow",
-    iconDirection: "down",
-    href: scrollTo,
-    color: color === ThemeColor['base-white'] ? ThemeColor['base-black'] : ThemeColor['base-white'],
-    hoverColor: color === ThemeColor['base-white'] ? ThemeColor['base-black'] : ThemeColor['base-white']
-  }, "Scroll Down")))), hasImage && (/*#__PURE__*/React__default.createElement(RightPanel, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: exports.AspectRatio['4:3']
-  }, /*#__PURE__*/React__default.createElement("img", {
-    src: (_image$src = image == null ? void 0 : image.src) != null ? _image$src : '',
-    alt: (_image$alt = image == null ? void 0 : image.alt) != null ? _image$alt : ''
-  })))));
-};
-
-var _templateObject$S, _templateObject2$G, _templateObject3$v, _templateObject4$r, _templateObject5$l, _templateObject6$e, _templateObject7$a, _templateObject8$6, _templateObject9$3, _templateObject0$3, _templateObject1$2;
-var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  picture,\n  img {\n    width: 100%;\n    height: 100%;\n  }\n"])));
-var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
-var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: var(--grid-outer-margin);\n  bottom: 20px;\n  z-index: 10;\n\n  @media ", " {\n    right: var(--grid-margin);\n    bottom: 10px;\n  }\n"])), devices.tablet);
-var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--heading-promo-bg-color);\n  border-bottom: ", ";\n  display: ", ";\n\n  @media ", " {\n    padding: 12px 0 20px;\n  }\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
-}, function (_ref2) {
-  var showBlock = _ref2.showBlock;
-  return showBlock ? 'block' : 'none';
-}, devices.mobile);
-var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    height: 32px;\n  }\n\n  @media ", " {\n    margin-bottom: 12px;\n  }\n"])), devices.mobile);
-var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  width: 200px;\n\n  @media ", " {\n    order: ", ";\n    width: 100%;\n    justify-content: center;\n  }\n"])), devices.mobile, function (_ref3) {
-  var isBadgePresent = _ref3.isBadgePresent;
-  return isBadgePresent ? '1' : '4';
-});
-var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: end;\n  width: 200px;\n\n  @media ", " {\n    margin-bottom: ", ";\n    width: 100%;\n    order: 3;\n  }\n"])), devices.mobile, function (_ref4) {
-  var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
-  return isAdditionalButtonPresent ? '20px' : '0';
-});
-var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"])), devices.mobile);
-var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 10px 0;\n\n  h1,\n  h2,\n  h3 {\n    color: ", ";\n  }\n\n  @media ", " {\n    padding: 0;\n    order: 2;\n    margin-bottom: ", ";\n  }\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return theme == exports.ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
-}, devices.mobile, function (_ref6) {
-  var isButtonPresent = _ref6.isButtonPresent;
-  return isButtonPresent ? '20px' : '0';
-});
-var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media ", " {\n    min-height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
-
-var PageHeadingPromoBadge;
-(function (PageHeadingPromoBadge) {
-  PageHeadingPromoBadge["Stream"] = "Stream";
-  PageHeadingPromoBadge["Cinema"] = "Cinema";
-})(PageHeadingPromoBadge || (PageHeadingPromoBadge = {}));
-
-var Badge = function Badge(_ref) {
-  var isMobile = _ref.isMobile,
-    theme = _ref.theme,
-    badge = _ref.badge;
-  if (!badge) return null;
-  var color = theme === exports.ThemeType.Cinema ? exports.Colors.Black : exports.Colors.White;
-  var alignment = isMobile ? 'center' : 'left';
-  return /*#__PURE__*/React__default.createElement(BadgeWrapper$2, {
-    "data-testid": "promo-heading-badge"
-  }, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
-    fillColor: color,
-    align: alignment
-  })) : (/*#__PURE__*/React__default.createElement(StreamBadge, {
-    fillColor: color,
-    align: alignment
+  var handleTouchMove = function handleTouchMove(e) {
+    if (!isDragging.current) return;
+    var deltaX = e.touches[0].clientX - startX.current;
+    if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
+      isClickPrevented.current = true;
+    }
+    var visualOffset = getTranslateX() + deltaX;
+    currentTranslate.current = visualOffset;
+    setDragTranslateX(visualOffset);
+  };
+  var handleTouchEnd = function handleTouchEnd() {
+    isDragging.current = false;
+    if (isClickPrevented.current) {
+      navigateOnSwipeEnd();
+    } else {
+      setDragTranslateX(null);
+    }
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (!isDragging.current || !isMouseDown.current || transitioning) return;
+    var deltaX = e.clientX - startX.current;
+    if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
+      isClickPrevented.current = true;
+    }
+    var visualOffset = getTranslateX() + deltaX;
+    currentTranslate.current = visualOffset;
+    setDragTranslateX(visualOffset);
+  };
+  var _handleMouseUp = function handleMouseUp() {
+    if (!isMouseDown.current) return;
+    isMouseDown.current = false;
+    isDragging.current = false;
+    if (isClickPrevented.current) {
+      navigateOnSwipeEnd();
+    } else {
+      setDragTranslateX(null);
+    }
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', _handleMouseUp);
+  };
+  var handleMouseDown = function handleMouseDown(e) {
+    if (transitioning || e.button !== 0) return;
+    e.preventDefault();
+    setIsActive();
+    startX.current = e.clientX;
+    isDragging.current = true;
+    isMouseDown.current = true;
+    isClickPrevented.current = false;
+    setTransitioning(false);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', _handleMouseUp);
+  };
+  var onSlideFocus = function onSlideFocus(isVisible, index) {
+    if (!isVisible) {
+      setCurrentIndex(index);
+    }
+  };
+  var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
+  return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
+    ref: containerRef,
+    className: "swipe",
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+    onMouseDown: handleMouseDown,
+    "aria-roledescription": "carousel",
+    role: "list"
+  }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
+    className: "swipe-track-wrapper",
+    translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
+    transitioning: transitioning && dragTranslateX === null,
+    onTransitionEnd: handleTransitionEnd
+  }, slides.map(function (child, index) {
+    var isVisible = visibleIndexes.includes(index);
+    var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
+      className: SWIPE_SLIDE_CLASS_NAME,
+      "aria-hidden": slidesAriaHidden || isClone,
+      "aria-roledescription": "slide",
+      role: "listitem",
+      ref: function ref(el) {
+        childRefs.current[index] = el;
+        disableTabbingInside(el, isClone);
+      },
+      onFocus: function onFocus() {
+        return onSlideFocus(isVisible, index);
+      }
+    }, child);
   })));
-};
+});
+Swipe.displayName = 'Swipe';
 
-var StyledPrimaryButton = function StyledPrimaryButton(_ref) {
-  var link = _ref.link,
-    theme = _ref.theme;
-  var text = link.text;
-  if (theme === exports.ThemeType.Cinema) {
-    return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
-      textColor: ThemeColor['base-white'],
-      backgroundColor: ThemeColor['base-black'],
-      hoveredColor: ThemeColor['rbo-black-hovered'],
-      pressedColor: ThemeColor['rbo-black-pressed']
-    }), text);
-  }
-  return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
-    textColor: ThemeColor['base-black'],
-    backgroundColor: ThemeColor['base-white'],
-    hoveredColor: ThemeColor['white-hovered'],
-    pressedColor: ThemeColor['white-pressed']
-  }), text);
-};
-var Button$1 = function Button(_ref2) {
-  var link = _ref2.link,
-    theme = _ref2.theme,
-    isMobile = _ref2.isMobile;
-  var text = link.text;
-  if (isMobile) {
-    return /*#__PURE__*/React__default.createElement(StyledPrimaryButton, {
-      theme: theme,
-      link: link
+var _excluded$i = ["name", "image", "onClick"];
+var CastFilters = function CastFilters(_ref) {
+  var cast = _ref.cast,
+    headingText = _ref.headingText,
+    ctaText = _ref.ctaText,
+    textLinkText = _ref.textLinkText,
+    emptySelectionText = _ref.emptySelectionText,
+    placeholderImage = _ref.placeholderImage,
+    listRoleDescription = _ref.listRoleDescription,
+    className = _ref.className,
+    onSelect = _ref.onSelect,
+    onApply = _ref.onApply,
+    onClear = _ref.onClear,
+    _ref$selectedIndices = _ref.selectedIndices,
+    selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile;
+  var castWrapperRef = React.useRef(null);
+  var isDraggingRef = React.useRef(false);
+  var startXRef = React.useRef(0);
+  var scrollStartRef = React.useRef(0);
+  var hasDraggedRef = React.useRef(false);
+  var swipeRef = React.useRef(null);
+  var _useState = React.useState(false),
+    availablePrev = _useState[0],
+    setAvailablePrev = _useState[1];
+  var _useState2 = React.useState(cast.length > 1),
+    availableNext = _useState2[0],
+    setAvailableNext = _useState2[1];
+  var _useState3 = React.useState(true),
+    showRotatorButtons = _useState3[0],
+    setShowRotatorButtons = _useState3[1];
+  var onIndexChangeHandler = function onIndexChangeHandler(index) {
+    setAvailablePrev(index > 0);
+    setAvailableNext(function () {
+      var _swipeRef$current$has, _swipeRef$current;
+      return (_swipeRef$current$has = (_swipeRef$current = swipeRef.current) == null ? void 0 : _swipeRef$current.hasNext()) != null ? _swipeRef$current$has : index < Math.max(0, cast.length - 1);
     });
-  }
-  var buttonColor = theme === exports.ThemeType.Cinema ? ThemeColor['base-black'] : ThemeColor['base-white'];
-  if (link.isTextLink) {
-    return /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, link, {
-      color: buttonColor,
-      iconName: undefined
-    }), text);
-  }
-  return /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, link, {
-    textColor: buttonColor,
-    borderColor: buttonColor,
-    hoveredColor: buttonColor,
-    pressedColor: buttonColor
-  }), text);
+  };
+  React.useEffect(function () {
+    setAvailablePrev(false);
+    setAvailableNext(function () {
+      var _swipeRef$current$has2, _swipeRef$current2;
+      return (_swipeRef$current$has2 = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext()) != null ? _swipeRef$current$has2 : cast.length > 1;
+    });
+  }, [cast.length]);
+  var handleOverflowChange = function handleOverflowChange(overflow) {
+    var _swipeRef$current3;
+    setShowRotatorButtons(overflow);
+    var hasNext = (_swipeRef$current3 = swipeRef.current) == null ? void 0 : _swipeRef$current3.hasNext();
+    if (typeof hasNext === 'boolean') {
+      setAvailableNext(hasNext);
+    } else {
+      setAvailableNext(overflow);
+    }
+  };
+  var onNext = function onNext() {
+    var _swipeRef$current4;
+    return (_swipeRef$current4 = swipeRef.current) == null ? void 0 : _swipeRef$current4.nextSlide();
+  };
+  var onPrev = function onPrev() {
+    var _swipeRef$current5;
+    return (_swipeRef$current5 = swipeRef.current) == null ? void 0 : _swipeRef$current5.prevSlide();
+  };
+  React.useEffect(function () {
+    var el = castWrapperRef.current;
+    if (!el) return undefined;
+    var handleKeydown = function handleKeydown(e) {
+      if (!el.contains(document.activeElement)) return;
+      if (e.key === 'ArrowRight') {
+        var _swipeRef$current6;
+        e.preventDefault();
+        (_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.nextSlide();
+      } else if (e.key === 'ArrowLeft') {
+        var _swipeRef$current7;
+        e.preventDefault();
+        (_swipeRef$current7 = swipeRef.current) == null || _swipeRef$current7.prevSlide();
+      }
+    };
+    el.addEventListener('keydown', handleKeydown);
+    return function () {
+      return el.removeEventListener('keydown', handleKeydown);
+    };
+  }, []);
+  var handleMouseDown = React.useCallback(function (e) {
+    if (!castWrapperRef.current) return;
+    isDraggingRef.current = true;
+    hasDraggedRef.current = false;
+    startXRef.current = e.clientX;
+    scrollStartRef.current = castWrapperRef.current.scrollLeft;
+    if (e.target === castWrapperRef.current) e.preventDefault();
+  }, []);
+  var handleMouseMove = React.useCallback(function (e) {
+    if (!isDraggingRef.current || !castWrapperRef.current) return;
+    var deltaX = e.clientX - startXRef.current;
+    var threshold = 5;
+    if (Math.abs(deltaX) > threshold) {
+      hasDraggedRef.current = true;
+      e.preventDefault();
+      castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
+    }
+  }, []);
+  var handleMouseUp = React.useCallback(function () {
+    isDraggingRef.current = false;
+    setTimeout(function () {
+      hasDraggedRef.current = false;
+    }, 0);
+  }, []);
+  var handleMouseLeave = React.useCallback(function () {
+    isDraggingRef.current = false;
+    hasDraggedRef.current = false;
+  }, []);
+  var handleClick = React__default.useCallback(function (index, onClick) {
+    if (hasDraggedRef.current) return;
+    if (onSelect) onSelect(index);
+    if (onClick) onClick();
+  }, [onSelect]);
+  var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
+    if (e.key === 'Enter') {
+      handleClick(index, onClick);
+    }
+  }, [handleClick]);
+  var handleClearKeydown = React__default.useCallback(function (e) {
+    if (e.key === 'Enter' && onClear) {
+      onClear();
+    }
+  }, [onClear]);
+  var showActionButtonsSection = onApply || onClear || emptySelectionText;
+  var getPersonCards = function getPersonCards() {
+    return cast.map(function (person, index) {
+      var name = person.name,
+        image = person.image,
+        _onClick = person.onClick,
+        rest = _objectWithoutPropertiesLoose(person, _excluded$i);
+      var isSelected = selectedIndices.includes(index);
+      var personImage = image || placeholderImage || defaultPlaceholderImage;
+      return /*#__PURE__*/React__default.createElement(PersonWrapper, {
+        key: index,
+        "aria-selected": isSelected,
+        role: "option",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return handlePersonKeydown(e, index, _onClick);
+        }
+      }, /*#__PURE__*/React__default.createElement(PersonToggle, Object.assign({
+        isSelected: isSelected,
+        onClick: function onClick() {
+          return handleClick(index, _onClick);
+        }
+      }, rest), /*#__PURE__*/React__default.createElement(PersonImage, {
+        src: personImage,
+        alt: image ? name : "Placeholder image for " + name,
+        draggable: false,
+        isDefaultPlaceholder: !(!!image || !!placeholderImage)
+      }), /*#__PURE__*/React__default.createElement(Decal, {
+        isSelected: isSelected
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        iconName: "Confirm",
+        color: "white"
+      }))), /*#__PURE__*/React__default.createElement(PersonName, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+        size: "medium"
+      }, name)));
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, headingText && (/*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 1,
+    columnSpanDesktop: 10,
+    columnStartDevice: 1,
+    columnSpanDevice: 9
+  }, /*#__PURE__*/React__default.createElement(HeadingTextWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
+  }, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
+    columnStartDesktop: 16,
+    columnSpanDesktop: 2
+  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    size: "small",
+    onClickNext: onNext,
+    onClickPrev: onPrev,
+    availablePrev: availablePrev,
+    availableNext: availableNext
+  })))), /*#__PURE__*/React__default.createElement(CastWrapper, {
+    ref: castWrapperRef,
+    role: "listbox",
+    "aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
+    "aria-label": "filter list",
+    "aria-multiselectable": true,
+    onMouseDown: handleMouseDown,
+    onMouseMove: handleMouseMove,
+    onMouseUp: handleMouseUp,
+    onMouseLeave: handleMouseLeave
+  }, isMobile ? getPersonCards() : (/*#__PURE__*/React__default.createElement(Swipe, {
+    onIndexChange: onIndexChangeHandler,
+    "data-testid": "cast-filter-swipe",
+    ref: swipeRef,
+    onOverflowChange: handleOverflowChange
+  }, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "medium",
+    className: "mobile-only"
+  }, emptySelectionText)), selectedIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, onApply && /*#__PURE__*/React__default.createElement(PrimaryButton, {
+    onClick: function onClick() {
+      return onApply(selectedIndices);
+    }
+  }, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
+    tabIndex: 0,
+    role: "button",
+    onClick: onClear,
+    onKeyDown: handleClearKeydown
+  }, textLinkText != null ? textLinkText : 'Clear')))))));
 };
 
-var Image = function Image(_ref) {
-  var desktop = _ref.desktop,
-    mobile = _ref.mobile,
-    alt = _ref.alt,
-    isMobile = _ref.isMobile;
-  return /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: isMobile ? exports.AspectRatio['75:32'] : exports.AspectRatio['90:17']
-  }, /*#__PURE__*/React__default.createElement("picture", {
-    "data-testid": "promo-heading-picture"
-  }, /*#__PURE__*/React__default.createElement("source", {
-    srcSet: mobile,
-    media: "(max-width: 768px)"
-  }), /*#__PURE__*/React__default.createElement("source", {
-    srcSet: desktop,
-    media: "(min-width: 769px)"
-  }), /*#__PURE__*/React__default.createElement("img", {
-    src: desktop,
-    alt: alt,
-    "data-testid": "promo-heading-image"
-  })));
-};
+var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
+var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobileAndTablet);
+var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), devices.mobileAndTablet);
+var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 4px;\n"])));
+var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: baseline;\n  gap: 3px;\n"])));
+var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
+var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  a {\n    font-family: var(--font-family-sans);\n    font-weight: 400;\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n    color: var(--color-base-black);\n    text-decoration: underline;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n    margin-right: 13px;\n    display: inline-block;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    @media ", " {\n      font-size: 17px;\n      line-height: 24px;\n    }\n  }\n"])), devices.mobile);
 
-var TITLE_MAX_LENGTH = 40;
-var PageHeadingPromo = function PageHeadingPromo(_ref) {
-  var _ref$sponsor = _ref.sponsor,
-    sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
-    badge = _ref.badge,
-    mainLink = _ref.mainLink,
-    title = _ref.title,
-    titleSemanticLevel = _ref.titleSemanticLevel,
-    additionalLink = _ref.additionalLink,
-    image = _ref.image,
+var ContactCard = function ContactCard(_ref) {
+  var title = _ref.title,
+    titleSuffix = _ref.titleSuffix,
+    description = _ref.description,
+    email = _ref.email,
+    phone = _ref.phone,
+    website = _ref.website,
+    address = _ref.address,
     className = _ref.className;
-  var _useViewport = useViewport(),
-    isMobile = _useViewport.isMobile,
-    hydrated = _useViewport.hydrated;
-  var theme = useHarmonicTheme();
-  var showImageButton = !title && !badge && !additionalLink && !isMobile;
-  var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
-  var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
-  if (!hydrated) return null;
-  return /*#__PURE__*/React__default.createElement(Wrapper$3, {
+  var hasDetails = email || phone || website;
+  var addressString = address == null ? void 0 : address.substring(0, 110);
+  var descriptionText = description == null ? void 0 : description.substring(0, 110);
+  return /*#__PURE__*/React__default.createElement("div", {
     className: className
-  }, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
-    "data-testid": "promo-heading-sponsor"
-  }, /*#__PURE__*/React__default.createElement(Sponsorship, null))), /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(Image, {
-    mobile: image.mobile,
-    desktop: image.desktop,
-    alt: image.alt,
-    isMobile: isMobile
-  }), showImageButton && mainLink && (/*#__PURE__*/React__default.createElement(ImageButtonWrapper, {
-    "data-testid": "promo-heading-image-button"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, mainLink, {
-    textColor: ThemeColor['base-black'],
-    backgroundColor: ThemeColor['base-white'],
-    hoveredColor: ThemeColor['white-hovered'],
-    pressedColor: ThemeColor['white-pressed']
-  }), mainLink.text)))), /*#__PURE__*/React__default.createElement(ContentSection, {
-    theme: theme,
-    showBlock: showContentBlock
   }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 2,
-    columnSpanDesktop: 14,
-    columnStartDevice: 2,
-    columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(ContentWrapper$1, {
-    theme: theme
-  }, !isMobile && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
-    isBadgePresent: !!badge
-  }, /*#__PURE__*/React__default.createElement(Badge, {
-    theme: theme,
-    badge: badge,
-    isMobile: isMobile
-  }), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
-    theme: theme,
-    link: additionalLink
-  }))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
-    theme: theme,
-    isButtonPresent: !!mainLink || !!additionalLink
-  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
+    columnStartDesktop: 3,
+    columnSpanDesktop: 12,
+    columnStartDevice: 1,
+    columnSpanDevice: 14
+  }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
+    "data-testid": "contact-card-wrapper"
+  }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
     size: "large"
-  }, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
-    isAdditionalButtonPresent: !!additionalLink && !badge
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    theme: theme,
-    link: mainLink,
-    isMobile: isMobile
-  }))))), isMobile && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, badge && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
-    isBadgePresent: !!badge
-  }, /*#__PURE__*/React__default.createElement(Badge, {
-    theme: theme,
-    badge: badge,
-    isMobile: isMobile
-  }))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
-    theme: theme,
-    isButtonPresent: !!mainLink || !!additionalLink
-  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
+  }, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "small"
+  }, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    size: "small"
+  }, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
     size: "large"
-  }, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
-    isAdditionalButtonPresent: !!additionalLink && !badge
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    theme: theme,
-    link: mainLink,
-    isMobile: isMobile
-  }))), !badge && additionalLink && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
-    isBadgePresent: !!badge
-  }, /*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
-    theme: theme,
-    link: additionalLink
-  })))))))))));
+  }, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
+    "data-testid": "contact-card-details-block"
+  }, email && (/*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: "mailto:" + email
+  }, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: "tel:" + phone
+  }, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: website,
+    target: "_blank",
+    rel: "noreferrer"
+  }, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
+    "data-testid": "contact-card-address-block"
+  }, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
+  }, addressString)))))))));
 };
 
-var _templateObject$T, _templateObject2$H, _templateObject3$w, _templateObject4$s;
-var GRID = {
-  desktop: {
-    leftWithImage: '1 / 1 / 3 / 7',
-    leftNoImage: '1 / 1 / 3 / 12',
-    right: '1 / 7 / 3 / 17'
-  },
-  mobile: {
-    leftWithImage: '3 / 1 / 4 / 15',
-    leftNoImage: '1 / 1 / 3 / 15',
-    right: '2 / 1 / 3 / 15'
-  }
-};
-var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  background-color: ", ";\n  color: var(--color-base-white);\n"])), function (_ref) {
-  var $background = _ref.$background;
-  return "var(--color-" + $background + ")";
-});
-var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
-  var hasImage = _ref2.hasImage;
-  return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
-}, devices.mobileAndTablet, function (_ref3) {
-  var hasImage = _ref3.hasImage;
-  return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
+var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$c;
+var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 36px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
+  return props.clickable ? 'pointer' : 'default';
+}, devices.mobile);
+var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
+var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  gap: 20px;\n\n  & * {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  @media ", " {\n    margin: 0 20px;\n  }\n\n  & .content-summary-text-link {\n    height: unset;\n  }\n"])), function (props) {
+  return props.showImage ? 2 : '1 / span 4';
+}, devices.mobile);
+var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n"])));
+var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & p:not(:last-child):after {\n    content: '\\A\\A';\n    white-space: pre;\n  }\n\n  ", "\n"], ["\n  & p:not(:last-child):after {\n    content: '\\\\A\\\\A';\n    white-space: pre;\n  }\n\n  ", "\n"])), function (props) {
+  return !!props.truncate && "\n    overflow: hidden;\n    position: relative;\n    display: -webkit-box;\n    -webkit-line-clamp: " + props.truncate + ";\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    min-height: 1em;\n    max-height: 3em;\n  ";
 });
-var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--color-base-black);\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
-var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px 36px 36px 50px;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px 5px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
 
-var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
-  var _image$src, _image$alt;
-  var image = _ref.image,
-    children = _ref.children,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? 'base-black' : _ref$background,
+/* eslint-disable no-shadow */
+(function (CarouselType) {
+  CarouselType["Image"] = "image";
+  CarouselType["SmallCard"] = "SmallCard";
+  CarouselType["LargeCard"] = "LargeCard";
+  CarouselType["PersonCard"] = "PersonCard";
+})(exports.CarouselType || (exports.CarouselType = {}));
+
+var clickHandler = function clickHandler(link) {
+  if (link != null && link.href && document) {
+    document.location.href = link.href;
+  }
+};
+var ContentSummary = function ContentSummary(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    bodyText = _ref.bodyText,
+    link = _ref.link,
+    image = _ref.image,
+    _ref$largeTitle = _ref.largeTitle,
+    largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
+    _ref$showImage = _ref.showImage,
+    showImage = _ref$showImage === void 0 ? false : _ref$showImage,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
+    _ref$fullyClickable = _ref.fullyClickable,
+    fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
+    _ref$headerSemanticLe = _ref.headerSemanticLevel,
+    headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
     className = _ref.className;
-  return /*#__PURE__*/React__default.createElement(HighlightPanelGrid, {
+  return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
     className: className,
-    "$background": background,
-    "data-testid": "highlight-heading-wrapper"
-  }, /*#__PURE__*/React__default.createElement(LeftPanel$1, {
-    hasImage: !!image
-  }, /*#__PURE__*/React__default.createElement(Wrapper$4, null, children)), image && (/*#__PURE__*/React__default.createElement(RightPanel$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    onClick: function onClick() {
+      if (fullyClickable) {
+        clickHandler(link);
+      }
+    },
+    clickable: fullyClickable,
+    "data-roh": "content-summary-item"
+  }, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
+    "data-testid": "image-wrapper"
+  }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
+    href: link.href
+  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
-    src: (_image$src = image == null ? void 0 : image.src) != null ? _image$src : '',
-    alt: (_image$alt = image == null ? void 0 : image.alt) != null ? _image$alt : ''
-  })))));
+    src: image.src,
+    alt: image.alt
+  })))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: exports.AspectRatio['4:3']
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: image.src,
+    alt: image.alt
+  }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
+    showImage: showImage
+  }, title && (/*#__PURE__*/React__default.createElement("div", {
+    "data-testid": largeTitle ? 'large-title' : 'default-title'
+  }, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    size: "large",
+    hierarchy: headerSemanticLevel
+  }, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    size: "medium",
+    hierarchy: headerSemanticLevel
+  }, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
+    size: "large"
+  }, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
+    truncate: truncate,
+    dangerouslySetInnerHTML: {
+      __html: bodyText
+    },
+    "data-testid": "body-text"
+  })))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
+    className: "content-summary-text-link"
+  }), link.text))));
 };
 
-var _templateObject$U, _templateObject2$I, _templateObject3$x, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4;
-var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
-var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
-var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
-var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
-var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
-  var invert = _ref.invert,
-    theme = _ref.theme;
-  return invert ? theme.colors.white : theme.colors.primary;
-}, function (_ref2) {
-  var invert = _ref2.invert,
-    theme = _ref2.theme;
-  return invert ? theme.colors.black : theme.colors.white;
-}, function (_ref3) {
-  var invert = _ref3.invert,
-    theme = _ref3.theme;
-  return invert ? theme.colors.black : theme.colors.white;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colors.primary === theme.colors.stream && "\n      color: " + theme.colors.stream + ";\n      background-color: " + theme.colors.white + ";\n    ";
-}, devices.tablet, devices.mobile);
-var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  padding-left: 50px;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n  @media ", " {\n    width: fit-content;\n  }\n"])), devices.mobile, devices.tablet);
-var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  text-align: center;\n  padding: 0 2em;\n  @media ", " {\n    justify-content: center;\n  }\n"])), devices.mobile);
-var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  padding-right: 50px;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobile);
-var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$4 || (_templateObject0$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
-  var invert = _ref5.invert,
+var _templateObject$N, _templateObject2$B, _templateObject3$p, _templateObject4$m, _templateObject5$i;
+var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-column-gap);\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content 24px min-content;\n      grid-template-areas:\n        'row1'\n        '.'\n        'row2';\n    }\n  }\n"])), function (_ref) {
+  var imageToLeft = _ref.imageToLeft;
+  return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
+}, devices.mobile);
+var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-self: center;\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
+  var imageToLeft = _ref2.imageToLeft;
+  return imageToLeft ? 'left' : 'right';
+}, devices.mobile);
+var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref3) {
+  var imageToLeft = _ref3.imageToLeft;
+  return imageToLeft ? 'right' : 'left';
+}, devices.mobile);
+var EditorialSubtitle = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var EditorialText = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
+
+var Editorial = function Editorial(_ref) {
+  var _ref$imagePosition = _ref.imagePosition,
+    imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
+    subtitle = _ref.subtitle,
+    text = _ref.text,
+    children = _ref.children,
+    className = _ref.className;
+  var imageToLeft = imagePosition === 'left';
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    className: className,
+    "data-testid": "editorial-component"
+  }, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 3,
+    columnSpanDesktop: 12,
+    columnStartDevice: 2,
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(EditorialGrid, {
+    imageToLeft: imageToLeft
+  }, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
+    "data-testid": "image-wrapper",
+    imageToLeft: imageToLeft
+  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: exports.AspectRatio['1:1']
+  }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
+    "data-testid": "text-wrapper",
+    imageToLeft: imageToLeft
+  }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
+    tag: "span"
+  }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
+    tag: "div",
+    size: "large",
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  })))));
+};
+
+var _templateObject$O, _templateObject2$C, _templateObject3$q;
+var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: scroll;\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  min-width: 400px;\n  justify-content: space-between;\n  gap: 16px;\n  font-family: var(--font-family-sans);\n\n  @media ", " {\n    gap: 10px;\n  }\n"])), devices.mobile);
+var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-base-black);\n  min-width: fit-content;\n\n  :hover {\n    color: var(--color-base-white);\n  }\n"])));
+
+var _excluded$j = ["text", "onClick"];
+var HotFilters = function HotFilters(_ref) {
+  var items = _ref.items,
+    className = _ref.className,
+    _ref$selectedIndex = _ref.selectedIndex,
+    selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex,
+    onSelect = _ref.onSelect;
+  var handleClick = React__default.useCallback(function (index, onClick) {
+    if (onSelect) onSelect(index);
+    if (onClick) onClick();
+  }, [onSelect]);
+  return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
+    var text = item.text,
+      _onClick = item.onClick,
+      rest = _objectWithoutPropertiesLoose(item, _excluded$j);
+    var isSelected = index === selectedIndex;
+    return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
+      key: index,
+      onClick: function onClick() {
+        return handleClick(index, _onClick);
+      },
+      iconName: isSelected ? 'Confirm' : undefined,
+      backgroundColor: isSelected ? 'base-black' : 'base-white',
+      textColor: isSelected ? 'base-white' : 'base-black',
+      hoveredColor: "base-black",
+      pressedColor: "black-pressed",
+      "aria-pressed": isSelected
+    }, rest), text);
+  })));
+};
+
+var InformationCtaVariants = {
+  Primary: 'Primary',
+  Secondary: 'Secondary',
+  Tertiary: 'Tertiary',
+  TextLink: 'TextLink'
+};
+
+var COLORS$4 = {
+  "default": 'var(--information-panel-button-color)',
+  background: 'var(--information-panel-button-bg-color)',
+  hover: 'var(--information-panel-button-hover-color)',
+  pressed: 'var(--information-panel-button-pressed-color)'
+};
+var getTextColor$4 = function getTextColor(variant, theme, colorValue) {
+  if (theme === exports.ThemeType.Cinema && (variant === InformationCtaVariants.Tertiary || variant === InformationCtaVariants.TextLink)) {
+    return 'var(--color-primary-black)';
+  }
+  if (variant === InformationCtaVariants.Primary) {
+    return COLORS$4["default"];
+  }
+  return colorValue;
+};
+var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
+  return variant === InformationCtaVariants.Primary || variant === undefined ? "background-color: " + colorValue + ";" : '';
+};
+var getBorderColor$1 = function getBorderColor(variant, colorValue) {
+  return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
+};
+
+var _templateObject$P, _templateObject2$D, _templateObject3$r, _templateObject4$n;
+var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: var(--information-panel-color);\n  background-color: var(--information-panel-bg-color);\n\n  @media ", " {\n    padding: 40px 0;\n  }\n"])), devices.mobile);
+var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
+var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 16px;\n  }\n\n  a {\n    color: ", ";\n    ", "\n    ", "\n\n    svg path {\n      fill: ", ";\n    }\n\n    :hover:not(:active) {\n      color: ", ";\n      ", "\n      ", "\n\n      svg path {\n        fill: ", ";\n      }\n    }\n\n    :active {\n      color: ", ";\n      ", "\n      ", "\n\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n"])), devices.mobile, function (_ref) {
+  var variant = _ref.variant,
+    theme = _ref.theme;
+  return getTextColor$4(variant, theme, COLORS$4.background);
+}, function (_ref2) {
+  var variant = _ref2.variant;
+  return getBackgroundColor$2(variant, COLORS$4.background);
+}, function (_ref3) {
+  var variant = _ref3.variant;
+  return getBorderColor$1(variant, COLORS$4.background);
+}, function (_ref4) {
+  var variant = _ref4.variant,
+    theme = _ref4.theme;
+  return getTextColor$4(variant, theme, COLORS$4.background);
+}, function (_ref5) {
+  var variant = _ref5.variant,
     theme = _ref5.theme;
-  return invert ? theme.colors.primary : theme.colors.white;
+  return getTextColor$4(variant, theme, COLORS$4.hover);
 }, function (_ref6) {
-  var invert = _ref6.invert,
-    theme = _ref6.theme;
-  return invert ? theme.colors.white : theme.colors.black;
+  var variant = _ref6.variant;
+  return getBackgroundColor$2(variant, COLORS$4.hover);
 }, function (_ref7) {
-  var invert = _ref7.invert,
-    theme = _ref7.theme;
-  return invert ? theme.colors.white : theme.colors.black;
+  var variant = _ref7.variant;
+  return getBorderColor$1(variant, COLORS$4.hover);
 }, function (_ref8) {
-  var invert = _ref8.invert,
+  var variant = _ref8.variant,
     theme = _ref8.theme;
-  return invert ? theme.colors.white : theme.colors.black;
+  return getTextColor$4(variant, theme, COLORS$4.hover);
+}, function (_ref9) {
+  var variant = _ref9.variant,
+    theme = _ref9.theme;
+  return getTextColor$4(variant, theme, COLORS$4.pressed);
+}, function (_ref0) {
+  var variant = _ref0.variant;
+  return getBackgroundColor$2(variant, COLORS$4.pressed);
+}, function (_ref1) {
+  var variant = _ref1.variant;
+  return getBorderColor$1(variant, COLORS$4.pressed);
+}, function (_ref10) {
+  var variant = _ref10.variant,
+    theme = _ref10.theme;
+  return getTextColor$4(variant, theme, COLORS$4.pressed);
 });
+var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--information-panel-color);\n\n  a {\n    text-decoration: underline;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n    color: var(--information-panel-color);\n  }\n\n  @media ", " {\n    padding-top: 4px;\n  }\n"])), devices.mobile);
 
-// Function to check if a URL is from the same site
-// NOTE: This function is not SSR compatible
-var isSameSiteUrl = function isSameSiteUrl(url) {
-  var _window;
-  if (url[0] === '/') return true; // URL is relative (e.g. /about)
-  if (!((_window = window) != null && _window.location)) return false; // window.location is not available (e.g. in SSR)
-  var currentPageURL = window.location.href || '';
-  var regexPattern = /^(https?:\/\/)?(www\d?\.)?([\w.-]+)\.\w+.*$/;
-  var match = url.match(regexPattern);
-  if (match != null && match[3] && currentPageURL) {
-    var urlDomain = match[3]; // Extract the domain from the third capture group
-    var currentMatch = currentPageURL.match(regexPattern);
-    if (currentMatch) {
-      var currentDomain = currentMatch[3];
-      return urlDomain === currentDomain;
-    }
-  }
-  return false; // URL didn't match the pattern
-};
-// Hook to check if a URL is from the same site - use for SSR
-var useSameSiteUrl = function useSameSiteUrl(url) {
-  var _useState = React.useState(false),
-    hasSameSiteUrl = _useState[0],
-    setSameSiteUrl = _useState[1];
-  React.useEffect(function () {
-    setSameSiteUrl(isSameSiteUrl(url));
-  }, [url]);
-  return hasSameSiteUrl;
-};
+var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
 
-var renderBranding = function renderBranding(brandingStyle, invert, brandingText, brandingLink) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
-  var target = sameSiteUrl ? '_self' : '_blank';
-  var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
-  switch (brandingStyle) {
-    case 'BlockText':
-      return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
-    case 'BodyText':
-      return (brandingText == null ? void 0 : brandingText.trim()) && (/*#__PURE__*/React__default.createElement(BrandingTextBody, {
-        dangerouslySetInnerHTML: {
-          __html: truncateHtmlString(brandingText, 65)
-        }
-      }));
-    case 'TextLink':
-      return (brandingText == null ? void 0 : brandingText.trim()) && brandingLink && (/*#__PURE__*/React__default.createElement(TextLink, {
-        target: target,
-        href: brandingLink,
-        color: color
-      }, truncate(stripAllHtmlTags(brandingText), 25)));
-    case 'StreamLogo':
-      return /*#__PURE__*/React__default.createElement(StreamBadge, {
-        invert: invert
-      });
-    case 'CinemaLogo':
-      return /*#__PURE__*/React__default.createElement(CinemaBadge, {
-        invert: invert
-      });
+var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
+
+var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
+
+var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
+
+/* eslint-disable react/jsx-no-useless-fragment */
+var DEFAULT_THEME = exports.ThemeType.Core;
+var getThemeClass = function getThemeClass(theme) {
+  // Always include the base (core) theme class
+  var baseThemeClass = coreThemeStyles.coreTheme;
+  var overrideClass = '';
+  switch (theme) {
+    case exports.ThemeType.Core:
+      overrideClass = '';
+      break;
+    case exports.ThemeType.Stream:
+      overrideClass = streamThemeStyles.streamTheme;
+      break;
+    case exports.ThemeType.Cinema:
+      overrideClass = cinemaThemeStyles.cinemaTheme;
+      break;
+    case exports.ThemeType.Schools:
+      overrideClass = schoolsThemeStyles.schoolsTheme;
+      break;
     default:
-      return null;
+      overrideClass = '';
   }
+  // Return the combined classes
+  return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
 };
-var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
-  var brandingStyle = _ref.brandingStyle,
-    _ref$invert = _ref.invert,
-    invert = _ref$invert === void 0 ? false : _ref$invert,
-    brandingText = _ref.brandingText,
-    brandingLink = _ref.brandingLink;
-  return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
+var HarmonicThemeContext = /*#__PURE__*/React__default.createContext(DEFAULT_THEME);
+var useHarmonicTheme = function useHarmonicTheme() {
+  return React__default.useContext(HarmonicThemeContext);
 };
-
-var _excluded$j = ["text"];
-var useResponsiveVideo$1 = function useResponsiveVideo(video, poster) {
-  var mobileVideo = video.mobile || video.desktop;
-  var desktopVideo = video.desktop || video.mobile;
-  var mobilePoster = poster.mobile || poster.desktop;
-  var desktopPoster = poster.desktop || poster.mobile;
-  var _useState = React.useState(desktopPoster),
-    posterUrl = _useState[0],
-    setPoster = _useState[1];
-  var _useState2 = React.useState(desktopVideo),
-    videoUrl = _useState2[0],
-    setVideoUrl = _useState2[1];
-  var isMobile = useMobile();
-  React.useEffect(function () {
-    setPoster(isMobile ? mobilePoster : desktopPoster);
-    setVideoUrl(isMobile ? mobileVideo : desktopVideo);
-  }, [isMobile]);
-  return {
-    posterUrl: posterUrl,
-    videoUrl: videoUrl
-  };
-};
-var VideoWithControls$1 = function VideoWithControls(_ref) {
-  var video = _ref.video,
-    poster = _ref.poster;
-  var _useResponsiveVideo = useResponsiveVideo$1(video, poster),
-    posterUrl = _useResponsiveVideo.posterUrl,
-    videoUrl = _useResponsiveVideo.videoUrl;
-  var isIOS = useIOS();
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
-    id: video.elementId,
-    width: "100%",
-    height: "100%",
-    muted: true,
-    poster: posterUrl,
-    src: videoUrl,
-    "data-testid": "compact-video",
-    playsInline: true
-  }, /*#__PURE__*/React__default.createElement("source", {
-    src: videoUrl
-  }), /*#__PURE__*/React__default.createElement("img", {
-    src: posterUrl,
-    alt: poster.alt,
-    "data-testid": "compact-image"
-  })), /*#__PURE__*/React__default.createElement(VideoControls, {
-    loop: true,
-    videoElementId: video.elementId,
-    muted: true,
-    autoPlay: false,
-    soundControl: !isIOS
-  }));
-};
-var CompactHeaderImage = function CompactHeaderImage(_ref2) {
-  var mobile = _ref2.mobile,
-    desktop = _ref2.desktop,
-    alt = _ref2.alt;
-  return /*#__PURE__*/React__default.createElement("picture", {
-    "data-testid": "compact-picture"
-  }, mobile && /*#__PURE__*/React__default.createElement("source", {
-    srcSet: mobile,
-    media: "" + devices.mobile,
-    "data-testid": "compact-mobile-image-source"
-  }), /*#__PURE__*/React__default.createElement("source", {
-    srcSet: desktop,
-    media: "" + devices.desktop,
-    "data-testid": "compact-desktop-image-source"
-  }), /*#__PURE__*/React__default.createElement("img", {
-    src: desktop,
-    alt: alt,
-    "data-testid": "compact-image"
-  }));
+var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
+  var _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? DEFAULT_THEME : _ref$theme,
+    children = _ref.children;
+  var themeClass = getThemeClass(theme);
+  // Convert children to an array (assuming they accept a className prop)
+  var childrenArray = React__default.Children.toArray(children);
+  var themedChildren = childrenArray.map(function (child) {
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      className: ((child.props.className || '') + " " + themeClass).trim()
+    });
+  });
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeContext.Provider, {
+    value: theme
+  }, themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren));
 };
-var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
-  var video = _ref3.video,
-    poster = _ref3.poster;
-  if (!video.desktop && !video.mobile) {
-    return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
+
+// Helper function for rendering buttons based on the variant
+var renderButton = function renderButton(_ref) {
+  var variant = _ref.variant,
+    link = _ref.link,
+    text = _ref.text,
+    iconName = _ref.iconName,
+    iconDirection = _ref.iconDirection,
+    target = _ref.target;
+  switch (variant) {
+    case InformationCtaVariants.Secondary:
+      return /*#__PURE__*/React__default.createElement(SecondaryButton, {
+        href: link,
+        iconName: iconName,
+        iconDirection: iconDirection,
+        target: target,
+        "aria-label": text
+      }, text);
+    case InformationCtaVariants.Tertiary:
+      return /*#__PURE__*/React__default.createElement(TertiaryButton, {
+        href: link,
+        target: target,
+        "aria-label": text
+      }, text);
+    case InformationCtaVariants.TextLink:
+      return /*#__PURE__*/React__default.createElement(TextLink, {
+        href: link,
+        iconName: iconName,
+        iconDirection: iconDirection,
+        target: target,
+        "aria-label": text
+      }, text);
+    default:
+      return /*#__PURE__*/React__default.createElement(PrimaryButton, {
+        href: link,
+        iconName: iconName,
+        iconDirection: iconDirection,
+        target: target,
+        "aria-label": text
+      }, text);
   }
-  return /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
-    video: video,
-    poster: poster
-  });
 };
-var PageHeadingCompact = function PageHeadingCompact(_ref4) {
-  var title = _ref4.title,
-    link = _ref4.link,
-    _ref4$sponsor = _ref4.sponsor,
-    sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
-    customSponsorImage = _ref4.customSponsorImage,
-    bgUrlDesktop = _ref4.bgUrlDesktop,
-    bgUrlDevice = _ref4.bgUrlDevice,
-    videoUrlDesktop = _ref4.videoUrlDesktop,
-    videoUrlMobile = _ref4.videoUrlMobile,
-    _ref4$bgImageAltText = _ref4.bgImageAltText,
-    bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
-    _ref4$invert = _ref4.invert,
-    invert = _ref4$invert === void 0 ? false : _ref4$invert,
-    _ref4$brandingStyle = _ref4.brandingStyle,
-    brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
-    brandingText = _ref4.brandingText,
-    brandingLink = _ref4.brandingLink,
-    _ref4$showCopy = _ref4.showCopy,
-    showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
-  var _ref5 = link || {},
-    linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
-  // const titleSize = title && title.length > 20 ? 4 : 3;
-  var video = {
-    elementId: 'compact-header-video',
-    desktop: videoUrlDesktop,
-    mobile: videoUrlMobile
-  };
-  var poster = {
-    desktop: bgUrlDesktop,
-    mobile: bgUrlDevice,
-    alt: bgImageAltText
-  };
-  return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
-    "data-testid": "compact-sponsor"
-  }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
-    "data-testid": "compact-custom-sponsor"
-  }, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
-    video: video,
-    poster: poster
-  })), showCopy && (/*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
-    className: "page-heading-compact__background",
-    invert: invert
-  }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
-    brandingStyle: brandingStyle,
-    brandingText: brandingText,
-    brandingLink: brandingLink,
-    invert: invert
-  }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    size: "large",
-    hierarchy: "h1"
-  }, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
-    invert: invert,
-    className: "page-heading-compact__button"
-  }), linkText))))));
+var InfoCta = function InfoCta(_ref2) {
+  var _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? InformationCtaVariants.Primary : _ref2$variant,
+    link = _ref2.link,
+    text = _ref2.text,
+    iconName = _ref2.iconName,
+    iconDirection = _ref2.iconDirection,
+    _ref2$target = _ref2.target,
+    target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target;
+  var theme = useHarmonicTheme();
+  return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
+    variant: variant,
+    theme: theme
+  }, renderButton({
+    variant: variant,
+    link: link,
+    text: text,
+    iconName: iconName,
+    iconDirection: iconDirection,
+    target: target
+  }));
 };
 
-var _templateObject$V, _templateObject2$J;
-var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
-var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n"])));
-var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__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) {
-  var translateX = _ref2.translateX;
-  return translateX + "px";
-}, SWIPE_SLIDE_CLASS_NAME);
-
-/**
- * Generates a random string in the format XXX-XXX.
- * Does not meet UUID standards.
- * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
- *
- * @return {string} A random string in the format XXX-XXX.
- */
-var generateDomElementId = function generateDomElementId() {
-  var randomPart = Math.floor(100 + Math.random() * 900).toString();
-  var datePart = Date.now().toString().slice(-3);
-  return randomPart + "-" + datePart;
+/* eslint-disable react/no-danger */
+var defaultColumnSpan = 6;
+var smallColumnSpan = 4;
+var largeColumnSpan = 9;
+var mediumWordBreakpoint = 8;
+var longWordBreakpoint = 13;
+var getColumnSpan = function getColumnSpan(longestWordLength) {
+  if (longestWordLength > longWordBreakpoint) return largeColumnSpan;
+  if (longestWordLength < mediumWordBreakpoint) return smallColumnSpan;
+  return defaultColumnSpan;
 };
-
-var DISABLED_TABBING_TAGS = 'a, button';
-var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
-  if (!element) return;
-  var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
-  focusables.forEach(function (el) {
-    if (shouldDisable) el.setAttribute('tabindex', '-1');
+var Information = function Information(_ref) {
+  var body = _ref.body,
+    title = _ref.title,
+    cta = _ref.cta,
+    className = _ref.className;
+  var _useViewport = useViewport(),
+    hydrated = _useViewport.hydrated;
+  var safeTitle = title || {
+    text: '',
+    textSize: 'medium'
+  }; // Provide a fallback
+  var titleWords = safeTitle.text.split(' ');
+  var titleWordLengths = titleWords.map(function (word) {
+    return word.length;
   });
+  var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
+  var titleColumnSpan = getColumnSpan(maxTitleWordLength);
+  if (!hydrated) return null;
+  return /*#__PURE__*/React__default.createElement(InfoWrapper, {
+    "data-testid": "infoWrapper",
+    className: className
+  }, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 2,
+    columnStartDevice: 2,
+    columnSpanDesktop: titleColumnSpan,
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(InfoTitle, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: "h2",
+    size: safeTitle.textSize,
+    color: "inherit"
+  }, safeTitle.text))), /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: titleColumnSpan + 2,
+    columnStartDevice: 2,
+    columnSpanDesktop: 14 - titleColumnSpan,
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, null, /*#__PURE__*/React__default.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: body
+    }
+  })), cta && (/*#__PURE__*/React__default.createElement(InfoCta, {
+    link: cta.link,
+    variant: cta.variant,
+    text: cta.text,
+    iconName: cta.iconName,
+    iconDirection: cta.iconDirection,
+    target: cta.target
+  })))));
 };
-var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
-  return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
-};
-var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
-  var widthSoFar = 0;
-  var visible = [];
-  for (var i = currentIndex; i < slidesLength; i++) {
-    var _slideWidths$i;
-    var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
-    if (widthSoFar + width > containerWidth) break;
-    visible.push(i);
-    widthSoFar += width;
-  }
-  return visible;
-};
-var getMovedSlides = function getMovedSlides(delta, slideWidths) {
-  var absDelta = Math.abs(delta);
-  var movedSlides = 0;
-  var accumulated = 0;
-  for (var i = 0; i < slideWidths.length; i++) {
-    accumulated += slideWidths[i];
-    // Allow partial slide (e.g. 50% of next slide) to count
-    var partialThreshold = slideWidths[i] * 0.5;
-    if (absDelta > accumulated - partialThreshold) {
-      movedSlides++;
-    } else {
-      break;
+
+var _templateObject$Q, _templateObject2$E, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
+var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: var(--page-header-bg-color);\n  color: var(--color-base-white);\n\n  ", ";\n\n  h1,\n  h2,\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    padding-bottom: 42px;\n  ";
+}, devices.mobile);
+var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
+var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 35px;\n  padding-bottom: 20px;\n\n  ", ";\n"])), function (_ref2) {
+  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    height: 50px;\n    padding-bottom: 0;\n    margin: 10px 0;\n  ";
+});
+var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
+  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    margin-top: 42px;\n  ";
+}, devices.mobile);
+var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 43px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 33px;\n      margin-top: 10px;\n      margin-bottom: 20px;\n    }\n  }\n"])), function (_ref4) {
+  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
+}, devices.mobile);
+var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-white);\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
+var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  ", ";\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n\n      ", ";\n    }\n  }\n"])), function (_ref5) {
+  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    margin-top: 40px;\n  ";
+}, devices.mobile, function (_ref6) {
+  var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    margin-top: 15px;\n   ";
+});
+var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
+
+var PageHeading = function PageHeading(_ref) {
+  var title = _ref.title,
+    hierarchy = _ref.hierarchy,
+    text = _ref.text,
+    link = _ref.link,
+    _ref$sponsor = _ref.sponsor,
+    sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
+    children = _ref.children,
+    className = _ref.className,
+    showBadge = _ref.showBadge,
+    theme = _ref.theme;
+  var themedLink = link && _extends({}, link, {
+    textColor: ThemeColor['base-black'],
+    backgroundColor: ThemeColor['base-white'],
+    hoveredColor: ThemeColor['white-hovered'],
+    pressedColor: ThemeColor['white-pressed']
+  });
+  var linkText = themedLink == null ? void 0 : themedLink.text;
+  var isTitleUnAvailable = !title;
+  var renderBadge = function renderBadge(currentTheme) {
+    if (!showBadge) return null;
+    switch (currentTheme) {
+      case exports.ThemeType.Cinema:
+        return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
+          isPageHeadingWithoutTitle: isTitleUnAvailable
+        }, /*#__PURE__*/React__default.createElement(CinemaBadge, {
+          align: "left"
+        }));
+      case exports.ThemeType.Stream:
+        return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
+          isPageHeadingWithoutTitle: isTitleUnAvailable
+        }, /*#__PURE__*/React__default.createElement(StreamBadge, {
+          align: "left"
+        }));
+      default:
+        return null;
     }
-  }
-  return movedSlides;
+  };
+  return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
+    className: className,
+    "data-testid": "page-heading-wrapper",
+    isPageHeadingWithoutTitle: isTitleUnAvailable
+  }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
+    "data-testid": "page-heading-title",
+    isPageHeadingWithoutTitle: isTitleUnAvailable
+  }, renderBadge(theme), children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
+    isPageHeadingWithoutTitle: isTitleUnAvailable
+  }, children)) : null, !isTitleUnAvailable && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    color: "white",
+    size: "large",
+    hierarchy: hierarchy
+  }, title))), text ? (/*#__PURE__*/React__default.createElement(TextWrapper, {
+    "data-testid": "page-heading-text"
+  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    tag: "div",
+    color: "white",
+    size: "large",
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  }))) : null, sponsor ? (/*#__PURE__*/React__default.createElement(LogoWrapper, {
+    "data-testid": "page-heading-sponsor",
+    isPageHeadingWithoutTitle: isTitleUnAvailable
+  }, /*#__PURE__*/React__default.createElement(Sponsorship, null))) : null, themedLink ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
+    "data-testid": "page-heading-link"
+  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
 };
 
-var _excluded$k = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
-var MAX_CLONES_NUMBER = 6;
-var CLICK_DRAG_THRESHOLD = 10;
-var getClonesCount = function getClonesCount(infinite, childrenLength) {
-  if (!infinite) return 0;
-  return Math.min(childrenLength, MAX_CLONES_NUMBER);
+var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
+var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  position: relative;\n  display: flex;\n  background: var(--base-color-black);\n\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n  }\n"])), devices.mobile);
+var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  img {\n    width: 100%;\n    filter: brightness(0.7);\n    opacity: 0.95;\n  }\n\n  @media ", " {\n    height: fit-content;\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n\n    img {\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n"])), devices.mobile);
+var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  align-self: center;\n  width: 100%;\n  z-index: ", ";\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content min-content;\n  grid-template-areas:\n    '. . . . . logo logo logo logo logo logo . . . . .'\n    '. . . text text text text text text text text text text . . .'\n    '. . . button button button button button button button button button button . . .';\n\n  @media ", " {\n    & {\n      height: 100%;\n      grid-template-rows: 1fr max-content 1fr;\n      grid-template-areas:\n        '. . . logo logo logo logo logo logo logo logo . . .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .';\n    }\n  }\n\n  @media ", " {\n    align-content: center;\n\n    & {\n      grid-template-areas:\n        '. . . logo logo logo logo logo logo logo logo . . .'\n        '. . text text text text text text text text text text . .'\n        '. . button button button button button button button button button button . .';\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
+var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
+var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
+var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0px;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
+var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
+
+var _excluded$k = ["text"];
+var PageHeadingImpact = function PageHeadingImpact(_ref) {
+  var children = _ref.children,
+    text = _ref.text,
+    link = _ref.link,
+    _ref$sponsor = _ref.sponsor,
+    sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
+    customSponsorImage = _ref.customSponsorImage,
+    scrollHref = _ref.scrollHref,
+    bgUrlDesktop = _ref.bgUrlDesktop,
+    bgUrlDevice = _ref.bgUrlDevice,
+    _ref$bgImageAltText = _ref.bgImageAltText,
+    bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
+    _ref$semanticLevel = _ref.semanticLevel,
+    semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
+  var truncatedText = text == null ? void 0 : text.substring(0, 75);
+  var _ref2 = link || {},
+    linkText = _ref2.text,
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
+  return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
+    bgUrlDesktop: bgUrlDesktop,
+    bgUrlDevice: bgUrlDevice,
+    "data-testid": "impact-wrapper"
+  }, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
+    "data-testid": "impact-sponsor"
+  }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
+    "data-testid": "impact-custom-sponsor"
+  }, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(ImpactHeaderImageWrapper, null, /*#__PURE__*/React__default.createElement("picture", {
+    "data-testid": "impact-picture"
+  }, bgUrlDevice && (/*#__PURE__*/React__default.createElement("source", {
+    srcSet: bgUrlDevice,
+    media: "" + devices.mobile,
+    "data-testid": "impact-mobile-image-source"
+  })), /*#__PURE__*/React__default.createElement("source", {
+    srcSet: bgUrlDesktop,
+    media: "" + devices.desktop,
+    "data-testid": "impact-desktop-image-source"
+  }), /*#__PURE__*/React__default.createElement("img", {
+    src: bgUrlDesktop,
+    alt: bgImageAltText,
+    "data-testid": "impact-image"
+  }))), /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
+    "data-testid": "impact-logo"
+  }, children) : null, text ? (/*#__PURE__*/React__default.createElement(TextWrapper$1, {
+    "data-testid": "impact-text"
+  }, /*#__PURE__*/React__default.createElement(Header, {
+    level: 3,
+    semanticLevel: semanticLevel
+  }, truncatedText))) : null, link ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
+    "data-testid": "impact-link"
+  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null), scrollHref ? (/*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
+    "data-testid": "impact-scroll-link"
+  }, /*#__PURE__*/React__default.createElement(TabLink, {
+    iconName: "Arrow",
+    iconDirection: "down",
+    href: scrollHref,
+    color: ThemeColor['base-white'],
+    hoverColor: ThemeColor['base-white']
+  }, "Scroll Down"))) : null);
 };
-var getSlidedWidth = function getSlidedWidth(slide) {
-  if (!slide) return 0;
-  var style = window.getComputedStyle(slide);
-  var marginLeft = parseFloat(style.marginLeft) || 0;
-  var marginRight = parseFloat(style.marginRight) || 0;
-  return slide.getBoundingClientRect().width + marginLeft + marginRight;
+
+var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q, _templateObject5$l;
+var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
+  var color = _ref.color;
+  return "\n    background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n    color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n  ";
+}, devices.mobileAndTablet);
+var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0px 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
+  var hasImage = _ref2.hasImage;
+  return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
+}, devices.mobileAndTablet, function (_ref3) {
+  var hasImage = _ref3.hasImage;
+  return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
+});
+var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--base-color-black);\n\n  @media ", " {\n    grid-area: 2 / 1 / 3 / 15;\n  }\n"])), devices.mobileAndTablet);
+var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px;\n  max-height: 33vw;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
+var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+
+var PageHeadingPanel = function PageHeadingPanel(_ref) {
+  var _image$src, _image$alt;
+  var info = _ref.info,
+    image = _ref.image,
+    color = _ref.color,
+    scrollTo = _ref.scrollTo;
+  var hasImage = !!image;
+  return /*#__PURE__*/React__default.createElement(PanelGrid, {
+    color: color,
+    "data-testid": "wrapper"
+  }, /*#__PURE__*/React__default.createElement(LeftPanel, {
+    hasImage: hasImage
+  }, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
+    "data-testid": "scroll-link"
+  }, /*#__PURE__*/React__default.createElement(TabLink, {
+    iconName: "Arrow",
+    iconDirection: "down",
+    href: scrollTo,
+    color: color === ThemeColor['base-white'] ? ThemeColor['base-black'] : ThemeColor['base-white'],
+    hoverColor: color === ThemeColor['base-white'] ? ThemeColor['base-black'] : ThemeColor['base-white']
+  }, "Scroll Down")))), hasImage && (/*#__PURE__*/React__default.createElement(RightPanel, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: exports.AspectRatio['4:3']
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: (_image$src = image == null ? void 0 : image.src) != null ? _image$src : '',
+    alt: (_image$alt = image == null ? void 0 : image.alt) != null ? _image$alt : ''
+  })))));
 };
-var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    _ref$infinite = _ref.infinite,
-    infinite = _ref$infinite === void 0 ? false : _ref$infinite,
-    onIndexChange = _ref.onIndexChange,
-    _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
-    slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
-    _ref$slidesAriaHidden = _ref.slidesAriaHidden,
-    slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
-    onActiveChange = _ref.onActiveChange,
-    onOverflowChange = _ref.onOverflowChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
-  var containerRef = React.useRef(null);
-  var childRefs = React.useRef([]);
-  var startX = React.useRef(0);
-  var currentTranslate = React.useRef(0);
-  var isDragging = React.useRef(false);
-  var isMouseDown = React.useRef(false);
-  var isActive = React.useRef(false);
-  var isClickPrevented = React.useRef(false);
-  var uniqueIdRef = React.useRef(generateDomElementId());
-  var _useState = React.useState(null),
-    dragTranslateX = _useState[0],
-    setDragTranslateX = _useState[1];
-  var _useState2 = React.useState(false),
-    transitioning = _useState2[0],
-    setTransitioning = _useState2[1];
-  var _useState3 = React.useState([]),
-    slideWidths = _useState3[0],
-    setSlideWidths = _useState3[1];
-  var _useState4 = React.useState(0),
-    containerWidth = _useState4[0],
-    setContainerWidth = _useState4[1];
-  var _useMemo = React.useMemo(function () {
-      var count = getClonesCount(infinite, children.length);
-      var leftClones = infinite ? children.slice(-count) : [];
-      var rightClones = infinite ? children.slice(0, count) : [];
-      var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
-      return {
-        slides: allSlides,
-        clonesCount: count
-      };
-    }, [children, infinite]),
-    slides = _useMemo.slides,
-    clonesCount = _useMemo.clonesCount;
-  var _useState5 = React.useState(infinite ? clonesCount : 0),
-    currentIndex = _useState5[0],
-    setCurrentIndex = _useState5[1];
-  React.useEffect(function () {
-    var handler = function handler(e) {
-      if (isClickPrevented.current) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-    var containerElement = containerRef.current;
-    containerElement == null || containerElement.addEventListener('click', handler, true);
-    return function () {
-      return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
-    };
-  }, []);
-  React.useEffect(function () {
-    if (!onIndexChange) return;
-    if (!infinite) {
-      onIndexChange(currentIndex);
-    } else {
-      var offset = currentIndex - clonesCount + children.length;
-      var realIndex = offset % children.length;
-      onIndexChange(realIndex);
-    }
-  }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
-  var updateDimensions = React.useCallback(function () {
-    var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
-    var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
-    setContainerWidth(cw);
-    setSlideWidths(widths);
-    if (!infinite) {
-      var totalWidth = widths.reduce(function (acc, w) {
-        return acc + w;
-      }, 0);
-      var visibleSpace = cw - (slidesOffsetBefore || 0);
-      var overflow = totalWidth > Math.max(0, visibleSpace);
-      onOverflowChange == null || onOverflowChange(overflow);
-    }
-  }, []);
-  React.useEffect(function () {
-    var animationFrameRequestId = requestAnimationFrame(updateDimensions);
-    return function () {
-      return cancelAnimationFrame(animationFrameRequestId);
-    };
-  }, [children]);
-  React.useEffect(function () {
-    var observer = new ResizeObserver(updateDimensions);
-    if (containerRef.current) observer.observe(containerRef.current);
-    return function () {
-      return observer.disconnect();
-    };
-  }, [children]);
-  var setIsActive = function setIsActive() {
-    if (!isActive.current) {
-      isActive.current = true;
-      onActiveChange == null || onActiveChange(true);
-    }
-  };
-  var getTranslateX = function getTranslateX() {
-    var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
-      return acc + width;
-    }, 0);
-    return (slidesOffsetBefore || 0) - widthsBefore;
-  };
-  var getTranslateForIndex = function getTranslateForIndex(index) {
-    var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
-      return acc + width;
-    }, 0);
-    return (slidesOffsetBefore || 0) - widthsBefore;
-  };
-  var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
-    var delta = currentTranslate.current - getTranslateX();
-    var direction = delta > 0 ? -1 : 1;
-    var movedSlides = getMovedSlides(delta, slideWidths);
-    if (Math.abs(delta) > 20) {
-      movedSlides = Math.max(1, movedSlides);
-      var targetIndex = currentIndex + direction * movedSlides;
-      var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
-      if (!infinite) {
-        currentTranslate.current = getTranslateForIndex(finalIndex);
-        setDragTranslateX(null);
-      }
-      setTransitioning(true);
-      setCurrentIndex(finalIndex);
-    } else {
-      setTransitioning(true);
-      setCurrentIndex(function (prev) {
-        return prev;
-      });
-    }
-    setDragTranslateX(null);
-  };
-  var canMoveNext = function canMoveNext() {
-    if (infinite) return true;
-    if (slideWidths.length === 0 || containerWidth === 0) return false;
-    var totalWidth = slideWidths.reduce(function (acc, w) {
-      return acc + w;
-    }, 0);
-    var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
-      return acc + w;
-    }, 0);
-    var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
-    var remainingToRight = totalWidth - widthsBefore - visibleSpace;
-    var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
-    var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
-    var nextIndex = lastVisibleIndex + 1;
-    if (nextIndex >= slideWidths.length) return false;
-    var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
-    if (nextSlideWidth === 0) return false;
-    var EPS = 1; // pixel tolerance
-    // full next slide fits
-    if (remainingToRight + EPS >= nextSlideWidth) return true;
-    return remainingToRight > 0;
-  };
-  var handleTransitionEnd = function handleTransitionEnd() {
-    setTransitioning(false);
-    if (!infinite) return;
-    if (currentIndex >= children.length + clonesCount) {
-      setCurrentIndex(clonesCount);
-    } else if (currentIndex < clonesCount) {
-      setCurrentIndex(children.length + currentIndex);
-    }
-  };
-  var goToPrev = function goToPrev() {
-    if (transitioning) return;
-    setIsActive();
-    setTransitioning(true);
-    setCurrentIndex(function (prev) {
-      var target = infinite ? prev - 1 : Math.max(0, prev - 1);
-      if (!infinite) {
-        currentTranslate.current = getTranslateForIndex(target);
-        setDragTranslateX(null);
-      }
-      return target;
-    });
-  };
-  var goToNext = function goToNext() {
-    if (transitioning || !canMoveNext()) return;
-    setIsActive();
-    setTransitioning(true);
-    setCurrentIndex(function (prev) {
-      var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
-      if (!infinite) {
-        currentTranslate.current = getTranslateForIndex(target);
-        setDragTranslateX(null);
-      }
-      return target;
+
+var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
+var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  picture,\n  img {\n    width: 100%;\n    height: 100%;\n  }\n"])));
+var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
+var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: var(--grid-outer-margin);\n  bottom: 20px;\n  z-index: 10;\n\n  @media ", " {\n    right: var(--grid-margin);\n    bottom: 10px;\n  }\n"])), devices.tablet);
+var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--heading-promo-bg-color);\n  border-bottom: ", ";\n  display: ", ";\n\n  @media ", " {\n    padding: 12px 0 20px;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
+}, function (_ref2) {
+  var showBlock = _ref2.showBlock;
+  return showBlock ? 'block' : 'none';
+}, devices.mobile);
+var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    height: 32px;\n  }\n\n  @media ", " {\n    margin-bottom: 12px;\n  }\n"])), devices.mobile);
+var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  width: 200px;\n\n  @media ", " {\n    order: ", ";\n    width: 100%;\n    justify-content: center;\n  }\n"])), devices.mobile, function (_ref3) {
+  var isBadgePresent = _ref3.isBadgePresent;
+  return isBadgePresent ? '1' : '4';
+});
+var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: end;\n  width: 200px;\n\n  @media ", " {\n    margin-bottom: ", ";\n    width: 100%;\n    order: 3;\n  }\n"])), devices.mobile, function (_ref4) {
+  var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
+  return isAdditionalButtonPresent ? '20px' : '0';
+});
+var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"])), devices.mobile);
+var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$4 || (_templateObject0$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 10px 0;\n\n  h1,\n  h2,\n  h3 {\n    color: ", ";\n  }\n\n  @media ", " {\n    padding: 0;\n    order: 2;\n    margin-bottom: ", ";\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme == exports.ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
+}, devices.mobile, function (_ref6) {
+  var isButtonPresent = _ref6.isButtonPresent;
+  return isButtonPresent ? '20px' : '0';
+});
+var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$3 || (_templateObject1$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media ", " {\n    min-height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
+
+var PageHeadingPromoBadge;
+(function (PageHeadingPromoBadge) {
+  PageHeadingPromoBadge["Stream"] = "Stream";
+  PageHeadingPromoBadge["Cinema"] = "Cinema";
+})(PageHeadingPromoBadge || (PageHeadingPromoBadge = {}));
+
+var Badge = function Badge(_ref) {
+  var isMobile = _ref.isMobile,
+    theme = _ref.theme,
+    badge = _ref.badge;
+  if (!badge) return null;
+  var color = theme === exports.ThemeType.Cinema ? exports.Colors.Black : exports.Colors.White;
+  var alignment = isMobile ? 'center' : 'left';
+  return /*#__PURE__*/React__default.createElement(BadgeWrapper$2, {
+    "data-testid": "promo-heading-badge"
+  }, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
+    fillColor: color,
+    align: alignment
+  })) : (/*#__PURE__*/React__default.createElement(StreamBadge, {
+    fillColor: color,
+    align: alignment
+  })));
+};
+
+var StyledPrimaryButton = function StyledPrimaryButton(_ref) {
+  var link = _ref.link,
+    theme = _ref.theme;
+  var text = link.text;
+  if (theme === exports.ThemeType.Cinema) {
+    return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
+      textColor: ThemeColor['base-white'],
+      backgroundColor: ThemeColor['base-black'],
+      hoveredColor: ThemeColor['rbo-black-hovered'],
+      pressedColor: ThemeColor['rbo-black-pressed']
+    }), text);
+  }
+  return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
+    textColor: ThemeColor['base-black'],
+    backgroundColor: ThemeColor['base-white'],
+    hoveredColor: ThemeColor['white-hovered'],
+    pressedColor: ThemeColor['white-pressed']
+  }), text);
+};
+var Button$1 = function Button(_ref2) {
+  var link = _ref2.link,
+    theme = _ref2.theme,
+    isMobile = _ref2.isMobile;
+  var text = link.text;
+  if (isMobile) {
+    return /*#__PURE__*/React__default.createElement(StyledPrimaryButton, {
+      theme: theme,
+      link: link
     });
-  };
-  React.useImperativeHandle(ref, function () {
-    return {
-      nextSlide: goToNext,
-      prevSlide: goToPrev,
-      hasOverflow: function hasOverflow() {
-        var totalWidth = slideWidths.reduce(function (acc, w) {
-          return acc + w;
-        }, 0);
-        var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
-        return totalWidth > Math.max(0, visibleSpace);
-      },
-      hasNext: function hasNext() {
-        return canMoveNext();
-      }
-    };
-  });
-  var handleTouchStart = function handleTouchStart(e) {
-    setIsActive();
-    startX.current = e.touches[0].clientX;
-    isDragging.current = true;
-    isClickPrevented.current = false;
-    setTransitioning(false);
-  };
-  var handleTouchMove = function handleTouchMove(e) {
-    if (!isDragging.current) return;
-    var deltaX = e.touches[0].clientX - startX.current;
-    if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
-      isClickPrevented.current = true;
-    }
-    var visualOffset = getTranslateX() + deltaX;
-    currentTranslate.current = visualOffset;
-    setDragTranslateX(visualOffset);
-  };
-  var handleTouchEnd = function handleTouchEnd() {
-    isDragging.current = false;
-    if (isClickPrevented.current) {
-      navigateOnSwipeEnd();
-    } else {
-      setDragTranslateX(null);
-    }
-  };
-  var handleMouseMove = function handleMouseMove(e) {
-    if (!isDragging.current || !isMouseDown.current || transitioning) return;
-    var deltaX = e.clientX - startX.current;
-    if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
-      isClickPrevented.current = true;
-    }
-    var visualOffset = getTranslateX() + deltaX;
-    currentTranslate.current = visualOffset;
-    setDragTranslateX(visualOffset);
-  };
-  var _handleMouseUp = function handleMouseUp() {
-    if (!isMouseDown.current) return;
-    isMouseDown.current = false;
-    isDragging.current = false;
-    if (isClickPrevented.current) {
-      navigateOnSwipeEnd();
-    } else {
-      setDragTranslateX(null);
+  }
+  var buttonColor = theme === exports.ThemeType.Cinema ? ThemeColor['base-black'] : ThemeColor['base-white'];
+  if (link.isTextLink) {
+    return /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, link, {
+      color: buttonColor,
+      iconName: undefined
+    }), text);
+  }
+  return /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, link, {
+    textColor: buttonColor,
+    borderColor: buttonColor,
+    hoveredColor: buttonColor,
+    pressedColor: buttonColor
+  }), text);
+};
+
+var Image = function Image(_ref) {
+  var desktop = _ref.desktop,
+    mobile = _ref.mobile,
+    alt = _ref.alt,
+    isMobile = _ref.isMobile;
+  return /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: isMobile ? exports.AspectRatio['75:32'] : exports.AspectRatio['90:17']
+  }, /*#__PURE__*/React__default.createElement("picture", {
+    "data-testid": "promo-heading-picture"
+  }, /*#__PURE__*/React__default.createElement("source", {
+    srcSet: mobile,
+    media: "(max-width: 768px)"
+  }), /*#__PURE__*/React__default.createElement("source", {
+    srcSet: desktop,
+    media: "(min-width: 769px)"
+  }), /*#__PURE__*/React__default.createElement("img", {
+    src: desktop,
+    alt: alt,
+    "data-testid": "promo-heading-image"
+  })));
+};
+
+var TITLE_MAX_LENGTH = 40;
+var PageHeadingPromo = function PageHeadingPromo(_ref) {
+  var _ref$sponsor = _ref.sponsor,
+    sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
+    badge = _ref.badge,
+    mainLink = _ref.mainLink,
+    title = _ref.title,
+    titleSemanticLevel = _ref.titleSemanticLevel,
+    additionalLink = _ref.additionalLink,
+    image = _ref.image,
+    className = _ref.className;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile,
+    hydrated = _useViewport.hydrated;
+  var theme = useHarmonicTheme();
+  var showImageButton = !title && !badge && !additionalLink && !isMobile;
+  var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
+  var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
+  if (!hydrated) return null;
+  return /*#__PURE__*/React__default.createElement(Wrapper$3, {
+    className: className
+  }, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
+    "data-testid": "promo-heading-sponsor"
+  }, /*#__PURE__*/React__default.createElement(Sponsorship, null))), /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(Image, {
+    mobile: image.mobile,
+    desktop: image.desktop,
+    alt: image.alt,
+    isMobile: isMobile
+  }), showImageButton && mainLink && (/*#__PURE__*/React__default.createElement(ImageButtonWrapper, {
+    "data-testid": "promo-heading-image-button"
+  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, mainLink, {
+    textColor: ThemeColor['base-black'],
+    backgroundColor: ThemeColor['base-white'],
+    hoveredColor: ThemeColor['white-hovered'],
+    pressedColor: ThemeColor['white-pressed']
+  }), mainLink.text)))), /*#__PURE__*/React__default.createElement(ContentSection, {
+    theme: theme,
+    showBlock: showContentBlock
+  }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 2,
+    columnSpanDesktop: 14,
+    columnStartDevice: 2,
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(ContentWrapper$1, {
+    theme: theme
+  }, !isMobile && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
+    isBadgePresent: !!badge
+  }, /*#__PURE__*/React__default.createElement(Badge, {
+    theme: theme,
+    badge: badge,
+    isMobile: isMobile
+  }), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    theme: theme,
+    link: additionalLink
+  }))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
+    theme: theme,
+    isButtonPresent: !!mainLink || !!additionalLink
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
+    size: "large"
+  }, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
+    isAdditionalButtonPresent: !!additionalLink && !badge
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    theme: theme,
+    link: mainLink,
+    isMobile: isMobile
+  }))))), isMobile && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, badge && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
+    isBadgePresent: !!badge
+  }, /*#__PURE__*/React__default.createElement(Badge, {
+    theme: theme,
+    badge: badge,
+    isMobile: isMobile
+  }))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
+    theme: theme,
+    isButtonPresent: !!mainLink || !!additionalLink
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
+    size: "large"
+  }, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
+    isAdditionalButtonPresent: !!additionalLink && !badge
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    theme: theme,
+    link: mainLink,
+    isMobile: isMobile
+  }))), !badge && additionalLink && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
+    isBadgePresent: !!badge
+  }, /*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    theme: theme,
+    link: additionalLink
+  })))))))))));
+};
+
+var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s;
+var GRID = {
+  desktop: {
+    leftWithImage: '1 / 1 / 3 / 7',
+    leftNoImage: '1 / 1 / 3 / 12',
+    right: '1 / 7 / 3 / 17'
+  },
+  mobile: {
+    leftWithImage: '3 / 1 / 4 / 15',
+    leftNoImage: '1 / 1 / 3 / 15',
+    right: '2 / 1 / 3 / 15'
+  }
+};
+var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  background-color: ", ";\n  color: var(--color-base-white);\n"])), function (_ref) {
+  var $background = _ref.$background;
+  return "var(--color-" + $background + ")";
+});
+var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
+  var hasImage = _ref2.hasImage;
+  return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
+}, devices.mobileAndTablet, function (_ref3) {
+  var hasImage = _ref3.hasImage;
+  return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
+});
+var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--color-base-black);\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
+var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px 36px 36px 50px;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px 5px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
+
+var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
+  var _image$src, _image$alt;
+  var image = _ref.image,
+    children = _ref.children,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'base-black' : _ref$background,
+    className = _ref.className;
+  return /*#__PURE__*/React__default.createElement(HighlightPanelGrid, {
+    className: className,
+    "$background": background,
+    "data-testid": "highlight-heading-wrapper"
+  }, /*#__PURE__*/React__default.createElement(LeftPanel$1, {
+    hasImage: !!image
+  }, /*#__PURE__*/React__default.createElement(Wrapper$4, null, children)), image && (/*#__PURE__*/React__default.createElement(RightPanel$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: exports.AspectRatio['4:3']
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: (_image$src = image == null ? void 0 : image.src) != null ? _image$src : '',
+    alt: (_image$alt = image == null ? void 0 : image.alt) != null ? _image$alt : ''
+  })))));
+};
+
+var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
+var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
+var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
+var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
+var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
+var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
+  var invert = _ref.invert,
+    theme = _ref.theme;
+  return invert ? theme.colors.white : theme.colors.primary;
+}, function (_ref2) {
+  var invert = _ref2.invert,
+    theme = _ref2.theme;
+  return invert ? theme.colors.black : theme.colors.white;
+}, function (_ref3) {
+  var invert = _ref3.invert,
+    theme = _ref3.theme;
+  return invert ? theme.colors.black : theme.colors.white;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.primary === theme.colors.stream && "\n      color: " + theme.colors.stream + ";\n      background-color: " + theme.colors.white + ";\n    ";
+}, devices.tablet, devices.mobile);
+var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  padding-left: 50px;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n  @media ", " {\n    width: fit-content;\n  }\n"])), devices.mobile, devices.tablet);
+var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  text-align: center;\n  padding: 0 2em;\n  @media ", " {\n    justify-content: center;\n  }\n"])), devices.mobile);
+var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  padding-right: 50px;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobile);
+var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
+  var invert = _ref5.invert,
+    theme = _ref5.theme;
+  return invert ? theme.colors.primary : theme.colors.white;
+}, function (_ref6) {
+  var invert = _ref6.invert,
+    theme = _ref6.theme;
+  return invert ? theme.colors.white : theme.colors.black;
+}, function (_ref7) {
+  var invert = _ref7.invert,
+    theme = _ref7.theme;
+  return invert ? theme.colors.white : theme.colors.black;
+}, function (_ref8) {
+  var invert = _ref8.invert,
+    theme = _ref8.theme;
+  return invert ? theme.colors.white : theme.colors.black;
+});
+
+// Function to check if a URL is from the same site
+// NOTE: This function is not SSR compatible
+var isSameSiteUrl = function isSameSiteUrl(url) {
+  var _window;
+  if (url[0] === '/') return true; // URL is relative (e.g. /about)
+  if (!((_window = window) != null && _window.location)) return false; // window.location is not available (e.g. in SSR)
+  var currentPageURL = window.location.href || '';
+  var regexPattern = /^(https?:\/\/)?(www\d?\.)?([\w.-]+)\.\w+.*$/;
+  var match = url.match(regexPattern);
+  if (match != null && match[3] && currentPageURL) {
+    var urlDomain = match[3]; // Extract the domain from the third capture group
+    var currentMatch = currentPageURL.match(regexPattern);
+    if (currentMatch) {
+      var currentDomain = currentMatch[3];
+      return urlDomain === currentDomain;
     }
-    window.removeEventListener('mousemove', handleMouseMove);
-    window.removeEventListener('mouseup', _handleMouseUp);
+  }
+  return false; // URL didn't match the pattern
+};
+// Hook to check if a URL is from the same site - use for SSR
+var useSameSiteUrl = function useSameSiteUrl(url) {
+  var _useState = React.useState(false),
+    hasSameSiteUrl = _useState[0],
+    setSameSiteUrl = _useState[1];
+  React.useEffect(function () {
+    setSameSiteUrl(isSameSiteUrl(url));
+  }, [url]);
+  return hasSameSiteUrl;
+};
+
+var renderBranding = function renderBranding(brandingStyle, invert, brandingText, brandingLink) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
+  var target = sameSiteUrl ? '_self' : '_blank';
+  var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
+  switch (brandingStyle) {
+    case 'BlockText':
+      return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
+    case 'BodyText':
+      return (brandingText == null ? void 0 : brandingText.trim()) && (/*#__PURE__*/React__default.createElement(BrandingTextBody, {
+        dangerouslySetInnerHTML: {
+          __html: truncateHtmlString(brandingText, 65)
+        }
+      }));
+    case 'TextLink':
+      return (brandingText == null ? void 0 : brandingText.trim()) && brandingLink && (/*#__PURE__*/React__default.createElement(TextLink, {
+        target: target,
+        href: brandingLink,
+        color: color
+      }, truncate(stripAllHtmlTags(brandingText), 25)));
+    case 'StreamLogo':
+      return /*#__PURE__*/React__default.createElement(StreamBadge, {
+        invert: invert
+      });
+    case 'CinemaLogo':
+      return /*#__PURE__*/React__default.createElement(CinemaBadge, {
+        invert: invert
+      });
+    default:
+      return null;
+  }
+};
+var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
+  var brandingStyle = _ref.brandingStyle,
+    _ref$invert = _ref.invert,
+    invert = _ref$invert === void 0 ? false : _ref$invert,
+    brandingText = _ref.brandingText,
+    brandingLink = _ref.brandingLink;
+  return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
+};
+
+var _excluded$l = ["text"];
+var useResponsiveVideo = function useResponsiveVideo(video, poster) {
+  var mobileVideo = video.mobile || video.desktop;
+  var desktopVideo = video.desktop || video.mobile;
+  var mobilePoster = poster.mobile || poster.desktop;
+  var desktopPoster = poster.desktop || poster.mobile;
+  var _useState = React.useState(desktopPoster),
+    posterUrl = _useState[0],
+    setPoster = _useState[1];
+  var _useState2 = React.useState(desktopVideo),
+    videoUrl = _useState2[0],
+    setVideoUrl = _useState2[1];
+  var isMobile = useMobile();
+  React.useEffect(function () {
+    setPoster(isMobile ? mobilePoster : desktopPoster);
+    setVideoUrl(isMobile ? mobileVideo : desktopVideo);
+  }, [isMobile]);
+  return {
+    posterUrl: posterUrl,
+    videoUrl: videoUrl
   };
-  var handleMouseDown = function handleMouseDown(e) {
-    if (transitioning || e.button !== 0) return;
-    e.preventDefault();
-    setIsActive();
-    startX.current = e.clientX;
-    isDragging.current = true;
-    isMouseDown.current = true;
-    isClickPrevented.current = false;
-    setTransitioning(false);
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', _handleMouseUp);
+};
+var VideoWithControls = function VideoWithControls(_ref) {
+  var video = _ref.video,
+    poster = _ref.poster;
+  var _useResponsiveVideo = useResponsiveVideo(video, poster),
+    posterUrl = _useResponsiveVideo.posterUrl,
+    videoUrl = _useResponsiveVideo.videoUrl;
+  var isIOS = useIOS();
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
+    id: video.elementId,
+    width: "100%",
+    height: "100%",
+    muted: true,
+    poster: posterUrl,
+    src: videoUrl,
+    "data-testid": "compact-video",
+    playsInline: true
+  }, /*#__PURE__*/React__default.createElement("source", {
+    src: videoUrl
+  }), /*#__PURE__*/React__default.createElement("img", {
+    src: posterUrl,
+    alt: poster.alt,
+    "data-testid": "compact-image"
+  })), /*#__PURE__*/React__default.createElement(VideoControls, {
+    loop: true,
+    videoElementId: video.elementId,
+    muted: true,
+    autoPlay: false,
+    soundControl: !isIOS
+  }));
+};
+var CompactHeaderImage = function CompactHeaderImage(_ref2) {
+  var mobile = _ref2.mobile,
+    desktop = _ref2.desktop,
+    alt = _ref2.alt;
+  return /*#__PURE__*/React__default.createElement("picture", {
+    "data-testid": "compact-picture"
+  }, mobile && /*#__PURE__*/React__default.createElement("source", {
+    srcSet: mobile,
+    media: "" + devices.mobile,
+    "data-testid": "compact-mobile-image-source"
+  }), /*#__PURE__*/React__default.createElement("source", {
+    srcSet: desktop,
+    media: "" + devices.desktop,
+    "data-testid": "compact-desktop-image-source"
+  }), /*#__PURE__*/React__default.createElement("img", {
+    src: desktop,
+    alt: alt,
+    "data-testid": "compact-image"
+  }));
+};
+var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
+  var video = _ref3.video,
+    poster = _ref3.poster;
+  if (!video.desktop && !video.mobile) {
+    return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
+  }
+  return /*#__PURE__*/React__default.createElement(VideoWithControls, {
+    video: video,
+    poster: poster
+  });
+};
+var PageHeadingCompact = function PageHeadingCompact(_ref4) {
+  var title = _ref4.title,
+    link = _ref4.link,
+    _ref4$sponsor = _ref4.sponsor,
+    sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
+    customSponsorImage = _ref4.customSponsorImage,
+    bgUrlDesktop = _ref4.bgUrlDesktop,
+    bgUrlDevice = _ref4.bgUrlDevice,
+    videoUrlDesktop = _ref4.videoUrlDesktop,
+    videoUrlMobile = _ref4.videoUrlMobile,
+    _ref4$bgImageAltText = _ref4.bgImageAltText,
+    bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
+    _ref4$invert = _ref4.invert,
+    invert = _ref4$invert === void 0 ? false : _ref4$invert,
+    _ref4$brandingStyle = _ref4.brandingStyle,
+    brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
+    brandingText = _ref4.brandingText,
+    brandingLink = _ref4.brandingLink,
+    _ref4$showCopy = _ref4.showCopy,
+    showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
+  var _ref5 = link || {},
+    linkText = _ref5.text,
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
+  // const titleSize = title && title.length > 20 ? 4 : 3;
+  var video = {
+    elementId: 'compact-header-video',
+    desktop: videoUrlDesktop,
+    mobile: videoUrlMobile
   };
-  var onSlideFocus = function onSlideFocus(isVisible, index) {
-    if (!isVisible) {
-      setCurrentIndex(index);
-    }
+  var poster = {
+    desktop: bgUrlDesktop,
+    mobile: bgUrlDevice,
+    alt: bgImageAltText
   };
-  var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
-  return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
-    ref: containerRef,
-    className: "swipe",
-    onTouchStart: handleTouchStart,
-    onTouchMove: handleTouchMove,
-    onTouchEnd: handleTouchEnd,
-    onMouseDown: handleMouseDown,
-    "aria-roledescription": "carousel",
-    role: "list"
-  }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
-    className: "swipe-track-wrapper",
-    translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
-    transitioning: transitioning && dragTranslateX === null,
-    onTransitionEnd: handleTransitionEnd
-  }, slides.map(function (child, index) {
-    var isVisible = visibleIndexes.includes(index);
-    var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
-      className: SWIPE_SLIDE_CLASS_NAME,
-      "aria-hidden": slidesAriaHidden || isClone,
-      "aria-roledescription": "slide",
-      role: "listitem",
-      ref: function ref(el) {
-        childRefs.current[index] = el;
-        disableTabbingInside(el, isClone);
-      },
-      onFocus: function onFocus() {
-        return onSlideFocus(isVisible, index);
-      }
-    }, child);
-  })));
-});
-Swipe.displayName = 'Swipe';
+  return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
+    "data-testid": "compact-sponsor"
+  }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
+    "data-testid": "compact-custom-sponsor"
+  }, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
+    video: video,
+    poster: poster
+  })), showCopy && (/*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
+    className: "page-heading-compact__background",
+    invert: invert
+  }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
+    brandingStyle: brandingStyle,
+    brandingText: brandingText,
+    brandingLink: brandingLink,
+    invert: invert
+  }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    size: "large",
+    hierarchy: "h1"
+  }, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
+    invert: invert,
+    className: "page-heading-compact__button"
+  }), linkText))))));
+};
 
-var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject4$t, _templateObject5$n, _templateObject6$g, _templateObject7$c;
+var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$d;
 var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$W || (_templateObject$W = /*#__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  color: var(--color-base-white);\n  user-select: none;\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
 var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n  h1 {\n    margin: 0 0 8px 0;\n  }\n  p {\n    text-transform: uppercase;\n  }\n"])));
 var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n  }\n"])), devices.mobile);
@@ -8272,12 +8329,12 @@ var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t
   var hasImages = _ref2.hasImages;
   return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
 });
-var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--color-base-black);\n\n  .swipe-slide {\n    ", "\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), function (_ref3) {
+var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--color-base-black);\n\n  .swipe-slide {\n    ", "\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), function (_ref3) {
   var hasMultipleImages = _ref3.hasMultipleImages;
   return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
 }, devices.mobile);
-var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin-top: 8px;\n  margin-bottom: 8px;\n\n  @media ", " {\n    div {\n      background-color: var(--color-base-black);\n    }\n    svg path {\n      fill: var(--color-base-white) !important;\n    }\n\n    & {\n      display: flex;\n      margin-left: 100px;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.mobile);
-var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__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(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin-top: 8px;\n  margin-bottom: 8px;\n\n  @media ", " {\n    div {\n      background-color: var(--color-base-black);\n    }\n    svg path {\n      fill: var(--color-base-white) !important;\n    }\n\n    & {\n      display: flex;\n      margin-left: 100px;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.mobile);
+var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__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);
 
 /* eslint-disable react/no-danger */
 var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
@@ -8320,7 +8377,7 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
     }
   })))) : null), hasImages && (/*#__PURE__*/React__default.createElement(HighlightsCarouselWrapper, {
     hasMultipleImages: hasMultipleImages
-  }, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
+  }, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
     "data-testid": "rotator-buttons"
   }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickNext: onNext,
@@ -8340,14 +8397,14 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
   }))))));
 };
 
-var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject5$o, _templateObject6$h, _templateObject7$d, _templateObject8$8;
+var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
 var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  background: none;\n  border: none;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n\n  span {\n    height: 1.5em;\n    width: 1.5em;\n\n    svg > path {\n      fill: var(--color-base-black);\n    }\n  }\n\n  &:hover {\n    outline: none;\n  }\n"])));
 var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), linkButtonStyles);
 var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), linkButtonStyles);
-var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  min-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: 0 auto;\n\n  li {\n    margin-left: 24px;\n    color: var(--color-base-black);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  li:first-child {\n    margin-left: 0px;\n  }\n"])));
-var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-left: 12px;\n  }\n"])));
-var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-left: 12px;\n  }\n"])));
-var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: ", ";\n    border-bottom: ", ";\n  }\n\n  :hover {\n    cursor: pointer;\n    color: var(--color-primary-red);\n    border-bottom: 1px solid var(--color-primary-red);\n    svg > path {\n      fill: var(--color-base-black);\n    }\n  }\n"])), function (_ref) {
+var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  min-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: 0 auto;\n\n  li {\n    margin-left: 24px;\n    color: var(--color-base-black);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  li:first-child {\n    margin-left: 0px;\n  }\n"])));
+var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-left: 12px;\n  }\n"])));
+var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-left: 12px;\n  }\n"])));
+var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: ", ";\n    border-bottom: ", ";\n  }\n\n  :hover {\n    cursor: pointer;\n    color: var(--color-primary-red);\n    border-bottom: 1px solid var(--color-primary-red);\n    svg > path {\n      fill: var(--color-base-black);\n    }\n  }\n"])), function (_ref) {
   var active = _ref.active;
   return active ? "var(--color-primary-red)" : 'inherit';
 }, function (_ref2) {
@@ -8503,7 +8560,7 @@ var _templateObject$Y;
 var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 40px 36px;\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
 
 var _templateObject$Z, _templateObject2$M;
-var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n  }\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
+var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n  }\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
 var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-base-dark-grey);\n  }\n  overflow-wrap: break-word;\n  padding-bottom: 4px;\n"])));
 
 var _templateObject$_, _templateObject2$N;
@@ -8531,7 +8588,7 @@ var PersonDetails = function PersonDetails(_ref) {
   var _role$people;
   var role = _ref.role,
     className = _ref.className;
-  return /*#__PURE__*/React__default.createElement(TextWrapper$1, {
+  return /*#__PURE__*/React__default.createElement(TextWrapper$2, {
     className: className
   }, /*#__PURE__*/React__default.createElement(RoleContent, {
     title: "role",
@@ -8548,7 +8605,7 @@ var PersonDetails = function PersonDetails(_ref) {
 };
 
 var _templateObject$$, _templateObject2$O;
-var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 82px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 16px;\n"])));
+var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 82px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 16px;\n"])));
 var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n  }\n"])));
 
 var PersonCard = function PersonCard(_ref) {
@@ -8559,7 +8616,7 @@ var PersonCard = function PersonCard(_ref) {
     var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
     return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
   }, [role]);
-  if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper, {
+  if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
     className: className
   }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
     src: role.people[0].headshot,
@@ -8683,7 +8740,7 @@ var CreditListing = function CreditListing(_ref) {
       columnSpanSmallDevice: 1,
       key: "credit-entry-" + name + "-" + index,
       "data-testid": "credit-entry"
-    }, /*#__PURE__*/React__default.createElement(TextWrapper$1, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
+    }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
       title: "role",
       "data-roh": dataROH
     }, /*#__PURE__*/React__default.createElement(Overline, {
@@ -8740,7 +8797,7 @@ var PolicyLinks = function PolicyLinks(_ref) {
   }));
 };
 
-var _templateObject$12, _templateObject3$B, _templateObject4$v, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9, _templateObject9$5, _templateObject0$5, _templateObject1$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject$12, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 12;
 var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -8788,14 +8845,14 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
   var mobileMarginBottom = _ref8.mobileMarginBottom;
   return mobileMarginBottom && "\n      @media " + devices.mobile + " {\n        margin-bottom: " + mobileMarginBottom + "px;\n      }\n    ";
 });
-var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
-var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
-var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
-var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
-var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
-var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
-var asCardOverrides = /*#__PURE__*/styled.css(_templateObject1$3 || (_templateObject1$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", " {\n    flex-direction: row;\n    @media ", " {\n      flex-direction: row;\n    }\n  }\n"])), ButtonsContainer$2, devices.tablet);
-var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: left;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref9) {
+var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
+var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
+var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
+var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
+var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
+var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$6 || (_templateObject0$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
+var asCardOverrides = /*#__PURE__*/styled.css(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", " {\n    flex-direction: row;\n    @media ", " {\n      flex-direction: row;\n    }\n  }\n"])), ButtonsContainer$2, devices.tablet);
+var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: left;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref9) {
   var imageToLeft = _ref9.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
@@ -8816,12 +8873,12 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_te
 var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  margin-bottom: 32px;\n  whiete-space: break-spaces;\n  overflow-wrap: break-word;\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
 var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
 
-var _excluded$l = ["text"],
+var _excluded$m = ["text"],
   _excluded2$2 = ["text"],
   _excluded3$1 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_TEXT$1 = 28;
-var LENGTH_TEXT_PARAGRAPH = 130;
+var LENGTH_TEXT_PARAGRAPH = 185;
 var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
 var PromoWithTags = function PromoWithTags(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -8884,7 +8941,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -9012,7 +9069,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$13, _templateObject2$Q, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$f;
+var _templateObject$13, _templateObject2$Q, _templateObject3$C, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
 var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
@@ -9031,9 +9088,9 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
 var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 24px;\n  }\n"])), devices.mobile);
-var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
-var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  margin-bottom: 32px;\n  whiete-space: break-spaces;\n  overflow-wrap: break-word;\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
-var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref5) {
+var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
+var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  margin-bottom: 32px;\n  whiete-space: break-spaces;\n  overflow-wrap: break-word;\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
+var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref5) {
   var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
     primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
     _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -9087,7 +9144,7 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
   return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
 };
 
-var VideoWithControls$2 = function VideoWithControls(_ref) {
+var VideoWithControls$1 = function VideoWithControls(_ref) {
   var video = _ref.video,
     settings = _ref.settings;
   var videoRef = React.useRef(null);
@@ -9162,13 +9219,13 @@ var PromoChild = function PromoChild(_ref) {
   }, isImage && (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3'],
     "data-testid": "AspectRatioWrapper"
-  }, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
+  }, children)), isVideo && /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
     video: children,
     settings: videoSettings
   }));
 };
 
-var _excluded$m = ["text"],
+var _excluded$n = ["text"],
   _excluded2$3 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -9195,7 +9252,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
@@ -9225,7 +9282,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     size: titleSize,
     hierarchy: titleHierarchy
   }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
-    size: "small"
+    size: "medium"
   }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
     size: "large",
     dangerouslySetInnerHTML: {
@@ -9483,7 +9540,7 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description)))));
 };
 
-var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4;
+var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7, _templateObject0$7, _templateObject1$5;
 var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:focus,\n  &.focus {\n    outline: ", ";\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    cursor: none;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return "3px solid " + theme.colors.lapisLazuli;
@@ -9507,11 +9564,11 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
     color: theme.colors.black,
     title: 'Select Arrow'
   };
-})(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n\n  max-width: 24px;\n  max-height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
-var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
-var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
-var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
-var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
+})(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n\n  max-width: 24px;\n  max-height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
+var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
+var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
+var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
+var Option = /*#__PURE__*/styled__default.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
   var theme = _ref6.theme,
     hover = _ref6.hover;
   var _theme$colors = theme.colors,
@@ -9521,9 +9578,9 @@ var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObj
   return "\n        background-color: " + lightgrey + ";\n        &:hover { background-color: " + midgrey + " }\n    ";
 });
 var selectStyles = function selectStyles(width, height) {
-  return styled.css(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  * {\n    width: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    top: ", ";\n  }\n  ", " {\n    height: ", ";\n  }\n  p {\n    height: ", ";\n    padding-inline: 20px;\n\n    display: flex;\n    align-items: center;\n  }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
+  return styled.css(_templateObject0$7 || (_templateObject0$7 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  * {\n    width: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    top: ", ";\n  }\n  ", " {\n    height: ", ";\n  }\n  p {\n    height: ", ";\n    padding-inline: 20px;\n\n    display: flex;\n    align-items: center;\n  }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
 };
-var SelectList = /*#__PURE__*/styled__default.ul(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  & ", " {\n    position: absolute;\n\n    top: 13px;\n    right: 16px;\n  }\n"])), function (_ref7) {
+var SelectList = /*#__PURE__*/styled__default.ul(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  & ", " {\n    position: absolute;\n\n    top: 13px;\n    right: 16px;\n  }\n"])), function (_ref7) {
   var width = _ref7.width,
     height = _ref7.height;
   return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
@@ -9894,7 +9951,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_temp
   return "var(--base-color-errorstate)";
 });
 
-var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components"];
+var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -9945,7 +10002,7 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -9963,7 +10020,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
 
-var _excluded$o = ["label", "error", "width", "darkMode", "components"];
+var _excluded$p = ["label", "error", "width", "darkMode", "components"];
 /**
  * The Select2Async component is similar to Select 2, but uses react-select async
  * component for select instead of regular react-select component. This can be used
@@ -9985,7 +10042,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     components = _ref.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -10002,7 +10059,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
   })));
 };
 
-var _templateObject$1b, _templateObject3$H, _templateObject4$z, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
+var _templateObject$1b, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
 var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__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$H || (_templateObject3$H = /*#__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$z || (_templateObject4$z = /*#__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) {
@@ -10012,14 +10069,14 @@ var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$z || (_t
   var stackCtasEarly = _ref2.stackCtasEarly;
   return stackCtasEarly && "\n      @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n        * {\n          width: 100%;\n        }\n      }\n    ";
 }, devices.smallDesktop, 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: ", ";\n  align-items: stretch;\n"])), function (_ref3) {
+var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-black);\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  align-items: stretch;\n"])), function (_ref3) {
   var singleChild = _ref3.singleChild;
   return singleChild ? '0' : '10px';
 });
-var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && p {\n    margin: 0;\n    padding: 0;\n  }\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"])));
-var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--color-base-dark-grey);\n"])));
-var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n"])));
+var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && p {\n    margin: 0;\n    padding: 0;\n  }\n"])));
+var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n"])));
+var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--color-base-dark-grey);\n"])));
+var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n"])));
 
 // Set max. character length
 var setMaxCharLength = function setMaxCharLength(value, maxLength) {
@@ -10122,7 +10179,7 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_temp
 var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: table-caption;\n  caption-side: bottom;\n  margin-top: var(--carousel-image-caption-margin);\n"])));
 var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-clamp: 2;\n  max-height: 46px;\n  white-space: normal;\n  word-break: break-word;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n"])));
 
-var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
+var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
 var ImageWithCaption = function ImageWithCaption(_ref) {
   var caption = _ref.caption,
     altText = _ref.altText,
@@ -10132,7 +10189,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
     loading = _ref.loading,
     aspectRatio = _ref.aspectRatio,
     className = _ref.className,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement(Wrapper$7, Object.assign({
     aspectRatio: aspectRatio,
     className: className
@@ -10153,13 +10210,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   }, caption))));
 };
 
-var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$t, _templateObject6$m;
+var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u, _templateObject6$n;
 var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__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$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
 var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__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 IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__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$n || (_templateObject6$n = /*#__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 _ref$title = _ref.title,
@@ -10197,7 +10254,7 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$u;
+var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
 var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__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$X || (_templateObject2$X = /*#__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$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
@@ -10208,7 +10265,7 @@ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$B ||
   var isVisible = _ref2.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n"])));
+var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n"])));
 
 var keyDown = function keyDown(e, toggleFunction) {
   if (e.key === 'Enter' || e.key === 'Space') {
@@ -10289,7 +10346,7 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
 
-var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v;
+var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w;
 var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
 var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$Y || (_templateObject2$Y = /*#__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$L || (_templateObject3$L = /*#__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);
@@ -10297,7 +10354,7 @@ var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$C || (_template
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
 }, exports.Colors.MidGrey);
-var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
+var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
   var isOpen = _ref2.isOpen;
   return isOpen ? 'block' : 'none';
 }, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
@@ -10453,7 +10510,7 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$w, _templateObject6$n;
+var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o;
 var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var Sections = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
@@ -10461,11 +10518,11 @@ var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateO
   return "var(--base-color-" + color + ")";
 });
 var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
-var Text = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+var Text = /*#__PURE__*/styled__default.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
 });
-var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
+var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
   var color = _ref3.color;
   return "var(--base-color-" + color + ")";
 });
@@ -10547,19 +10604,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
+var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
 var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
 var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$E || (_templateObject4$E = /*#__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) + ")";
 }, devices.tablet, devices.mobile);
-var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  text-align: left;\n  vertical-align: middle;\n  border: 1px solid var(--color-primary-black);\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    min-width: 150px;\n  }\n"])), function (props) {
+var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  text-align: left;\n  vertical-align: middle;\n  border: 1px solid var(--color-primary-black);\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    min-width: 150px;\n  }\n"])), function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, 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 PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$p || (_templateObject6$p = /*#__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$j || (_templateObject7$j = /*#__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$d || (_templateObject8$d = /*#__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) {
@@ -10762,7 +10819,7 @@ var Table = function Table(_ref) {
   }))));
 };
 
-var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
+var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
 var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1i || (_templateObject$1i = /*#__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 + ")";
@@ -10773,14 +10830,14 @@ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1i || (_temp
 var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$$ || (_templateObject2$$ = /*#__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$O || (_templateObject3$O = /*#__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$F || (_templateObject4$F = /*#__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 ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__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"])));
-var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  gap: var(--grid-column-gap);\n  cursor: pointer;\n"])));
+var Form = /*#__PURE__*/styled__default.form(_templateObject5$z || (_templateObject5$z = /*#__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$q || (_templateObject6$q = /*#__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$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--color-base-errorstate);\n"])));
+var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$e || (_templateObject8$e = /*#__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$9 || (_templateObject9$9 = /*#__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$8 || (_templateObject0$8 = /*#__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$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
+var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  gap: var(--grid-column-gap);\n  cursor: pointer;\n"])));
 var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  transform: rotate(", ");\n  .dropdown-icon > div {\n    border-bottom: none;\n    color: var(--color-base-black);\n    margin: 0;\n  }\n"])), function (_ref3) {
   var _ref3$isOpen = _ref3.isOpen,
     isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
@@ -11067,10 +11124,10 @@ var SignUpForm = function SignUpForm(_ref) {
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "small"
-  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
+  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
     onClick: handleFormSubmit,
     theme: theme
-  })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$2, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
+  })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
     onClick: handleFormSubmit,
     theme: theme
   })), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
@@ -11187,13 +11244,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
   }))))));
 };
 
-var _templateObject$1j, _templateObject2$10, _templateObject4$G, _templateObject5$z;
+var _templateObject$1j, _templateObject2$10, _templateObject4$G, _templateObject5$A;
 var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1j || (_templateObject$1j = /*#__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$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 }, devices.mobile);
 var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$G || (_templateObject4$G = /*#__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"])));
+var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 
 var defaultGrid = {
   columnStartDesktop: 2,
@@ -11384,14 +11441,9 @@ var BodyContent = function BodyContent(_ref2) {
     _ref2$renderGridItem = _ref2.renderGridItem,
     renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
   var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
-  var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
-    tag: "div",
-    size: "large",
-    "data-testid": "text-container",
+  var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
     className: textContainerClassName,
-    dangerouslySetInnerHTML: {
-      __html: addTypographyClasses(text)
-    }
+    html: text
   });
   var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
@@ -11409,7 +11461,7 @@ var BodyContent = function BodyContent(_ref2) {
   }, gridItemOrContent);
 };
 
-var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$A, _templateObject6$q, _templateObject7$k;
+var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
 var color = 'primary-black';
 var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
   borderColor: color,
@@ -11425,11 +11477,11 @@ var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
 })(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    letter-spacing: -0.5px;\n    margin-bottom: 27px;\n\n    @media ", " {\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
 var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
   size: 'large'
-})(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-bottom: 27px;\n\n    @media ", " {\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
-var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--primary-black);\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-skip: none;\n"])));
+})(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-bottom: 27px;\n\n    @media ", " {\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
+var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--primary-black);\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-skip: none;\n"])));
 var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
   size: 'large'
-})(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+})(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 var Paywall = function Paywall(_ref) {
   var className = _ref.className,
@@ -11622,14 +11674,14 @@ var Navigation = function Navigation(_ref) {
   })))))));
 };
 
-var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$B, _templateObject6$r, _templateObject7$l;
+var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject6$s, _templateObject7$m;
 var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1n || (_templateObject$1n = /*#__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$13 || (_templateObject2$13 = /*#__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$Q || (_templateObject3$Q = /*#__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$I || (_templateObject4$I = /*#__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$B || (_templateObject5$B = /*#__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);
-var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 290px;\n\n  @media ", " {\n    max-width: unset;\n  }\n"])), devices.mobile);
-var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: 0.4px;\n  color: var(--color-base-white);\n  border-bottom: unset;\n  text-decoration: underline;\n  text-underline-offset: var(--harmonic-text-link-underline-offset);\n  margin-bottom: 0;\n  padding-bottom: 0;\n"])));
+var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$C || (_templateObject5$C = /*#__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);
+var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 290px;\n\n  @media ", " {\n    max-width: unset;\n  }\n"])), devices.mobile);
+var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: 0.4px;\n  color: var(--color-base-white);\n  border-bottom: unset;\n  text-decoration: underline;\n  text-underline-offset: var(--harmonic-text-link-underline-offset);\n  margin-bottom: 0;\n  padding-bottom: 0;\n"])));
 
 var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
 var Footer = function Footer(_ref) {
@@ -11687,7 +11739,7 @@ var Footer = function Footer(_ref) {
   }, additionalInfo))));
 };
 
-var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
+var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
 var LIST_ITEM_GAP = 32;
 var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__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;
@@ -11698,7 +11750,7 @@ var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o ||
 });
 var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
 var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  gap: ", "px;\n  justify-content: ", ";\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  height: var(--anchor-tabs-height);\n  white-space: nowrap;\n  overflow: scroll;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scroll-behavior: smooth;\n\n  @media ", " {\n    & {\n      width: ", ";\n    }\n  }\n"])), function (_ref3) {
+var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  gap: ", "px;\n  justify-content: ", ";\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  height: var(--anchor-tabs-height);\n  white-space: nowrap;\n  overflow: scroll;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scroll-behavior: smooth;\n\n  @media ", " {\n    & {\n      width: ", ";\n    }\n  }\n"])), function (_ref3) {
   var tabsOverflow = _ref3.tabsOverflow;
   return tabsOverflow ? 'calc(100% - 74px)' : '100%';
 }, LIST_ITEM_GAP, function (_ref4) {
@@ -11709,11 +11761,11 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_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$f || (_templateObject8$f = /*#__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$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && styled.css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 });
-var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: ", ";\n  pinter-events: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  && svg path {\n    fill: ", ";\n  }\n"])), function (_ref8) {
+var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: ", ";\n  pinter-events: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  && svg path {\n    fill: ", ";\n  }\n"])), function (_ref8) {
   var disabled = _ref8.disabled;
   return disabled ? 'not-allowed' : 'pointer';
 }, function (_ref9) {
@@ -11724,7 +11776,7 @@ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_temp
   return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
 });
 
-var _excluded$q = ["id", "text"];
+var _excluded$r = ["id", "text"];
 var AnchorTabBar = function AnchorTabBar(_ref) {
   var tabs = _ref.tabs,
     onTabClick = _ref.onTabClick,
@@ -11935,7 +11987,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, tabs.map(function (_ref4) {
     var id = _ref4.id,
       text = _ref4.text,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$q);
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$r);
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
     }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
@@ -11968,7 +12020,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   })))) : null))));
 };
 
-var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
+var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
 var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__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';
@@ -11979,9 +12031,9 @@ var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$S || (_
   return title ? 'row' : 'row-reverse';
 }, devices.tablet, devices.mobile);
 var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__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$s || (_templateObject6$s = /*#__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$m || (_templateObject7$m = /*#__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 ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__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$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
+var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$g || (_templateObject8$g = /*#__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) {
@@ -11994,10 +12046,10 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
   var theme = _ref6.theme;
   return theme.colors.primaryButtonReverse;
 });
-var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: var(--grid-outer-margin);\n  height: var(--button-height);\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      margin-right: var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      align-items: center;\n      margin-left: var(--grid-margin);\n      padding: 12px 0;\n    }\n  }\n"])), devices.mobile);
+var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: var(--grid-outer-margin);\n  height: var(--button-height);\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      margin-right: var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      align-items: center;\n      margin-left: var(--grid-margin);\n      padding: 12px 0;\n    }\n  }\n"])), devices.mobile);
 
-var _excluded$r = ["text"],
+var _excluded$s = ["text"],
   _excluded2$4 = ["text"];
 var TitleWithCTA = function TitleWithCTA(_ref) {
   var title = _ref.title,
@@ -12007,7 +12059,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
     message = _ref.message;
   var _ref2 = (links == null ? void 0 : links[0]) || {},
     primaryButtonText = _ref2.text,
-    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
+    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
   var _ref3 = (links == null ? void 0 : links[1]) || {},
     secondaryButtonText = _ref3.text,
     secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
@@ -12136,7 +12188,7 @@ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$18 || (_t
 var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$M || (_templateObject4$M = /*#__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"])));
 
-var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
+var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
 var MAX_Z_INDEX = 9999999999;
 if (Modal.defaultStyles.content) {
   Modal.defaultStyles.content.position = 'static';
@@ -12210,7 +12262,7 @@ var ModalWindow = function ModalWindow(_ref) {
     setIsOpen = _ref.setIsOpen,
     children = _ref.children,
     appElementId = _ref.appElementId,
-    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var isMobile = useMobile();
   var customStyles = {
     overlay: {
@@ -12338,7 +12390,7 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
   return "\n      width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n      margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n    ";
 };
 
-var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
+var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
 var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1u || (_templateObject$1u = /*#__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        > div {\n          height: var(--fullscreen-figure-height);\n        }\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\n          > div {\n            height: " + imagesHeightDesktop + "px;\n          }\n        }\n      }\n    }";
@@ -12353,14 +12405,14 @@ var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$19
 });
 var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile, devices.mobile);
 var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  user-select: text;\n"])));
-var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref4) {
+var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref4) {
   var isDescriptionPresent = _ref4.isDescriptionPresent;
   return isDescriptionPresent && 'margin: 20px 0';
 });
-var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    line-height: 42px;\n  }\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  padding-bottom: 4px;\n  box-sizing: border-box;\n  /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n  max-height: calc(2 * 40px + 4px);\n"])));
-var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__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 SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .swipe {\n    padding-inline-start: 2px;\n    padding-block-start: 2px;\n  }\n\n  ", ";\n\n  @media ", " {\n    grid-column: ", ";\n  }\n\n  @media ", " {\n    grid-column: 2 / span 13;\n  }\n"])), function (_ref5) {
+var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    line-height: 42px;\n  }\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  padding-bottom: 4px;\n  box-sizing: border-box;\n  /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n  max-height: calc(2 * 40px + 4px);\n"])));
+var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n"])));
+var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
+var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .swipe {\n    padding-inline-start: 2px;\n    padding-block-start: 2px;\n  }\n\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' : '';
 }, devices.tablet, function (_ref6) {
@@ -12603,19 +12655,19 @@ var Carousel = function Carousel(_ref) {
   }, children))));
 };
 
-var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
+var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$d, _templateObject0$b, _templateObject1$7, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
 var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1v || (_templateObject$1v = /*#__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$1a || (_templateObject2$1a = /*#__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$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
 var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$O || (_templateObject4$O = /*#__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  a {\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n  }\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$E || (_templateObject5$E = /*#__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$u || (_templateObject6$u = /*#__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$o || (_templateObject7$o = /*#__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 CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$c || (_templateObject9$c = /*#__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$1 = /*#__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$1 = /*#__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);
-var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n"])));
+var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$F || (_templateObject5$F = /*#__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$v || (_templateObject6$v = /*#__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$p || (_templateObject7$p = /*#__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$i || (_templateObject8$i = /*#__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$d || (_templateObject9$d = /*#__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$2 = /*#__PURE__*/styled__default.div(_templateObject0$b || (_templateObject0$b = /*#__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$1 = /*#__PURE__*/styled__default.div(_templateObject1$7 || (_templateObject1$7 = /*#__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);
+var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n"])));
 var FirstButtonComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 16px;\n\n  @media ", " {\n    & {\n      display: flex;\n      flex-direction: column;\n      margin-right: 0;\n      margin-bottom: 10px;\n    }\n  }\n"])), devices.mobile);
 var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobileAndTablet);
 var AdditionalInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 16px;\n  }\n"])), devices.mobileAndTablet);
@@ -12626,7 +12678,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject1
 }, devices.mobile);
 var ProgressContainer$1 = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  p {\n    margin-bottom: 16px;\n  }\n\n  @media ", " {\n    margin-top: 20px;\n\n    p {\n      margin-bottom: 12px;\n    }\n  }\n"])), devices.mobileAndTablet);
 
-var _excluded$t = ["text"],
+var _excluded$u = ["text"],
   _excluded2$5 = ["text"];
 var _buttonTypeToButton$2;
 var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
@@ -12637,7 +12689,7 @@ var Buttons = function Buttons(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$u);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
@@ -12753,7 +12805,7 @@ var VideoSlide = function VideoSlide(_ref) {
   });
   return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
     isCurrentSlide: isCurrentSlide
-  }, /*#__PURE__*/React__default.createElement(VideoWithControls$2, {
+  }, /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
     video: video,
     settings: settings
   }));
@@ -12852,7 +12904,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     auxiliaryCTA: auxiliaryCTA
   })), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
     "data-testid": "carousel-wrapper"
-  }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
+  }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$2, {
     "data-testid": "rotator-buttons"
   }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickNext: onNext,
@@ -12869,11 +12921,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   })));
 };
 
-var _excluded$u = ["logo", "slides"];
+var _excluded$v = ["logo", "slides"];
 var HighlightsCinema = function HighlightsCinema(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12890,10 +12942,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
   })));
 };
 
-var _excluded$v = ["slides"];
+var _excluded$w = ["slides"];
 var HighlightsCore = function HighlightsCore(_ref) {
   var slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12907,11 +12959,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
   })));
 };
 
-var _excluded$w = ["logo", "slides"];
+var _excluded$x = ["logo", "slides"];
 var HighlightsStream = function HighlightsStream(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -14522,6 +14574,7 @@ exports.Caption = Caption;
 exports.Card = Card;
 exports.Cards = Cards;
 exports.Carousel = Carousel;
+exports.CastFilter = CastFilters;
 exports.CinemaBadge = CinemaBadge;
 exports.ContactCard = ContactCard;
 exports.ContentSummary = ContentSummary;
@@ -14610,7 +14663,7 @@ exports.TypeTags = TypeTags;
 exports.UpsellCard = UpsellCard;
 exports.UpsellSection = UpsellSection;
 exports.VideoControls = VideoControls;
-exports.VideoWithControls = VideoWithControls$2;
+exports.VideoWithControls = VideoWithControls$1;
 exports.breakpoints = breakpoints;
 exports.devices = devices;
 exports.useHarmonicTheme = useHarmonicTheme;