@royaloperahouse/harmonic 0.17.0-d → 0.17.0-f

package/dist/harmonic.esm.js

@@ -7675,7 +7675,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
 
 var _templateObject$U, _templateObject2$I;
 var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
-var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n  padding-inline-start: 2px;\n  padding-block-start: 2px;\n"])));
+var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n"])));
 var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  transition: ", ";\n  transform: translateX(", ");\n\n  .", " {\n    flex-shrink: 0;\n  }\n"])), function (_ref) {
   var transitioning = _ref.transitioning;
   return transitioning ? 'transform 0.3s ease' : 'none';
@@ -8029,6 +8029,8 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
     subtitle = _ref.subtitle,
     text = _ref.text,
     images = _ref.images;
+  var _useViewport = useViewport(),
+    hydrated = _useViewport.hydrated;
   var headerImages = images || [];
   var hasImages = !!headerImages.length;
   var hasMultipleImages = headerImages.length > 1;
@@ -8041,6 +8043,7 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
     var _swipeRef$current2;
     return (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.prevSlide();
   };
+  if (!hydrated) return null;
   return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
     theme: ThemeType.Stream
   }, /*#__PURE__*/React__default.createElement(HighlightsGrid, null, hasImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtons, {
@@ -10947,7 +10950,7 @@ var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$1g || (_templateObje
   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(--base-color-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$_ || (_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);
 
 /**
  * An accessible component which allows Assistive Technology users to move the focus
@@ -11994,7 +11997,7 @@ var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
 };
 
 var _templateObject$1q, _templateObject2$16, _templateObject3$V, _templateObject4$N, _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        > div {\n          height: var(--fullscreen-figure-height);\n        }\n    }\n  }\n"])), function (_ref) {
+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        > 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          > div {\n            " + getImageSlideStyles(imagesHeightDesktop) + "\n          }\n        }\n      }\n    }";
 }, devices.mobile, function (_ref2) {
@@ -12015,7 +12018,7 @@ var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObj
 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 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  ", ";\n\n  @media ", " {\n    grid-column: ", ";\n  }\n\n  @media ", " {\n    grid-column: 2 / span 13;\n  }\n"])), function (_ref5) {
+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 active = _ref5.active;
   return active ? 'grid-column: 1 / span 16' : '';
 }, devices.tablet, function (_ref6) {