@royaloperahouse/harmonic 0.5.0 → 0.5.1

package/dist/harmonic.cjs.development.js

@@ -5008,14 +5008,17 @@ var useMobile = function useMobile() {
   return mobile;
 };
 var useViewport = function useViewport() {
-  var _useState3 = React.useState({
-      width: typeof window !== 'undefined' ? window.innerWidth : 0,
-      isMobile: typeof window !== 'undefined' ? window.innerWidth < breakpoints.sm : false,
-      isTablet: typeof window !== 'undefined' ? window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md : false,
-      isDesktop: typeof window !== 'undefined' ? window.innerWidth >= breakpoints.md : false
+  var _useState3 = React.useState(false),
+    hydrated = _useState3[0],
+    setHydrated = _useState3[1];
+  var _useState4 = React.useState({
+      width: 0,
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false
     }),
-    viewport = _useState3[0],
-    setViewport = _useState3[1];
+    viewport = _useState4[0],
+    setViewport = _useState4[1];
   React.useEffect(function () {
     if (typeof window === 'undefined') return undefined;
     var handleResize = function handleResize() {
@@ -5026,12 +5029,16 @@ var useViewport = function useViewport() {
         isDesktop: window.innerWidth >= breakpoints.md
       });
     };
+    handleResize();
+    setHydrated(true);
     window.addEventListener('resize', handleResize);
     return function () {
       return window.removeEventListener('resize', handleResize);
     };
   }, []);
-  return viewport;
+  return _extends({}, viewport, {
+    hydrated: hydrated
+  });
 };
 
 var SocialLinks = function SocialLinks(_ref) {
@@ -9178,10 +9185,12 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
     additionalLink = _ref.additionalLink,
     image = _ref.image;
   var _useViewport = useViewport(),
-    isMobile = _useViewport.isMobile;
+    isMobile = _useViewport.isMobile,
+    hydrated = _useViewport.hydrated;
   var showImageButton = !title && !badge && !additionalLink && !isMobile;
   var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
   var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
+  if (!hydrated) return null;
   return /*#__PURE__*/React__default.createElement(Wrapper$5, {
     className: className
   }, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {