diy-template-components 0.2.49 → 0.2.54

package/build/index.es.js

@@ -1,12 +1,12 @@
-function ___$insertStyle(css) {
-    if (!css || !window) {
-        return;
-    }
-    const style = document.createElement('style');
-    style.setAttribute('type', 'text/css');
-    style.innerHTML = css;
-    document.head.appendChild(style);
-    return css;
+function ___$insertStyle(css) {
+    if (!css || typeof window === 'undefined') {
+        return;
+    }
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css;
 }
 
 import React, { createContext, useContext, forwardRef, useRef, useEffect, useState, useMemo, useLayoutEffect, Suspense, memo, lazy, Fragment } from 'react';
@@ -1141,7 +1141,7 @@ const NextImageRenderer = ({
       refSetter,
       className
     } = props;
-    if (isCustomWebsite) {
+    if (isCustomWebsite && typeof Image !== 'undefined') {
       const classes = nextImageRendererStyles();
       const imageLoader = ({
         src,
@@ -1568,7 +1568,12 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     width: '15%',
     height: 'auto',
     position: 'relative',
-    paddingBottom: ' 6%',
+    paddingBottom: ({
+      isCustomWebsite
+    }) => isCustomWebsite ? ' 6%' : '0%',
+    paddingTop: ({
+      isCustomWebsite
+    }) => isCustomWebsite ? ' 0%' : '1%',
     '& p': {
       margin: '0',
       paddingRight: '8px',
@@ -1643,7 +1648,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     poweredDiv: {
       // marginTop: '15px'
       width: '28%',
-      paddingBottom: '9%'
+      paddingBottom: ({
+        isCustomWebsite
+      }) => isCustomWebsite ? '8%' : '0%'
     },
     socialMediaCta: {
       margin: '0 8px 16px 8px'
@@ -2212,7 +2219,9 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     },
     imageContainer: {
       height: 'undefined',
-      paddingBottom: '80%'
+      paddingBottom: ({
+        isCustomWebsite
+      }) => isCustomWebsite ? '100%' : 'unset'
     }
   }
 }));
@@ -2438,13 +2447,16 @@ function Section$4({
   nodeData,
   sectionIndex
 }) {
-  const classes = useSectionStyles$8();
   const {
     layout: {
       containerWidth
     },
-    isMobile
+    isMobile,
+    isCustomWebsite
   } = useContext(PageContext);
+  const classes = useSectionStyles$8({
+    isCustomWebsite
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React.createElement("div", {
@@ -2795,7 +2807,7 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     width: '100%',
     // maxWidth: ({ containerWidth } = {}) => containerWidth,
     position: 'absolute',
-    zIndex: '99'
+    zIndex: '9'
   },
   absoluteButtons: {
     display: 'flex',
@@ -2823,14 +2835,16 @@ const useSectionStyles$6 = createUseStyles(theme => ({
   centerBgImageContainer: {
     width: '100%',
     position: 'relative',
-    paddingBottom: '35rem',
-    backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)',
+    // paddingBottom: '35rem',
+    paddingBottom: ({
+      isCustomWebsite
+    }) => isCustomWebsite ? '45%' : 'unset',
     backgroundSize: 'cover',
     backgroundPosition: 'center center'
   },
   centerBgImage: {
     objectFit: 'cover',
-    backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)',
+    width: '100%',
     backgroundSize: 'cover',
     backgroundPosition: 'center center'
   },
@@ -2887,28 +2901,36 @@ const useSectionStyles$6 = createUseStyles(theme => ({
       margin: '16px 0'
     },
     centerBgImageContainer: {
-      width: '100%',
+      width: ({
+        isCustomWebsite
+      }) => isCustomWebsite ? '100%' : 'unset',
       position: 'relative',
       height: '34rem',
-      paddingBottom: '100%'
+      paddingBottom: '0'
+    },
+    centerBgImage: {
+      objectFit: 'cover',
+      width: '100%',
+      height: 'inherit'
     }
   }
 }));
 
 const Section$3 = ({
   nodeData,
-  isCustomWebsite,
   sectionIndex
 }) => {
   const {
     layout: {
       containerWidth
     },
-    isMobile
+    isMobile,
+    isCustomWebsite
   } = useContext(PageContext);
   const classes = useSectionStyles$6({
     imageUrl: nodeData.image.metadata.value,
-    containerWidth
+    containerWidth,
+    isCustomWebsite
   });
   return /*#__PURE__*/React.createElement("section", {
     className: classes.bannerCarouselCenterSection
@@ -2956,7 +2978,9 @@ function BannerCarouselCenter({
   isCustomWebsite,
   sectionIndex
 }) {
-  const classes = useSectionStyles$6();
+  const classes = useSectionStyles$6({
+    isCustomWebsite
+  });
   const [{
     bannerCarousel
   }] = sectionData.components;
@@ -2969,7 +2993,6 @@ function BannerCarouselCenter({
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React.createElement(Section$3, {
     nodeData: node,
-    isCustomWebsite: isCustomWebsite,
     key: idx /* or some other unique property */,
     sectionIndex: sectionIndex
   }))));
@@ -3072,14 +3095,13 @@ const useSectionStyles$5 = createUseStyles(theme => {
         width: '100%',
         padding: '0'
       },
-      // imageContainer: {
-
-      //   '& img': {
-      //     height: "520px",
-      //     objectFit: "cover"
-      //   }
-
-      // },
+      imageContainer: {
+        height: 'unset !important',
+        '& img': {
+          height: 'unset !important',
+          objectFit: 'cover'
+        }
+      },
       imageContainerDiv: {
         width: '100%'
       },
@@ -3088,7 +3110,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
       },
       sideBannerImage: {
         width: '100%',
-        height: 'initial'
+        height: 'unset !important'
       },
       textContainer: {
         padding: '20px 20px',
@@ -3963,10 +3985,10 @@ const useVideoStyles$1 = createUseStyles(theme => {
         isLoaded
       } = {}) => isLoaded ? 'block' : 'none'
     },
-    // icon: {
-    //   zIndex: '999'
-    // },
-
+    icon: {
+      zIndex: '999',
+      position: 'absolute'
+    },
     imgContainer: {
       position: 'absolute',
       width: '100%',
@@ -3974,6 +3996,7 @@ const useVideoStyles$1 = createUseStyles(theme => {
       borderRadius: theme.shape.borderRadius.small,
       // backgroundImage: ({ imageUrl } = {}) =>
       //   `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), url("${imageUrl}")`,
+      background: 'linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)',
       backgroundSize: 'cover',
       display: 'flex',
       justifyContent: 'center',
@@ -3982,6 +4005,12 @@ const useVideoStyles$1 = createUseStyles(theme => {
         cursor: 'pointer'
       }
     },
+    videoPlayerImage: {
+      height: '100%',
+      width: '100%',
+      objectFit: 'cover',
+      objectPosition: 'top'
+    },
     '@media (max-width: 767px)': {
       iframe: {
         borderRadius: '8px 8px 0 0'
@@ -4018,7 +4047,8 @@ function VideoPlayer(props) {
     className: classes.imgContainer
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     src: imageUrl,
-    sectionIndex: props?.sectionIndex
+    sectionIndex: props?.sectionIndex,
+    className: classes.videoPlayerImage
   }), isEnabled ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, props.onlyThumbnail ? null : /*#__PURE__*/React.createElement(Icon, {
     name: "Video Play",
     color: theme.palette.font.invertedDefault,