@royaloperahouse/harmonic 0.2.2-a → 0.2.2

package/dist/harmonic.cjs.development.css

@@ -1,234 +1,192 @@
-@font-face {
-  font-family: 'GreyLLTT';
-  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'GreyLLTT';
-  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'GreyLLTT';
-  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'VictorSerif';
-  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
-    format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'VictorSerif';
-  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
-    format('woff2');
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-
 /* ~~~~~ General Styling Classes ~~~~~ */
-.typography_color-primary__LOfDi {
+.styles_color-primary__UYod1 {
   color: var(--color-primary);
 }
 
-.typography_color-black__6MHRL {
+.styles_color-black__a05Fo {
   color: var(--color-base-black);
 }
 
-.typography_color-white__PfW5s {
+.styles_color-white__HiYDT {
   color: var(--color-base-white);
 }
 
-.typography_color-red__iPlbG {
+.styles_color-red__zwTZW {
   color: var(--color-primary-red);
 }
 
-.typography_color-grey__GA1c2 {
+.styles_color-grey__Gc0wv {
   color: var(--color-base-dark-grey);
 }
 
-.typography_color-inherit__RDd0Y {
+.styles_color-inherit__Y12df {
   color: inherit;
 }
 
-.typography_em__E6tX- {
+.styles_em__v4FoO {
   font-style: italic;
 }
 /* ~~~ */
 
 /* Display Headers */
-.typography_display__-F3p4 {
+.styles_display__VgnTB {
   margin: 0;
   font-family: var(--font-family-sans);
   line-height: 100%;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 96px;
     font-weight: 700;
     letter-spacing: -5px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 68px;
     font-weight: 500;
     letter-spacing: -3px;
   }
 
   /* Serif and Italic styles */
-  &.typography_serif__VSO38,
-  &.typography_em__E6tX- {
+  &.styles_serif__b-ZjM,
+  &.styles_em__v4FoO {
     font-family: var(--font-family-serif);
     font-weight: 500;
   }
 
   /* Serif and Italic adjustments */
-  &.typography_large__uq0zC.typography_serif__VSO38,
-  &.typography_large__uq0zC.typography_em__E6tX- {
+  &.styles_large__vqVxY.styles_serif__b-ZjM,
+  &.styles_large__vqVxY.styles_em__v4FoO {
     letter-spacing: -3px;
   }
 
-  &.typography_small__wfQ0K.typography_serif__VSO38,
-  &.typography_small__wfQ0K.typography_em__E6tX- {
+  &.styles_small__e7YDe.styles_serif__b-ZjM,
+  &.styles_small__e7YDe.styles_em__v4FoO {
     letter-spacing: -2px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 38px;
       letter-spacing: -1.5px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 32px;
       letter-spacing: -1.5px;
     }
 
-    &.typography_large__uq0zC.typography_serif__VSO38,
-    &.typography_large__uq0zC.typography_em__E6tX-,
-    &.typography_small__wfQ0K.typography_serif__VSO38,
-    &.typography_small__wfQ0K.typography_em__E6tX- {
+    &.styles_large__vqVxY.styles_serif__b-ZjM,
+    &.styles_large__vqVxY.styles_em__v4FoO,
+    &.styles_small__e7YDe.styles_serif__b-ZjM,
+    &.styles_small__e7YDe.styles_em__v4FoO {
       letter-spacing: -0.5px;
     }
   }
 }
 
 /* Headers */
-.typography_header__BexiD {
+.styles_header__UDH-H {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 44px;
     line-height: 48px;
     letter-spacing: -1.5px;
   }
 
-  &.typography_medium__K0uZD {
+  &.styles_medium__WQPZj {
     font-size: 34px;
     line-height: 40px;
     letter-spacing: -1px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 26px;
     line-height: 32px;
     letter-spacing: -0.5px;
   }
 
   /* Serif and Italic styles */
-  &.typography_serif__VSO38,
-  &.typography_em__E6tX- {
+  &.styles_serif__b-ZjM,
+  &.styles_em__v4FoO {
     font-family: var(--font-family-serif);
   }
 
   /* Serif and Italic letter-spacing overrides */
-  &.typography_large__uq0zC.typography_serif__VSO38,
-  &.typography_large__uq0zC.typography_em__E6tX- {
+  &.styles_large__vqVxY.styles_serif__b-ZjM,
+  &.styles_large__vqVxY.styles_em__v4FoO {
     letter-spacing: -0.5px;
   }
 
-  &.typography_medium__K0uZD.typography_serif__VSO38,
-  &.typography_medium__K0uZD.typography_em__E6tX- {
+  &.styles_medium__WQPZj.styles_serif__b-ZjM,
+  &.styles_medium__WQPZj.styles_em__v4FoO {
     letter-spacing: -0.5px;
   }
 
-  &.typography_small__wfQ0K.typography_serif__VSO38,
-  &.typography_small__wfQ0K.typography_em__E6tX- {
+  &.styles_small__e7YDe.styles_serif__b-ZjM,
+  &.styles_small__e7YDe.styles_em__v4FoO {
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 28px;
       line-height: 34px;
       letter-spacing: -1.5px;
     }
 
-    &.typography_medium__K0uZD {
+    &.styles_medium__WQPZj {
       font-size: 24px;
       line-height: 28px;
       letter-spacing: -1px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 20px;
       line-height: 26px;
       letter-spacing: -0.75px;
     }
 
     /* Mobile overrides for serif/italic letter-spacing */
-    &.typography_large__uq0zC.typography_serif__VSO38,
-    &.typography_large__uq0zC.typography_em__E6tX-,
-    &.typography_medium__K0uZD.typography_serif__VSO38,
-    &.typography_medium__K0uZD.typography_em__E6tX-,
-    &.typography_small__wfQ0K.typography_serif__VSO38,
-    &.typography_small__wfQ0K.typography_em__E6tX- {
+    &.styles_large__vqVxY.styles_serif__b-ZjM,
+    &.styles_large__vqVxY.styles_em__v4FoO,
+    &.styles_medium__WQPZj.styles_serif__b-ZjM,
+    &.styles_medium__WQPZj.styles_em__v4FoO,
+    &.styles_small__e7YDe.styles_serif__b-ZjM,
+    &.styles_small__e7YDe.styles_em__v4FoO {
       letter-spacing: -0.5px;
     }
   }
 }
 
 /* Subtitle */
-.typography_subtitle__aoFTV {
+.styles_subtitle__os3DH {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 19px;
     line-height: 26px;
     letter-spacing: -0.5px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 17px;
     line-height: 24px;
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 17px;
       line-height: 24px;
       letter-spacing: -0.5px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 14px;
       line-height: 20px;
       letter-spacing: -0.2px;
@@ -237,43 +195,43 @@
 }
 
 /* Body Copy */
-.typography_bodycopy__vYtQ8 {
+.styles_bodycopy__uEx9r {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 400;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 19px;
     line-height: 26px;
     letter-spacing: -0.5px;
   }
 
-  &.typography_medium__K0uZD {
+  &.styles_medium__WQPZj {
     font-size: 17px;
     line-height: 24px;
     letter-spacing: -0.5px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 14px;
     line-height: 20px;
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 17px;
       line-height: 24px;
       letter-spacing: -0.5px;
     }
 
-    &.typography_medium__K0uZD {
+    &.styles_medium__WQPZj {
       font-size: 14px;
       line-height: 20px;
       letter-spacing: -0.2px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 11px;
       line-height: 16px;
       letter-spacing: -0.2px;
@@ -282,31 +240,31 @@
 }
 
 /* Overline */
-.typography_overline__EnUK3 {
+.styles_overline__5xGDa {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
   text-transform: uppercase;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 14px;
     line-height: 18px;
     letter-spacing: 0.3px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 12px;
     line-height: 14px;
     letter-spacing: 0.2px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       line-height: 17px;
       letter-spacing: 0.3px; /* Added to ensure it stays */
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       line-height: 14px;
       letter-spacing: 0.3px;
     }
@@ -314,7 +272,7 @@
 }
 
 /* Button Text */
-.typography_buttontext__vcxNi {
+.styles_buttontext__UPumF {
   margin: 0;
   font-family: var(--font-family-sans);
   font-size: 17px;
@@ -329,7 +287,7 @@
 }
 
 /* Caption Text */
-.typography_captiontext__91UFb {
+.styles_captiontext__-TA6x {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 400;
@@ -345,7 +303,7 @@
 }
 
 /* Navigation Text */
-.typography_navigationtext__YfGf7 {
+.styles_navigationtext__qnnIo {
   margin: 0;
   font-family: var(--font-family-sans);
   font-size: 19px;
@@ -359,6 +317,48 @@
   }
 }
 
+@font-face {
+  font-family: 'GreyLLTT';
+  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GreyLLTT';
+  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GreyLLTT';
+  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VictorSerif';
+  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
+    format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VictorSerif';
+  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
+    format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
 .core-theme-module_coreTheme__pWxYB {
   /* RBO Red */
   /* Primary Palette */

package/dist/harmonic.cjs.development.js

@@ -5204,31 +5204,34 @@ var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_
   var isMenuOpen = _ref.isMenuOpen;
   return isMenuOpen && "\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: " + zIndexes.overlay + ";\n      background-color: var(--color-base-white);\n      overflow-y: auto;\n      scrollbar-width: none;\n      ::-webkit-scrollbar {\n        display: none;\n      }\n    ";
 });
-var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-white);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: ", ";\n  opacity: 0;\n  animation: fadeIn 0.3s ease forwards;\n\n  @media ", " {\n    top: 230px;\n    background-color: var(--color-base-black);\n  }\n\n  @keyframes fadeIn {\n    to {\n      opacity: 0.5;\n    }\n  }\n"])), zIndexes.searchOverlay, devices.mobileAndTablet);
+var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-white);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: ", ";\n  opacity: 0;\n  animation: fadeIn 0.3s ease forwards;\n\n  @media ", " {\n    top: 230px;\n    background-color: var(--color-base-black);\n  }\n\n  @keyframes fadeIn {\n    to {\n      opacity: 0.5;\n    }\n  }\n"])), function (_ref2) {
+  var isMobile = _ref2.isMobile;
+  return isMobile ? zIndexes.overlay : zIndexes.searchOverlay;
+}, devices.mobileAndTablet);
 var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--color-base-white);\n  height: 140px;\n  justify-content: space-evenly;\n  width: 100%;\n  z-index: ", ";\n\n  @media ", " {\n    height: 60px;\n  }\n"])), zIndexes.navigation, devices.mobileAndTablet);
-var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease,\n    visibility 0.3s ease;\n  background-color: var(--color-base-white);\n  height: 100px;\n  border-top: 1px solid var(--color-base-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 86px;\n    top: 144px;\n  }\n"])), function (_ref2) {
-  var visible = _ref2.visible;
-  return visible ? 'visible' : 'hidden';
-}, function (_ref3) {
+var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease,\n    visibility 0.3s ease;\n  background-color: var(--color-base-white);\n  height: 100px;\n  border-top: 1px solid var(--color-base-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 86px;\n    top: 144px;\n  }\n"])), function (_ref3) {
   var visible = _ref3.visible;
-  return visible ? 1 : 0;
+  return visible ? 'visible' : 'hidden';
 }, function (_ref4) {
   var visible = _ref4.visible;
+  return visible ? 1 : 0;
+}, function (_ref5) {
+  var visible = _ref5.visible;
   return visible ? 'translateY(0)' : 'translateY(-10px)';
 }, zIndexes.search, devices.mobile);
-var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease,\n    visibility 0.3s ease;\n  background-color: var(--color-base-white);\n  border-top: 1px solid var(--color-base-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n  height: 100px;\n\n  @media ", " {\n    height: 86px;\n    top: 144px;\n  }\n"])), function (_ref5) {
-  var visible = _ref5.visible;
-  return visible ? 'visible' : 'hidden';
-}, function (_ref6) {
+var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease,\n    visibility 0.3s ease;\n  background-color: var(--color-base-white);\n  border-top: 1px solid var(--color-base-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n  height: 100px;\n\n  @media ", " {\n    height: 86px;\n    top: 144px;\n  }\n"])), function (_ref6) {
   var visible = _ref6.visible;
-  return visible ? 1 : 0;
+  return visible ? 'visible' : 'hidden';
 }, function (_ref7) {
   var visible = _ref7.visible;
+  return visible ? 1 : 0;
+}, function (_ref8) {
+  var visible = _ref8.visible;
   return visible ? 'translateY(0)' : 'translateY(-10px)';
 }, zIndexes.search, devices.mobile);
 var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    padding-top: 32px;\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet);
-var MobileMenuContainer = /*#__PURE__*/styled__default(Grid)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: space-evenly;\n    transition: row-gap 0.3s ease;\n    row-gap: ", ";\n  }\n"])), devices.mobileAndTablet, function (_ref8) {
-  var showSearch = _ref8.showSearch;
+var MobileMenuContainer = /*#__PURE__*/styled__default(Grid)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: space-evenly;\n    transition: row-gap 0.3s ease;\n    row-gap: ", ";\n  }\n"])), devices.mobileAndTablet, function (_ref9) {
+  var showSearch = _ref9.showSearch;
   return showSearch ? '110px' : '12px';
 });
 var LogoContainer = /*#__PURE__*/styled__default.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 80px;\n  }\n\n  span > svg path,\n  span > svg g path {\n    fill: var(--color-primary-black);\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
@@ -5959,6 +5962,8 @@ var Navigation = function Navigation(_ref) {
   var onCloseSearchHandler = function onCloseSearchHandler() {
     setshowSearch(false);
   };
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
     isMenuOpen: showMenu,
     className: className,
@@ -5969,7 +5974,8 @@ var Navigation = function Navigation(_ref) {
     style: {
       height: "" + fullScreenHeight
     },
-    onClick: onCloseSearchHandler
+    onClick: onCloseSearchHandler,
+    isMobile: isMobile
   })), /*#__PURE__*/React__default.createElement(NavigationGrid, null, /*#__PURE__*/React__default.createElement(NavContainerGridItem, {
     columnStartDesktop: 1,
     columnSpanDesktop: 18,
@@ -7398,10 +7404,10 @@ var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$N ||
   var imagesHeightDevice = _ref2.imagesHeightDevice;
   return "&&& {\n        .swipe-slide > figure {\n          " + getImageSlideStyles(imagesHeightDevice) + "\n        }\n      }";
 });
-var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    && {\n      .swipe-slide {\n        ", "\n      }\n    }\n}}"])), function (_ref3) {
+var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    && {\n      .swipe-slide {\n        ", "\n      }\n    }\n  }\n}"])), function (_ref3) {
   var type = _ref3.type,
     isActive = _ref3.isActive;
-  return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type, isActive) + "\n        }\n      }\n    ";
+  return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type, isActive) + "\n        }\n      }\n\n      @media " + devices.tablet + " {\n        & {\n          .swipe-slide {\n            width: " + (type === exports.CarouselType.SmallCard ? '30%' : '40%') + ";\n          }\n        }\n      }\n    ";
 }, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
 var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile, devices.mobile);
 var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  user-select: text;\n"])));
@@ -7411,10 +7417,13 @@ var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$e || (_te
 });
 var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
-var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n\n  @media ", " {\n    grid-column: 2 / span 13;\n  }\n"])), function (_ref5) {
+var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  @media ", " {\n    grid-column: ", ";\n  }\n\n  @media ", " {\n    grid-column: 2 / span 13;\n  }\n"])), function (_ref5) {
   var active = _ref5.active;
   return active ? 'grid-column: 1 / span 16' : '';
-}, devices.tablet, devices.mobile);
+}, devices.tablet, function (_ref6) {
+  var active = _ref6.active;
+  return active ? '1 / span 14' : '2 / span 14';
+}, devices.mobile);
 
 var _templateObject$O, _templateObject2$B;
 var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
@@ -7655,7 +7664,11 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var handleTouchEnd = function handleTouchEnd() {
     isDragging.current = false;
-    navigateOnSwipeEnd();
+    if (isClickPrevented.current) {
+      navigateOnSwipeEnd();
+    } else {
+      setDragTranslateX(null);
+    }
   };
   var handleMouseMove = function handleMouseMove(e) {
     if (!isDragging.current || !isMouseDown.current || transitioning) return;
@@ -7786,6 +7799,7 @@ var Carousel = function Carousel(_ref) {
     }
   };
   var carouselTitleId = "carousel-title-" + title;
+  var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
   var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
   return /*#__PURE__*/React__default.createElement(Wrapper, {
     className: className,
@@ -7806,9 +7820,9 @@ var Carousel = function Carousel(_ref) {
     id: carouselTitleId,
     isDescriptionPresent: !!description
   }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    size: "small",
+    size: "medium",
     serif: true,
-    hierarchy: "h" + titleSemanticLevel
+    hierarchy: titleSemanticLevelValue
   }, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "large"
   }, description)))), /*#__PURE__*/React__default.createElement(GridItem, {
@@ -12269,6 +12283,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     return !isVideoSlide(slide);
   });
   var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
+  var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
   var carouselRef = React.useRef(null);
   var onNext = function onNext() {
     var _carouselRef$current;
@@ -12291,9 +12306,9 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
     id: carouselTitleId
   }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    size: "small",
+    size: "medium",
     serif: true,
-    hierarchy: "h" + titleSemanticLevel
+    hierarchy: titleSemanticLevelValue
   }, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickNext: onNext,
     onClickPrev: onPrev