npm - @royaloperahouse/harmonic - Versions diffs - 0.18.1 → 0.18.2-a - Mend

@royaloperahouse/harmonic 0.18.1 → 0.18.2-a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/dist/harmonic.cjs.development.js CHANGED Viewed

@@ -281,7 +281,8 @@ BodyCopyHarmonic.displayName = 'BodyCopyHarmonic';
 /* ~~~ Overline - (use case) ~~~ */
 var HarmonicOverline = function HarmonicOverline(_ref6) {
   var children = _ref6.children,
-    size = _ref6.size,
+    _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'large' : _ref6$size,
     _ref6$color = _ref6.color,
     color = _ref6$color === void 0 ? 'inherit' : _ref6$color,
     className = _ref6.className,
@@ -3068,23 +3069,34 @@ var StyledImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateOb
   return aspectRatio;
 });
-var ImageAspectRatioWrapper = function ImageAspectRatioWrapper(_ref) {
+var _excluded$6 = ["aspectRatio", "children", "alt"];
+var ImageAspectRatioWrapper = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var aspectRatio = _ref.aspectRatio,
     children = _ref.children,
-    alt = _ref.alt;
-  return /*#__PURE__*/React__default.createElement(StyledImageAspectRatioWrapper, {
+    alt = _ref.alt,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  return /*#__PURE__*/React__default.createElement(StyledImageAspectRatioWrapper, Object.assign({
+    ref: ref,
     aspectRatio: aspectRatio
-  }, React__default.Children.map(children, function (child) {
+  }, restProps), React__default.Children.map(children, function (child) {
     if (/*#__PURE__*/React__default.isValidElement(child)) {
-      return /*#__PURE__*/React__default.cloneElement(child, {
-        alt: alt || child.props.alt || '',
-        role: alt === '' ? 'presentation' : 'img',
-        'aria-hidden': alt === ''
-      });
+      var finalAlt = alt || child.props.alt || '';
+      var childProps = child.props || {};
+      var clonedProps = {
+        alt: finalAlt
+      };
+      // Only add role="presentation" for decorative images (empty alt)
+      // Don't set role="img" - img elements already have that implicit role
+      // Respect explicit accessibility attributes set by child/parent
+      if (finalAlt === '' && !childProps.role && !childProps['aria-hidden']) {
+        clonedProps.role = 'presentation';
+      }
+      return /*#__PURE__*/React__default.cloneElement(child, clonedProps);
     }
     return child;
   }));
-};
+});
+ImageAspectRatioWrapper.displayName = 'ImageAspectRatioWrapper';
 var _templateObject$b, _templateObject2$6, _templateObject3$2, _templateObject4$1, _templateObject5;
 var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: ", ";\n  box-shadow: ", ";\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])), function (_ref) {
@@ -3382,7 +3394,7 @@ var ErrorLabel = /*#__PURE__*/styled__default.div(_templateObject6 || (_template
   return 'var(--base-color-errorstate)';
 });
-var _excluded$6 = ["children", "disabled", "error", "darkMode", "blackBox"];
+var _excluded$7 = ["children", "disabled", "error", "darkMode", "blackBox"];
 /**
  * A Radio component, that wraps around the native `<input type="radio"/>` element
  * and adds some extra styling, states and information around it (i.e. an error label,
@@ -3411,7 +3423,7 @@ var Radio2Component = function Radio2Component(_ref, ref) {
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     _ref$blackBox = _ref.blackBox,
     blackBox = _ref$blackBox === void 0 ? false : _ref$blackBox,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(TickboxLabel, {
     darkMode: darkMode,
     blackBox: blackBox
@@ -3442,10 +3454,102 @@ var Radio2 = /*#__PURE__*/React.forwardRef(Radio2Component);
 var _templateObject$f, _templateObject2$9, _templateObject3$5, _templateObject4$3, _templateObject5$2;
 var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n"])));
-var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  display: flex;\n  align-items: center;\n  width: var(--rotator-button-width);\n  height: var(--rotator-button-width);\n\n  svg {\n    width: var(--rotator-button-icon-width);\n    height: var(--rotator-button-icon-width);\n  }\n"])));
+var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  display: flex;\n  align-items: center;\n\n  width: ", ";\n  height: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (_ref) {
+  var size = _ref.size;
+  return size === 'small' ? 'var(--rotator-button-small-width)' : 'var(--rotator-button-width)';
+}, function (_ref2) {
+  var size = _ref2.size;
+  return size === 'small' ? 'var(--rotator-button-small-width)' : 'var(--rotator-button-width)';
+}, function (_ref3) {
+  var size = _ref3.size;
+  return size === 'small' ? 'var(--rotator-button-small-icon-width)' : 'var(--rotator-button-icon-width)';
+}, function (_ref4) {
+  var size = _ref4.size;
+  return size === 'small' ? 'var(--rotator-button-small-icon-width)' : 'var(--rotator-button-icon-width)';
+});
 var IconWrapper$1 = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--rotator-button-bg-color);\n  color: var(--rotator-button-color);\n\n  svg path {\n    fill: var(--rotator-button-color);\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: var(--rotator-button-hover-bg-color);\n\n    && svg path {\n      fill: var(--rotator-button-hover-color);\n    }\n  }\n"])));
 var IconUnavailableWrapper = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-state-disabled);\n  color: var(--color-primary-black);\n  opacity: 0.2;\n\n  svg path {\n    fill: var(--color-primary-black);\n  }\n\n  @media ", " {\n    pointer-events: none;\n  }\n"])), devices.mobile);
-var FullscreenIconWrapper = /*#__PURE__*/styled__default(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n\n  @media ", " {\n    display: none;\n    pointer-events: none;\n  }\n"])), devices.mobileAndTablet);
+var FullscreenIconWrapper = /*#__PURE__*/styled__default(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n"])));
+// WARNING: Do not use this on server side rendering, it may throw an error.
+var isIOS = function isIOS() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof navigator === undefined) return false;
+    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
+    // iPad on iOS 13 detection
+    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
+  } catch (e) {
+    console.warn('Error checking if device is iOS.', e);
+    return false;
+  }
+};
+// React hook version of isIOS (for server side rendering)
+var useIOS = function useIOS() {
+  var _useState = React.useState(false),
+    IOS = _useState[0],
+    setIOS = _useState[1];
+  React.useEffect(function () {
+    if (typeof navigator === undefined) return;
+    setIOS(isIOS());
+  }, []);
+  return IOS;
+};
+// Checks device size based on window width
+var isMobile = function isMobile() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof window === undefined) return false;
+    return window.innerWidth < breakpoints.sm;
+  } catch (e) {
+    console.warn('Error checking if device is mobile.', e);
+    return false;
+  }
+};
+// React hook version of isMobile (for server side rendering)
+var useMobile = function useMobile() {
+  var _useState2 = React.useState(false),
+    mobile = _useState2[0],
+    setMobile = _useState2[1];
+  React.useEffect(function () {
+    if (typeof window === undefined) return;
+    setMobile(isMobile());
+  }, []);
+  return mobile;
+};
+var useViewport = function useViewport() {
+  var _useState3 = React.useState(false),
+    hydrated = _useState3[0],
+    setHydrated = _useState3[1];
+  var _useState4 = React.useState({
+      width: 0,
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false
+    }),
+    viewport = _useState4[0],
+    setViewport = _useState4[1];
+  React.useEffect(function () {
+    if (typeof window === 'undefined') return undefined;
+    var handleResize = function handleResize() {
+      setViewport({
+        width: window.innerWidth,
+        isMobile: window.innerWidth < breakpoints.sm,
+        isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
+        isDesktop: window.innerWidth >= breakpoints.md
+      });
+    };
+    handleResize();
+    setHydrated(true);
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return _extends({}, viewport, {
+    hydrated: hydrated
+  });
+};
 var RotatorButtons = function RotatorButtons(_ref) {
   var onClickPrev = _ref.onClickPrev,
@@ -3459,7 +3563,14 @@ var RotatorButtons = function RotatorButtons(_ref) {
     onClickFullscreen = _ref.onClickFullscreen,
     _ref$isFullscreen = _ref.isFullscreen,
     isFullscreen = _ref$isFullscreen === void 0 ? false : _ref$isFullscreen,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
     className = _ref.className;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile,
+    isTablet = _useViewport.isTablet,
+    hydrated = _useViewport.hydrated;
+  if (!hydrated) return null;
   var onClickLeftHandler = function onClickLeftHandler() {
     if (onClickPrev) {
       onClickPrev();
@@ -3511,6 +3622,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
   return /*#__PURE__*/React__default.createElement(ButtonsContainer, {
     className: className
   }, availablePrev ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
+    size: size,
     onClick: onClickLeftHandler,
     onKeyDown: onPrevKeyDownHandler,
     tabIndex: 0,
@@ -3519,8 +3631,10 @@ var RotatorButtons = function RotatorButtons(_ref) {
     "aria-label": "Previous slide",
     role: "button"
   }, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
+    size: size,
     "data-testid": "iconprevnoavailable"
   }, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
+    size: size,
     onClick: onClickRightHandler,
     onKeyDown: onNextKeyDownHandler,
     tabIndex: 0,
@@ -3529,8 +3643,10 @@ var RotatorButtons = function RotatorButtons(_ref) {
     "aria-label": "Next slide",
     role: "button"
   }, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
+    size: size,
     "data-testid": "iconnextnoavailable"
-  }, renderNextIcon())), showFullscreen && (/*#__PURE__*/React__default.createElement(FullscreenIconWrapper, {
+  }, renderNextIcon())), showFullscreen && !isMobile && !isTablet && (/*#__PURE__*/React__default.createElement(FullscreenIconWrapper, {
+    size: size,
     onClick: onClickFullscreenHandler,
     onKeyDown: onFullscreenKeyDownHandler,
     tabIndex: 0,
@@ -3628,7 +3744,7 @@ var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?
 var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
 var DEFAULT_DATA_ROH = 'ImgAdvert';
-var _excluded$7 = ["src", "dataRoh", "title"];
+var _excluded$8 = ["src", "dataRoh", "title"];
 var Sponsorship = function Sponsorship(_ref) {
   var _ref$src = _ref.src,
     src = _ref$src === void 0 ? DEFAULT_SPONSORSHIP_IFRAME : _ref$src,
@@ -3636,7 +3752,7 @@ var Sponsorship = function Sponsorship(_ref) {
     dataRoh = _ref$dataRoh === void 0 ? DEFAULT_DATA_ROH : _ref$dataRoh,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? DEFAULT_SPONSORSHIP_TITLE : _ref$title,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var linkText = title + " sponsorship";
   var linkDescription = linkText + " - visit " + title + "'s website (opens in new tab)";
   return /*#__PURE__*/React__default.createElement(SponsorshipWrapper, Object.assign({}, rest), /*#__PURE__*/React__default.createElement(SponsorshipLink, {
@@ -3783,7 +3899,7 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templ
 });
 var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n"])));
-var _excluded$8 = ["children", "iconName", "iconDirection", "color", "hoverColor", "className"];
+var _excluded$9 = ["children", "iconName", "iconDirection", "color", "hoverColor", "className"];
 var TabLink = function TabLink(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
@@ -3793,7 +3909,7 @@ var TabLink = function TabLink(_ref) {
     _ref$hoverColor = _ref.hoverColor,
     hoverColor = _ref$hoverColor === void 0 ? ThemeColor['primary-red'] : _ref$hoverColor,
     className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
     color: color,
     iconName: iconName,
@@ -3844,7 +3960,7 @@ var TextAreaError = /*#__PURE__*/styled__default.div(_templateObject4$5 || (_tem
   return darkMode ? 'var(--base-color-white)' : 'var(--base-color-errorstate)';
 });
-var _excluded$9 = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
+var _excluded$a = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
 /**
  * An HTML textarea component for Harmonic.
  *
@@ -3905,7 +4021,7 @@ var TextArea = function TextArea(_ref) {
     maxLength = _ref$maxLength === void 0 ? 950 : _ref$maxLength,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-    textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
     columnSpanDesktop: columnSpanDesktop,
@@ -3965,7 +4081,7 @@ var ErrorLabel$1 = /*#__PURE__*/styled__default.div(_templateObject6$1 || (_temp
 });
 var BodyCopyHarmonicWithWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-state-error);\n"])));
-var _excluded$a = ["label", "type", "error", "darkMode", "width"];
+var _excluded$b = ["label", "type", "error", "darkMode", "width"];
 /**
  * A text field component, that wraps around the native `<input />` element
  * and adds some extra states and information around it (i.e. a text and an error labels,
@@ -4012,7 +4128,7 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     width = _ref.width,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var _useState = React.useState(false),
     showPassword = _useState[0],
     setShowPassword = _useState[1];
@@ -4110,7 +4226,7 @@ var ErrorLabel$2 = /*#__PURE__*/styled__default.p(_templateObject5$4 || (_templa
   return darkMode ? theme.colors.white : theme.colors.error;
 });
-var _excluded$b = ["label", "error", "darkMode", "width"];
+var _excluded$c = ["label", "error", "darkMode", "width"];
 /**
  * @deprecated
  *
@@ -4124,7 +4240,7 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     width = _ref.width,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", {
     htmlFor: "text-field-input"
   }, /*#__PURE__*/React__default.createElement(TextLabel$2, {
@@ -4153,13 +4269,13 @@ var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_temp
 }, devices.mobile);
 var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
-var _excluded$c = ["children", "iconName", "iconDirection", "textColor"];
+var _excluded$d = ["children", "iconName", "iconDirection", "textColor"];
 var TextLink = function TextLink(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
     textColor = _ref.textColor,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
     color: textColor,
@@ -4352,7 +4468,7 @@ var ErrorLabel$3 = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_temp
   return 'var(--base-color-errorstate)';
 });
-var _excluded$d = ["children", "disabled", "error", "darkMode", "blackBox"];
+var _excluded$e = ["children", "disabled", "error", "darkMode", "blackBox"];
 /**
  * A Tickbox component, that wraps around the native `<input type="checkbox"/>` element
  * and adds some extra styling, states and information around it (i.e. an error label,
@@ -4381,7 +4497,7 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     _ref$blackBox = _ref.blackBox,
     blackBox = _ref$blackBox === void 0 ? false : _ref$blackBox,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return /*#__PURE__*/React__default.createElement(Container$2, null, /*#__PURE__*/React__default.createElement(TickboxLabel$2, {
     darkMode: darkMode,
     blackBox: blackBox
@@ -4940,86 +5056,6 @@ var _templateObject$w, _templateObject2$n;
 var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n"])));
 var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-media-icon-height);\n  width: var(--footer-media-icon-width);\n\n  &:focus {\n    outline: 2px solid var(--color-base-white);\n  }\n"])));
-// WARNING: Do not use this on server side rendering, it may throw an error.
-var isIOS = function isIOS() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof navigator === undefined) return false;
-    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
-    // iPad on iOS 13 detection
-    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
-  } catch (e) {
-    console.warn('Error checking if device is iOS.', e);
-    return false;
-  }
-};
-// React hook version of isIOS (for server side rendering)
-var useIOS = function useIOS() {
-  var _useState = React.useState(false),
-    IOS = _useState[0],
-    setIOS = _useState[1];
-  React.useEffect(function () {
-    if (typeof navigator === undefined) return;
-    setIOS(isIOS());
-  }, []);
-  return IOS;
-};
-// Checks device size based on window width
-var isMobile = function isMobile() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof window === undefined) return false;
-    return window.innerWidth < breakpoints.sm;
-  } catch (e) {
-    console.warn('Error checking if device is mobile.', e);
-    return false;
-  }
-};
-// React hook version of isMobile (for server side rendering)
-var useMobile = function useMobile() {
-  var _useState2 = React.useState(false),
-    mobile = _useState2[0],
-    setMobile = _useState2[1];
-  React.useEffect(function () {
-    if (typeof window === undefined) return;
-    setMobile(isMobile());
-  }, []);
-  return mobile;
-};
-var useViewport = function useViewport() {
-  var _useState3 = React.useState(false),
-    hydrated = _useState3[0],
-    setHydrated = _useState3[1];
-  var _useState4 = React.useState({
-      width: 0,
-      isMobile: false,
-      isTablet: false,
-      isDesktop: false
-    }),
-    viewport = _useState4[0],
-    setViewport = _useState4[1];
-  React.useEffect(function () {
-    if (typeof window === 'undefined') return undefined;
-    var handleResize = function handleResize() {
-      setViewport({
-        width: window.innerWidth,
-        isMobile: window.innerWidth < breakpoints.sm,
-        isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
-        isDesktop: window.innerWidth >= breakpoints.md
-      });
-    };
-    handleResize();
-    setHydrated(true);
-    window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-  return _extends({}, viewport, {
-    hydrated: hydrated
-  });
-};
 var SocialLinks = function SocialLinks(_ref) {
   var items = _ref.items;
   var _useViewport = useViewport(),
@@ -5864,32 +5900,68 @@ var Accordion = function Accordion(_ref) {
     childrenVisibility = _useState4[0],
     setChildrenVisibility = _useState4[1];
   var content = React.useRef(null);
+  var timeoutRef = React.useRef(null);
+  var rafRef = React.useRef(null);
   React.useEffect(function () {
     if (content != null && content.current && initOpen) {
       setTextHeight(content.current.scrollHeight + "px");
     }
   }, [content, initOpen]);
+  React.useEffect(function () {
+    if (openAccordion && content != null && content.current) {
+      rafRef.current = window.requestAnimationFrame(function () {
+        var _content$current$scro, _content$current;
+        setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
+      });
+    } else if (!openAccordion) {
+      setTextHeight('0px');
+    }
+  }, [openAccordion, childrenVisibility, content]);
+  React.useEffect(function () {
+    return function () {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);
   var toggleAccordion = function toggleAccordion() {
-    if (!children) return;
-    setOpenAccordion(!openAccordion);
-    setTextHeight(openAccordion ? '0px' : content.current.scrollHeight + "px");
-    setIcon(openAccordion ? collapsedStateIconData : expandedStateIconData);
-    setChildrenVisibility(!openAccordion);
+    if (React__default.Children.count(children) === 0) return;
+    if (openAccordion) {
+      setOpenAccordion(false);
+      setTextHeight('0px');
+      setIcon(collapsedStateIconData);
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = window.setTimeout(function () {
+        setChildrenVisibility(false);
+        timeoutRef.current = null;
+      }, 300);
+    } else {
+      setChildrenVisibility(true);
+      setOpenAccordion(true);
+      setIcon(expandedStateIconData);
+    }
   };
   var keyDown = function keyDown(e) {
-    if (e.key === 'Enter' || e.key === 'Space') {
+    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+      e.preventDefault();
       toggleAccordion();
     }
   };
   var contentContainerId = title + "-accordion-content";
   return /*#__PURE__*/React__default.createElement(AccordionContainer, {
     showLine: showLine,
-    tabIndex: 0,
-    onKeyDown: keyDown,
     className: className
   }, /*#__PURE__*/React__default.createElement(TitleContainer$1, {
     onClick: toggleAccordion,
-    tabIndex: -1,
+    onKeyDown: keyDown,
+    tabIndex: 0,
     role: "button",
     "aria-label": title,
     "aria-expanded": openAccordion,
@@ -5900,10 +5972,10 @@ var Accordion = function Accordion(_ref) {
     ref: content,
     textHeight: textHeight,
     id: contentContainerId,
-    "aria-live": "polite",
+    "aria-live": openAccordion ? 'polite' : 'off',
     tag: "div",
     size: "large"
-  }, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
+  }, childrenVisibility && /*#__PURE__*/React__default.createElement(ChildrenContainer, {
     isVisible: childrenVisibility
   }, children)));
 };
@@ -6037,11 +6109,11 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
 var _templateObject$G;
 var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 20px;\n  border: none;\n  padding: 0;\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n\n  && span svg * {\n    fill: ", ";\n  }\n\n  .auxiliaryButtonIcon {\n    width: 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
-var _excluded$e = ["children", "className"];
+var _excluded$f = ["children", "className"];
 var AuxiliaryButton = function AuxiliaryButton(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
     iconClassName: "auxiliaryButtonIcon",
     className: className
@@ -6185,7 +6257,7 @@ var truncateReactNodeString = function truncateReactNodeString(node, resultLengt
   return truncateHtmlString(nodeString, resultLength, addDots);
 };
-var _excluded$f = ["text"],
+var _excluded$g = ["text"],
   _excluded2$1 = ["text"];
 var _buttonTypeToButton;
 var LENGTH_LARGE_TEXT$1 = 28;
@@ -6235,7 +6307,7 @@ var Card = function Card(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
   var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$1) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -6465,6 +6537,7 @@ var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateOb
   CarouselType["Image"] = "image";
   CarouselType["SmallCard"] = "SmallCard";
   CarouselType["LargeCard"] = "LargeCard";
+  CarouselType["PersonCard"] = "PersonCard";
 })(exports.CarouselType || (exports.CarouselType = {}));
 var clickHandler = function clickHandler(link) {
@@ -6595,7 +6668,7 @@ var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$M || (_
 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$g = ["text", "onClick"];
+var _excluded$h = ["text", "onClick"];
 var HotFilters = function HotFilters(_ref) {
   var items = _ref.items,
     className = _ref.className,
@@ -6611,7 +6684,7 @@ var HotFilters = function HotFilters(_ref) {
   }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
     var text = item.text,
       _onClick = item.onClick,
-      rest = _objectWithoutPropertiesLoose(item, _excluded$g);
+      rest = _objectWithoutPropertiesLoose(item, _excluded$h);
     var isSelected = index === selectedIndex;
     return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
       key: index,
@@ -6989,7 +7062,7 @@ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$d || (_tem
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__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$5 || (_templateObject8$5 = /*#__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$h = ["text"];
+var _excluded$i = ["text"];
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
     text = _ref.text,
@@ -7007,7 +7080,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var truncatedText = text == null ? void 0 : text.substring(0, 75);
   var _ref2 = link || {},
     linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$h);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
     bgUrlDevice: bgUrlDevice,
@@ -7469,7 +7542,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
-var _excluded$i = ["text"];
+var _excluded$j = ["text"];
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -7574,7 +7647,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$i);
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
   // const titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
     elementId: 'compact-header-video',
@@ -7674,13 +7747,12 @@ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
   return movedSlides;
 };
-var _excluded$j = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange"];
+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;
-  if (childrenLength > MAX_CLONES_NUMBER) return MAX_CLONES_NUMBER;
-  return childrenLength;
+  return Math.min(childrenLength, MAX_CLONES_NUMBER);
 };
 var getSlidedWidth = function getSlidedWidth(slide) {
   if (!slide) return 0;
@@ -7699,7 +7771,8 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$slidesAriaHidden = _ref.slidesAriaHidden,
     slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
     onActiveChange = _ref.onActiveChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    onOverflowChange = _ref.onOverflowChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var containerRef = React.useRef(null);
   var childRefs = React.useRef([]);
   var startX = React.useRef(0);
@@ -7760,8 +7833,18 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
   var updateDimensions = React.useCallback(function () {
-    if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
-    if (childRefs.current.length) setSlideWidths(childRefs.current.map(getSlidedWidth));
+    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);
@@ -7783,10 +7866,16 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var getTranslateX = function getTranslateX() {
-    var offset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
+    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 offset + (slidesOffsetBefore || 0);
+    return (slidesOffsetBefore || 0) - widthsBefore;
   };
   var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
     var delta = currentTranslate.current - getTranslateX();
@@ -7796,6 +7885,10 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       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 {
@@ -7807,10 +7900,26 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setDragTranslateX(null);
   };
   var canMoveNext = function canMoveNext() {
-    var totalVisibleWidth = slideWidths.slice(currentIndex).reduce(function (acc, width) {
-      return acc + width;
+    if (infinite) return true;
+    if (slideWidths.length === 0 || containerWidth === 0) return false;
+    var totalWidth = slideWidths.reduce(function (acc, w) {
+      return acc + w;
     }, 0);
-    return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 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);
@@ -7826,7 +7935,12 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setIsActive();
     setTransitioning(true);
     setCurrentIndex(function (prev) {
-      return infinite ? prev - 1 : Math.max(0, prev - 1);
+      var target = infinite ? prev - 1 : Math.max(0, prev - 1);
+      if (!infinite) {
+        currentTranslate.current = getTranslateForIndex(target);
+        setDragTranslateX(null);
+      }
+      return target;
     });
   };
   var goToNext = function goToNext() {
@@ -7834,13 +7948,28 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setIsActive();
     setTransitioning(true);
     setCurrentIndex(function (prev) {
-      return infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
+      var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
+      if (!infinite) {
+        currentTranslate.current = getTranslateForIndex(target);
+        setDragTranslateX(null);
+      }
+      return target;
     });
   };
   React.useImperativeHandle(ref, function () {
     return {
       nextSlide: goToNext,
-      prevSlide: goToPrev
+      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) {
@@ -7961,6 +8090,7 @@ var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject
 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);
+/* eslint-disable react/no-danger */
 var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
   var title = _ref.title,
     subtitle = _ref.subtitle,
@@ -8180,14 +8310,16 @@ var Pagination = function Pagination(_ref) {
   }))))));
 };
-var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject4$t, _templateObject5$p, _templateObject6$i, _templateObject7$e;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
-var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
-var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
-var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
-var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
-var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n  text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
-var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n"])));
+var _templateObject$X;
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__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$Y, _templateObject2$L;
+var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__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$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-base-dark-grey);\n  }\n  overflow-wrap: break-word;\n  padding-bottom: 4px;\n"])));
+var _templateObject$Z, _templateObject2$M;
+var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: underline;\n  text-underline-offset: 6px;\n\n  && {\n    color: var(--color-primary-black);\n\n    :hover {\n      color: var(--color-rbo-black-hovered);\n      :after {\n        color: var(--color-primary-black);\n      }\n    }\n\n    :visited {\n      color: var(--color-primary-black);\n    }\n  }\n"])));
+var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--base-color-dark-grey);\n  }\n"])));
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -8203,55 +8335,77 @@ var Person = function Person(_ref) {
       href: link
     }, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null);
   }
-  return /*#__PURE__*/React__default.createElement("span", null, name, replacement && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1,
-    tag: "span"
-  }, replacement)))), personSeparator);
+  return /*#__PURE__*/React__default.createElement("span", null, name, replacement && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(ReplacementContent, null, replacement))), personSeparator);
 };
-/* eslint-disable no-extra-boolean-cast */
-function hasHeadshot(role) {
-  return +(!!role.people[0].headshot && role.people[0].useHeadshot);
-}
-function textSection(role) {
-  return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
+var PersonDetails = function PersonDetails(_ref) {
+  var _role$people;
+  var role = _ref.role,
+    className = _ref.className;
+  return /*#__PURE__*/React__default.createElement(TextWrapper$2, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(RoleContent, {
     title: "role",
     "data-roh": role.dataROH
-  }, /*#__PURE__*/React__default.createElement(Overline, {
-    level: 1
-  }, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1,
+  }, role.name), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     tag: "p"
-  }, role.people.map(function (person, personIndex) {
+  }, (_role$people = role.people) == null ? void 0 : _role$people.map(function (person, personIndex, peopleArray) {
     return /*#__PURE__*/React__default.createElement(Person, {
       key: "" + person.name + personIndex,
       person: person,
-      withSeparator: role.people.length !== personIndex + 1
+      withSeparator: peopleArray.length !== personIndex + 1
     });
   })));
-}
+};
+var _templateObject$_, _templateObject2$N;
+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 HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n  }\n"])));
+var PersonCard = function PersonCard(_ref) {
+  var role = _ref.role,
+    className = _ref.className;
+  var hasHeadshot = React__default.useMemo(function () {
+    var _role$people;
+    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, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
+    src: role.people[0].headshot,
+    alt: role.people[0].name
+  })), /*#__PURE__*/React__default.createElement(PersonDetails, {
+    role: role
+  }));
+  return /*#__PURE__*/React__default.createElement(PersonDetails, {
+    role: role,
+    className: className
+  });
+};
 var PeopleListing = function PeopleListing(_ref) {
-  var roles = _ref.roles;
-  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.sort(function (a, b) {
-    return hasHeadshot(b) - hasHeadshot(a);
-  }).map(function (role, index) {
+  var roles = _ref.roles,
+    className = _ref.className;
+  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
+    className: className
+  }, roles.map(function (role, index) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
       key: role.name + "-" + index
-    }, !!hasHeadshot(role) ? (/*#__PURE__*/React__default.createElement(PersonWrapper, null, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
-      src: role.people[0].headshot,
-      alt: role.people[0].name
-    })), textSection(role))) : textSection(role));
+    }, /*#__PURE__*/React__default.createElement(PersonCard, {
+      role: role
+    }));
   }));
 };
-var _templateObject$Y, _templateObject2$M, _templateObject3$A, _templateObject4$u;
-var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
-var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
+var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$t;
+var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
   var columnCount = _ref.columnCount;
   return "repeat(" + columnCount + ", 1fr)";
 }, devices.mobile, devices.tablet);
-var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
-var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
+var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
 // Get the total character length of a property in an array of objects
 var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -8340,7 +8494,7 @@ var CreditListing = function CreditListing(_ref) {
       columnSpanSmallDevice: 1,
       key: "credit-entry-" + name + "-" + index,
       "data-testid": "credit-entry"
-    }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {
+    }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
       title: "role",
       "data-roh": dataROH
     }, /*#__PURE__*/React__default.createElement(Overline, {
@@ -8361,7 +8515,7 @@ var CreditListing = function CreditListing(_ref) {
           withSeparator: personArray.length !== personIndex + 1
         });
       }));
-    }), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyText, {
+    }), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
       level: 1,
       tag: "p"
     }, replacement))), musicTitle && musicTitle.length > 0 && (/*#__PURE__*/React__default.createElement(BodyText, {
@@ -8378,8 +8532,8 @@ var CreditListing = function CreditListing(_ref) {
   }, creditEntries);
 };
-var _templateObject$Z;
-var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$Z || (_templateObject$Z = /*#__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 _templateObject$10;
+var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$10 || (_templateObject$10 = /*#__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 PolicyLinks = function PolicyLinks(_ref) {
   var items = _ref.items;
@@ -8397,14 +8551,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
   }));
 };
-var _templateObject$_, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$9, _templateObject9$5, _templateObject0$5, _templateObject1$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject$11, _templateObject3$A, _templateObject4$u, _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 LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 12;
 var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
 var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
 var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
 var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
-var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
+var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
 }, devices.tablet, function (_ref2) {
@@ -8414,7 +8568,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$_ ||
   var asCard = _ref3.asCard;
   return asCard ? "\n    grid-template-areas: " + GridTemplateAsCard + ";\n    @media " + devices.tablet + " {\n      grid-template-areas: " + GridTemplateAsCardTablet + ";\n    }\n  " : "";
 });
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref4) {
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref4) {
   var hasTextLinks = _ref4.hasTextLinks;
   return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
 }, function (_ref5) {
@@ -8438,16 +8592,16 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$B ||
   }
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref7) {
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref7) {
   var marginBottom = _ref7.marginBottom;
   return marginBottom + "px";
 }, function (_ref8) {
   var mobileMarginBottom = _ref8.mobileMarginBottom;
   return mobileMarginBottom && "\n      @media " + devices.mobile + " {\n        margin-bottom: " + mobileMarginBottom + "px;\n      }\n    ";
 });
-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 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);
@@ -8473,7 +8627,7 @@ 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$k = ["text"],
+var _excluded$l = ["text"],
   _excluded2$2 = ["text"],
   _excluded3$1 = ["text"];
 var _buttonTypeToButton$1;
@@ -8541,7 +8695,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -8669,28 +8823,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
-var _templateObject$$, _templateObject2$N, _templateObject3$C, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
+var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
+var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
 }, devices.tablet, function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
 }, devices.mobile);
-var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
+var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
+var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   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$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 HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$v || (_templateObject4$v = /*#__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 _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
     primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
     _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -8712,8 +8866,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
   return '';
 });
-var _templateObject$10;
-var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$13;
+var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -8825,7 +8979,7 @@ var PromoChild = function PromoChild(_ref) {
   }));
 };
-var _excluded$l = ["text"],
+var _excluded$m = ["text"],
   _excluded2$3 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -8852,7 +9006,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
@@ -8895,8 +9049,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
 };
-var _templateObject$11;
-var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
+var _templateObject$14;
+var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
 /**
  * DEPRECATED. Use RadioGroup2 instead
@@ -8951,9 +9105,9 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
-var _templateObject$12, _templateObject2$O, _templateObject3$D;
-var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
+var _templateObject$15, _templateObject2$Q, _templateObject3$C;
+var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
   var horizontalMode = _ref.horizontalMode;
   if (horizontalMode) return 'row';
   return 'column';
@@ -8961,7 +9115,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$O || (_temp
   var gap = _ref2.gap;
   return gap + "px";
 });
-var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
+var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
   var darkMode = _ref3.darkMode;
   if (darkMode) return 'var(--base-color-white)';
   return 'var(--base-color-errorstate)';
@@ -9038,10 +9192,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
   }, error))));
 };
-var _templateObject$13, _templateObject2$P, _templateObject3$E;
-var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-light-grey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
-var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.3s ease-in-out;\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"])));
-var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
+var _templateObject$16, _templateObject2$R, _templateObject3$D;
+var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-light-grey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
+var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.3s ease-in-out;\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"])));
+var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
 /* eslint-disable react/no-danger */
 var StatusBanner = function StatusBanner(_ref) {
@@ -9097,8 +9251,8 @@ var StatusBanner = function StatusBanner(_ref) {
   return null;
 };
-var _templateObject$14;
-var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
+var _templateObject$17;
+var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
 /* ~~~~~~~ new harmonic types ~~~~~~~ */
 var HarmonicSize = {
@@ -9140,8 +9294,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description)))));
 };
-var _templateObject$15, _templateObject2$Q, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4;
-var stateStyles = /*#__PURE__*/styled.css(_templateObject$15 || (_templateObject$15 = /*#__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 _templateObject$18, _templateObject2$S, _templateObject3$E, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4;
+var stateStyles = /*#__PURE__*/styled.css(_templateObject$18 || (_templateObject$18 = /*#__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;
 }, function (_ref2) {
@@ -9151,12 +9305,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$15 || (_templateObject
   var theme = _ref3.theme;
   return theme.colors.lightgrey;
 });
-var borderStyles = /*#__PURE__*/styled.css(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
+var borderStyles = /*#__PURE__*/styled.css(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.darkgrey;
 });
-var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
+var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
 var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
   var theme = _ref5.theme;
   return {
@@ -9164,9 +9318,9 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
     color: theme.colors.black,
     title: 'Select Arrow'
   };
-})(_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);
+})(_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) {
   var theme = _ref6.theme,
@@ -9521,9 +9675,9 @@ function Select(_ref3) {
   })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
-var _templateObject$16, _templateObject2$R, _templateObject3$G, _templateObject4$y;
-var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-dark-grey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-dark-grey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-light-grey);\n      background: var(--base-color-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-dark-grey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-dark-grey);\n    background: var(--base-color-light-grey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-mid-grey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-size: var(--font-size-body-1);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
+var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x;
+var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-dark-grey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-dark-grey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-light-grey);\n      background: var(--base-color-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-dark-grey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-dark-grey);\n    background: var(--base-color-light-grey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-mid-grey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-size: var(--font-size-body-1);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + "px";
@@ -9540,18 +9694,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_t
   if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
   return "0 0 0 3px var(--base-color-lapislazuli)";
 });
-var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
+var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
   var darkMode = _ref5.darkMode;
   if (darkMode) return "var(--base-color-white)";
   return "var(--base-color-black)";
 });
-var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
+var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
   var darkMode = _ref6.darkMode;
   if (darkMode) return "var(--base-color-white)";
   return "var(--base-color-errorstate)";
 });
-var _excluded$m = ["label", "error", "width", "darkMode", "isSearchable", "components"];
+var _excluded$n = ["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"
@@ -9602,7 +9756,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$m);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -9620,7 +9774,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
-var _excluded$n = ["label", "error", "width", "darkMode", "components"];
+var _excluded$o = ["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
@@ -9642,7 +9796,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$n);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -9659,612 +9813,49 @@ var SelectComponent$1 = function SelectComponent(_ref) {
   })));
 };
-var colors = {
-  core: '#C8102E',
-  stream: '#1866DC',
-  cinema: '#1A1A1A'
+var _templateObject$1a, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
+var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-light-grey);\n  padding: 40px 20px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  align-items: stretch;\n"])));
+var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: var(--upsell-border-color);\n  padding: 6px 8px;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  right: 20px;\n  top: 0;\n  width: auto;\n  margin: auto;\n\n  && {\n    color: var(--color-base-white);\n  }\n\n  font-feature-settings:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    'calt' off;\n  text-align: center;\n"])));
+var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  padding-top: 10px;\n  width: fit-content;\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media ", " {\n    width: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  ", "\n\n  @media ", ", ", " {\n    a {\n      text-align: center;\n    }\n  }\n"])), function (_ref) {
+  var stackCtasEarly = _ref.stackCtasEarly;
+  return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
+}, function (_ref2) {
+  var stackCtasEarly = _ref2.stackCtasEarly;
+  return stackCtasEarly && "\n      @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n        * {\n          width: 100%;\n        }\n      }\n    ";
+}, devices.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 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"])));
+// Set max. character length
+var setMaxCharLength = function setMaxCharLength(value, maxLength) {
+  return value.slice(0, maxLength);
 };
-var commonColors = {
-  black: '#1A1A1A',
-  white: '#FFFFFF',
-  darkgrey: '#727272',
-  midgrey: '#B2B2B2',
-  lightgrey: '#F0F0F0',
-  error: '#C8102E',
-  medium: '#D79233',
-  good: '#4EAA33',
-  progress: '#1866DC',
-  navigation: '#C8102E',
-  lemonChiffon: '#fffbbe',
-  lapisLazuli: '#0060a0',
-  blue: '#1866DC',
-  red: '#C8102E'
+// Format price to contain £ if not already present
+var formatPrice = function formatPrice(value) {
+  if (Number.isNaN(Number(value))) return value != null ? value : '';
+  return "\xA3" + Number(value).toFixed(2);
 };
-var fontFamilies = {
-  adobeGaramondPro: 'adobe-garamond-pro',
-  adobeGaramondProItalics: 'adobe-garamond-pro',
-  gothamSSmMedium: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
-  gothamSSm: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
-  sabonNextLTProRegular: 'Sabon Next LT Pro Regular',
-  sabonNextLTProRegularItalics: 'Sabon Next LT Pro Regular Italics',
-  sansSerifFallback: 'Montserrat, sans-serif'
+var capitalizeFirstLetter = function capitalizeFirstLetter(string) {
+  return string.substring(0, 1).toUpperCase() + string.substring(1);
 };
-var common = {
-  fonts: {
-    desktop: {
-      sizes: {
-        headers: {
-          1: '96px',
-          2: '68px',
-          3: '44px',
-          4: '34px',
-          5: '24px',
-          6: '20px'
-        },
-        altHeaders: {
-          3: '44px',
-          4: '34px',
-          5: '24px',
-          6: '20px'
-        },
-        subtitles: {
-          1: '18px',
-          2: '14px'
-        },
-        titleDescription: '20px',
-        body: {
-          1: '19px',
-          2: '16px',
-          3: '14px'
-        },
-        listing: '19px',
-        buttons: '14px',
-        overline: {
-          1: '14px',
-          2: '12px',
-          3: '10px',
-          4: '8px'
-        },
-        navigation: '13px',
-        search: '24px'
-      },
-      letterSpacing: {
-        headers: {
-          1: '2px',
-          2: '1px',
-          3: '1px',
-          4: '1px',
-          5: '1px',
-          6: '1px'
-        },
-        altHeaders: {
-          3: 'normal',
-          4: 'normal',
-          5: 'normal',
-          6: 'normal'
-        },
-        overline: {
-          1: '1px',
-          2: '1px',
-          3: '1px',
-          4: '1px'
-        },
-        subtitles: {
-          1: '1px',
-          2: '1px'
-        },
-        body: {
-          1: 'normal',
-          2: 'normal',
-          3: 'normal'
-        },
-        navigation: '1px'
-      },
-      lineHeights: {
-        headers: {
-          1: '110px',
-          2: '72px',
-          3: '48px',
-          4: '40px',
-          5: '30px',
-          6: '28px'
-        },
-        altHeaders: {
-          3: '48px',
-          4: '44px',
-          5: '30px',
-          6: '28px'
-        },
-        subtitles: {
-          1: '22px',
-          2: '22px'
-        },
-        titleDescription: '28px',
-        body: {
-          1: '26px',
-          2: '22px',
-          3: '20px'
-        },
-        peopleListing: '24px',
-        listing: '36px',
-        buttons: '20px',
-        overline: {
-          1: '16px',
-          2: '14px',
-          3: '12px',
-          4: '10px'
-        },
-        navigation: '16px'
-      },
-      families: {
-        headers: fontFamilies.gothamSSmMedium,
-        altHeaders: fontFamilies.adobeGaramondPro,
-        subtitles: fontFamilies.gothamSSmMedium,
-        body: fontFamilies.adobeGaramondPro,
-        bodyItalics: fontFamilies.adobeGaramondProItalics,
-        listing: fontFamilies.adobeGaramondPro,
-        listingItalics: fontFamilies.adobeGaramondProItalics,
-        buttons: fontFamilies.gothamSSm,
-        overline: fontFamilies.gothamSSmMedium,
-        navigation: fontFamilies.gothamSSmMedium,
-        peopleListingRole: fontFamilies.gothamSSm,
-        search: fontFamilies.adobeGaramondPro
-      },
-      weights: {
-        headers: {
-          1: '500',
-          2: '500',
-          3: '500',
-          4: '500',
-          5: '500',
-          6: '500'
-        },
-        altHeaders: {
-          3: 'normal',
-          4: 'normal',
-          5: 'normal',
-          6: 'normal'
-        },
-        buttons: '400',
-        overline: {
-          1: '500',
-          2: '500',
-          3: '500',
-          4: '500'
-        },
-        body: {
-          1: '400',
-          2: '400',
-          3: '400'
-        },
-        subtitles: {
-          1: '500',
-          2: '500'
-        },
-        navigation: '500'
-      },
-      transforms: {
-        headers: 'uppercase',
-        altHeaders: 'none',
-        overline: 'uppercase',
-        subtitles: 'uppercase',
-        body: 'none',
-        navigation: 'uppercase'
-      },
-      fontFeatureSettings: {
-        headers: "'tnum' on, 'lnum' on",
-        altHeaders: "'pnum' on, 'onum' on",
-        overline: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off",
-        subtitles: "'tnum' on, 'lnum' on",
-        body: "'pnum' on, 'onum' on, 'liga' off",
-        navigation: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off"
-      },
-      wordBreak: {
-        headers: 'break-word',
-        altHeaders: 'break-word',
-        overline: 'break-word',
-        subtitles: 'break-word',
-        body: 'break-word'
-      },
-      margins: {
-        headers: {
-          // These margins use the Chrome defaults to enable proper fallbacks when using semantic level -
-          // https://www.w3schools.com/cssref/css_default_values.php
-          1: '0.67em 0',
-          2: '0.83em 0',
-          3: '1em 0',
-          4: '1.33em 0',
-          5: '1.67em 0',
-          6: '2.33em 0'
-        }
-      }
-    },
-    mobile: {
-      sizes: {
-        headers: {
-          1: '38px',
-          2: '30px',
-          3: '26px',
-          4: '24px',
-          5: '20px',
-          6: '17px'
-        },
-        altHeaders: {
-          3: '26px',
-          4: '24px',
-          5: '20px',
-          6: '17px'
-        },
-        subtitles: {
-          1: '16px',
-          2: '14px'
-        },
-        titleDescription: '17px',
-        body: {
-          1: '17px',
-          2: '12px',
-          3: '11px'
-        },
-        listing: '16px',
-        buttons: '14px',
-        overline: {
-          1: '14px',
-          2: '12px',
-          3: '10px',
-          4: '8px'
-        },
-        navigation: '13px',
-        search: '20px'
-      },
-      letterSpacing: {
-        headers: {
-          1: '1px',
-          2: '1px',
-          3: '1px',
-          4: '1px',
-          5: '1px',
-          6: '1px'
-        },
-        altHeaders: {
-          3: 'normal',
-          4: 'normal',
-          5: 'normal',
-          6: 'normal'
-        },
-        overline: {
-          1: '1px',
-          2: '1px'
-        },
-        subtitles: {
-          1: '1px',
-          2: '1px'
-        },
-        body: {
-          1: 'normal',
-          2: 'normal',
-          3: 'normal'
-        },
-        navigation: '1px'
-      },
-      lineHeights: {
-        headers: {
-          1: '42px',
-          2: '34px',
-          3: '30px',
-          4: '28px',
-          5: '28px',
-          6: '24px'
-        },
-        altHeaders: {
-          3: '30px',
-          4: '28px',
-          5: '28px',
-          6: '24px'
-        },
-        subtitles: {
-          1: '24px',
-          2: '18px'
-        },
-        titleDescription: '24px',
-        body: {
-          1: '24px',
-          2: '18px',
-          3: '16px'
-        },
-        listing: '34px',
-        buttons: '20px',
-        overline: {
-          1: '16px',
-          2: '14px'
-        },
-        navigation: '16px'
-      },
-      families: {
-        headers: fontFamilies.gothamSSm,
-        altHeaders: fontFamilies.adobeGaramondPro,
-        subtitles: fontFamilies.gothamSSmMedium,
-        body: fontFamilies.adobeGaramondPro,
-        bodyItalics: fontFamilies.adobeGaramondProItalics,
-        listing: fontFamilies.adobeGaramondPro,
-        listingItalics: fontFamilies.adobeGaramondProItalics,
-        buttons: fontFamilies.gothamSSm,
-        overline: fontFamilies.gothamSSmMedium,
-        navigation: fontFamilies.gothamSSmMedium,
-        search: fontFamilies.adobeGaramondPro
-      },
-      weights: {
-        headers: {
-          1: '500',
-          2: '500',
-          3: '500',
-          4: '500',
-          5: '500',
-          6: '500'
-        },
-        altHeaders: {
-          3: 'normal',
-          4: 'normal',
-          5: 'normal',
-          6: 'normal'
-        },
-        buttons: '400',
-        overline: {
-          1: '500',
-          2: '500'
-        },
-        body: {
-          1: '400',
-          2: '400',
-          3: '400'
-        },
-        subtitles: {
-          1: '500',
-          2: '500'
-        },
-        navigation: '500'
-      },
-      transforms: {
-        headers: 'uppercase',
-        altHeaders: 'none',
-        overline: 'uppercase',
-        subtitles: 'uppercase',
-        body: 'none',
-        navigation: 'uppercase'
-      },
-      fontFeatureSettings: {
-        headers: "'tnum' on, 'lnum' on",
-        altHeaders: "'pnum' on, 'onum' on",
-        overline: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off",
-        subtitles: "'tnum' on, 'lnum' on",
-        body: "'pnum' on, 'onum' on, 'liga' off",
-        navigation: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off"
-      },
-      wordBreak: {
-        headers: 'break-word',
-        altHeaders: 'break-word',
-        overline: 'break-word',
-        subtitles: 'break-word',
-        body: 'break-word'
-      }
-    },
-    tablet: {
-      sizes: {
-        headers: {
-          6: '17px'
-        },
-        altHeaders: {
-          4: '24px'
-        },
-        body: {
-          1: '17px'
-        }
-      }
-    }
-  },
-  spacing: {
-    1: '4px',
-    2: '8px',
-    3: '12px',
-    4: '16px',
-    5: '20px',
-    6: '24px',
-    7: '28px',
-    8: '32px',
-    9: '36px',
-    10: '40px',
-    12: '48px',
-    15: '60px',
-    18: '72px',
-    20: '80px',
-    30: '120px',
-    35: '140px',
-    40: '160px',
-    45: '180px',
-    50: '200px'
-  },
-  grid: {
-    mobile: {
-      margin: '20px',
-      outerMargin: '0',
-      gap: '12px'
-    },
-    tablet: {
-      margin: '32px',
-      outerMargin: '0',
-      gap: '20px'
-    },
-    desktop: {
-      margin: '10%',
-      outerMargin: '50px',
-      gap: '36px'
-    }
-  },
-  buttons: {
-    paddingX: '20px',
-    paddingY: '14px',
-    paddingYIcon: '12px',
-    iconWidth: '20px',
-    iconHeight: '20px',
-    iconMargin: '12px'
-  },
-  footer: {
-    desktop: {
-      height: '380px',
-      paddingTop: '44px',
-      paddingBottom: '44px',
-      itemsGap: '32px',
-      mediaGap: '24px',
-      mediaIconWidth: '24px',
-      mediaIconHeight: '24px',
-      verticalSpacingLarge: '58px',
-      verticalSpacingSmall: '16px'
-    },
-    tablet: {
-      paddingTop: '40px',
-      paddingBottom: '40px'
-    },
-    mobile: {
-      height: 'auto',
-      paddingTop: '20px',
-      paddingBottom: '20px',
-      itemsGap: '12px',
-      mediaGap: '32px',
-      mediaIconWidth: '28px',
-      mediaIconHeight: '28px',
-      verticalSpacingLarge: '24px',
-      verticalSpacingSmall: '24px'
+/* eslint-disable react/no-danger */
+var OfferText = function OfferText(_ref) {
+  var title = _ref.title,
+    description = _ref.description;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, null, title), description && /*#__PURE__*/React__default.createElement(DescriptionWrapper$1, {
+    tag: "div",
+    size: "large",
+    dangerouslySetInnerHTML: {
+      __html: description
     }
-  }
-};
-var core = /*#__PURE__*/_extends({}, common, {
-  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
-    primary: colors.core,
-    primaryButton: colors.core,
-    secondaryButton: colors.core,
-    tertiaryButton: 'transparent',
-    auxiliaryButton: 'transparent',
-    primaryButtonReverseBg: colors.cinema,
-    primaryButtonReverse: commonColors.white
-  })
-});
-var stream = /*#__PURE__*/_extends({}, common, {
-  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
-    primary: colors.stream,
-    primaryButton: colors.stream,
-    primaryButtonReverseBg: colors.cinema,
-    primaryButtonReverse: commonColors.white,
-    secondaryButton: colors.stream,
-    tertiaryButton: 'transparent',
-    auxiliaryButton: 'transparent'
-  })
-});
-var cinema = /*#__PURE__*/_extends({}, common, {
-  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
-    primary: colors.cinema,
-    primaryButton: commonColors.white,
-    primaryButtonReverseBg: commonColors.white,
-    primaryButtonReverse: colors.cinema,
-    secondaryButton: colors.cinema,
-    tertiaryButton: 'transparent',
-    auxiliaryButton: 'transparent'
-  })
-});
-var schools = /*#__PURE__*/_extends({}, common, {
-  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
-    primary: colors.core,
-    primaryButton: colors.core,
-    primaryButtonReverseBg: colors.cinema,
-    primaryButtonReverse: commonColors.white,
-    secondaryButton: colors.core,
-    tertiaryButton: 'transparent',
-    auxiliaryButton: 'transparent'
-  }),
-  fonts: /*#__PURE__*/_extends({}, common.fonts, {
-    desktop: /*#__PURE__*/_extends({}, common.fonts.desktop, {
-      transforms: {
-        headers: 'none',
-        altHeaders: 'none',
-        overline: 'none',
-        subtitles: 'none',
-        body: 'none',
-        navigation: 'uppercase'
-      }
-    }),
-    mobile: /*#__PURE__*/_extends({}, common.fonts.mobile, {
-      transforms: {
-        headers: 'none',
-        altHeaders: 'none',
-        overline: 'none',
-        subtitles: 'none',
-        body: 'none',
-        navigation: 'uppercase'
-      }
-    })
-  })
-});
-var themes = {
-  core: core,
-  stream: stream,
-  cinema: cinema,
-  fontFamilies: fontFamilies,
-  schools: schools
-};
-var Theme = function Theme(_ref) {
-  var children = _ref.children,
-    theme = _ref.theme;
-  var chosenTheme = themes[theme];
-  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-    theme: chosenTheme
-  }, children);
-};
-var _templateObject$17, _templateObject2$S, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$b;
-var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-lightgrey);\n  padding: 40px;\n\n  display: block;\n  position: relative;\n\n  @media ", " {\n    margin-top: 0;\n    padding: 40px 20px;\n  }\n"])), devices.tablet);
-var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-self: flex-end;\n  height: 15px;\n"])));
-var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  padding: 6px 8px;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  right: 20px;\n  top: 0;\n  width: auto;\n  margin: auto;\n  font-family: var(--font-family-header);\n  font-feature-settings:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    'calt' off;\n  font-size: var(--font-size-overline-2);\n  line-height: 12px;\n  text-align: center;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.colors.primary;
-}, exports.Colors.White);
-var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media ", " {\n    width: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  ", "\n"])), function (_ref2) {
-  var stackCtasEarly = _ref2.stackCtasEarly;
-  return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
-}, function (_ref3) {
-  var stackCtasEarly = _ref3.stackCtasEarly;
-  return stackCtasEarly && "\n      @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n        * {\n          width: 100%;\n        }\n      }\n    ";
-});
-var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
-var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\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  padding: 5px 0 8px 0;\n"])));
-var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--base-color-darkgrey);\n"])));
-// Set max. character length
-var setMaxCharLength = function setMaxCharLength(value, maxLength) {
-  return value.slice(0, maxLength);
-};
-// Format price to contain £ if not already present
-var formatPrice = function formatPrice(value) {
-  if (Number.isNaN(Number(value))) return value != null ? value : '';
-  return "\xA3" + Number(value).toFixed(2);
-};
-var capitalizeFirstLetter = function capitalizeFirstLetter(string) {
-  return string.substring(0, 1).toUpperCase() + string.substring(1);
-};
-/* eslint-disable react/no-danger */
-var OfferText = function OfferText(_ref) {
-  var title = _ref.title,
-    description = _ref.description;
-  return /*#__PURE__*/React__default.createElement(OfferTextWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
-    semanticLevel: 5,
-    level: 1
-  }, title), /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, /*#__PURE__*/React__default.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: description != null ? description : ''
-    }
-  })));
+  }));
 };
 var LENGTH_SMALL_TEXT$2 = 19;
@@ -10290,21 +9881,32 @@ var UpsellCard = function UpsellCard(_ref) {
     return str.length >= n ? str.slice(0, n) : str;
   };
   var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
-  return /*#__PURE__*/React__default.createElement(Theme, {
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
     theme: theme
-  }, /*#__PURE__*/React__default.createElement(Wrapper$6, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabelWrapper, null, /*#__PURE__*/React__default.createElement(PromoLabel, null, setMaxCharLength(flag, FLAG_CHAR_LIMIT)))), /*#__PURE__*/React__default.createElement(TitleContainer$3, null, /*#__PURE__*/React__default.createElement(Subtitle, {
-    semanticLevel: 2,
-    level: 1
-  }, title), subTitle && (/*#__PURE__*/React__default.createElement(Overline, {
-    semanticLevel: 3,
-    level: 1
-  }, subTitle)), promoPrice ? (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, null, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 4
-  }, formatPrice(price))), /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 4
-  }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 4
-  }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
+  }, /*#__PURE__*/React__default.createElement(Wrapper$6, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabel, {
+    tag: "div",
+    size: "small"
+  }, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
+    singleChild: !subTitle && !promoPrice && !price
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    tag: "div",
+    size: "small"
+  }, title), subTitle && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
+  }, subTitle), (price || promoPrice) && (/*#__PURE__*/React__default.createElement(PriceRow, null, promoPrice ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(VisuallyHidden, null, formatPrice(price) + " strikethrough"), /*#__PURE__*/React__default.createElement(LineThrough, {
+    tag: "p",
+    size: "small",
+    serif: true,
+    "aria-hidden": "true"
+  }, formatPrice(price)), /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    tag: "p",
+    size: "small",
+    serif: true
+  }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    tag: "p",
+    size: "small",
+    serif: true
+  }, formatPrice(price)))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
     return /*#__PURE__*/React__default.createElement(OfferText, {
       key: "offer-" + index,
       title: offerText.title,
@@ -10312,13 +9914,13 @@ var UpsellCard = function UpsellCard(_ref) {
     });
   }), ((link == null ? void 0 : link.text) || (secondaryLink == null ? void 0 : secondaryLink.text)) && (/*#__PURE__*/React__default.createElement(ButtonContainer, {
     stackCtasEarly: stackCtasEarly
-  }, (link == null ? void 0 : link.text) && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT$2)), (secondaryLink == null ? void 0 : secondaryLink.text) && (/*#__PURE__*/React__default.createElement(Theme, {
+  }, (link == null ? void 0 : link.text) && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT$2)), (secondaryLink == null ? void 0 : secondaryLink.text) && (/*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
     theme: secondaryTheme
   }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
 };
-var _templateObject$18, _templateObject2$T;
-var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0;\n\n  ", " {\n    height: calc(100% - 34px);\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n\n    @media ", " {\n      height: calc(100% - 30px);\n      @supports not (aspect-ratio: ", ") {\n        width: ", ";\n      }\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
+var _templateObject$1b, _templateObject2$U, _templateObject3$H;
+var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: table;\n  width: auto;\n  margin: 0;\n\n  ", " {\n    width: 100%;\n\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -10326,104 +9928,49 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$18 || (_temp
   var _ref2$aspectRatio = _ref2.aspectRatio,
     aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio,
     height = _ref2.height;
-  return "calc(calc(" + height + "px - 34px) * " + AspectRatioWidth[aspectRatio] + ")";
-}, devices.mobile, function (_ref3) {
-  var _ref3$aspectRatio = _ref3.aspectRatio,
-    aspectRatio = _ref3$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref3$aspectRatio;
-  return aspectRatio;
-}, function (_ref4) {
-  var _ref4$aspectRatio = _ref4.aspectRatio,
-    aspectRatio = _ref4$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref4$aspectRatio,
-    height = _ref4.height;
-  return "calc(calc(" + height + "px - 30px) * " + AspectRatioWidth[aspectRatio] + ")";
+  return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
 });
-var CaptionWrapper = /*#__PURE__*/styled__default(Caption)(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-top: 12px;\n    max-width: var(--caption-max-width, 100%);\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    overflow-wrap: normal;\n  }\n  height: 22px;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n  word-break: var(--word-break-body);\n\n  @media ", " {\n    height: 18px;\n  }\n"])), devices.mobile);
+var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$U || (_templateObject2$U = /*#__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$H || (_templateObject3$H = /*#__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 ImageWithCaption = function ImageWithCaption(_ref) {
   var caption = _ref.caption,
     altText = _ref.altText,
-    children = _ref.children,
-    aspectRatio = _ref.aspectRatio;
-  var wrapperRef = React.useRef(null);
-  var imgRef = React.useRef(null);
-  var _useState = React.useState(0),
-    height = _useState[0],
-    setHeight = _useState[1];
-  var updateWrapperHeight = React__default.useCallback(function () {
-    var _wrapperRef$current;
-    setHeight((wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
-  }, []);
-  var updateCaptionWidth = React__default.useCallback(function () {
-    var img = imgRef.current;
-    var wrapper = wrapperRef.current;
-    if (img && wrapper) {
-      var w = img.getBoundingClientRect().width;
-      wrapper.style.setProperty('--caption-max-width', Math.round(w) + "px");
-    }
-  }, []);
-  React.useEffect(function () {
-    updateWrapperHeight();
-    updateCaptionWidth();
-    window.addEventListener('resize', updateWrapperHeight);
-    window.addEventListener('resize', updateCaptionWidth);
-    var imageResizeObserver = null;
-    if (typeof ResizeObserver !== 'undefined' && imgRef.current) {
-      imageResizeObserver = new ResizeObserver(updateCaptionWidth);
-      imageResizeObserver.observe(imgRef.current);
-    }
-    return function () {
-      window.removeEventListener('resize', updateWrapperHeight);
-      window.removeEventListener('resize', updateCaptionWidth);
-      if (imageResizeObserver && imgRef.current) imageResizeObserver.unobserve(imgRef.current);
-    };
-  }, [updateWrapperHeight, updateCaptionWidth]);
-  var clonedChildren = React__default.Children.map(children, function (child) {
-    if (! /*#__PURE__*/React__default.isValidElement(child)) return child;
-    var childElement = child;
-    var originalRef = child.ref;
-    var newProps = {
-      alt: altText,
-      tabIndex: 0,
-      onKeyDown: function onKeyDown(e) {
-        if (e.key === 'Enter' || e.key === ' ') {
-          var _imgRef$current;
-          e.preventDefault();
-          (_imgRef$current = imgRef.current) == null || _imgRef$current.click();
-        }
-        var originalOnKeyDownHandler = childElement.props.onKeyDown;
-        if (originalOnKeyDownHandler) originalOnKeyDownHandler(e);
-      },
-      ref: function ref(node) {
-        imgRef.current = node;
-        if (node) updateCaptionWidth();
-        if (!originalRef) return;
-        if (typeof originalRef === 'function') {
-          originalRef(node);
-        } else {
-          originalRef.current = node;
-        }
-      }
-    };
-    return /*#__PURE__*/React__default.cloneElement(childElement, newProps);
-  });
-  return /*#__PURE__*/React__default.createElement(Wrapper$7, {
+    src = _ref.src,
+    srcSet = _ref.srcSet,
+    sizes = _ref.sizes,
+    loading = _ref.loading,
+    aspectRatio = _ref.aspectRatio,
+    className = _ref.className,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+  return /*#__PURE__*/React__default.createElement(Wrapper$7, Object.assign({
     aspectRatio: aspectRatio,
-    ref: wrapperRef,
-    height: height
-  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: aspectRatio
-  }, clonedChildren), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, {
-    tag: "figcaption"
-  }, caption));
+    className: className
+  }, restProps), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: aspectRatio,
+    tabIndex: 0,
+    role: "img",
+    "aria-label": altText
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: src,
+    srcSet: srcSet,
+    sizes: sizes,
+    loading: loading,
+    alt: altText,
+    "aria-hidden": "true"
+  })), caption && (/*#__PURE__*/React__default.createElement(CaptionWrapper, null, /*#__PURE__*/React__default.createElement(CaptionContext, {
+    tag: "span"
+  }, caption))));
 };
-var _templateObject$19, _templateObject2$U, _templateObject3$I, _templateObject4$A, _templateObject5$u, _templateObject6$n;
-var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__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$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var _templateObject$1c, _templateObject2$V, _templateObject3$I, _templateObject4$z, _templateObject5$t, _templateObject6$m;
+var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__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$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$I || (_templateObject3$I = /*#__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$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 ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
 var MiniCard = function MiniCard(_ref) {
   var _ref$title = _ref.title,
@@ -10461,18 +10008,18 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
-var _templateObject$1a, _templateObject2$V, _templateObject3$J, _templateObject4$B, _templateObject5$v;
-var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__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$V || (_templateObject2$V = /*#__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 _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u;
+var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__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$W || (_templateObject2$W = /*#__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$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
   var isVisible = _ref.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
+var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
   var isVisible = _ref2.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-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 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 keyDown = function keyDown(e, toggleFunction) {
   if (e.key === 'Enter' || e.key === 'Space') {
@@ -10553,15 +10100,15 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
-var _templateObject$1b, _templateObject2$W, _templateObject3$K, _templateObject4$C, _templateObject5$w;
-var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$W || (_templateObject2$W = /*#__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 _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
+var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$X || (_templateObject2$X = /*#__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$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
-var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), exports.Colors.Black, function (_ref) {
+var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), exports.Colors.Black, function (_ref) {
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
 }, exports.Colors.MidGrey);
-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 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 isOpen = _ref2.isOpen;
   return isOpen ? 'block' : 'none';
 }, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
@@ -10717,19 +10264,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
-var _templateObject$1c, _templateObject2$X, _templateObject3$L, _templateObject4$D, _templateObject5$x, _templateObject6$o;
-var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w, _templateObject6$n;
+var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Sections = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 var Section = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
   var color = _ref.color;
   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$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__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 color = _ref2.color;
   return "var(--base-color-" + color + ")";
 });
-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 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 color = _ref3.color;
   return "var(--base-color-" + color + ")";
 });
@@ -10811,18 +10358,18 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
-var _templateObject$1d, _templateObject2$Y, _templateObject3$M, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$c;
-var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
-var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
+var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
+var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__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) {
+var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  text-align: left;\n  text-transform: capitalize;\n  border: 1px solid var(--color-primary-black);\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    min-width: 150px;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
-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) {
+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) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.mobile);
-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 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"])));
 /* eslint-disable react/no-danger */
@@ -11026,22 +10573,22 @@ var Table = function Table(_ref) {
   }))));
 };
-var _templateObject$1e, _templateObject2$Z, _templateObject3$N, _templateObject4$F, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$d, _templateObject9$7, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
-var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
+var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
+var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1h || (_templateObject$1h = /*#__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 + ")";
 }, function (_ref2) {
   var theme = _ref2.theme;
   return "var(--color-" + theme + ")";
 });
-var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
+var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$_ || (_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$N || (_templateObject3$N = /*#__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$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 Error = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--color-base-errorstate);\n\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
+var Form = /*#__PURE__*/styled__default.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error);
+var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 28px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), devices.mobile);
+var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--color-base-errorstate);\n"])));
 var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n\n  @media ", " {\n    text-decoration: underline;\n  }\n"])), devices.mobile);
-var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n  color: var(--base-color-white);\n  text-decoration: none;\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
+var ButtonWrapper$3 = /*#__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"])));
@@ -11451,13 +10998,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
   }))))));
 };
-var _templateObject$1f, _templateObject2$_, _templateObject4$G, _templateObject5$A;
-var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1f || (_templateObject$1f = /*#__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 _templateObject$1i, _templateObject2$$, _templateObject4$F, _templateObject5$z;
+var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1i || (_templateObject$1i = /*#__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$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && styled.css(_templateObject2$$ || (_templateObject2$$ = _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$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 24px;\n  min-width: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  border: none;\n  padding: 0;\n  background: none;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media ", " {\n    min-height: 12px;\n    min-width: 12px;\n    max-height: 12px;\n    max-width: 12px;\n  }\n"])), devices.mobile);
+var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 var defaultGrid = {
   columnStartDesktop: 2,
@@ -11515,12 +11062,12 @@ var AnchorBar = function AnchorBar(_ref) {
   return null;
 };
-var _templateObject$1g, _templateObject2$$;
-var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  &:not(:active):not(:focus) {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    border: 0;\n    white-space: nowrap;\n    user-select: none;\n  }\n\n  @media ", " {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    width: 80px;\n    height: 44px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    clip: auto;\n    color: transparent;\n    background: transparent;\n    opacity: 0;\n    border: 0;\n    white-space: nowrap;\n    user-select: none;\n  }\n"])), function (_ref) {
+var _templateObject$1j, _templateObject2$10;
+var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  &:not(:active):not(:focus) {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    border: 0;\n    white-space: nowrap;\n    user-select: none;\n  }\n\n  @media ", " {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    width: 80px;\n    height: 44px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    clip: auto;\n    color: transparent;\n    background: transparent;\n    opacity: 0;\n    border: 0;\n    white-space: nowrap;\n    user-select: none;\n  }\n"])), function (_ref) {
   var hide = _ref.hide;
   return hide && "display: none;";
 }, devices.mobileAndTablet);
-var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 29px 50px;\n  display: inline-block;\n  width: 100%;\n  height: fit-content;\n  border-bottom: solid 2px var(--color-base-light-grey);\n  overflow: hidden;\n  &:not(:has(div:focus)) {\n    position: absolute;\n    border-bottom: 0;\n    padding: 0;\n  }\n  @media ", " {\n    border-bottom: 0;\n    position: absolute;\n    padding: 0;\n  }\n"])), devices.mobileAndTablet);
+var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 29px 50px;\n  display: inline-block;\n  width: 100%;\n  height: fit-content;\n  border-bottom: solid 2px var(--color-base-light-grey);\n  overflow: hidden;\n  &:not(:has(div:focus)) {\n    position: absolute;\n    border-bottom: 0;\n    padding: 0;\n  }\n  @media ", " {\n    border-bottom: 0;\n    position: absolute;\n    padding: 0;\n  }\n"])), devices.mobileAndTablet);
 /**
  * An accessible component which allows Assistive Technology users to move the focus
@@ -11612,8 +11159,8 @@ var SkipToMain = function SkipToMain(_ref) {
   }));
 };
-var _templateObject$1h;
-var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-black);\n  font-feature-settings: var(--font-feature-settings-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\n    font-feature-settings: var(--font-feature-settings-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: var(--color-base-black);\n    text-decoration: underline;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n    cursor: pointer;\n\n    &:hover {\n      color: var(--color-rbo-black-hovered);\n    }\n\n    &:active {\n      color: var(--color-rbo-black-pressed);\n    }\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  p:has(+ ul),\n  p:has(+ ol) {\n    margin-bottom: 12px;\n  }\n\n  & ul,\n  & ol {\n    padding: 0;\n    list-style: none;\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  & ul li,\n  & ol li {\n    line-height: var(--line-height-listing);\n    position: relative;\n    padding-left: 32px;\n\n    @media ", " {\n      padding-left: 28px;\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    position: absolute;\n    left: 0;\n    width: 20px;\n    text-align: right;\n    margin-right: 12px;\n\n    @media ", " {\n      width: 16px;\n      margin-right: 12px;\n    }\n  }\n\n  & ol {\n    counter-reset: custom-ol;\n  }\n\n  & ol > li {\n    counter-increment: custom-ol;\n  }\n\n  & ol > li::before {\n    content: counter(custom-ol, decimal-leading-zero) '';\n    position: absolute;\n    left: 0;\n    min-width: 20px;\n    text-align: right;\n    margin-right: 12px;\n    display: inline-block;\n\n    @media ", " {\n      min-width: 16px;\n      margin-right: 12px;\n    }\n  }\n"])), devices.mobile, devices.mobile, devices.mobile);
+var _templateObject$1k;
+var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-black);\n  font-feature-settings: var(--font-feature-settings-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\n    font-feature-settings: var(--font-feature-settings-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: var(--color-base-black);\n    text-decoration: underline;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n    cursor: pointer;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n    &:hover {\n      color: var(--color-rbo-black-hovered);\n    }\n\n    &:active {\n      color: var(--color-rbo-black-pressed);\n    }\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  p:has(+ ul),\n  p:has(+ ol) {\n    margin-bottom: 12px;\n  }\n\n  & ul,\n  & ol {\n    padding: 0;\n    list-style: none;\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  & ul li,\n  & ol li {\n    position: relative;\n    padding-left: 32px;\n    padding-top: 6px;\n    padding-bottom: 6px;\n\n    @media ", " {\n      padding-left: 28px;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    position: absolute;\n    left: 0;\n    width: 20px;\n    text-align: right;\n    margin-right: 12px;\n\n    @media ", " {\n      width: 16px;\n      margin-right: 12px;\n    }\n  }\n\n  & ol {\n    counter-reset: custom-ol;\n  }\n\n  & ol > li {\n    counter-increment: custom-ol;\n  }\n\n  & ol > li::before {\n    content: counter(custom-ol, decimal-leading-zero) '';\n    position: absolute;\n    left: 0;\n    min-width: 20px;\n    text-align: right;\n    margin-right: 12px;\n    display: inline-block;\n\n    @media ", " {\n      min-width: 16px;\n      margin-right: 12px;\n    }\n  }\n"])), devices.mobile, devices.mobile, devices.mobile);
 var addTypographyClasses = function addTypographyClasses(html) {
   return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
@@ -11642,40 +11189,58 @@ var BodyContent = function BodyContent(_ref2) {
     columnStartDevice = _ref2$columnStartDevi === void 0 ? 2 : _ref2$columnStartDevi,
     _ref2$columnSpanDevic = _ref2.columnSpanDevice,
     columnSpanDevice = _ref2$columnSpanDevic === void 0 ? 12 : _ref2$columnSpanDevic,
-    className = _ref2.className;
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    className: className
-  }, /*#__PURE__*/React__default.createElement(GridItem, {
+    className = _ref2.className,
+    _ref2$renderGrid = _ref2.renderGrid,
+    renderGrid = _ref2$renderGrid === void 0 ? true : _ref2$renderGrid,
+    _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",
+    className: textContainerClassName,
+    dangerouslySetInnerHTML: {
+      __html: addTypographyClasses(text)
+    }
+  });
+  var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
     columnSpanDesktop: columnSpanDesktop,
     columnStartDevice: columnStartDevice,
-    columnSpanDevice: columnSpanDevice
-  }, /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
-    html: text
-  })));
+    columnSpanDevice: columnSpanDevice,
+    className: !renderGrid ? className : undefined
+  }, content)) : content;
+  if (!renderGrid) {
+    if (renderGridItem) return gridItemOrContent;
+    return content;
+  }
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    className: className
+  }, gridItemOrContent);
 };
-var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
+var _templateObject$1l, _templateObject2$11, _templateObject3$O, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
 var color = 'primary-black';
 var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
   borderColor: color,
   hoveredColor: color,
   pressedColor: color,
   textColor: color
-})(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 35px;\n  margin-top: 33px;\n  width: fit-content;\n\n  @media ", " {\n    margin-bottom: 33px;\n    margin-top: 31px;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])), devices.mobile);
-var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-", ");\n  padding: 60px 59px 59px;\n\n  @media ", " {\n    padding: 35px 20px 34px;\n  }\n"])), color, devices.mobile);
+})(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 35px;\n  margin-top: 33px;\n  width: fit-content;\n\n  @media ", " {\n    margin-bottom: 33px;\n    margin-top: 31px;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])), devices.mobile);
+var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-", ");\n  padding: 60px 59px 59px;\n\n  @media ", " {\n    padding: 35px 20px 34px;\n  }\n"])), color, devices.mobile);
 var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    margin: 27px 0;\n\n    @media ", " {\n      margin: 20px 0;\n    }\n  }\n"])), devices.mobile);
 var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
   serif: true,
   size: 'medium'
-})(_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);
+})(_templateObject4$G || (_templateObject4$G = /*#__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$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"])));
+})(_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"])));
 var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
   size: 'large'
-})(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+})(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var Paywall = function Paywall(_ref) {
   var className = _ref.className,
@@ -11702,6 +11267,158 @@ var Paywall = function Paywall(_ref) {
   }, "Sign in"))));
 };
+var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l, _templateObject8$e, _templateObject9$9, _templateObject0$8;
+var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__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$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  @media ", " {\n    gap: 15px;\n  }\n"])), devices.mobile);
+var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__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(_templateObject4$H || (_templateObject4$H = /*#__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$1 = /*#__PURE__*/styled__default.div(_templateObject5$B || (_templateObject5$B = /*#__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(_templateObject6$r || (_templateObject6$r = /*#__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(_templateObject7$l || (_templateObject7$l = /*#__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    padding-inline-end: 6px;\n  ";
+});
+var PersonName = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__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(_templateObject9$9 || (_templateObject9$9 = /*#__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(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: hidden;\n\n  @media ", " {\n    visibility: visible;\n    min-height: var(--button-height);\n  }\n"])), devices.mobile);
+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 _excluded$q = ["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 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 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;
+  return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, headingText && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
+  }, headingText), /*#__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
+  }, cast.map(function (person, index) {
+    var name = person.name,
+      image = person.image,
+      _onClick = person.onClick,
+      rest = _objectWithoutPropertiesLoose(person, _excluded$q);
+    var isSelected = selectedIndices.includes(index);
+    var personImage = image || placeholderImage || defaultPlaceholderImage;
+    return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
+      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)));
+  }))), 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 dataRoh = 'imgLogo';
 var title = 'Royal Ballet and Opera';
 var Navigation = function Navigation(_ref) {
@@ -11868,10 +11585,10 @@ var Navigation = function Navigation(_ref) {
   })))))));
 };
-var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$I, _templateObject5$C, _templateObject6$s, _templateObject7$m;
-var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1j || (_templateObject$1j = /*#__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$11 || (_templateObject2$11 = /*#__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$P || (_templateObject3$P = /*#__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 _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$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);
@@ -11933,16 +11650,16 @@ var Footer = function Footer(_ref) {
   }, additionalInfo))));
 };
-var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$J, _templateObject5$D, _templateObject8$e, _templateObject9$8, _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$1k || (_templateObject$1k = /*#__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 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;
   return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
 }, zIndexes.anchor, function (_ref2) {
   var withShadow = _ref2.withShadow;
-  return withShadow && styled.css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && styled.css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 });
-var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
+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$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;
@@ -11955,11 +11672,11 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_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$8 || (_templateObject9$8 = _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) {
@@ -11970,7 +11687,7 @@ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_temp
   return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
 });
-var _excluded$o = ["id", "text"];
+var _excluded$r = ["id", "text"];
 var AnchorTabBar = function AnchorTabBar(_ref) {
   var tabs = _ref.tabs,
     onTabClick = _ref.onTabClick,
@@ -12181,7 +11898,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, tabs.map(function (_ref4) {
     var id = _ref4.id,
       text = _ref4.text,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$o);
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$r);
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
     }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
@@ -12214,20 +11931,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   })))) : null))));
 };
-var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$K, _templateObject6$t, _templateObject7$n, _templateObject8$f, _templateObject9$9, _templateObject0$9;
-var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -1px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
+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';
 }, zIndexes.anchor);
-var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-light-grey);\n"])));
-var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2 / span 15;\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  gap: 40px;\n  justify-content: space-between;\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 13;\n      gap: 20px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 12;\n    }\n  }\n"])), function (_ref2) {
+var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-light-grey);\n"])));
+var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2 / span 15;\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  gap: 40px;\n  justify-content: space-between;\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 13;\n      gap: 20px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 12;\n    }\n  }\n"])), function (_ref2) {
   var title = _ref2.title;
   return title ? 'row' : 'row-reverse';
 }, 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$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$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref3) {
+var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$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) {
@@ -12240,10 +11957,10 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
   var theme = _ref6.theme;
   return theme.colors.primaryButtonReverse;
 });
-var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__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$p = ["text"],
+var _excluded$s = ["text"],
   _excluded2$4 = ["text"];
 var TitleWithCTA = function TitleWithCTA(_ref) {
   var title = _ref.title,
@@ -12253,7 +11970,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
     message = _ref.message;
   var _ref2 = (links == null ? void 0 : links[0]) || {},
     primaryButtonText = _ref2.text,
-    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
+    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
   var _ref3 = (links == null ? void 0 : links[1]) || {},
     secondaryButtonText = _ref3.text,
     secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
@@ -12274,16 +11991,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
   }, message))));
 };
-var _templateObject$1m, _templateObject2$14, _templateObject3$S;
-var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: solid 4px;\n  border-color: ", ";\n  padding: 80px;\n\n  @media ", " {\n    & {\n      border-left: none;\n      border-right: none;\n      padding-top: 2.5em;\n      padding-left: 0;\n      padding-right: 0;\n      padding-bottom: 2.5em;\n    }\n  }\n\n  @media ", " {\n    & {\n      padding: 25px;\n      padding-top: 2.5em;\n    }\n  }\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.colors.primary;
-}, devices.mobile, devices.tablet);
-var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  @media ", " {\n    margin-left: 1.5em;\n    margin-right: 1.5em;\n  }\n"])), devices.mobile);
-var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 2.5em;\n  div > :first-child {\n    margin-top: 1.5em;\n  }\n\n  @media ", " {\n    margin-top: 0;\n    div > :first-child {\n      margin-top: 0.5em;\n    }\n  }\n\n  @media ", " {\n    margin-left: 1.5em;\n    margin-right: 1.5em;\n    & {\n      div > :first-child {\n        margin-top: 1em;\n      }\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L;
+var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: solid 4px;\n  border-color: var(--upsell-border-color);\n  padding: 66px 74px 70px;\n\n  @media ", " {\n    & {\n      border-left: none;\n      border-right: none;\n      padding: 40px 0px;\n    }\n  }\n"])), devices.mobile);
+var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n\n    @media ", " {\n      margin-left: 20px;\n      margin-right: 20px;\n    }\n  }\n"])), devices.mobile);
+var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 60px;\n\n  @media ", " {\n    margin-bottom: 40px;\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobile);
+var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n    margin: 35px 0 10px;\n\n    @media ", " {\n      margin-top: 24px;\n    }\n  }\n\n  && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n    margin-bottom: 0;\n  }\n"])), devices.mobile);
-var _templateObject$1n;
-var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 60px 75px;\n  grid-template-columns: repeat(2, 1fr);\n  width: 100%;\n\n  @media ", " {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  @media ", " {\n    width: 100%;\n    padding-left: 0;\n    padding-right: 0;\n    grid-template-columns: 1fr;\n  }\n"])), devices.tablet, devices.mobile);
+var _templateObject$1r;
+var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 60px 74px;\n  grid-template-columns: repeat(2, 1fr);\n  width: 100%;\n\n  @media ", " {\n    gap: 40px 74px;\n    width: 100%;\n    padding-left: 0;\n    padding-right: 0;\n    grid-template-columns: 1fr;\n  }\n"])), devices.mobile);
 var UpsellCards = function UpsellCards(_ref) {
   var upsellCards = _ref.upsellCards;
@@ -12311,25 +12026,28 @@ var UpsellSection = function UpsellSection(_ref) {
     link = _ref.link,
     upsellCards = _ref.upsellCards,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
+    theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme,
+    className = _ref.className;
   var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
     return _extends({}, card, {
       theme: card.theme || theme,
-      secondaryTheme: card.secondaryTheme || theme
+      secondaryTheme: card.secondaryTheme || card.theme || theme
     });
   }) : [];
-  return /*#__PURE__*/React__default.createElement(Theme, {
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
     theme: theme
-  }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 12,
     columnStartDevice: 2,
     columnSpanDevice: 12,
     columnStartSmallDevice: 1,
     columnSpanSmallDevice: 14
-  }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$4, null, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 4
-  }, title)), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(BodyContent, {
+  }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
+    serif: true
+  }, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
     text: richText != null ? richText : '',
     columnStartDesktop: 1,
     columnSpanDesktop: 14,
@@ -12342,9 +12060,9 @@ var UpsellSection = function UpsellSection(_ref) {
   })))));
 };
-var _templateObject$1o, _templateObject2$15;
-var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--color-base-white);\n"])), zIndexes.anchor);
-var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
+var _templateObject$1s, _templateObject2$17;
+var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--color-base-white);\n"])), zIndexes.anchor);
+var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
   var bottomBorder = _ref.bottomBorder;
   return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
 }, devices.mobileAndTablet, devices.mobile);
@@ -12375,13 +12093,13 @@ var StickyBar = function StickyBar(_ref) {
   }, children)));
 };
-var _templateObject$1p, _templateObject2$16, _templateObject3$T, _templateObject4$L;
-var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 62px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n  position: relative;\n\n  @media ", ", ", " {\n    height: 100vh;\n    padding: 62px 0 0;\n  }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
-var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
-var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$L || (_templateObject4$L = /*#__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 _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M;
+var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 62px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n  position: relative;\n\n  @media ", ", ", " {\n    height: 100vh;\n    padding: 62px 0 0;\n  }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
+var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
+var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$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$q = ["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';
@@ -12455,7 +12173,7 @@ var ModalWindow = function ModalWindow(_ref) {
     setIsOpen = _ref.setIsOpen,
     children = _ref.children,
     appElementId = _ref.appElementId,
-    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var isMobile = useMobile();
   var customStyles = {
     overlay: {
@@ -12494,6 +12212,7 @@ var ModalWindow = function ModalWindow(_ref) {
   })), /*#__PURE__*/React__default.createElement(ContentWrapper$3, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
 };
+var _SLIDE_PRESETS;
 var GRID_COLUMN_GAP = 'var(--grid-column-gap)';
 var GRID_VALUES = {
   desktop: {
@@ -12517,6 +12236,20 @@ var GRID_VALUES = {
     gapsPerSlide: 9
   }
 };
+var SLIDE_PRESETS = (_SLIDE_PRESETS = {}, _SLIDE_PRESETS[exports.CarouselType.PersonCard] = {
+  desktop: {
+    width: '320px',
+    marginRight: '0'
+  },
+  tablet: {
+    width: '320px',
+    marginRight: '0'
+  },
+  mobile: {
+    width: '219px',
+    marginRight: '0'
+  }
+}, _SLIDE_PRESETS);
 // Grid Calculations
 var calculateGridColumnWidth = function calculateGridColumnWidth(gridGapsNumber, gridColumnsNumber) {
   return "calc((100% - (" + gridGapsNumber + " * " + GRID_COLUMN_GAP + ")) / " + gridColumnsNumber + ")";
@@ -12529,6 +12262,10 @@ var calculateSlideGapsSpace = function calculateSlideGapsSpace(gapsPerSlide) {
 };
 // Slide styles
 var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type, isActive) {
+  var preset = SLIDE_PRESETS[type];
+  if (preset != null && preset.desktop) {
+    return "\n      width: " + preset.desktop.width + ";\n      margin-right: " + preset.desktop.marginRight + ";\n    ";
+  }
   var _GRID_VALUES$desktop = GRID_VALUES.desktop,
     gapsNumber = _GRID_VALUES$desktop.gapsNumber,
     columnsNumber = _GRID_VALUES$desktop.columnsNumber,
@@ -12543,7 +12280,18 @@ var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type, isActiv
   var slideGapsSpace = calculateSlideGapsSpace(gapsPerSlide);
   return "\n      width: calc( (" + columnsPerSlide + " * (100% - " + gapsSpaceInMainGrid + ") / " + columns + ") + " + slideGapsSpace + " );\n      margin-right: " + GRID_COLUMN_GAP + ";\n    ";
 };
-var getCardSlideMobileStyles = function getCardSlideMobileStyles() {
+var getCardSlideTabletStyles = function getCardSlideTabletStyles(type) {
+  var preset = SLIDE_PRESETS[type];
+  if (preset != null && preset.tablet) {
+    return "\n      width: " + preset.tablet.width + ";\n      margin-right: " + preset.tablet.marginRight + ";\n    ";
+  }
+  return "\n      width: " + (type === exports.CarouselType.SmallCard ? '30%' : '40%') + ";\n    ";
+};
+var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
+  var preset = SLIDE_PRESETS[type];
+  if (preset != null && preset.mobile) {
+    return "\n      width: " + preset.mobile.width + ";\n      margin-right: " + preset.mobile.marginRight + ";\n    ";
+  }
   var _GRID_VALUES$mobile = GRID_VALUES.mobile,
     columnsNumber = _GRID_VALUES$mobile.columnsNumber,
     gapsNumber = _GRID_VALUES$mobile.gapsNumber,
@@ -12552,33 +12300,30 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles() {
   var gridColumnWidth = calculateGridColumnWidth(gapsNumber, columnsNumber);
   return "\n      width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n      margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n    ";
 };
-var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
-  return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
-};
-var _templateObject$1q, _templateObject2$17, _templateObject3$U, _templateObject4$M, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$g, _templateObject9$a;
-var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    ", "\n  }}\n\n  &:fullscreen {\n    background: var(--color-base-white);\n    padding-top: 44px;\n    padding-bottom: 84px;\n\n    .swipe-slide > figure {\n       height: var(--fullscreen-figure-height);\n    }\n  }\n"])), function (_ref) {
+var _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          " + getImageSlideStyles(imagesHeightDesktop) + "\n        }\n      }\n    }";
+  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    }";
 }, devices.mobile, function (_ref2) {
   var imagesHeightDevice = _ref2.imagesHeightDevice;
-  return "&&& {\n        .swipe-slide > figure {\n          " + getImageSlideStyles(imagesHeightDevice) + "\n        }\n      }";
+  return "&&& {\n        .swipe-slide > figure {\n            > div {\n              height: " + imagesHeightDevice + "px;\n            }\n        }\n      }";
 });
-var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    && {\n      .swipe-slide {\n        ", "\n      }\n    }\n  }\n}"])), function (_ref3) {
+var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n}"])), function (_ref3) {
   var type = _ref3.type,
     isActive = _ref3.isActive;
-  return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type, isActive) + "\n        }\n      }\n\n      @media " + devices.tablet + " {\n        & {\n          .swipe-slide {\n            width: " + (type === exports.CarouselType.SmallCard ? '30%' : '40%') + ";\n          }\n        }\n      }\n    ";
-}, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
-var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$U || (_templateObject3$U = /*#__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$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  user-select: text;\n"])));
+  return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type, isActive) + "\n        }\n      }\n\n      @media " + devices.tablet + " {\n        & {\n          .swipe-slide {\n            " + getCardSlideTabletStyles(type) + "\n          }\n        }\n      }\n\n      @media " + devices.mobile + " {\n        && {\n          .swipe-slide {\n            " + getCardSlideMobileStyles(type) + "\n          }\n        }\n      }\n    ";
+});
+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$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$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n"])));
+var 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$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
-var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .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 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) {
@@ -12618,9 +12363,34 @@ var Carousel = function Carousel(_ref) {
   var _useState3 = React.useState(0),
     slidesOffsetBefore = _useState3[0],
     setSlidesOffsetBefore = _useState3[1];
+  var _useState4 = React.useState(infinite),
+    availablePrev = _useState4[0],
+    setAvailablePrev = _useState4[1];
+  var _useState5 = React.useState(function () {
+      var count = React__default.Children.count(children);
+      return infinite ? true : count > 1;
+    }),
+    availableNext = _useState5[0],
+    setAvailableNext = _useState5[1];
+  var _useState6 = React.useState(true),
+    showRotatorButtons = _useState6[0],
+    setShowRotatorButtons = _useState6[1];
   var swipeRef = React.useRef(null);
   var carouselRef = React.useRef(null);
   var titleButtonsGridRef = React.useRef(null);
+  var childrenCount = React__default.Children.count(children);
+  React.useEffect(function () {
+    if (infinite) {
+      setAvailablePrev(true);
+      setAvailableNext(true);
+    } else {
+      setAvailablePrev(false);
+      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 : childrenCount > 1;
+      });
+    }
+  }, [childrenCount, infinite]);
   React.useEffect(function () {
     if (type !== exports.CarouselType.Image) return undefined;
     var handleFullscreenChange = function handleFullscreenChange() {
@@ -12646,12 +12416,17 @@ var Carousel = function Carousel(_ref) {
   React.useEffect(function () {
     if (!useOffset || !active) return undefined;
     var updateWindowDimensions = function updateWindowDimensions() {
+      var _swipeRef$current2;
       if (window.matchMedia(devices.mobile).matches) {
         setSlidesOffsetBefore(GRID_OFFSET_MARGIN.mobile);
       } else if (window.matchMedia(devices.tablet).matches) {
         setSlidesOffsetBefore(GRID_OFFSET_MARGIN.tablet);
       } else {
-        setSlidesOffsetBefore(Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop);
+        setSlidesOffsetBefore(infinite ? Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop : 0);
+      }
+      var hasNext = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext();
+      if (typeof hasNext === 'boolean') {
+        setAvailableNext(hasNext);
       }
     };
     window.addEventListener('resize', updateWindowDimensions);
@@ -12661,12 +12436,12 @@ var Carousel = function Carousel(_ref) {
     };
   }, [useOffset, active]);
   var onNext = function onNext() {
-    var _swipeRef$current;
-    (_swipeRef$current = swipeRef.current) == null || _swipeRef$current.nextSlide();
+    var _swipeRef$current3;
+    (_swipeRef$current3 = swipeRef.current) == null || _swipeRef$current3.nextSlide();
   };
   var onPrev = function onPrev() {
-    var _swipeRef$current2;
-    (_swipeRef$current2 = swipeRef.current) == null || _swipeRef$current2.prevSlide();
+    var _swipeRef$current4;
+    (_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.prevSlide();
   };
   var onClickFullscreen = function onClickFullscreen() {
     if (!isFullscreen && carouselRef.current) {
@@ -12675,11 +12450,56 @@ var Carousel = function Carousel(_ref) {
       document.exitFullscreen();
     }
   };
+  React.useEffect(function () {
+    if (type !== exports.CarouselType.Image) return undefined;
+    var el = carouselRef.current;
+    if (!el) return undefined;
+    var handleKeydown = function handleKeydown(e) {
+      if (!el.contains(document.activeElement)) return;
+      if (e.key === 'ArrowRight') {
+        var _swipeRef$current5;
+        e.preventDefault();
+        (_swipeRef$current5 = swipeRef.current) == null || _swipeRef$current5.nextSlide();
+      } else if (e.key === 'ArrowLeft') {
+        var _swipeRef$current6;
+        e.preventDefault();
+        (_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.prevSlide();
+      }
+    };
+    el.addEventListener('keydown', handleKeydown);
+    return function () {
+      return el.removeEventListener('keydown', handleKeydown);
+    };
+  }, [type]);
   var onActiveChangeHandler = function onActiveChangeHandler(value) {
     if (useOffset && !active) {
       setActive(value);
     }
   };
+  var onIndexChangeHandler = function onIndexChangeHandler(index) {
+    if (infinite) {
+      setAvailablePrev(true);
+      setAvailableNext(true);
+      return;
+    }
+    setAvailablePrev(index > 0);
+    setAvailableNext(function () {
+      var _swipeRef$current$has2, _swipeRef$current7;
+      return (_swipeRef$current$has2 = (_swipeRef$current7 = swipeRef.current) == null ? void 0 : _swipeRef$current7.hasNext()) != null ? _swipeRef$current$has2 : index < Math.max(0, childrenCount - 1);
+    });
+  };
+  var handleOverflowChange = function handleOverflowChange(overflow) {
+    if (!infinite) {
+      var _swipeRef$current8;
+      setShowRotatorButtons(overflow);
+      var hasNext = (_swipeRef$current8 = swipeRef.current) == null ? void 0 : _swipeRef$current8.hasNext();
+      if (typeof hasNext === 'boolean') {
+        setAvailableNext(hasNext);
+      } else {
+        setAvailableNext(overflow);
+      }
+    }
+  };
   var carouselTitleId = "carousel-title-" + title;
   var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
   var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
@@ -12717,23 +12537,28 @@ var Carousel = function Carousel(_ref) {
     columnSpanDevice: 2
   }, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
     "data-testid": "carousel-buttons-wrapper"
-  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+  }, (infinite || showRotatorButtons) && (/*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickNext: onNext,
     onClickPrev: onPrev,
-    availablePrev: true,
+    availablePrev: availablePrev,
+    availableNext: availableNext,
     showFullscreen: type === exports.CarouselType.Image,
     onClickFullscreen: onClickFullscreen,
-    isFullscreen: isFullscreen
-  })))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, {
-    active: active,
+    isFullscreen: isFullscreen,
+    size: infinite ? 'default' : 'small'
+  }))))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, Object.assign({}, infinite ? {
+    active: active
+  } : {}, {
     columnStartDesktop: 3,
-    columnSpanDesktop: 14,
+    columnSpanDesktop: infinite ? 14 : 13,
     columnStartDevice: 2,
     columnSpanDevice: 13
-  }, /*#__PURE__*/React__default.createElement(Swipe, {
+  }), /*#__PURE__*/React__default.createElement(Swipe, {
     onActiveChange: function onActiveChange(value) {
       return onActiveChangeHandler(value);
     },
+    onIndexChange: onIndexChangeHandler,
+    onOverflowChange: handleOverflowChange,
     "data-testid": "carousel-swipe",
     ref: swipeRef,
     infinite: infinite,
@@ -12741,17 +12566,17 @@ var Carousel = function Carousel(_ref) {
   }, children))));
 };
-var _templateObject$1r, _templateObject2$18, _templateObject3$V, _templateObject4$N, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$h, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
-var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1r || (_templateObject$1r = /*#__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$18 || (_templateObject2$18 = /*#__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$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__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 _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$d, _templateObject0$b, _templateObject1$6, _templateObject10$4, _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$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$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$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  .swipe-slide {\n    width: calc(100% - 50px - var(--rotator-button-width));\n    -webkit-transform: translate3d(0, 0, 0);\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 7 / 3 / 15;\n\n      .swipe-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swipe-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var RotatorButtonsWrapper$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 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$1 = /*#__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$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 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);
@@ -12764,7 +12589,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$r = ["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);
@@ -12775,7 +12600,7 @@ var Buttons = function Buttons(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$u);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
@@ -13007,11 +12832,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   })));
 };
-var _excluded$s = ["logo", "slides"];
+var _excluded$v = ["logo", "slides"];
 var HighlightsCinema = function HighlightsCinema(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -13028,10 +12853,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
   })));
 };
-var _excluded$t = ["slides"];
+var _excluded$w = ["slides"];
 var HighlightsCore = function HighlightsCore(_ref) {
   var slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -13044,67 +12869,627 @@ var HighlightsCore = function HighlightsCore(_ref) {
     slides: slidesWithLinks
   })));
 };
-var _excluded$u = ["logo", "slides"];
-var HighlightsStream = function HighlightsStream(_ref) {
-  var logo = _ref.logo,
-    slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
-  var slidesWithLinks = slides.map(function (slide) {
-    var links = processSlideLinks(slide.links);
-    return _extends({}, slide, {
-      links: links
-    });
-  });
-  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
-    theme: exports.ThemeType.Stream
-  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
-    slides: slidesWithLinks,
-    logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, {
-      align: "left"
-    }) : null
-  })));
+var _excluded$x = ["logo", "slides"];
+var HighlightsStream = function HighlightsStream(_ref) {
+  var logo = _ref.logo,
+    slides = _ref.slides,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+  var slidesWithLinks = slides.map(function (slide) {
+    var links = processSlideLinks(slide.links);
+    return _extends({}, slide, {
+      links: links
+    });
+  });
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
+    theme: exports.ThemeType.Stream
+  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
+    slides: slidesWithLinks,
+    logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, {
+      align: "left"
+    }) : null
+  })));
+};
+var _templateObject$1w, _templateObject3$X;
+var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  .swipe-slide {\n    width: 100%;\n  }\n"])));
+var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
+var MinimalCarousel = function MinimalCarousel(_ref) {
+  var children = _ref.children;
+  var carouselRef = React.useRef(null);
+  var hasMultipleChildren = React__default.Children.count(children) > 1;
+  var onNext = function onNext() {
+    var _carouselRef$current;
+    return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
+  };
+  var onPrev = function onPrev() {
+    var _carouselRef$current2;
+    return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
+  };
+  return /*#__PURE__*/React__default.createElement(CarouselWrapper$1, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 1,
+    columnSpanDesktop: 16,
+    columnStartDevice: 1,
+    columnSpanDevice: 14
+  }, /*#__PURE__*/React__default.createElement(Swipe, {
+    ref: carouselRef,
+    infinite: hasMultipleChildren,
+    "data-testid": "carousel-swipe"
+  }, React__default.Children.toArray(children).map(function (child, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: "swipe-minimal-carousel-slide-" + index
+    }, child);
+  })))), hasMultipleChildren && (/*#__PURE__*/React__default.createElement(ButtonsWrapper$1, {
+    "data-testid": "carousel-buttons-wrapper"
+  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    onClickNext: onNext,
+    onClickPrev: onPrev
+  }))));
+};
+var colors = {
+  core: '#C8102E',
+  stream: '#1866DC',
+  cinema: '#1A1A1A'
+};
+var commonColors = {
+  black: '#1A1A1A',
+  white: '#FFFFFF',
+  darkgrey: '#727272',
+  midgrey: '#B2B2B2',
+  lightgrey: '#F0F0F0',
+  error: '#C8102E',
+  medium: '#D79233',
+  good: '#4EAA33',
+  progress: '#1866DC',
+  navigation: '#C8102E',
+  lemonChiffon: '#fffbbe',
+  lapisLazuli: '#0060a0',
+  blue: '#1866DC',
+  red: '#C8102E'
+};
+var fontFamilies = {
+  adobeGaramondPro: 'adobe-garamond-pro',
+  adobeGaramondProItalics: 'adobe-garamond-pro',
+  gothamSSmMedium: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
+  gothamSSm: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
+  sabonNextLTProRegular: 'Sabon Next LT Pro Regular',
+  sabonNextLTProRegularItalics: 'Sabon Next LT Pro Regular Italics',
+  sansSerifFallback: 'Montserrat, sans-serif'
+};
+var common = {
+  fonts: {
+    desktop: {
+      sizes: {
+        headers: {
+          1: '96px',
+          2: '68px',
+          3: '44px',
+          4: '34px',
+          5: '24px',
+          6: '20px'
+        },
+        altHeaders: {
+          3: '44px',
+          4: '34px',
+          5: '24px',
+          6: '20px'
+        },
+        subtitles: {
+          1: '18px',
+          2: '14px'
+        },
+        titleDescription: '20px',
+        body: {
+          1: '19px',
+          2: '16px',
+          3: '14px'
+        },
+        listing: '19px',
+        buttons: '14px',
+        overline: {
+          1: '14px',
+          2: '12px',
+          3: '10px',
+          4: '8px'
+        },
+        navigation: '13px',
+        search: '24px'
+      },
+      letterSpacing: {
+        headers: {
+          1: '2px',
+          2: '1px',
+          3: '1px',
+          4: '1px',
+          5: '1px',
+          6: '1px'
+        },
+        altHeaders: {
+          3: 'normal',
+          4: 'normal',
+          5: 'normal',
+          6: 'normal'
+        },
+        overline: {
+          1: '1px',
+          2: '1px',
+          3: '1px',
+          4: '1px'
+        },
+        subtitles: {
+          1: '1px',
+          2: '1px'
+        },
+        body: {
+          1: 'normal',
+          2: 'normal',
+          3: 'normal'
+        },
+        navigation: '1px'
+      },
+      lineHeights: {
+        headers: {
+          1: '110px',
+          2: '72px',
+          3: '48px',
+          4: '40px',
+          5: '30px',
+          6: '28px'
+        },
+        altHeaders: {
+          3: '48px',
+          4: '44px',
+          5: '30px',
+          6: '28px'
+        },
+        subtitles: {
+          1: '22px',
+          2: '22px'
+        },
+        titleDescription: '28px',
+        body: {
+          1: '26px',
+          2: '22px',
+          3: '20px'
+        },
+        peopleListing: '24px',
+        listing: '36px',
+        buttons: '20px',
+        overline: {
+          1: '16px',
+          2: '14px',
+          3: '12px',
+          4: '10px'
+        },
+        navigation: '16px'
+      },
+      families: {
+        headers: fontFamilies.gothamSSmMedium,
+        altHeaders: fontFamilies.adobeGaramondPro,
+        subtitles: fontFamilies.gothamSSmMedium,
+        body: fontFamilies.adobeGaramondPro,
+        bodyItalics: fontFamilies.adobeGaramondProItalics,
+        listing: fontFamilies.adobeGaramondPro,
+        listingItalics: fontFamilies.adobeGaramondProItalics,
+        buttons: fontFamilies.gothamSSm,
+        overline: fontFamilies.gothamSSmMedium,
+        navigation: fontFamilies.gothamSSmMedium,
+        peopleListingRole: fontFamilies.gothamSSm,
+        search: fontFamilies.adobeGaramondPro
+      },
+      weights: {
+        headers: {
+          1: '500',
+          2: '500',
+          3: '500',
+          4: '500',
+          5: '500',
+          6: '500'
+        },
+        altHeaders: {
+          3: 'normal',
+          4: 'normal',
+          5: 'normal',
+          6: 'normal'
+        },
+        buttons: '400',
+        overline: {
+          1: '500',
+          2: '500',
+          3: '500',
+          4: '500'
+        },
+        body: {
+          1: '400',
+          2: '400',
+          3: '400'
+        },
+        subtitles: {
+          1: '500',
+          2: '500'
+        },
+        navigation: '500'
+      },
+      transforms: {
+        headers: 'uppercase',
+        altHeaders: 'none',
+        overline: 'uppercase',
+        subtitles: 'uppercase',
+        body: 'none',
+        navigation: 'uppercase'
+      },
+      fontFeatureSettings: {
+        headers: "'tnum' on, 'lnum' on",
+        altHeaders: "'pnum' on, 'onum' on",
+        overline: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off",
+        subtitles: "'tnum' on, 'lnum' on",
+        body: "'pnum' on, 'onum' on, 'liga' off",
+        navigation: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off"
+      },
+      wordBreak: {
+        headers: 'break-word',
+        altHeaders: 'break-word',
+        overline: 'break-word',
+        subtitles: 'break-word',
+        body: 'break-word'
+      },
+      margins: {
+        headers: {
+          // These margins use the Chrome defaults to enable proper fallbacks when using semantic level -
+          // https://www.w3schools.com/cssref/css_default_values.php
+          1: '0.67em 0',
+          2: '0.83em 0',
+          3: '1em 0',
+          4: '1.33em 0',
+          5: '1.67em 0',
+          6: '2.33em 0'
+        }
+      }
+    },
+    mobile: {
+      sizes: {
+        headers: {
+          1: '38px',
+          2: '30px',
+          3: '26px',
+          4: '24px',
+          5: '20px',
+          6: '17px'
+        },
+        altHeaders: {
+          3: '26px',
+          4: '24px',
+          5: '20px',
+          6: '17px'
+        },
+        subtitles: {
+          1: '16px',
+          2: '14px'
+        },
+        titleDescription: '17px',
+        body: {
+          1: '17px',
+          2: '12px',
+          3: '11px'
+        },
+        listing: '16px',
+        buttons: '14px',
+        overline: {
+          1: '14px',
+          2: '12px',
+          3: '10px',
+          4: '8px'
+        },
+        navigation: '13px',
+        search: '20px'
+      },
+      letterSpacing: {
+        headers: {
+          1: '1px',
+          2: '1px',
+          3: '1px',
+          4: '1px',
+          5: '1px',
+          6: '1px'
+        },
+        altHeaders: {
+          3: 'normal',
+          4: 'normal',
+          5: 'normal',
+          6: 'normal'
+        },
+        overline: {
+          1: '1px',
+          2: '1px'
+        },
+        subtitles: {
+          1: '1px',
+          2: '1px'
+        },
+        body: {
+          1: 'normal',
+          2: 'normal',
+          3: 'normal'
+        },
+        navigation: '1px'
+      },
+      lineHeights: {
+        headers: {
+          1: '42px',
+          2: '34px',
+          3: '30px',
+          4: '28px',
+          5: '28px',
+          6: '24px'
+        },
+        altHeaders: {
+          3: '30px',
+          4: '28px',
+          5: '28px',
+          6: '24px'
+        },
+        subtitles: {
+          1: '24px',
+          2: '18px'
+        },
+        titleDescription: '24px',
+        body: {
+          1: '24px',
+          2: '18px',
+          3: '16px'
+        },
+        listing: '34px',
+        buttons: '20px',
+        overline: {
+          1: '16px',
+          2: '14px'
+        },
+        navigation: '16px'
+      },
+      families: {
+        headers: fontFamilies.gothamSSm,
+        altHeaders: fontFamilies.adobeGaramondPro,
+        subtitles: fontFamilies.gothamSSmMedium,
+        body: fontFamilies.adobeGaramondPro,
+        bodyItalics: fontFamilies.adobeGaramondProItalics,
+        listing: fontFamilies.adobeGaramondPro,
+        listingItalics: fontFamilies.adobeGaramondProItalics,
+        buttons: fontFamilies.gothamSSm,
+        overline: fontFamilies.gothamSSmMedium,
+        navigation: fontFamilies.gothamSSmMedium,
+        search: fontFamilies.adobeGaramondPro
+      },
+      weights: {
+        headers: {
+          1: '500',
+          2: '500',
+          3: '500',
+          4: '500',
+          5: '500',
+          6: '500'
+        },
+        altHeaders: {
+          3: 'normal',
+          4: 'normal',
+          5: 'normal',
+          6: 'normal'
+        },
+        buttons: '400',
+        overline: {
+          1: '500',
+          2: '500'
+        },
+        body: {
+          1: '400',
+          2: '400',
+          3: '400'
+        },
+        subtitles: {
+          1: '500',
+          2: '500'
+        },
+        navigation: '500'
+      },
+      transforms: {
+        headers: 'uppercase',
+        altHeaders: 'none',
+        overline: 'uppercase',
+        subtitles: 'uppercase',
+        body: 'none',
+        navigation: 'uppercase'
+      },
+      fontFeatureSettings: {
+        headers: "'tnum' on, 'lnum' on",
+        altHeaders: "'pnum' on, 'onum' on",
+        overline: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off",
+        subtitles: "'tnum' on, 'lnum' on",
+        body: "'pnum' on, 'onum' on, 'liga' off",
+        navigation: "'tnum' on, 'lnum' on, 'liga' off, 'calt' off"
+      },
+      wordBreak: {
+        headers: 'break-word',
+        altHeaders: 'break-word',
+        overline: 'break-word',
+        subtitles: 'break-word',
+        body: 'break-word'
+      }
+    },
+    tablet: {
+      sizes: {
+        headers: {
+          6: '17px'
+        },
+        altHeaders: {
+          4: '24px'
+        },
+        body: {
+          1: '17px'
+        }
+      }
+    }
+  },
+  spacing: {
+    1: '4px',
+    2: '8px',
+    3: '12px',
+    4: '16px',
+    5: '20px',
+    6: '24px',
+    7: '28px',
+    8: '32px',
+    9: '36px',
+    10: '40px',
+    12: '48px',
+    15: '60px',
+    18: '72px',
+    20: '80px',
+    30: '120px',
+    35: '140px',
+    40: '160px',
+    45: '180px',
+    50: '200px'
+  },
+  grid: {
+    mobile: {
+      margin: '20px',
+      outerMargin: '0',
+      gap: '12px'
+    },
+    tablet: {
+      margin: '32px',
+      outerMargin: '0',
+      gap: '20px'
+    },
+    desktop: {
+      margin: '10%',
+      outerMargin: '50px',
+      gap: '36px'
+    }
+  },
+  buttons: {
+    paddingX: '20px',
+    paddingY: '14px',
+    paddingYIcon: '12px',
+    iconWidth: '20px',
+    iconHeight: '20px',
+    iconMargin: '12px'
+  },
+  footer: {
+    desktop: {
+      height: '380px',
+      paddingTop: '44px',
+      paddingBottom: '44px',
+      itemsGap: '32px',
+      mediaGap: '24px',
+      mediaIconWidth: '24px',
+      mediaIconHeight: '24px',
+      verticalSpacingLarge: '58px',
+      verticalSpacingSmall: '16px'
+    },
+    tablet: {
+      paddingTop: '40px',
+      paddingBottom: '40px'
+    },
+    mobile: {
+      height: 'auto',
+      paddingTop: '20px',
+      paddingBottom: '20px',
+      itemsGap: '12px',
+      mediaGap: '32px',
+      mediaIconWidth: '28px',
+      mediaIconHeight: '28px',
+      verticalSpacingLarge: '24px',
+      verticalSpacingSmall: '24px'
+    }
+  }
+};
+var core = /*#__PURE__*/_extends({}, common, {
+  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
+    primary: colors.core,
+    primaryButton: colors.core,
+    secondaryButton: colors.core,
+    tertiaryButton: 'transparent',
+    auxiliaryButton: 'transparent',
+    primaryButtonReverseBg: colors.cinema,
+    primaryButtonReverse: commonColors.white
+  })
+});
+var stream = /*#__PURE__*/_extends({}, common, {
+  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
+    primary: colors.stream,
+    primaryButton: colors.stream,
+    primaryButtonReverseBg: colors.cinema,
+    primaryButtonReverse: commonColors.white,
+    secondaryButton: colors.stream,
+    tertiaryButton: 'transparent',
+    auxiliaryButton: 'transparent'
+  })
+});
+var cinema = /*#__PURE__*/_extends({}, common, {
+  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
+    primary: colors.cinema,
+    primaryButton: commonColors.white,
+    primaryButtonReverseBg: commonColors.white,
+    primaryButtonReverse: colors.cinema,
+    secondaryButton: colors.cinema,
+    tertiaryButton: 'transparent',
+    auxiliaryButton: 'transparent'
+  })
+});
+var schools = /*#__PURE__*/_extends({}, common, {
+  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
+    primary: colors.core,
+    primaryButton: colors.core,
+    primaryButtonReverseBg: colors.cinema,
+    primaryButtonReverse: commonColors.white,
+    secondaryButton: colors.core,
+    tertiaryButton: 'transparent',
+    auxiliaryButton: 'transparent'
+  }),
+  fonts: /*#__PURE__*/_extends({}, common.fonts, {
+    desktop: /*#__PURE__*/_extends({}, common.fonts.desktop, {
+      transforms: {
+        headers: 'none',
+        altHeaders: 'none',
+        overline: 'none',
+        subtitles: 'none',
+        body: 'none',
+        navigation: 'uppercase'
+      }
+    }),
+    mobile: /*#__PURE__*/_extends({}, common.fonts.mobile, {
+      transforms: {
+        headers: 'none',
+        altHeaders: 'none',
+        overline: 'none',
+        subtitles: 'none',
+        body: 'none',
+        navigation: 'uppercase'
+      }
+    })
+  })
+});
+var themes = {
+  core: core,
+  stream: stream,
+  cinema: cinema,
+  fontFamilies: fontFamilies,
+  schools: schools
 };
-var _templateObject$1s, _templateObject3$W;
-var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  .swipe-slide {\n    width: 100%;\n  }\n"])));
-var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
-var MinimalCarousel = function MinimalCarousel(_ref) {
-  var children = _ref.children;
-  var carouselRef = React.useRef(null);
-  var hasMultipleChildren = React__default.Children.count(children) > 1;
-  var onNext = function onNext() {
-    var _carouselRef$current;
-    return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
-  };
-  var onPrev = function onPrev() {
-    var _carouselRef$current2;
-    return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
-  };
-  return /*#__PURE__*/React__default.createElement(CarouselWrapper$1, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 1,
-    columnSpanDesktop: 16,
-    columnStartDevice: 1,
-    columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(Swipe, {
-    ref: carouselRef,
-    infinite: hasMultipleChildren,
-    "data-testid": "carousel-swipe"
-  }, React__default.Children.toArray(children).map(function (child, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: "swipe-minimal-carousel-slide-" + index
-    }, child);
-  })))), hasMultipleChildren && (/*#__PURE__*/React__default.createElement(ButtonsWrapper$1, {
-    "data-testid": "carousel-buttons-wrapper"
-  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
-    onClickNext: onNext,
-    onClickPrev: onPrev
-  }))));
+var Theme = function Theme(_ref) {
+  var children = _ref.children,
+    theme = _ref.theme;
+  var chosenTheme = themes[theme];
+  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+    theme: chosenTheme
+  }, children);
 };
-var _templateObject$1t;
-var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", ";\n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n\n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n\n    --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n    --harmonic-text-link-underline-offset: 4px;\n    --harmonic-text-transform-navigation: capitalize;\n    --harmonic-font-size-navigation: 19px;\n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n\n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n\n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n\n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n\n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n\n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n\n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n\n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n\n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n\n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n\n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n\n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n\n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n\n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n\n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n\n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n\n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n\n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n\n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n\n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n    }\n\n    @media ", " {\n\n    }\n\n    @media ", " {\n\n    }\n  }\n"])), function (_ref) {
+var _templateObject$1x;
+var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", ";\n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n\n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n\n    --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n    --harmonic-text-link-underline-offset: 4px;\n    --harmonic-text-transform-navigation: capitalize;\n    --harmonic-font-size-navigation: 19px;\n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n\n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n\n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n\n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n\n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n\n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n\n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n\n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n\n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n\n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n\n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n\n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n\n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n\n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n\n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n\n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n\n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n\n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n\n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n\n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n    }\n\n    @media ", " {\n\n    }\n\n    @media ", " {\n\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
@@ -14051,10 +14436,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1t || (
   return theme.footer.tablet.paddingBottom;
 }, devices.desktop, devices.largeDesktop);
-var _templateObject$1u, _templateObject2$19, _templateObject3$X;
-var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 32px 0;\n\n  & cite {\n    font-style: normal;\n  }\n\n  @media ", " {\n    padding: 24px 0;\n  }\n"])), devices.mobile);
+var _templateObject$1y, _templateObject2$1b, _templateObject3$Y;
+var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 32px 0;\n\n  & cite {\n    font-style: normal;\n  }\n\n  @media ", " {\n    padding: 24px 0;\n  }\n"])), devices.mobile);
 /* eslint-disable react/no-danger */
 var Quote = function Quote(_ref) {
@@ -14100,6 +14485,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;
@@ -14142,6 +14528,7 @@ exports.Pagination = Pagination;
 exports.PasswordStrength = PasswordStrength;
 exports.Paywall = Paywall;
 exports.PeopleListing = PeopleListing;
+exports.PersonCard = PersonCard;
 exports.PrimaryButton = PrimaryButton;
 exports.Progress = Progress;
 exports.PromoWithTags = PromoWithTags;