@royaloperahouse/harmonic 0.18.0 → 0.18.2-a

package/dist/harmonic.esm.js

@@ -221,7 +221,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* Base classes */\n.typography-module_display__ZHsz9 {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  line-height: 100%;\n}\n\n.typography-module_header__FVsLI {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n}\n\n.typography-module_subtitle__x3sSn {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n}\n\n.typography-module_bodycopy__-BY2U {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n}\n\n.typography-module_overline__y1yCC {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n  text-transform: uppercase;\n}\n\n.typography-module_buttontext__Gp0W- {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n}\n\n.typography-module_captiontext__zyA-- {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n}\n\n/* Size modifiers */\n.typography-module_display--large__RwPQD {\n  font-size: 96px;\n  font-weight: 700;\n  letter-spacing: -5px;\n}\n\n.typography-module_display--small__XWUSJ {\n  font-size: 68px;\n  font-weight: 500;\n  letter-spacing: -3px;\n}\n\n.typography-module_header--large__2vP3p {\n  font-size: 44px;\n  line-height: 48px;\n  letter-spacing: -1.5px;\n}\n\n.typography-module_header--medium__OgzlB {\n  font-size: 34px;\n  line-height: 40px;\n  letter-spacing: -1px;\n}\n\n.typography-module_header--small__zLuFf {\n  font-size: 26px;\n  line-height: 32px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--large__1Ep9J {\n  font-size: 19px;\n  line-height: 26px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--small__Vt9bZ {\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--large__BNzf2 {\n  font-size: 19px;\n  line-height: 26px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--medium__cwJEu {\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--small__fTLSM {\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_overline--large__79WUM {\n  font-size: 14px;\n  line-height: 18px;\n  letter-spacing: 0.3px;\n}\n\n.typography-module_overline--small__MGEG6 {\n  font-size: 12px;\n  line-height: 14px;\n  letter-spacing: 0.2px;\n}\n\n/* Button, Caption, Navigation text */\n.typography-module_buttontext__Gp0W- {\n  font-size: 17px;\n  line-height: 20px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_captiontext__zyA-- {\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n  font-size: 19px;\n  line-height: 19px;\n  letter-spacing: 0.4px;\n}\n\n/* Color modifiers */\n.typography-module_display--primary__9sTwU,\n.typography-module_header--primary__KF0PJ,\n.typography-module_subtitle--primary__yL-hS,\n.typography-module_bodycopy--primary__5Uo2D,\n.typography-module_overline--primary__a2NSa,\n.typography-module_buttontext--primary__HnmE3,\n.typography-module_captiontext--primary__mmafI,\n.typography-module_navigationtext--primary__vIsUl {\n  color: var(--color-primary);\n}\n\n\n.typography-module_display--black__8hmsx,\n.typography-module_header--black__M3I14,\n.typography-module_subtitle--black__IQRSo,\n.typography-module_bodycopy--black__J8BNP,\n.typography-module_overline--black__RUDoj,\n.typography-module_buttontext--black__irjmz,\n.typography-module_captiontext--black__7axhP,\n.typography-module_navigationtext--black__wDz-G {\n  color: var(--color-base-black);\n}\n\n.typography-module_display--white__3QA6W,\n.typography-module_header--white__mm-ex,\n.typography-module_subtitle--white__VzQ3K,\n.typography-module_bodycopy--white__NJ8J8,\n.typography-module_overline--white__cV5QV,\n.typography-module_buttontext--white__rrr8U,\n.typography-module_captiontext--white__OMFwW,\n.typography-module_navigationtext--white__5YDdY {\n  color: var(--color-base-white);\n}\n\n.typography-module_display--red__khdLJ,\n.typography-module_header--red__hxuj9,\n.typography-module_subtitle--red__gSK7d,\n.typography-module_bodycopy--red__P5Mau,\n.typography-module_overline--red__OW5dE,\n.typography-module_buttontext--red__mlRi2,\n.typography-module_captiontext--red__jMQIK,\n.typography-module_navigationtext--red__-QADV {\n  color: var(--color-primary-red);\n}\n\n.typography-module_display--grey__RsgTf,\n.typography-module_header--grey__rC0vN,\n.typography-module_subtitle--grey__1nkEx,\n.typography-module_bodycopy--grey__SNnaU,\n.typography-module_overline--grey__lGOsK,\n.typography-module_buttontext--grey__1Y4oX,\n.typography-module_captiontext--grey__V0MLc,\n.typography-module_navigationtext--grey__xi3sz {\n  color: var(--color-base-dark-grey);\n}\n\n.typography-module_display--inherit__ZNOHM,\n.typography-module_header--inherit__qmHQE,\n.typography-module_subtitle--inherit__mly-X,\n.typography-module_bodycopy--inherit__CoC-f,\n.typography-module_overline--inherit__Cq4ni,\n.typography-module_buttontext--inherit__vguWx,\n.typography-module_captiontext--inherit__ya6gm,\n.typography-module_navigationtext--inherit__cJLWf {\n  color: inherit;\n}\n\n/* Typography variants */\n.typography-module_display--serif__C0-Ve,\n.typography-module_header--serif__uTGCc {\n  font-family: var(--font-family-serif);\n}\n\n.typography-module_display--em__h2bPV,\n.typography-module_header--em__UFQIA {\n  font-family: var(--font-family-serif);\n  font-style: italic;\n}\n\n.typography-module_display--bold__PG-8g,\n.typography-module_header--bold__InvJk,\n.typography-module_subtitle--bold__Subov,\n.typography-module_bodycopy--bold__nZX3C,\n.typography-module_overline--bold__3mUXy,\n.typography-module_buttontext--bold__rBKIJ,\n.typography-module_captiontext--bold__ebTyV,\n.typography-module_navigationtext--bold__SRlV2 {\n  font-weight: 700;\n}\n\n/* Media queries */\n@media (max-width: 699px) {\n  .typography-module_display--large__RwPQD {\n    font-size: 38px;\n    letter-spacing: -1.5px;\n  }\n\n  .typography-module_display--small__XWUSJ {\n    font-size: 32px;\n    letter-spacing: -1.5px;\n  }\n\n  .typography-module_header--large__2vP3p {\n    font-size: 28px;\n    line-height: 34px;\n    letter-spacing: -1.5px;\n  }\n\n  .typography-module_header--medium__OgzlB {\n    font-size: 24px;\n    line-height: 28px;\n    letter-spacing: -1px;\n  }\n\n  .typography-module_header--small__zLuFf {\n    font-size: 20px;\n    line-height: 26px;\n    letter-spacing: -0.75px;\n  }\n\n  .typography-module_subtitle--large__1Ep9J {\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  .typography-module_subtitle--small__Vt9bZ {\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: -0.2px;\n  }\n\n  .typography-module_bodycopy--large__BNzf2 {\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  .typography-module_bodycopy--medium__cwJEu {\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: -0.2px;\n  }\n\n  .typography-module_bodycopy--small__fTLSM {\n    font-size: 11px;\n    line-height: 16px;\n    letter-spacing: -0.2px;\n  }\n\n  .typography-module_overline--large__79WUM {\n    line-height: 17px;\n    letter-spacing: 0.3px;\n  }\n\n  .typography-module_overline--small__MGEG6 {\n    line-height: 14px;\n    letter-spacing: 0.3px;\n  }\n}";
+var css_248z = "/* Base classes */\n.typography-module_display__ZHsz9 {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  line-height: 100%;\n}\n\n.typography-module_header__FVsLI {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n}\n\n.typography-module_subtitle__x3sSn {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n}\n\n.typography-module_bodycopy__-BY2U {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n}\n\n.typography-module_overline__y1yCC {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n  text-transform: uppercase;\n}\n\n.typography-module_buttontext__Gp0W- {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n}\n\n.typography-module_captiontext__zyA-- {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n}\n\n/* Size modifiers */\n.typography-module_display--large__RwPQD {\n  font-size: 96px;\n  font-weight: 700;\n  letter-spacing: -5px;\n}\n\n.typography-module_display--small__XWUSJ {\n  font-size: 68px;\n  font-weight: 500;\n  letter-spacing: -3px;\n}\n\n.typography-module_header--large__2vP3p {\n  font-size: 44px;\n  line-height: 48px;\n  letter-spacing: -1.5px;\n}\n\n.typography-module_header--medium__OgzlB {\n  font-size: 34px;\n  line-height: 40px;\n  letter-spacing: -1px;\n}\n\n.typography-module_header--small__zLuFf {\n  font-size: 26px;\n  line-height: 32px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--large__1Ep9J {\n  font-size: 19px;\n  line-height: 26px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--small__Vt9bZ {\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--large__BNzf2 {\n  font-size: 19px;\n  line-height: 26px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--medium__cwJEu {\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--small__fTLSM {\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_overline--large__79WUM {\n  font-size: 14px;\n  line-height: 18px;\n  letter-spacing: 0.3px;\n}\n\n.typography-module_overline--small__MGEG6 {\n  font-size: 12px;\n  line-height: 14px;\n  letter-spacing: 0.2px;\n}\n\n/* Button, Caption, Navigation text */\n.typography-module_buttontext__Gp0W- {\n  font-size: 17px;\n  line-height: 20px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_captiontext__zyA-- {\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n  font-size: 19px;\n  line-height: 19px;\n  letter-spacing: 0.4px;\n}\n\n/* Color modifiers */\n.typography-module_display--primary__9sTwU,\n.typography-module_header--primary__KF0PJ,\n.typography-module_subtitle--primary__yL-hS,\n.typography-module_bodycopy--primary__5Uo2D,\n.typography-module_overline--primary__a2NSa,\n.typography-module_buttontext--primary__HnmE3,\n.typography-module_captiontext--primary__mmafI,\n.typography-module_navigationtext--primary__vIsUl {\n  color: var(--color-primary);\n}\n\n.typography-module_display--black__8hmsx,\n.typography-module_header--black__M3I14,\n.typography-module_subtitle--black__IQRSo,\n.typography-module_bodycopy--black__J8BNP,\n.typography-module_overline--black__RUDoj,\n.typography-module_buttontext--black__irjmz,\n.typography-module_captiontext--black__7axhP,\n.typography-module_navigationtext--black__wDz-G {\n  color: var(--color-base-black);\n}\n\n.typography-module_display--white__3QA6W,\n.typography-module_header--white__mm-ex,\n.typography-module_subtitle--white__VzQ3K,\n.typography-module_bodycopy--white__NJ8J8,\n.typography-module_overline--white__cV5QV,\n.typography-module_buttontext--white__rrr8U,\n.typography-module_captiontext--white__OMFwW,\n.typography-module_navigationtext--white__5YDdY {\n  color: var(--color-base-white);\n}\n\n.typography-module_display--red__khdLJ,\n.typography-module_header--red__hxuj9,\n.typography-module_subtitle--red__gSK7d,\n.typography-module_bodycopy--red__P5Mau,\n.typography-module_overline--red__OW5dE,\n.typography-module_buttontext--red__mlRi2,\n.typography-module_captiontext--red__jMQIK,\n.typography-module_navigationtext--red__-QADV {\n  color: var(--color-primary-red);\n}\n\n.typography-module_display--grey__RsgTf,\n.typography-module_header--grey__rC0vN,\n.typography-module_subtitle--grey__1nkEx,\n.typography-module_bodycopy--grey__SNnaU,\n.typography-module_overline--grey__lGOsK,\n.typography-module_buttontext--grey__1Y4oX,\n.typography-module_captiontext--grey__V0MLc,\n.typography-module_navigationtext--grey__xi3sz {\n  color: var(--color-base-dark-grey);\n}\n\n.typography-module_display--inherit__ZNOHM,\n.typography-module_header--inherit__qmHQE,\n.typography-module_subtitle--inherit__mly-X,\n.typography-module_bodycopy--inherit__CoC-f,\n.typography-module_overline--inherit__Cq4ni,\n.typography-module_buttontext--inherit__vguWx,\n.typography-module_captiontext--inherit__ya6gm,\n.typography-module_navigationtext--inherit__cJLWf {\n  color: inherit;\n}\n\n/* Typography variants */\n.typography-module_display--serif__C0-Ve {\n  font-family: var(--font-family-serif);\n}\n\n.typography-module_header--serif__uTGCc {\n  font-family: var(--font-family-serif);\n  letter-spacing: -0.5px;\n}\n\n.typography-module_display--em__h2bPV {\n  font-family: var(--font-family-serif);\n  font-style: italic;\n}\n\n.typography-module_header--em__UFQIA {\n  font-family: var(--font-family-serif);\n  font-style: italic;\n  letter-spacing: -0.5px;\n}\n\n.typography-module_display--bold__PG-8g,\n.typography-module_header--bold__InvJk,\n.typography-module_subtitle--bold__Subov,\n.typography-module_bodycopy--bold__nZX3C,\n.typography-module_overline--bold__3mUXy,\n.typography-module_buttontext--bold__rBKIJ,\n.typography-module_captiontext--bold__ebTyV,\n.typography-module_navigationtext--bold__SRlV2 {\n  font-weight: 700;\n}\n\n/* Media queries */\n@media (max-width: 699px) {\n  .typography-module_display--large__RwPQD {\n    font-size: 38px;\n    letter-spacing: -1.5px;\n  }\n\n  .typography-module_display--small__XWUSJ {\n    font-size: 32px;\n    letter-spacing: -1.5px;\n  }\n\n  .typography-module_header--large__2vP3p {\n    font-size: 28px;\n    line-height: 34px;\n    letter-spacing: -1.5px;\n  }\n\n  .typography-module_header--medium__OgzlB {\n    font-size: 24px;\n    line-height: 28px;\n    letter-spacing: -1px;\n  }\n\n  .typography-module_header--small__zLuFf {\n    font-size: 20px;\n    line-height: 26px;\n    letter-spacing: -0.75px;\n  }\n\n  .typography-module_subtitle--large__1Ep9J {\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  .typography-module_subtitle--small__Vt9bZ {\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: -0.2px;\n  }\n\n  .typography-module_bodycopy--large__BNzf2 {\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  .typography-module_bodycopy--medium__cwJEu {\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: -0.2px;\n  }\n\n  .typography-module_bodycopy--small__fTLSM {\n    font-size: 11px;\n    line-height: 16px;\n    letter-spacing: -0.2px;\n  }\n\n  .typography-module_overline--large__79WUM {\n    line-height: 17px;\n    letter-spacing: 0.3px;\n  }\n\n  .typography-module_overline--small__MGEG6 {\n    line-height: 14px;\n    letter-spacing: 0.3px;\n  }\n}\n";
 var typographyStyles = {"display":"typography-module_display__ZHsz9","header":"typography-module_header__FVsLI","subtitle":"typography-module_subtitle__x3sSn","bodycopy":"typography-module_bodycopy__-BY2U","overline":"typography-module_overline__y1yCC","buttontext":"typography-module_buttontext__Gp0W-","captiontext":"typography-module_captiontext__zyA--","navigationtext":"typography-module_navigationtext__Qj6Zw","display--large":"typography-module_display--large__RwPQD","display--small":"typography-module_display--small__XWUSJ","header--large":"typography-module_header--large__2vP3p","header--medium":"typography-module_header--medium__OgzlB","header--small":"typography-module_header--small__zLuFf","subtitle--large":"typography-module_subtitle--large__1Ep9J","subtitle--small":"typography-module_subtitle--small__Vt9bZ","bodycopy--large":"typography-module_bodycopy--large__BNzf2","bodycopy--medium":"typography-module_bodycopy--medium__cwJEu","bodycopy--small":"typography-module_bodycopy--small__fTLSM","overline--large":"typography-module_overline--large__79WUM","overline--small":"typography-module_overline--small__MGEG6","display--primary":"typography-module_display--primary__9sTwU","header--primary":"typography-module_header--primary__KF0PJ","subtitle--primary":"typography-module_subtitle--primary__yL-hS","bodycopy--primary":"typography-module_bodycopy--primary__5Uo2D","overline--primary":"typography-module_overline--primary__a2NSa","buttontext--primary":"typography-module_buttontext--primary__HnmE3","captiontext--primary":"typography-module_captiontext--primary__mmafI","navigationtext--primary":"typography-module_navigationtext--primary__vIsUl","display--black":"typography-module_display--black__8hmsx","header--black":"typography-module_header--black__M3I14","subtitle--black":"typography-module_subtitle--black__IQRSo","bodycopy--black":"typography-module_bodycopy--black__J8BNP","overline--black":"typography-module_overline--black__RUDoj","buttontext--black":"typography-module_buttontext--black__irjmz","captiontext--black":"typography-module_captiontext--black__7axhP","navigationtext--black":"typography-module_navigationtext--black__wDz-G","display--white":"typography-module_display--white__3QA6W","header--white":"typography-module_header--white__mm-ex","subtitle--white":"typography-module_subtitle--white__VzQ3K","bodycopy--white":"typography-module_bodycopy--white__NJ8J8","overline--white":"typography-module_overline--white__cV5QV","buttontext--white":"typography-module_buttontext--white__rrr8U","captiontext--white":"typography-module_captiontext--white__OMFwW","navigationtext--white":"typography-module_navigationtext--white__5YDdY","display--red":"typography-module_display--red__khdLJ","header--red":"typography-module_header--red__hxuj9","subtitle--red":"typography-module_subtitle--red__gSK7d","bodycopy--red":"typography-module_bodycopy--red__P5Mau","overline--red":"typography-module_overline--red__OW5dE","buttontext--red":"typography-module_buttontext--red__mlRi2","captiontext--red":"typography-module_captiontext--red__jMQIK","navigationtext--red":"typography-module_navigationtext--red__-QADV","display--grey":"typography-module_display--grey__RsgTf","header--grey":"typography-module_header--grey__rC0vN","subtitle--grey":"typography-module_subtitle--grey__1nkEx","bodycopy--grey":"typography-module_bodycopy--grey__SNnaU","overline--grey":"typography-module_overline--grey__lGOsK","buttontext--grey":"typography-module_buttontext--grey__1Y4oX","captiontext--grey":"typography-module_captiontext--grey__V0MLc","navigationtext--grey":"typography-module_navigationtext--grey__xi3sz","display--inherit":"typography-module_display--inherit__ZNOHM","header--inherit":"typography-module_header--inherit__qmHQE","subtitle--inherit":"typography-module_subtitle--inherit__mly-X","bodycopy--inherit":"typography-module_bodycopy--inherit__CoC-f","overline--inherit":"typography-module_overline--inherit__Cq4ni","buttontext--inherit":"typography-module_buttontext--inherit__vguWx","captiontext--inherit":"typography-module_captiontext--inherit__ya6gm","navigationtext--inherit":"typography-module_navigationtext--inherit__cJLWf","display--serif":"typography-module_display--serif__C0-Ve","header--serif":"typography-module_header--serif__uTGCc","display--em":"typography-module_display--em__h2bPV","header--em":"typography-module_header--em__UFQIA","display--bold":"typography-module_display--bold__PG-8g","header--bold":"typography-module_header--bold__InvJk","subtitle--bold":"typography-module_subtitle--bold__Subov","bodycopy--bold":"typography-module_bodycopy--bold__nZX3C","overline--bold":"typography-module_overline--bold__3mUXy","buttontext--bold":"typography-module_buttontext--bold__rBKIJ","captiontext--bold":"typography-module_captiontext--bold__ebTyV","navigationtext--bold":"typography-module_navigationtext--bold__SRlV2"};
 styleInject(css_248z);
 
@@ -301,7 +301,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,
@@ -3092,23 +3093,34 @@ var StyledImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$a ||
   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.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) {
@@ -3406,7 +3418,7 @@ var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 =
   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,
@@ -3435,7 +3447,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
@@ -3466,10 +3478,102 @@ var Radio2 = /*#__PURE__*/forwardRef(Radio2Component);
 
 var _templateObject$f, _templateObject2$9, _templateObject3$5, _templateObject4$3, _templateObject5$2;
 var ButtonsContainer = /*#__PURE__*/styled.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.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.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(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(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(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(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 = useState(false),
+    IOS = _useState[0],
+    setIOS = _useState[1];
+  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 = useState(false),
+    mobile = _useState2[0],
+    setMobile = _useState2[1];
+  useEffect(function () {
+    if (typeof window === undefined) return;
+    setMobile(isMobile());
+  }, []);
+  return mobile;
+};
+var useViewport = function useViewport() {
+  var _useState3 = useState(false),
+    hydrated = _useState3[0],
+    setHydrated = _useState3[1];
+  var _useState4 = useState({
+      width: 0,
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false
+    }),
+    viewport = _useState4[0],
+    setViewport = _useState4[1];
+  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,
@@ -3483,7 +3587,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();
@@ -3535,6 +3646,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,
@@ -3543,8 +3655,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,
@@ -3553,8 +3667,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,
@@ -3652,7 +3768,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,
@@ -3660,7 +3776,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, {
@@ -3807,7 +3923,7 @@ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject
 });
 var TabLinkIconWrapper = /*#__PURE__*/styled.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,
@@ -3817,7 +3933,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,
@@ -3868,7 +3984,7 @@ var TextAreaError = /*#__PURE__*/styled.div(_templateObject4$5 || (_templateObje
   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.
  *
@@ -3929,7 +4045,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,
@@ -3989,7 +4105,7 @@ var ErrorLabel$1 = /*#__PURE__*/styled.div(_templateObject6$1 || (_templateObjec
 });
 var BodyCopyHarmonicWithWrapper = /*#__PURE__*/styled(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,
@@ -4036,7 +4152,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 = useState(false),
     showPassword = _useState[0],
     setShowPassword = _useState[1];
@@ -4134,7 +4250,7 @@ var ErrorLabel$2 = /*#__PURE__*/styled.p(_templateObject5$4 || (_templateObject5
   return darkMode ? theme.colors.white : theme.colors.error;
 });
 
-var _excluded$b = ["label", "error", "darkMode", "width"];
+var _excluded$c = ["label", "error", "darkMode", "width"];
 /**
  * @deprecated
  *
@@ -4148,7 +4264,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, {
@@ -4177,13 +4293,13 @@ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObjec
 }, devices.mobile);
 var TextLinkIconWrapper = /*#__PURE__*/styled.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,
@@ -4377,7 +4493,7 @@ var ErrorLabel$3 = /*#__PURE__*/styled.div(_templateObject6$2 || (_templateObjec
   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,
@@ -4406,7 +4522,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
@@ -4965,86 +5081,6 @@ var _templateObject$w, _templateObject2$n;
 var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n"])));
 var MediaIconWrapper = /*#__PURE__*/styled.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 = useState(false),
-    IOS = _useState[0],
-    setIOS = _useState[1];
-  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 = useState(false),
-    mobile = _useState2[0],
-    setMobile = _useState2[1];
-  useEffect(function () {
-    if (typeof window === undefined) return;
-    setMobile(isMobile());
-  }, []);
-  return mobile;
-};
-var useViewport = function useViewport() {
-  var _useState3 = useState(false),
-    hydrated = _useState3[0],
-    setHydrated = _useState3[1];
-  var _useState4 = useState({
-      width: 0,
-      isMobile: false,
-      isTablet: false,
-      isDesktop: false
-    }),
-    viewport = _useState4[0],
-    setViewport = _useState4[1];
-  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(),
@@ -5856,6 +5892,7 @@ var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateO
 
 /* eslint-disable react/no-unstable-nested-components */
 var Accordion = function Accordion(_ref) {
+  var _expandedStateIcon$ic, _collapsedStateIcon$i;
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$showLine = _ref.showLine,
@@ -5863,63 +5900,107 @@ var Accordion = function Accordion(_ref) {
     children = _ref.children,
     _ref$initOpen = _ref.initOpen,
     initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
-    className = _ref.className;
+    className = _ref.className,
+    expandedStateIcon = _ref.expandedStateIcon,
+    collapsedStateIcon = _ref.collapsedStateIcon;
   var _useState = useState(initOpen),
     openAccordion = _useState[0],
     setOpenAccordion = _useState[1];
   var _useState2 = useState('0px'),
     textHeight = _useState2[0],
     setTextHeight = _useState2[1];
-  var _useState3 = useState(initOpen ? 'Detract' : 'Expand'),
-    iconName = _useState3[0],
-    setIconName = _useState3[1];
+  var expandedStateIconData = {
+    iconName: (_expandedStateIcon$ic = expandedStateIcon == null ? void 0 : expandedStateIcon.iconName) != null ? _expandedStateIcon$ic : 'Detract',
+    direction: expandedStateIcon == null ? void 0 : expandedStateIcon.direction
+  };
+  var collapsedStateIconData = {
+    iconName: (_collapsedStateIcon$i = collapsedStateIcon == null ? void 0 : collapsedStateIcon.iconName) != null ? _collapsedStateIcon$i : 'Expand',
+    direction: collapsedStateIcon == null ? void 0 : collapsedStateIcon.direction
+  };
+  var _useState3 = useState(initOpen ? expandedStateIconData : collapsedStateIconData),
+    icon = _useState3[0],
+    setIcon = _useState3[1];
   // Contents children visibility is set to prevent it from being keyboard tabbable when the accordion is closed
   var _useState4 = useState(initOpen),
     childrenVisibility = _useState4[0],
     setChildrenVisibility = _useState4[1];
   var content = useRef(null);
+  var timeoutRef = useRef(null);
+  var rafRef = useRef(null);
   useEffect(function () {
     if (content != null && content.current && initOpen) {
       setTextHeight(content.current.scrollHeight + "px");
     }
   }, [content, initOpen]);
+  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]);
+  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");
-    setIconName(openAccordion ? 'Expand' : 'Detract');
-    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,
     "aria-controls": contentContainerId,
     hasChildren: !!children
-  }, /*#__PURE__*/React__default.createElement(TitleText, null, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: iconName
-  })))), /*#__PURE__*/React__default.createElement(ContentContainer, {
+  }, /*#__PURE__*/React__default.createElement(TitleText, null, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, Object.assign({}, icon))))), /*#__PURE__*/React__default.createElement(ContentContainer, {
     "data-testid": "richcontainer",
     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)));
 };
@@ -5940,7 +6021,9 @@ var Accordions = function Accordions(_ref) {
     return /*#__PURE__*/React__default.createElement(Accordion, {
       key: accordion.title + "-" + index,
       title: accordion.title,
-      showLine: isLastAccordion(index)
+      showLine: isLastAccordion(index),
+      expandedStateIcon: accordion.expandedStateIcon,
+      collapsedStateIcon: accordion.collapsedStateIcon
     }, accordion.children);
   }));
 };
@@ -6052,11 +6135,11 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
 var _templateObject$G;
 var AuxiliaryButtonWrapper = /*#__PURE__*/styled(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
@@ -6200,7 +6283,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;
@@ -6250,7 +6333,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 || {},
@@ -6481,6 +6564,7 @@ var CarouselType;
   CarouselType["Image"] = "image";
   CarouselType["SmallCard"] = "SmallCard";
   CarouselType["LargeCard"] = "LargeCard";
+  CarouselType["PersonCard"] = "PersonCard";
 })(CarouselType || (CarouselType = {}));
 
 var clickHandler = function clickHandler(link) {
@@ -6611,7 +6695,7 @@ var HotFiltersWrapper = /*#__PURE__*/styled.div(_templateObject$M || (_templateO
 var HotFilterOptionsWrapper = /*#__PURE__*/styled.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(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,
@@ -6627,7 +6711,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,
@@ -6721,18 +6805,18 @@ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$q || (_template
 });
 var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--information-panel-color);\n\n  a {\n    text-decoration: underline;\n    text-underline-offset: var(--harmonic-text-link-underline-offset);\n    color: var(--information-panel-color);\n  }\n\n  @media ", " {\n    padding-top: 4px;\n  }\n"])), devices.mobile);
 
-var css_248z$1 = "@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'VictorSerif';\n  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')\n    format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'VictorSerif';\n  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')\n    format('woff2');\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n";
+var css_248z$1 = "@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'VictorSerif';\n  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'VictorSerif';\n  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2') format('woff2');\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n";
 styleInject(css_248z$1);
 
-var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n  /* RBO Red */\n  /* Primary Palette */\n  --color-primary: #1a1a1a;\n  --color-primary-background: #eb0a0a;\n  --color-primary-red: #eb0a0a;\n  --color-primary-black: #1a1a1a;\n\n  /* Base Colours */\n  --color-base-white: #ffffff;\n  --color-base-black: #000000;\n  --color-base-dark-grey: #4c4f53;\n  --color-base-mid-grey: #72767c;\n  --color-base-light-grey: #e9e9e9;\n  --color-base-transparent: transparent;\n\n  /* States */\n  --color-state-error: #cc071e;\n  --color-state-medium: #ffce45;\n  --color-state-good: #2a874a;\n  --color-state-focused: #1e1da0;\n  --color-state-disabled: #b3b3b3;\n\n  /* RBO Red (Core) */\n  --color-rbo-red-hovered: #c40808;\n  --color-rbo-red-pressed: #9d0707;\n\n  /* RBO Black */\n  --color-rbo-black-hovered: #575757;\n  --color-rbo-black-pressed: #353535;\n\n  /* Black */\n  --color-black-hovered: #575757;\n  --color-black-pressed: #353535;\n\n  /* White */\n  --color-white-hovered: #fafafa;\n  --color-white-pressed: #f2f2f2;\n\n  /* Secondary Palette */\n  --color-secondary-yellow: #ffce45;\n  --color-secondary-pink: #ff36d0;\n  --color-secondary-orange: #ff6700;\n  --color-secondary-blue: #5f9cff;\n\n  /* Shadows */\n  --shadow-floating: 0px 4px 38px 0px #0000000a;\n\n  /* Core theme colors */\n  --base-color-primary: #c8102e;\n  --base-color-core: #c8102e;\n  --base-color-stream: #1866dc;\n  --base-color-cinema: #1a1a1a;\n  --base-color-white: #ffffff;\n  --base-color-black: #000000;\n  --base-color-dark-grey: #4c4f53;\n  --base-color-mid-grey: #72767c;\n  --base-color-light-grey: #e9e9e9;\n  --base-color-transparent: transparent;\n  --base-color-errorstate: #eb0a0a;\n  --base-color-mediumstate: #ffce45;\n  --base-color-goodstate: #2a874a;\n  --base-color-progress: #1866dc;\n  --base-color-navigation: #c8102e;\n  --base-color-lapislazuli: #0060a0;\n  --base-color-lemonchiffon: #fffbbe;\n\n  --button-height: 48px;\n  --button-line-height: 20px;\n  --button-padding-x: 20px;\n  --button-padding-y: 14px;\n  --button-padding-y-icon: 12px;\n  --button-icon-margin: 12px;\n  --button-icon-width: 20px;\n  --button-icon-height: 20px;\n  --button-font-size: 14px;\n  --button-font-weight: 400;\n  --button-color: var(--color-base-white);\n  --button-bg-color: var(--color-primary-red);\n  --button-hover-color: var(--color-rbo-red-hovered);\n  --button-pressed-color: var(--color-rbo-red-pressed);\n  --button-secondary-color: var(--color-primary-red);\n  --button-secondary-hover-color: var(--color-rbo-red-hovered);\n  --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n  --button-tertiary-color: var(--color-primary-black);\n  --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n  --button-auxiliary-color: var(--color-primary-black);\n  --button-auxiliary-bg-color: var(--color-base-transparent);\n  --button-anchor-tab-color: var(--color-primary-red);\n\n  /* -----  Variables already used in Harmonic START  ----- */\n  --grid-column-gap: 36px;\n  --grid-margin: 10%;\n\n  --rotator-button-width: 60px;\n  --rotator-button-icon-width: 36px;\n  --rotator-button-color: var(--color-primary-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-red);\n\n  --carousel-image-caption-height: 17px;\n\n  --line-height-listing: 36px;\n\n  --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n  --font-feature-settings-header: 'tnum' on, 'lnum' on;\n  --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n  --text-transform-body: none;\n  --text-transform-header: uppercase;\n  --text-transform-subtitle: uppercase;\n\n  @media (max-width: 699px) {\n    --grid-column-gap: 12px;\n    --grid-margin: 20px;\n    --rotator-button-width: 40px;\n    --rotator-button-icon-width: 24px;\n    --carousel-image-caption-height: 14px;\n\n    --line-height-listing: 34px;\n\n    --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n    --font-feature-settings-header: 'tnum' on, 'lnum' on;\n    --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n    --text-transform-body: none;\n    --text-transform-header: uppercase;\n    --text-transform-subtitle: uppercase;\n  }\n\n  @media (min-width: 700px) and (max-width: 1139px) {\n    --grid-column-gap: 20px;\n    --grid-margin: 32px;\n    --rotator-button-width: 44px;\n    --rotator-button-icon-width: 24px;\n    --carousel-image-caption-height: 14px;\n  }\n\n  /* -----  Variables already used in Harmonic END  ----- */\n\n  --font-size-header-1: 96px;\n  --font-weight-header-1: 500;\n  --letter-spacing-header-1: 2px;\n  --line-height-header-1: 110px;\n  --margin-header-1: 0.67em 0;\n\n  --font-size-header-2: 68px;\n  --font-weight-header-2: 500;\n  --letter-spacing-header-2: 1px;\n  --line-height-header-2: 72px;\n  --margin-header-2: 0.83em 0;\n\n  --font-size-header-3: 44px;\n  --font-weight-header-3: 500;\n  --letter-spacing-header-3: 1px;\n  --line-height-header-3: 48px;\n  --margin-header-3: 1em 0;\n\n  --font-size-header-4: 34px;\n  --font-weight-header-4: 500;\n  --letter-spacing-header-4: 1px;\n  --line-height-header-4: 40px;\n  --margin-header-4: 1.33em 0;\n\n  --font-size-header-5: 24px;\n  --font-weight-header-5: 500;\n  --letter-spacing-header-5: 1px;\n  --line-height-header-5: 30px;\n  --margin-header-5: 1.67em 0;\n\n  --font-size-header-6: 20px;\n  --font-weight-header-6: 500;\n  --letter-spacing-header-6: 1px;\n  --line-height-header-6: 28px;\n  --margin-header-6: 2.33em 0;\n\n  --font-size-altHeader-3: 44px;\n  --font-weight-altHeader-3: normal;\n  --letter-spacing-altHeader-3: normal;\n  --line-height-altHeader-3: 48px;\n\n  --font-size-altHeader-4: 34px;\n  --font-weight-altHeader-4: normal;\n  --letter-spacing-altHeader-4: normal;\n  --line-height-altHeader-4: 44px;\n\n  --font-size-altHeader-5: 24px;\n  --font-weight-altHeader-5: normal;\n  --letter-spacing-altHeader-5: normal;\n  --line-height-altHeader-5: 30px;\n\n  --font-size-altHeader-6: 20px;\n  --font-weight-altHeader-6: normal;\n  --letter-spacing-altHeader-6: normal;\n  --line-height-altHeader-6: 28px;\n\n  --font-size-overline-1: 14px;\n  --font-weight-overline-1: 500;\n  --letter-spacing-overline-1: 1px;\n  --line-height-overline-1: 16px;\n\n  --font-size-overline-2: 12px;\n  --font-weight-overline-2: 500;\n  --letter-spacing-overline-2: 1px;\n  --line-height-overline-2: 14px;\n\n  --font-size-overline-3: 10px;\n  --font-weight-overline-3: 500;\n  --letter-spacing-overline-3: 1px;\n  --line-height-overline-3: 12px;\n\n  --font-size-overline-4: 8px;\n  --font-weight-overline-4: 500;\n  --letter-spacing-overline-4: 1px;\n  --line-height-overline-4: 10px;\n\n  --font-size-body-1: 19px;\n  --font-weight-body-1: 400;\n  --letter-spacing-body-1: normal;\n  --line-height-body-1: 26px;\n\n  --font-size-body-2: 16px;\n  --font-weight-body-2: 400;\n  --letter-spacing-body-2: normal;\n  --line-height-body-2: 22px;\n\n  --font-size-body-3: 14px;\n  --font-weight-body-3: 400;\n  --letter-spacing-body-3: normal;\n  --line-height-body-3: 20px;\n\n  --font-size-subtitle-1: 18px;\n  --font-weight-subtitle-1: 500;\n  --letter-spacing-subtitle-1: 1px;\n  --line-height-subtitle-1: 22px;\n\n  --font-size-subtitle-2: 14px;\n  --font-weight-subtitle-2: 500;\n  --letter-spacing-subtitle-2: 1px;\n  --line-height-subtitle-2: 22px;\n\n  --font-size-title-description: 20px;\n  --line-height-title-description: 28px;\n\n  --font-size-individual-listing-name: 19px;\n  --line-height-individual-listing-name: 24px;\n  --line-height-people-listing-gap: 24px;\n\n  --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-altHeader: 'adobe-garamond-pro';\n  --font-family-body: 'adobe-garamond-pro';\n  --font-family-body-italics: 'adobe-garamond-pro';\n  --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-people-listing-name: 'adobe-garamond-pro';\n\n  --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n  --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n  --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n  --text-transform-altHeader: none;\n  --text-transform-overline: uppercase;\n\n  --word-break-header: break-word;\n  --word-break-altHeader: break-word;\n  --word-break-body: break-word;\n  --word-break-overline: break-word;\n  --word-break-subtitle: break-word;\n\n  --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-size-navigation: 13px;\n  --font-weight-navigation: 500;\n  --line-height-navigation: 16px;\n  --text-transform-navigation: uppercase;\n  --letter-spacing-navigation: 1px;\n\n  --navigation-small-gap: 16px;\n  --navigation-middle-gap: 20px;\n  --navigation-large-gap: 24px;\n  --navigation-xlarge-gap: 36px;\n  --navigation-large-margin: 60px;\n\n  --font-size-search: 24px;\n  --font-family-search: 'adobe-garamond-pro';\n\n  --grid-outer-margin: 50px;\n  --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n  --footer-height: 380px;\n  --footer-padding-top: 44px;\n  --footer-padding-bottom: 44px;\n  --footer-items-gap: 32px;\n  --footer-media-gap: 32px;\n  --footer-media-icon-width: 24px;\n  --footer-media-icon-height: 24px;\n  --footer-vertical-spacing-lg: 58px;\n  --footer-vertical-spacing-sm: 16px;\n\n  --text-link-underline-offset: 8px;\n  --cards-spacing-stack: 40px;\n\n  --editorial-subtitle-margin-bottom: 16px;\n  --editorial-margin-between: 24px;\n  --editorial-spacing-hover: 4px;\n  --anchor-tabs-height: 70px;\n\n  --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n  --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n  --harmonic-text-link-underline-offset: 4px;\n  --harmonic-font-size-navigation: 19px;\n\n  --announcement-banner-color: var(--color-base-white);\n  --announcement-banner-bg-color: var(--color-primary-red);\n  --announcement-banner-hover-color: var(--color-white-hovered);\n  --announcement-banner-pressed-color: var(--color-white-pressed);\n\n  --information-panel-color: var(--color-base-white);\n  --information-panel-bg-color: var(--color-primary-red);\n  --information-panel-button-color: var(--color-primary-black);\n  --information-panel-button-bg-color: var(--color-base-white);\n  --information-panel-button-hover-color: var(--color-white-hovered);\n  --information-panel-button-pressed-color: var(--color-white-pressed);\n\n  --heading-promo-bg-color: var(--color-primary-red);\n  --page-header-bg-color: var(--color-primary-red);\n\n  @media (max-width: 699px) {\n    --font-size-header-1: 38px;\n    --font-weight-header-1: 500;\n    --letter-spacing-header-1: 1px;\n    --line-height-header-1: 42px;\n\n    --font-size-header-2: 30px;\n    --font-weight-header-2: 500;\n    --letter-spacing-header-2: 1px;\n    --line-height-header-2: 34px;\n\n    --font-size-header-3: 26px;\n    --font-weight-header-3: 500;\n    --letter-spacing-header-3: 1px;\n    --line-height-header-3: 30px;\n\n    --font-size-header-4: 24px;\n    --font-weight-header-4: 500;\n    --letter-spacing-header-4: 1px;\n    --line-height-header-4: 28px;\n\n    --font-size-header-5: 20px;\n    --font-weight-header-5: 500;\n    --letter-spacing-header-5: 1px;\n    --line-height-header-5: 28px;\n\n    --font-size-header-6: 17px;\n    --font-weight-header-6: 500;\n    --letter-spacing-header-6: 1px;\n    --line-height-header-6: 24px;\n\n    --font-size-altHeader-3: 26px;\n    --font-weight-altHeader-3: normal;\n    --letter-spacing-altHeader-3: normal;\n    --line-height-altHeader-3: 30px;\n\n    --font-size-altHeader-4: 24px;\n    --font-weight-altHeader-4: normal;\n    --letter-spacing-altHeader-4: normal;\n    --line-height-altHeader-4: 28px;\n\n    --font-size-altHeader-5: 20px;\n    --font-weight-altHeader-5: normal;\n    --letter-spacing-altHeader-5: normal;\n    --line-height-altHeader-5: 28px;\n\n    --font-size-altHeader-6: 17px;\n    --font-weight-altHeader-6: normal;\n    --letter-spacing-altHeader-6: normal;\n    --line-height-altHeader-6: 24px;\n\n    --font-size-overline-1: 14px;\n    --font-weight-overline-1: 500;\n    --letter-spacing-overline-1: 1px;\n    --line-height-overline-1: 16px;\n\n    --font-size-overline-2: 12px;\n    --font-weight-overline-2: 500;\n    --letter-spacing-overline-2: 1px;\n    --line-height-overline-2: 14px;\n\n    --font-size-body-1: 17px;\n    --font-weight-body-1: 400;\n    --letter-spacing-body-1: normal;\n    --line-height-body-1: 24px;\n\n    --font-size-body-2: 12px;\n    --font-weight-body-2: 400;\n    --letter-spacing-body-2: normal;\n    --line-height-body-2: 18px;\n\n    --font-size-body-3: 11px;\n    --font-weight-body-3: 400;\n    --letter-spacing-body-3: normal;\n    --line-height-body-3: 16px;\n\n    --font-size-subtitle-1: 16px;\n    --font-weight-subtitle-1: 500;\n    --letter-spacing-subtitle-1: 1px;\n    --line-height-subtitle-1: 24px;\n\n    --font-size-subtitle-2: 14px;\n    --font-weight-subtitle-2: 500;\n    --letter-spacing-subtitle-2: 1px;\n    --line-height-subtitle-2: 18px;\n\n    --font-size-title-description: 17px;\n    --line-height-title-description: 24px;\n    --line-height-people-listing-gap: 16px;\n\n    --font-size-search: 20px;\n    --font-family-search: 'adobe-garamond-pro';\n\n    --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-altHeader: 'adobe-garamond-pro';\n    --font-family-body: 'adobe-garamond-pro';\n    --font-family-body-italics: 'adobe-garamond-pro';\n    --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-overline: 'Gotham SSm Medium', sans-serif;\n    --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n    --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-people-listing-name: 'adobe-garamond-pro';\n\n    --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n    --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n    --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n    --text-transform-altHeader: none;\n    --text-transform-overline: uppercase;\n\n    --word-break-header: break-word;\n    --word-break-altHeader: break-word;\n    --word-break-body: break-word;\n    --word-break-overline: break-word;\n    --word-break-subtitle: break-word;\n\n    --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n    --footer-height: auto;\n    --footer-padding-top: 20px;\n    --footer-padding-bottom: 20px;\n    --footer-items-gap: 12px;\n    --footer-media-icon-width: 28px;\n    --footer-media-icon-height: 28px;\n    --footer-vertical-spacing-lg: 24px;\n    --footer-vertical-spacing-sm: 24px;\n\n    --anchor-tabs-height: 60px;\n  }\n\n  @media (min-width: 700px) and (max-width: 1139px) {\n    --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n    --font-size-header-6: 17px;\n    --font-size-altHeader-4: 24px;\n    --font-size-body-1: 17px;\n\n    --footer-media-gap: 24px;\n    --footer-padding-top: 40px;\n    --footer-padding-bottom: 40px;\n  }\n}\n";
+var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n  /* RBO Red */\n  /* Primary Palette */\n  --color-primary: #1a1a1a;\n  --color-primary-background: #eb0a0a;\n  --color-primary-red: #eb0a0a;\n  --color-primary-black: #1a1a1a;\n\n  /* Base Colours */\n  --color-base-white: #ffffff;\n  --color-base-black: #000000;\n  --color-base-dark-grey: #4c4f53;\n  --color-base-mid-grey: #72767c;\n  --color-base-light-grey: #e9e9e9;\n  --color-base-transparent: transparent;\n\n  /* States */\n  --color-state-error: #cc071e;\n  --color-state-medium: #ffce45;\n  --color-state-good: #2a874a;\n  --color-state-focused: #1e1da0;\n  --color-state-disabled: #b3b3b3;\n\n  /* RBO Red (Core) */\n  --color-rbo-red-hovered: #c40808;\n  --color-rbo-red-pressed: #9d0707;\n\n  /* RBO Black */\n  --color-rbo-black-hovered: #575757;\n  --color-rbo-black-pressed: #353535;\n\n  /* Black */\n  --color-black-hovered: #575757;\n  --color-black-pressed: #353535;\n\n  /* White */\n  --color-white-hovered: #fafafa;\n  --color-white-pressed: #f2f2f2;\n\n  /* Secondary Palette */\n  --color-secondary-yellow: #ffce45;\n  --color-secondary-pink: #ff36d0;\n  --color-secondary-orange: #ff6700;\n  --color-secondary-blue: #5f9cff;\n\n  /* Shadows */\n  --shadow-floating: 0px 4px 38px 0px #0000000a;\n\n  /* Core theme colors */\n  --base-color-primary: #c8102e;\n  --base-color-core: #c8102e;\n  --base-color-stream: #1866dc;\n  --base-color-cinema: #1a1a1a;\n  --base-color-white: #ffffff;\n  --base-color-black: #000000;\n  --base-color-dark-grey: #4c4f53;\n  --base-color-mid-grey: #72767c;\n  --base-color-light-grey: #e9e9e9;\n  --base-color-transparent: transparent;\n  --base-color-errorstate: #eb0a0a;\n  --base-color-mediumstate: #ffce45;\n  --base-color-goodstate: #2a874a;\n  --base-color-progress: #1866dc;\n  --base-color-navigation: #c8102e;\n  --base-color-lapislazuli: #0060a0;\n  --base-color-lemonchiffon: #fffbbe;\n\n  --button-height: 48px;\n  --button-line-height: 20px;\n  --button-padding-x: 20px;\n  --button-padding-y: 14px;\n  --button-padding-y-icon: 12px;\n  --button-icon-margin: 12px;\n  --button-icon-width: 20px;\n  --button-icon-height: 20px;\n  --button-font-size: 14px;\n  --button-font-weight: 400;\n  --button-color: var(--color-base-white);\n  --button-bg-color: var(--color-primary-red);\n  --button-hover-color: var(--color-rbo-red-hovered);\n  --button-pressed-color: var(--color-rbo-red-pressed);\n  --button-secondary-color: var(--color-primary-red);\n  --button-secondary-hover-color: var(--color-rbo-red-hovered);\n  --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n  --button-tertiary-color: var(--color-primary-black);\n  --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n  --button-auxiliary-color: var(--color-primary-black);\n  --button-auxiliary-bg-color: var(--color-base-transparent);\n  --button-anchor-tab-color: var(--color-primary-red);\n\n  /* -----  Variables already used in Harmonic START  ----- */\n  --grid-column-gap: 36px;\n  --grid-margin: 10%;\n\n  --rotator-button-width: 60px;\n  --rotator-button-icon-width: 36px;\n  --rotator-button-small-width: 44px;\n  --rotator-button-small-icon-width: 28px;\n  --rotator-button-color: var(--color-primary-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-red);\n\n  --carousel-image-caption-margin: 12px;\n\n  --line-height-listing: 36px;\n\n  --upsell-border-color: var(--color-primary-red);\n\n  --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n  --font-feature-settings-header: 'tnum' on, 'lnum' on;\n  --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n  --text-transform-body: none;\n  --text-transform-header: uppercase;\n  --text-transform-subtitle: uppercase;\n\n  @media (max-width: 699px) {\n    --grid-column-gap: 12px;\n    --grid-margin: 20px;\n    --rotator-button-width: 40px;\n    --rotator-button-icon-width: 24px;\n\n    --line-height-listing: 34px;\n\n    --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n    --font-feature-settings-header: 'tnum' on, 'lnum' on;\n    --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n\n    --text-transform-body: none;\n    --text-transform-header: uppercase;\n    --text-transform-subtitle: uppercase;\n  }\n\n  @media (min-width: 700px) and (max-width: 1139px) {\n    --grid-column-gap: 20px;\n    --grid-margin: 32px;\n    --rotator-button-width: 44px;\n    --rotator-button-icon-width: 24px;\n  }\n\n  /* -----  Variables already used in Harmonic END  ----- */\n\n  --font-size-header-1: 96px;\n  --font-weight-header-1: 500;\n  --letter-spacing-header-1: 2px;\n  --line-height-header-1: 110px;\n  --margin-header-1: 0.67em 0;\n\n  --font-size-header-2: 68px;\n  --font-weight-header-2: 500;\n  --letter-spacing-header-2: 1px;\n  --line-height-header-2: 72px;\n  --margin-header-2: 0.83em 0;\n\n  --font-size-header-3: 44px;\n  --font-weight-header-3: 500;\n  --letter-spacing-header-3: 1px;\n  --line-height-header-3: 48px;\n  --margin-header-3: 1em 0;\n\n  --font-size-header-4: 34px;\n  --font-weight-header-4: 500;\n  --letter-spacing-header-4: 1px;\n  --line-height-header-4: 40px;\n  --margin-header-4: 1.33em 0;\n\n  --font-size-header-5: 24px;\n  --font-weight-header-5: 500;\n  --letter-spacing-header-5: 1px;\n  --line-height-header-5: 30px;\n  --margin-header-5: 1.67em 0;\n\n  --font-size-header-6: 20px;\n  --font-weight-header-6: 500;\n  --letter-spacing-header-6: 1px;\n  --line-height-header-6: 28px;\n  --margin-header-6: 2.33em 0;\n\n  --font-size-altHeader-3: 44px;\n  --font-weight-altHeader-3: normal;\n  --letter-spacing-altHeader-3: normal;\n  --line-height-altHeader-3: 48px;\n\n  --font-size-altHeader-4: 34px;\n  --font-weight-altHeader-4: normal;\n  --letter-spacing-altHeader-4: normal;\n  --line-height-altHeader-4: 44px;\n\n  --font-size-altHeader-5: 24px;\n  --font-weight-altHeader-5: normal;\n  --letter-spacing-altHeader-5: normal;\n  --line-height-altHeader-5: 30px;\n\n  --font-size-altHeader-6: 20px;\n  --font-weight-altHeader-6: normal;\n  --letter-spacing-altHeader-6: normal;\n  --line-height-altHeader-6: 28px;\n\n  --font-size-overline-1: 14px;\n  --font-weight-overline-1: 500;\n  --letter-spacing-overline-1: 1px;\n  --line-height-overline-1: 16px;\n\n  --font-size-overline-2: 12px;\n  --font-weight-overline-2: 500;\n  --letter-spacing-overline-2: 1px;\n  --line-height-overline-2: 14px;\n\n  --font-size-overline-3: 10px;\n  --font-weight-overline-3: 500;\n  --letter-spacing-overline-3: 1px;\n  --line-height-overline-3: 12px;\n\n  --font-size-overline-4: 8px;\n  --font-weight-overline-4: 500;\n  --letter-spacing-overline-4: 1px;\n  --line-height-overline-4: 10px;\n\n  --font-size-body-1: 19px;\n  --font-weight-body-1: 400;\n  --letter-spacing-body-1: normal;\n  --line-height-body-1: 26px;\n\n  --font-size-body-2: 16px;\n  --font-weight-body-2: 400;\n  --letter-spacing-body-2: normal;\n  --line-height-body-2: 22px;\n\n  --font-size-body-3: 14px;\n  --font-weight-body-3: 400;\n  --letter-spacing-body-3: normal;\n  --line-height-body-3: 20px;\n\n  --font-size-subtitle-1: 18px;\n  --font-weight-subtitle-1: 500;\n  --letter-spacing-subtitle-1: 1px;\n  --line-height-subtitle-1: 22px;\n\n  --font-size-subtitle-2: 14px;\n  --font-weight-subtitle-2: 500;\n  --letter-spacing-subtitle-2: 1px;\n  --line-height-subtitle-2: 22px;\n\n  --font-size-title-description: 20px;\n  --line-height-title-description: 28px;\n\n  --font-size-individual-listing-name: 19px;\n  --line-height-individual-listing-name: 24px;\n  --line-height-people-listing-gap: 24px;\n\n  --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-altHeader: 'adobe-garamond-pro';\n  --font-family-body: 'adobe-garamond-pro';\n  --font-family-body-italics: 'adobe-garamond-pro';\n  --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-people-listing-name: 'adobe-garamond-pro';\n\n  --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n  --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n  --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n  --text-transform-altHeader: none;\n  --text-transform-overline: uppercase;\n\n  --word-break-header: break-word;\n  --word-break-altHeader: break-word;\n  --word-break-body: break-word;\n  --word-break-overline: break-word;\n  --word-break-subtitle: break-word;\n\n  --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-size-navigation: 13px;\n  --font-weight-navigation: 500;\n  --line-height-navigation: 16px;\n  --text-transform-navigation: uppercase;\n  --letter-spacing-navigation: 1px;\n\n  --navigation-small-gap: 16px;\n  --navigation-middle-gap: 20px;\n  --navigation-large-gap: 24px;\n  --navigation-xlarge-gap: 36px;\n  --navigation-large-margin: 60px;\n\n  --font-size-search: 24px;\n  --font-family-search: 'adobe-garamond-pro';\n\n  --grid-outer-margin: 50px;\n  --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n  --footer-height: 380px;\n  --footer-padding-top: 44px;\n  --footer-padding-bottom: 44px;\n  --footer-items-gap: 32px;\n  --footer-media-gap: 32px;\n  --footer-media-icon-width: 24px;\n  --footer-media-icon-height: 24px;\n  --footer-vertical-spacing-lg: 58px;\n  --footer-vertical-spacing-sm: 16px;\n\n  --text-link-underline-offset: 8px;\n  --cards-spacing-stack: 40px;\n\n  --editorial-subtitle-margin-bottom: 16px;\n  --editorial-margin-between: 24px;\n  --editorial-spacing-hover: 4px;\n  --anchor-tabs-height: 70px;\n\n  --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n  --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n  --harmonic-text-link-underline-offset: 4px;\n  --harmonic-font-size-navigation: 19px;\n\n  --announcement-banner-color: var(--color-base-white);\n  --announcement-banner-bg-color: var(--color-primary-red);\n  --announcement-banner-hover-color: var(--color-white-hovered);\n  --announcement-banner-pressed-color: var(--color-white-pressed);\n\n  --information-panel-color: var(--color-base-white);\n  --information-panel-bg-color: var(--color-primary-red);\n  --information-panel-button-color: var(--color-primary-black);\n  --information-panel-button-bg-color: var(--color-base-white);\n  --information-panel-button-hover-color: var(--color-white-hovered);\n  --information-panel-button-pressed-color: var(--color-white-pressed);\n\n  --heading-promo-bg-color: var(--color-primary-red);\n  --page-header-bg-color: var(--color-primary-red);\n\n  @media (max-width: 699px) {\n    --font-size-header-1: 38px;\n    --font-weight-header-1: 500;\n    --letter-spacing-header-1: 1px;\n    --line-height-header-1: 42px;\n\n    --font-size-header-2: 30px;\n    --font-weight-header-2: 500;\n    --letter-spacing-header-2: 1px;\n    --line-height-header-2: 34px;\n\n    --font-size-header-3: 26px;\n    --font-weight-header-3: 500;\n    --letter-spacing-header-3: 1px;\n    --line-height-header-3: 30px;\n\n    --font-size-header-4: 24px;\n    --font-weight-header-4: 500;\n    --letter-spacing-header-4: 1px;\n    --line-height-header-4: 28px;\n\n    --font-size-header-5: 20px;\n    --font-weight-header-5: 500;\n    --letter-spacing-header-5: 1px;\n    --line-height-header-5: 28px;\n\n    --font-size-header-6: 17px;\n    --font-weight-header-6: 500;\n    --letter-spacing-header-6: 1px;\n    --line-height-header-6: 24px;\n\n    --font-size-altHeader-3: 26px;\n    --font-weight-altHeader-3: normal;\n    --letter-spacing-altHeader-3: normal;\n    --line-height-altHeader-3: 30px;\n\n    --font-size-altHeader-4: 24px;\n    --font-weight-altHeader-4: normal;\n    --letter-spacing-altHeader-4: normal;\n    --line-height-altHeader-4: 28px;\n\n    --font-size-altHeader-5: 20px;\n    --font-weight-altHeader-5: normal;\n    --letter-spacing-altHeader-5: normal;\n    --line-height-altHeader-5: 28px;\n\n    --font-size-altHeader-6: 17px;\n    --font-weight-altHeader-6: normal;\n    --letter-spacing-altHeader-6: normal;\n    --line-height-altHeader-6: 24px;\n\n    --font-size-overline-1: 14px;\n    --font-weight-overline-1: 500;\n    --letter-spacing-overline-1: 1px;\n    --line-height-overline-1: 16px;\n\n    --font-size-overline-2: 12px;\n    --font-weight-overline-2: 500;\n    --letter-spacing-overline-2: 1px;\n    --line-height-overline-2: 14px;\n\n    --font-size-body-1: 17px;\n    --font-weight-body-1: 400;\n    --letter-spacing-body-1: normal;\n    --line-height-body-1: 24px;\n\n    --font-size-body-2: 12px;\n    --font-weight-body-2: 400;\n    --letter-spacing-body-2: normal;\n    --line-height-body-2: 18px;\n\n    --font-size-body-3: 11px;\n    --font-weight-body-3: 400;\n    --letter-spacing-body-3: normal;\n    --line-height-body-3: 16px;\n\n    --font-size-subtitle-1: 16px;\n    --font-weight-subtitle-1: 500;\n    --letter-spacing-subtitle-1: 1px;\n    --line-height-subtitle-1: 24px;\n\n    --font-size-subtitle-2: 14px;\n    --font-weight-subtitle-2: 500;\n    --letter-spacing-subtitle-2: 1px;\n    --line-height-subtitle-2: 18px;\n\n    --font-size-title-description: 17px;\n    --line-height-title-description: 24px;\n    --line-height-people-listing-gap: 16px;\n\n    --font-size-search: 20px;\n    --font-family-search: 'adobe-garamond-pro';\n\n    --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-altHeader: 'adobe-garamond-pro';\n    --font-family-body: 'adobe-garamond-pro';\n    --font-family-body-italics: 'adobe-garamond-pro';\n    --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-overline: 'Gotham SSm Medium', sans-serif;\n    --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n    --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-people-listing-name: 'adobe-garamond-pro';\n\n    --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n    --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n    --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n    --text-transform-altHeader: none;\n    --text-transform-overline: uppercase;\n\n    --word-break-header: break-word;\n    --word-break-altHeader: break-word;\n    --word-break-body: break-word;\n    --word-break-overline: break-word;\n    --word-break-subtitle: break-word;\n\n    --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n    --footer-height: auto;\n    --footer-padding-top: 20px;\n    --footer-padding-bottom: 20px;\n    --footer-items-gap: 12px;\n    --footer-media-icon-width: 28px;\n    --footer-media-icon-height: 28px;\n    --footer-vertical-spacing-lg: 24px;\n    --footer-vertical-spacing-sm: 24px;\n\n    --anchor-tabs-height: 60px;\n  }\n\n  @media (min-width: 700px) and (max-width: 1139px) {\n    --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n    --font-size-header-6: 17px;\n    --font-size-altHeader-4: 24px;\n    --font-size-body-1: 17px;\n\n    --footer-media-gap: 24px;\n    --footer-padding-top: 40px;\n    --footer-padding-bottom: 40px;\n  }\n}\n";
 var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
 styleInject(css_248z$2);
 
-var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n  /* Stream theme overrides */\n  --base-color-primary: #1a1a1a;\n  --color-primary: #1a1a1a;\n  --color-primary-background: #1a1a1a;\n  --color-primary-button: #1a1a1a;\n  --color-secondary-button: #ffffff;\n  --color-tertiary-button: transparent;\n  --color-auxiliary-button: transparent;\n  --color-primary-button-reverse-bg: #1a1a1a;\n  --color-primary-button-reverse: #ffffff;\n\n  --button-color: var(--color-base-white);\n  --button-bg-color: var(--color-primary-black);\n  --button-hover-color: var(--color-black-hovered);\n  --button-pressed-color: var(--color-black-pressed);\n  --button-secondary-color: var(--color-primary-black);\n  --button-secondary-hover-color: var(--color-black-hovered);\n  --button-secondary-pressed-color: var(--color-black-pressed);\n  --button-tertiary-color: var(--color-primary-black);\n  --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n  --button-anchor-tab-color: var(--color-primary-black);\n\n  --rotator-button-color: var(--color-base-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-black);\n\n  --announcement-banner-color: var(--color-base-white);\n  --announcement-banner-bg-color: var(--color-primary-black);\n  --announcement-banner-hover-color: var(--color-white-hovered);\n  --announcement-banner-pressed-color: var(--color-white-pressed);\n\n  --information-panel-color: var(--color-base-white);\n  --information-panel-bg-color: var(--color-primary-black);\n\n  --heading-promo-bg-color: var(--color-base-black);\n  --page-header-bg-color: var(--color-primary-black);\n}\n";
+var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n  /* Stream theme overrides */\n  --base-color-primary: #1a1a1a;\n  --color-primary: #1a1a1a;\n  --color-primary-background: #1a1a1a;\n  --color-primary-button: #1a1a1a;\n  --color-secondary-button: #ffffff;\n  --color-tertiary-button: transparent;\n  --color-auxiliary-button: transparent;\n  --color-primary-button-reverse-bg: #1a1a1a;\n  --color-primary-button-reverse: #ffffff;\n\n  --button-color: var(--color-base-white);\n  --button-bg-color: var(--color-primary-black);\n  --button-hover-color: var(--color-black-hovered);\n  --button-pressed-color: var(--color-black-pressed);\n  --button-secondary-color: var(--color-primary-black);\n  --button-secondary-hover-color: var(--color-black-hovered);\n  --button-secondary-pressed-color: var(--color-black-pressed);\n  --button-tertiary-color: var(--color-primary-black);\n  --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n  --button-anchor-tab-color: var(--color-primary-black);\n\n  --rotator-button-color: var(--color-base-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-black);\n\n  --announcement-banner-color: var(--color-base-white);\n  --announcement-banner-bg-color: var(--color-primary-black);\n  --announcement-banner-hover-color: var(--color-white-hovered);\n  --announcement-banner-pressed-color: var(--color-white-pressed);\n\n  --information-panel-color: var(--color-base-white);\n  --information-panel-bg-color: var(--color-primary-black);\n\n  --heading-promo-bg-color: var(--color-base-black);\n  --page-header-bg-color: var(--color-primary-black);\n\n  --upsell-border-color: var(--color-primary-black);\n}\n";
 var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
 styleInject(css_248z$3);
 
-var css_248z$4 = ".cinema-theme-module_cinemaTheme__f5QFs {\n  /* White */\n  --base-color-primary: #1a1a1a;\n  --color-primary: #1a1a1a;\n  --color-primary-button: #ffffff;\n  --color-primary-background: #1a1a1a;\n  --color-primary-button-reverse-bg: #ffffff;\n  --color-primary-button-reverse: #1a1a1a;\n  --color-secondary-button: #ffffff;\n  --color-tertiary-button: transparent;\n  --color-auxiliary-button: transparent;\n  --color-white-hovered: #fafafa;\n  --color-white-pressed: #f2f2f2;\n\n  --button-color: var(--color-primary-black);\n  --button-bg-color: var(--color-base-white);\n  --button-hover-color: var(--color-white-hovered);\n  --button-pressed-color: var(--color-white-pressed);\n  --button-secondary-color: var(--color-base-white);\n  --button-secondary-hover-color: var(--color-white-hovered);\n  --button-secondary-pressed-color: var(--color-white-pressed);\n  --button-tertiary-color: var(--color-base-white);\n  --button-tertiary-hover-color: var(--color-white-hovered);\n  --button-tertiary-pressed-color: var(--color-white-pressed);\n  --button-anchor-tab-color: var(--color-primary-black);\n\n  --rotator-button-color: var(--color-primary-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-black);\n\n  --announcement-banner-color: var(--color-primary-red);\n  --announcement-banner-bg-color: var(--color-base-white);\n  --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n  --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n  --information-panel-color: var(--color-primary-black);\n  --information-panel-bg-color: var(--color-base-white);\n  --information-panel-button-color: var(--color-base-white);\n  --information-panel-button-bg-color: var(--color-primary-red);\n  --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n  --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n  --heading-promo-bg-color: var(--color-base-white); \n  --page-header-bg-color: var(--color-primary-black);\n};";
+var css_248z$4 = ".cinema-theme-module_cinemaTheme__f5QFs {\n  /* White */\n  --base-color-primary: #1a1a1a;\n  --color-primary: #1a1a1a;\n  --color-primary-button: #ffffff;\n  --color-primary-background: #1a1a1a;\n  --color-primary-button-reverse-bg: #ffffff;\n  --color-primary-button-reverse: #1a1a1a;\n  --color-secondary-button: #ffffff;\n  --color-tertiary-button: transparent;\n  --color-auxiliary-button: transparent;\n  --color-white-hovered: #fafafa;\n  --color-white-pressed: #f2f2f2;\n\n  --button-color: var(--color-primary-black);\n  --button-bg-color: var(--color-base-white);\n  --button-hover-color: var(--color-white-hovered);\n  --button-pressed-color: var(--color-white-pressed);\n  --button-secondary-color: var(--color-base-white);\n  --button-secondary-hover-color: var(--color-white-hovered);\n  --button-secondary-pressed-color: var(--color-white-pressed);\n  --button-tertiary-color: var(--color-base-white);\n  --button-tertiary-hover-color: var(--color-white-hovered);\n  --button-tertiary-pressed-color: var(--color-white-pressed);\n  --button-anchor-tab-color: var(--color-primary-black);\n\n  --rotator-button-color: var(--color-primary-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-black);\n\n  --announcement-banner-color: var(--color-primary-red);\n  --announcement-banner-bg-color: var(--color-base-white);\n  --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n  --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n  --information-panel-color: var(--color-primary-black);\n  --information-panel-bg-color: var(--color-base-white);\n  --information-panel-button-color: var(--color-base-white);\n  --information-panel-button-bg-color: var(--color-primary-red);\n  --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n  --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n  --heading-promo-bg-color: var(--color-base-white);\n  --page-header-bg-color: var(--color-primary-black);\n\n  --upsell-border-color: var(--color-primary-black);\n}\n";
 var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
 styleInject(css_248z$4);
 
@@ -7016,7 +7100,7 @@ var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObje
 var ButtonWrapper$2 = /*#__PURE__*/styled.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.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,
@@ -7034,7 +7118,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,
@@ -7496,7 +7580,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;
@@ -7601,7 +7685,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',
@@ -7701,13 +7785,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;
@@ -7726,7 +7809,8 @@ var Swipe = /*#__PURE__*/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 = useRef(null);
   var childRefs = useRef([]);
   var startX = useRef(0);
@@ -7787,8 +7871,18 @@ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
   var updateDimensions = 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);
+    }
   }, []);
   useEffect(function () {
     var animationFrameRequestId = requestAnimationFrame(updateDimensions);
@@ -7810,10 +7904,16 @@ var Swipe = /*#__PURE__*/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 offset + (slidesOffsetBefore || 0);
+    return (slidesOffsetBefore || 0) - widthsBefore;
+  };
+  var getTranslateForIndex = function getTranslateForIndex(index) {
+    var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
+      return acc + width;
+    }, 0);
+    return (slidesOffsetBefore || 0) - widthsBefore;
   };
   var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
     var delta = currentTranslate.current - getTranslateX();
@@ -7823,6 +7923,10 @@ var Swipe = /*#__PURE__*/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 {
@@ -7834,10 +7938,26 @@ var Swipe = /*#__PURE__*/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);
+    var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
+      return acc + w;
     }, 0);
-    return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 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);
@@ -7853,7 +7973,12 @@ var Swipe = /*#__PURE__*/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() {
@@ -7861,13 +7986,28 @@ var Swipe = /*#__PURE__*/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;
     });
   };
   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) {
@@ -7988,6 +8128,7 @@ var HighlightsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_
 var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.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.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,
@@ -8207,14 +8348,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(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.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.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.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.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
-var PersonLink = /*#__PURE__*/styled.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.span(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n"])));
+var _templateObject$X;
+var PeopleListingGrid = /*#__PURE__*/styled(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.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(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.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.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,
@@ -8230,55 +8373,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.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.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.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
-var CreditListingWrapper = /*#__PURE__*/styled(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.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var CreditListingWrapper = /*#__PURE__*/styled(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.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.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.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.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) {
@@ -8367,7 +8532,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, {
@@ -8388,7 +8553,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, {
@@ -8405,8 +8570,8 @@ var CreditListing = function CreditListing(_ref) {
   }, creditEntries);
 };
 
-var _templateObject$Z;
-var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(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(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;
@@ -8424,14 +8589,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(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(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) {
@@ -8441,7 +8606,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$_ || (_templat
   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.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.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) {
@@ -8465,16 +8630,16 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject3$B || (_templat
   }
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref7) {
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled.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.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.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.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.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.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.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.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.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.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);
@@ -8500,7 +8665,7 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObj
 var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled(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(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;
@@ -8568,7 +8733,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 || {},
@@ -8696,28 +8861,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(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(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.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.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.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.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(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(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
-var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(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.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(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(HarmonicSubtitle)(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
+var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(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.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,
@@ -8739,8 +8904,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$g || (_templat
   return '';
 });
 
-var _templateObject$10;
-var VideoContainer = /*#__PURE__*/styled.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.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 ? AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -8852,7 +9017,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) {
@@ -8879,7 +9044,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 || {},
@@ -8922,8 +9087,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.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.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
 
 /**
  * DEPRECATED. Use RadioGroup2 instead
@@ -8978,9 +9143,9 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var _templateObject$12, _templateObject2$O, _templateObject3$D;
-var Container$3 = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var RadioGroup$1 = /*#__PURE__*/styled.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.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RadioGroup$1 = /*#__PURE__*/styled.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';
@@ -8988,7 +9153,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObjec
   var gap = _ref2.gap;
   return gap + "px";
 });
-var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
+var ErrorLabel$4 = /*#__PURE__*/styled.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)';
@@ -9065,10 +9230,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
   }, error))));
 };
 
-var _templateObject$13, _templateObject2$P, _templateObject3$E;
-var StatusBannerWrapper = /*#__PURE__*/styled.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.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.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.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.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.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) {
@@ -9124,8 +9289,8 @@ var StatusBanner = function StatusBanner(_ref) {
   return null;
 };
 
-var _templateObject$14;
-var SectionTitleWrapper = /*#__PURE__*/styled.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.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 = {
@@ -9167,8 +9332,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__*/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__*/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) {
@@ -9178,12 +9343,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$15 || (_templateObject$15 = /
   var theme = _ref3.theme;
   return theme.colors.lightgrey;
 });
-var borderStyles = /*#__PURE__*/css(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
+var borderStyles = /*#__PURE__*/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__*/css(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var listItemStyles = /*#__PURE__*/css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
+var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var listItemStyles = /*#__PURE__*/css(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
 var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
   var theme = _ref5.theme;
   return {
@@ -9191,9 +9356,9 @@ var ArrowIcon = /*#__PURE__*/styled(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.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.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.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.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
 var Options = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
 var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
   var theme = _ref6.theme,
@@ -9548,9 +9713,9 @@ function Select(_ref3) {
   })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$16, _templateObject2$R, _templateObject3$G, _templateObject4$y;
-var Container$4 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var SelectWrapper$1 = /*#__PURE__*/styled.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.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var SelectWrapper$1 = /*#__PURE__*/styled.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";
@@ -9567,18 +9732,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateOb
   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.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
+var TextLabel$4 = /*#__PURE__*/styled.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.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
+var ErrorLabel$5 = /*#__PURE__*/styled.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(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -9629,7 +9794,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,
@@ -9647,7 +9812,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
@@ -9669,7 +9834,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,
@@ -9686,612 +9851,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.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(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.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.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(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && p {\n    margin: 0;\n    padding: 0;\n  }\n"])));
+var PriceRow = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n"])));
+var LineThrough = /*#__PURE__*/styled(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.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(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.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.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.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;
-}, Colors.White);
-var ButtonContainer = /*#__PURE__*/styled.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.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
-var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
-var PriceRow = /*#__PURE__*/styled.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.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;
@@ -10317,21 +9919,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,
@@ -10339,13 +9952,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.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.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 ? AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -10353,104 +9966,49 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$18 || (_templateObjec
   var _ref2$aspectRatio = _ref2.aspectRatio,
     aspectRatio = _ref2$aspectRatio === void 0 ? 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 ? AspectRatio['1:1'] : _ref3$aspectRatio;
-  return aspectRatio;
-}, function (_ref4) {
-  var _ref4$aspectRatio = _ref4.aspectRatio,
-    aspectRatio = _ref4$aspectRatio === void 0 ? 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(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.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(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 = useRef(null);
-  var imgRef = useRef(null);
-  var _useState = 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");
-    }
-  }, []);
-  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.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.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.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.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.img(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
-var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var IconWrapper$3 = /*#__PURE__*/styled.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.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.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var IconWrapper$3 = /*#__PURE__*/styled.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.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,
@@ -10488,18 +10046,18 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$1a, _templateObject2$V, _templateObject3$J, _templateObject4$B, _templateObject5$v;
-var ReadMoreContainer = /*#__PURE__*/styled.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.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.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.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.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.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
+var IntroTextContainer = /*#__PURE__*/styled.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.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.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') {
@@ -10580,15 +10138,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.nav(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled.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"])), Colors.LightGrey);
+var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
+var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled.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"])), Colors.LightGrey);
 var MobileButton = /*#__PURE__*/styled.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"])), Colors.Black, Colors.White, Colors.DarkGrey);
-var MenuItem$1 = /*#__PURE__*/styled.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"])), Colors.Black, function (_ref) {
+var MenuItem$1 = /*#__PURE__*/styled.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"])), Colors.Black, function (_ref) {
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
 }, Colors.MidGrey);
-var MobileMenuList = /*#__PURE__*/styled.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.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';
 }, Colors.White, Colors.DarkGrey, MenuItem$1);
@@ -10744,19 +10302,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1c, _templateObject2$X, _templateObject3$L, _templateObject4$D, _templateObject5$x, _templateObject6$o;
-var Container$5 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled.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.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Sections = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 var Section = /*#__PURE__*/styled.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.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.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+var BottomLine = /*#__PURE__*/styled.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.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.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
+var LabelText = /*#__PURE__*/styled.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 + ")";
 });
@@ -10838,18 +10396,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.table(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
-var Container$6 = /*#__PURE__*/styled.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.table(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var TableHeader = /*#__PURE__*/styled.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.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.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.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(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.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(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.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.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 */
@@ -11053,22 +10611,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('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('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(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(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('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.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.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.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.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--color-base-errorstate);\n"])));
+var Error = /*#__PURE__*/styled.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.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.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.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--color-base-errorstate);\n"])));
 var CTALinkWrapper = /*#__PURE__*/styled.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.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.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.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.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
 var DropdownAreaWrapper = /*#__PURE__*/styled.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"])));
@@ -11478,13 +11036,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
   }))))));
 };
 
-var _templateObject$1f, _templateObject2$_, _templateObject4$G, _templateObject5$A;
-var AnchorBarContainer = /*#__PURE__*/styled(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(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 && css(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 }, devices.mobile);
-var CloseButtonWrapper = /*#__PURE__*/styled.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.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var CloseButtonWrapper = /*#__PURE__*/styled.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.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 
 var defaultGrid = {
   columnStartDesktop: 2,
@@ -11542,12 +11100,12 @@ var AnchorBar = function AnchorBar(_ref) {
   return null;
 };
 
-var _templateObject$1g, _templateObject2$$;
-var FocusableTab = /*#__PURE__*/styled(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(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.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.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
@@ -11639,8 +11197,8 @@ var SkipToMain = function SkipToMain(_ref) {
   }));
 };
 
-var _templateObject$1h;
-var TextContainer$1 = /*#__PURE__*/styled(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(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'] + "\">");
@@ -11669,40 +11227,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(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.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.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(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(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(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.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.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(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,
@@ -11729,6 +11305,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.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.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.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.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.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.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.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.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.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.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 = useRef(null);
+  var isDraggingRef = useRef(false);
+  var startXRef = useRef(0);
+  var scrollStartRef = useRef(0);
+  var hasDraggedRef = useRef(false);
+  var handleMouseDown = 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 = 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 = useCallback(function () {
+    isDraggingRef.current = false;
+    setTimeout(function () {
+      hasDraggedRef.current = false;
+    }, 0);
+  }, []);
+  var handleMouseLeave = 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) {
@@ -11895,10 +11623,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(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(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(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(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(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(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.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(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.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 290px;\n\n  @media ", " {\n    max-width: unset;\n  }\n"])), devices.mobile);
@@ -11960,16 +11688,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.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.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 && css(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 });
-var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
+var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
 var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var TabsList = /*#__PURE__*/styled.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;
@@ -11982,11 +11710,11 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject5$D || (_templateObject5$D
     hasTwoArrows = _ref5.hasTwoArrows;
   return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
 });
-var ArrowsContainer = /*#__PURE__*/styled.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.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 && css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+  return withShadow && css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 });
-var ArrowWrapper = /*#__PURE__*/styled.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.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) {
@@ -11997,7 +11725,7 @@ var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$8 || (_templateObjec
   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,
@@ -12208,7 +11936,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({
@@ -12241,20 +11969,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.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.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(Grid)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-light-grey);\n"])));
-var TitleCTAGridItem = /*#__PURE__*/styled.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(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-light-grey);\n"])));
+var TitleCTAGridItem = /*#__PURE__*/styled.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.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.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.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(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(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) {
@@ -12267,10 +11995,10 @@ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$f
   var theme = _ref6.theme;
   return theme.colors.primaryButtonReverse;
 });
-var MessageWrapper$1 = /*#__PURE__*/styled.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.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.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.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,
@@ -12280,7 +12008,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);
@@ -12301,16 +12029,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
   }, message))));
 };
 
-var _templateObject$1m, _templateObject2$14, _templateObject3$S;
-var UpsellBorderBox = /*#__PURE__*/styled.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.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.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.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(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.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(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.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.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;
@@ -12338,25 +12064,28 @@ var UpsellSection = function UpsellSection(_ref) {
     link = _ref.link,
     upsellCards = _ref.upsellCards,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme;
+    theme = _ref$theme === void 0 ? 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,
@@ -12369,9 +12098,9 @@ var UpsellSection = function UpsellSection(_ref) {
   })))));
 };
 
-var _templateObject$1o, _templateObject2$15;
-var StickyBarWrapper = /*#__PURE__*/styled.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(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.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(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);
@@ -12402,13 +12131,13 @@ var StickyBar = function StickyBar(_ref) {
   }, children)));
 };
 
-var _templateObject$1p, _templateObject2$16, _templateObject3$T, _templateObject4$L;
-var InnerModal = /*#__PURE__*/styled.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.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.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Overlay = /*#__PURE__*/styled(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.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.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.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Overlay = /*#__PURE__*/styled(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';
@@ -12482,7 +12211,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: {
@@ -12521,6 +12250,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: {
@@ -12544,6 +12274,20 @@ var GRID_VALUES = {
     gapsPerSlide: 9
   }
 };
+var SLIDE_PRESETS = (_SLIDE_PRESETS = {}, _SLIDE_PRESETS[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 + ")";
@@ -12556,6 +12300,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,
@@ -12570,7 +12318,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 === 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,
@@ -12579,33 +12338,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.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.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.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.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 === CarouselType.SmallCard ? '30%' : '40%') + ";\n          }\n        }\n      }\n    ";
-}, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
-var TitleButtonsGrid = /*#__PURE__*/styled(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.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(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.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.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(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(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.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n"])));
-var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
-var SwipeGridWrapper = /*#__PURE__*/styled(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(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
+var SwipeGridWrapper = /*#__PURE__*/styled(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) {
@@ -12645,9 +12401,34 @@ var Carousel = function Carousel(_ref) {
   var _useState3 = useState(0),
     slidesOffsetBefore = _useState3[0],
     setSlidesOffsetBefore = _useState3[1];
+  var _useState4 = useState(infinite),
+    availablePrev = _useState4[0],
+    setAvailablePrev = _useState4[1];
+  var _useState5 = useState(function () {
+      var count = React__default.Children.count(children);
+      return infinite ? true : count > 1;
+    }),
+    availableNext = _useState5[0],
+    setAvailableNext = _useState5[1];
+  var _useState6 = useState(true),
+    showRotatorButtons = _useState6[0],
+    setShowRotatorButtons = _useState6[1];
   var swipeRef = useRef(null);
   var carouselRef = useRef(null);
   var titleButtonsGridRef = useRef(null);
+  var childrenCount = React__default.Children.count(children);
+  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]);
   useEffect(function () {
     if (type !== CarouselType.Image) return undefined;
     var handleFullscreenChange = function handleFullscreenChange() {
@@ -12673,12 +12454,17 @@ var Carousel = function Carousel(_ref) {
   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);
@@ -12688,12 +12474,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) {
@@ -12702,16 +12488,61 @@ var Carousel = function Carousel(_ref) {
       document.exitFullscreen();
     }
   };
+  useEffect(function () {
+    if (type !== 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 carouselTitleId = "carousel-title-" + title;
-  var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
-  var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
-  return /*#__PURE__*/React__default.createElement(Wrapper, {
-    className: className,
+  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 === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
+  return /*#__PURE__*/React__default.createElement(Wrapper, {
+    className: className,
     type: type,
     isActive: active,
     imagesHeightDevice: imagesHeightDevice,
@@ -12744,23 +12575,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 === 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,
@@ -12768,17 +12604,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(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.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.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var InfoWrapper$2 = /*#__PURE__*/styled.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(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.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.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var InfoWrapper$2 = /*#__PURE__*/styled.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.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.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.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.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.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.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.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.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.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.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.p(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n"])));
 var FirstButtonComponentWrapper = /*#__PURE__*/styled.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);
@@ -12791,7 +12627,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled.div(_templateObject15$1 || (_
 }, devices.mobile);
 var ProgressContainer$1 = /*#__PURE__*/styled.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[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
@@ -12802,7 +12638,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,
@@ -13034,11 +12870,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, {
@@ -13055,10 +12891,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, {
@@ -13071,67 +12907,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: 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: 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.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.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 = 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.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.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 = 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(ThemeProvider, {
+    theme: chosenTheme
+  }, children);
 };
 
-var _templateObject$1t;
-var GlobalStyles = /*#__PURE__*/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__*/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) {
@@ -14078,10 +14474,10 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1t || (_templa
   return theme.footer.tablet.paddingBottom;
 }, devices.desktop, devices.largeDesktop);
 
-var _templateObject$1u, _templateObject2$19, _templateObject3$X;
-var FigureBlock = /*#__PURE__*/styled.figure(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-var AttributionBlock = /*#__PURE__*/styled(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.figure(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+var BlockquoteBlock = /*#__PURE__*/styled.blockquote(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+var AttributionBlock = /*#__PURE__*/styled(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) {
@@ -14111,5 +14507,5 @@ var Quote = function Quote(_ref) {
   }, /*#__PURE__*/React__default.createElement("cite", null, attribution))))));
 };
 
-export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
+export { Accordion, Accordions, AltHeader, AnchorBar, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyContent, BodyCopyHarmonic, BodyText, ButtonText, ButtonType, Caption, Card, Cards, Carousel, CarouselType, CastFilters as CastFilter, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicHeader, HarmonicOverline, HarmonicSize, HarmonicSubtitle, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, NavigationText, Overline, PageHeading, PageHeadingCompact, PageHeadingHighlight, PageHeadingHighlightCarousel, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, Pagination, PasswordStrength, Paywall, PeopleListing, PersonCard, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, useHarmonicTheme, zIndexes };
 //# sourceMappingURL=harmonic.esm.js.map