diy-template-components 4.0.4 → 4.0.6

package/build/index.es.js

@@ -7,6 +7,19 @@ import koreanLocale from 'moment/locale/ko';
 import ReactDOMServer from 'react-dom/server';
 import { createTheming, createUseStyles as createUseStyles$1, useTheme as useTheme$1 } from 'react-jss';
 
+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;
+}
+
+insertStyle("/* Brush stroke underline - for rich text content (color via --brush-color inline style) */\n.brush-stroke {\n  position: relative;\n  display: inline-block;\n  white-space: pre-wrap;\n}\n\n.brush-stroke::after {\n  content: \"\";\n  position: absolute;\n  top: 90%;\n  left: 0;\n  height: 0.5em;\n  width: 100%;\n  z-index: -1;\n  border: solid var(--brush-width, 0.15em) var(--brush-color, #FFFFFF);\n  border-color: var(--brush-color, #FFFFFF) transparent transparent transparent;\n  border-radius: 100%;\n}\n\n/* Font size classes for rich text editor - Desktop (default) */\n.font-size-extra-small {\n  font-size: 12px;\n  line-height: 16px;\n}\n\n.font-size-small {\n  font-size: 16px;\n  line-height: 20px;\n}\n\n.font-size-medium {\n  font-size: 20px;\n  line-height: 24px;\n}\n\n.font-size-large {\n  font-size: 24px;\n  line-height: 28px;\n}\n\n.font-size-very-large {\n  font-size: 32px;\n  line-height: 36px;\n}\n\n.font-size-extra-large {\n  font-size: 56px;\n  line-height: 64px;\n}\n\n.font-size-huge {\n  font-size: 72px;\n  line-height: 80px;\n}\n\n/* Font size classes - Mobile */\n@media (max-width: 768px) {\n  .font-size-extra-small {\n    font-size: 10px;\n    line-height: 14px;\n  }\n  .font-size-small {\n    font-size: 14px;\n    line-height: 18px;\n  }\n  .font-size-medium {\n    font-size: 16px;\n    line-height: 20px;\n  }\n  .font-size-large {\n    font-size: 18px;\n    line-height: 20px;\n  }\n  .font-size-very-large {\n    font-size: 24px;\n    line-height: 36px;\n  }\n  .font-size-extra-large {\n    font-size: 40px;\n    line-height: 48px;\n  }\n  .font-size-huge {\n    font-size: 56px;\n    line-height: 64px;\n  }\n}");
+
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -546,7 +559,7 @@ function useLinkBuilder(data) {
     basePath,
     isMasterTemplate
   } = useContext(PageContext);
-  if (isEdit || !data.isLink) {
+  if (!data || isEdit || !data.isLink) {
     return null;
   }
   if (data?.isExistingLink === false) {
@@ -566,7 +579,7 @@ function useLinkBuilder(data) {
   }
   const {
     pageId
-  } = navList.find(el => el.slug === data?.link) || {};
+  } = navList?.find(el => el.slug === data?.link) || {};
   return `//${basePath}?templateId=${templateId}&pageId=${pageId}${isMasterTemplate ? '&mld=true' : ''}`;
 }
 
@@ -2283,11 +2296,6 @@ function Footer({
   }, "\xA9\uFE0F Leaverage Consultants Private Limited") : null);
 }
 
-const borderRadius = {
-  small: 4,
-  regular: 8,
-  large: 12
-};
 const generateShadows = palette => ({
   primary: `0 2px 8px ${palette.shadow.primary}`,
   secondary: `0 4px 10px ${palette.shadow.secondary}`
@@ -2444,7 +2452,41 @@ const fontWeight = {
   superBold: 900
 };
 
-function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile) {
+const getBorderRadius = roundness => {
+  const mapping = {
+    sharp: {
+      small: 0,
+      regular: 0,
+      large: 0
+    },
+    soft: {
+      small: 8,
+      regular: 8,
+      large: 8
+    },
+    rounded: {
+      small: 16,
+      regular: 16,
+      large: 16
+    },
+    'extra-round': {
+      small: 24,
+      regular: 24,
+      large: 24
+    },
+    pill: {
+      small: 9999,
+      regular: 9999,
+      large: 9999
+    }
+  };
+  return mapping[roundness] || {
+    small: 16,
+    regular: 16,
+    large: 16
+  };
+};
+function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile, roundness = 'rounded') {
   const palette = palettes[colorTheme] || palettes['blue'];
   const typography = {
     fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
@@ -2452,7 +2494,7 @@ function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile) {
     fontWeight
   };
   const shape = {
-    borderRadius
+    borderRadius: getBorderRadius(roundness)
   };
   return {
     palette,
@@ -2519,17 +2561,6 @@ function NanumSquare() {
   return null;
 }
 
-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;
-}
-
 insertStyle("@charset \"UTF-8\";\n/* Wrapper: no height/min-height – height comes only from section content, not from HOC */\n.sectionBackgroundWrapper {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* Section root transparent so background (image/color/gradient/video) shows through */\n.sectionBackgroundWrapper > .sectionBackgroundContent > * {\n  background: transparent !important;\n}\n\n/* Video: absolute so it does not affect wrapper height; height follows section */\n.sectionBackgroundVideo {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: 0;\n  pointer-events: none;\n}\n\n/* YouTube embed: cover background, no UI interaction, minimal branding via URL params */\n.sectionBackgroundYoutube {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 100vw;\n  min-width: 100%;\n  min-height: 100%;\n  height: 56.25vw; /* 16:9 */\n  min-height: 100vh;\n  transform: translate(-50%, -50%);\n  border: none;\n  z-index: 0;\n  pointer-events: none;\n}\n\n@media (min-aspect-ratio: 16/9) {\n  .sectionBackgroundYoutube {\n    width: 177.78vh;\n    height: 100vh;\n    min-width: 100%;\n    min-height: 100%;\n  }\n}\n/* Blur overlay: frosted glass so content stays readable over video/image/gradient */\n.sectionBackgroundBlur {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  pointer-events: none;\n  backdrop-filter: blur(2px);\n  -webkit-backdrop-filter: blur(2px);\n  /* background: rgba(255, 255, 255, 0.08); */\n}\n\n/* Content wrapper: above blur so component items are clear */\n.sectionBackgroundContent {\n  position: relative;\n  z-index: 2;\n}\n\n/* Background layer: fills wrapper only (absolute), does not affect wrapper height */\n.sectionBackgroundLayer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.sectionBackgroundLayer.sectionBackgroundImage {\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n}");
 
 /**
@@ -2830,7 +2861,8 @@ function SectionRenderer$1({
 
 const defaultTheme = {
   color: 'blue',
-  font: 'rubik'
+  font: 'rubik',
+  roundness: 'rounded'
 };
 const defaultLayout = {
   containerWidth: 1440
@@ -2904,7 +2936,7 @@ const allColors = {
   tertiaryskyblue: '#F2FCFF'
 };
 
-const generateTheme = (theme = 'blue', fontFamily = 'Arial', isMobile) => {
+const generateTheme = (theme = 'blue', fontFamily = 'Arial', isMobile, roundness = 'rounded') => {
   let themeColor = theme.split('-');
   let color, gradient, darkMode;
   if (themeColor.length === 1) {
@@ -3005,7 +3037,7 @@ const generateTheme = (theme = 'blue', fontFamily = 'Arial', isMobile) => {
     margin: isMobile ? mobileMargin : margin
   };
   return {
-    ...getTheme(theme),
+    ...getTheme(theme, fontFamily, isMobile, roundness),
     typography,
     spacing,
     colors
@@ -3017,7 +3049,8 @@ function PageRenderer$1({
     metadata: {
       theme: {
         color = defaultTheme.color,
-        font = defaultTheme.font
+        font = defaultTheme.font,
+        roundness = defaultTheme.roundness
       } = defaultTheme,
       layout = defaultLayout
     } = defaultMetadata,
@@ -3069,7 +3102,7 @@ function PageRenderer$1({
     countryCode,
     currencySymbol
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
-  const theme = useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
+  const theme = useMemo(() => generateTheme(color, font, context.isMobile, roundness), [color, font, context.isMobile, roundness]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -3546,9 +3579,9 @@ function BannerCarouselRight({
   });
   const [{
     bannerCarousel
-  }] = sectionData.components;
-  const Wrapper = bannerCarousel.components.length > 1 ? Carousel : Fragment;
-  const wrapperProps = bannerCarousel.components.length > 1 ? {
+  }] = sectionData?.components;
+  const Wrapper = bannerCarousel?.components?.length > 1 ? Carousel : Fragment;
+  const wrapperProps = bannerCarousel?.components?.length > 1 ? {
     buttonContainerClass: classes.absoluteButtonsBannerRight,
     inverted: false
   } : {};
@@ -3556,7 +3589,7 @@ function BannerCarouselRight({
     className: classes.bannerCarouselRightSection
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React.createElement(Section$5, {
+  }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, bannerCarousel?.components?.map((node, idx) => /*#__PURE__*/React.createElement(Section$5, {
     nodeData: node,
     key: idx /* or some other unique property */,
     sectionIndex: sectionIndex,
@@ -3565,8 +3598,8 @@ function BannerCarouselRight({
 }
 
 var index$t = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselRight
+    __proto__: null,
+    'default': BannerCarouselRight
 });
 
 const useSectionStyles$8 = createUseStyles(theme => ({
@@ -3789,8 +3822,8 @@ function List({
 }
 
 var index$s = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': List
+    __proto__: null,
+    'default': List
 });
 
 const useSectionStyles$7 = createUseStyles(theme => {
@@ -4079,15 +4112,15 @@ function BannerCarouselCenter({
   });
   const [{
     bannerCarousel
-  }] = sectionData.components;
-  const Wrapper = bannerCarousel.components.length > 1 ? Carousel : Fragment;
-  const wrapperProps = bannerCarousel.components.length > 1 ? {
+  }] = sectionData?.components;
+  const Wrapper = bannerCarousel?.components?.length > 1 ? Carousel : Fragment;
+  const wrapperProps = bannerCarousel?.components?.length > 1 ? {
     buttonContainerClass: classes.absoluteButtons,
     inverted: true
   } : {};
   return /*#__PURE__*/React.createElement("section", {
     className: classes.bannerCarouselCenterSection
-  }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React.createElement(Section$4, {
+  }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, bannerCarousel?.components?.map((node, idx) => /*#__PURE__*/React.createElement(Section$4, {
     nodeData: node,
     isCustomWebsite: isCustomWebsite,
     key: idx /* or some other unique property */,
@@ -4097,8 +4130,8 @@ function BannerCarouselCenter({
 }
 
 var index$r = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselCenter
+    __proto__: null,
+    'default': BannerCarouselCenter
 });
 
 const useSectionStyles$6 = createUseStyles(theme => {
@@ -4392,8 +4425,8 @@ function BannerCarouselCenterv2({
 }
 
 var index$q = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselCenterv2
+    __proto__: null,
+    'default': BannerCarouselCenterv2
 });
 
 const useSectionStyles$5 = createUseStyles(theme => {
@@ -4618,13 +4651,13 @@ function BannerCarouselLeft({
   });
   const [{
     bannerCarousel
-  }] = sectionData.components;
-  const Wrapper = bannerCarousel.components.length > 1 ? Carousel : Fragment;
+  }] = sectionData?.components;
+  const Wrapper = bannerCarousel?.components?.length > 1 ? Carousel : Fragment;
   return /*#__PURE__*/React.createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React.createElement(Wrapper, null, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React.createElement(Section$2, {
+  }, /*#__PURE__*/React.createElement(Wrapper, null, bannerCarousel?.components?.map((node, idx) => /*#__PURE__*/React.createElement(Section$2, {
     nodeData: node,
     key: idx /* or some other unique property */,
     sectionIndex: sectionIndex,
@@ -4633,8 +4666,8 @@ function BannerCarouselLeft({
 }
 
 var index$p = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselLeft
+    __proto__: null,
+    'default': BannerCarouselLeft
 });
 
 const useSectionStyles$4 = createUseStyles(theme => ({
@@ -5029,8 +5062,8 @@ function SubscribeToNewsletter({
 }
 
 var index$o = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': SubscribeToNewsletter
+    __proto__: null,
+    'default': SubscribeToNewsletter
 });
 
 const useTestimonialStyles = createUseStyles(theme => ({
@@ -5317,8 +5350,8 @@ function Testimonials({
 }
 
 var index$n = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Testimonials
+    __proto__: null,
+    'default': Testimonials
 });
 
 const loaderStyle = theme => ({
@@ -5721,8 +5754,8 @@ function VideoTestimonial({
 }
 
 var index$m = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': VideoTestimonial
+    __proto__: null,
+    'default': VideoTestimonial
 });
 
 const useVideoStyles = createUseStyles(theme => {
@@ -5957,8 +5990,8 @@ function Video({
 }
 
 var index$l = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Video
+    __proto__: null,
+    'default': Video
 });
 
 const useSectionStyles$3 = createUseStyles(theme => ({
@@ -6193,8 +6226,8 @@ function Info({
 }
 
 var index$k = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Info
+    __proto__: null,
+    'default': Info
 });
 
 const useSectionStyles$2 = createUseStyles(theme => ({
@@ -6312,8 +6345,8 @@ const TextSection = ({
 };
 
 var index$j = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TextSection
+    __proto__: null,
+    'default': TextSection
 });
 
 const usePhotoGalleryStyles = createUseStyles(theme => {
@@ -6535,8 +6568,8 @@ function PhotoGallery({
 }
 
 var index$i = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': PhotoGallery
+    __proto__: null,
+    'default': PhotoGallery
 });
 
 const useFaqListStyles = createUseStyles(theme => ({
@@ -6718,8 +6751,8 @@ const Accordion = ({
 };
 
 var index$h = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': FAQListing
+    __proto__: null,
+    'default': FAQListing
 });
 
 const useTextGridStyles = createUseStyles(theme => ({
@@ -6889,8 +6922,8 @@ const TextGrid = ({
 };
 
 var index$g = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TextGrid
+    __proto__: null,
+    'default': TextGrid
 });
 
 const useCourseStyles = createUseStyles(theme => {
@@ -8173,8 +8206,8 @@ function SimpleCardsContainer({
 }
 
 var index$f = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': courses
+    __proto__: null,
+    'default': courses
 });
 
 const useTeamStyles = createUseStyles(theme => {
@@ -8491,8 +8524,8 @@ function TeamCard({
 }
 
 var index$e = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TeamCard
+    __proto__: null,
+    'default': TeamCard
 });
 
 const useSectionStyles$1 = createUseStyles(theme => ({
@@ -8912,8 +8945,8 @@ function FormEnquiry({
 }
 
 var index$d = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': FormEnquiry
+    __proto__: null,
+    'default': FormEnquiry
 });
 
 const useSectionStyles = createUseStyles(theme => ({
@@ -9334,8 +9367,8 @@ function Contact({
 }
 
 var index$c = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Contact
+    __proto__: null,
+    'default': Contact
 });
 
 const useWebinarPromotionPage = createUseStyles(theme => {
@@ -9811,12 +9844,11 @@ function CoursePromotionPage$1({
 }
 
 var index$b = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CoursePromotionPage$1
+    __proto__: null,
+    'default': CoursePromotionPage$1
 });
 
 const useCoursePromotionPage$1 = createUseStyles(theme => {
-  console.log(theme, 'themere');
   return {
     courseSuperContainer: {
       display: 'flex',
@@ -10398,8 +10430,8 @@ function CoursePromotionPage({
 }
 
 var index$a = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CoursePromotionPage
+    __proto__: null,
+    'default': CoursePromotionPage
 });
 
 const useFormPageStyles = createUseStyles(theme => ({
@@ -10761,8 +10793,8 @@ const FormPage = ({
 };
 
 var index$9 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': FormPage
+    __proto__: null,
+    'default': FormPage
 });
 
 const useTilesStyles = createUseStyles(theme => {
@@ -10909,8 +10941,8 @@ function Tiles({
 }
 
 var index$8 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Tiles
+    __proto__: null,
+    'default': Tiles
 });
 
 const useEmailStyles = createUseStyles(theme => ({
@@ -11382,8 +11414,8 @@ function EmailDripMarket({
 }
 
 var index$7 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': EmailDripMarket
+    __proto__: null,
+    'default': EmailDripMarket
 });
 
 const useAboutInstituteStyles = createUseStyles(theme => ({
@@ -11750,8 +11782,8 @@ function ABOUT_INSTITUTE({
 }
 
 var index$6 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': ABOUT_INSTITUTE
+    __proto__: null,
+    'default': ABOUT_INSTITUTE
 });
 
 const useCounterSectionStyles = createUseStyles(theme => {
@@ -11897,8 +11929,8 @@ function CounterSection({
 }
 
 var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CounterSection
+    __proto__: null,
+    'default': CounterSection
 });
 
 const BREAKPOINTS = {
@@ -12265,9 +12297,9 @@ function StickyCta({
 }
 
 var index$4 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': StickyCta,
-  WhatsAppIcon: WhatsAppIcon
+    __proto__: null,
+    'default': StickyCta,
+    WhatsAppIcon: WhatsAppIcon
 });
 
 /**
@@ -12428,8 +12460,8 @@ function CustomHtmlRender({
 }
 
 var index$3 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CustomHtmlRender
+    __proto__: null,
+    'default': CustomHtmlRender
 });
 
 const useTimerCallPageStyles = createUseStyles(theme => ({
@@ -12598,208 +12630,10 @@ const TimerAndCall = ({
 };
 
 var index$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TimerAndCall
+    __proto__: null,
+    'default': TimerAndCall
 });
 
-const TYPE_TO_COMPONENT_MAP = {
-  BANNER_CAROUSEL_RIGHT: BannerCarouselRight,
-  GRID_CARD: List,
-  BANNER_CAROUSEL_CENTER: BannerCarouselCenter,
-  BANNER_CAROUSEL_CENTER_V2: BannerCarouselCenterv2,
-  BANNER_CAROUSEL_LEFT: BannerCarouselLeft,
-  FORM_SUBSCRIBE: SubscribeToNewsletter,
-  TEXT_TESTIMONIAL: Testimonials,
-  VIDEO_TESTIMONIAL: VideoTestimonial,
-  VIDEO: Video,
-  INFO: Info,
-  TEXT: TextSection,
-  IMAGE_GALLERY: PhotoGallery,
-  FAQ_LISTING: FAQListing,
-  TEXT_GRID: TextGrid,
-  COURSE_CAROUSEL: courses,
-  TEAM_CARD: TeamCard,
-  CONTACT: FormEnquiry,
-  FORM_ENQUIRY: Contact,
-  WEBINAR_LANDING_PAGE: CoursePromotionPage$1,
-  COURSE_LANDING_PAGE: CoursePromotionPage,
-  FORM_LANDING_PAGE: FormPage,
-  TILES_SECTION: Tiles,
-  EMAIL_DRIP_MARKET: EmailDripMarket,
-  ABOUT_INSTITUTE,
-  COUNTER_SECTION: CounterSection,
-  STICKY_CTA: StickyCta,
-  CUSTOM_HTML_SECTION: CustomHtmlRender,
-  TIMER_AND_CALL: TimerAndCall
-};
-const getCompToRender = type => TYPE_TO_COMPONENT_MAP[type] || (() => null);
-const MemoisedSection = /*#__PURE__*/memo(({
-  sectionData,
-  extraProps,
-  isCustomWebsite,
-  sectionIndex
-}) => {
-  console.log('extraProps in section data', extraProps);
-  const SectionComp = getCompToRender(sectionData.type);
-  return /*#__PURE__*/React.createElement(SectionComp, {
-    sectionData: sectionData,
-    extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite,
-    sectionIndex: sectionIndex
-  });
-});
-const SectionWithBackground = withSectionBackground(MemoisedSection);
-function SectionRenderer({
-  sectionData,
-  extraProps,
-  isCustomWebsite,
-  sectionIndex
-}) {
-  let sectionBg = {};
-  if (sectionData?.isV2Section) {
-    sectionBg = sectionData?.bgSection?.components?.[0]?.sectionBgData || {};
-  }
-  return /*#__PURE__*/React.createElement(SectionWithBackground, {
-    sectionData: sectionData,
-    extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite,
-    sectionIndex: sectionIndex,
-    isSkipV2Section: sectionData?.isV2Section,
-    componentBg: sectionBg || {}
-  });
-}
-
-function PageRenderer({
-  pageData: {
-    metadata: {
-      theme: {
-        color = defaultTheme.color,
-        font = defaultTheme.font
-      } = defaultTheme,
-      layout = defaultLayout
-    } = defaultMetadata,
-    sections,
-    header,
-    footer,
-    validations = {},
-    _id,
-    isLandingPage = false,
-    isCustomWebsite = false
-  },
-  isMobile = false,
-  isLandingPages = false,
-  baseURLs = {},
-  hashToken,
-  SectionWrapper,
-  isMasterTemplate,
-  basePath,
-  countryCode,
-  currencySymbol,
-  isPreview,
-  isEdit,
-  sectionPlaceholder,
-  templateId,
-  isTutorWebsite = false,
-  extraProps,
-  hideLogin
-}) {
-  const navList = header?.navs;
-  const context = useMemo(() => ({
-    isMobile,
-    isLandingPages,
-    layout,
-    baseURLs,
-    hashToken,
-    isMasterTemplate,
-    basePath,
-    isPreview,
-    isEdit,
-    templateId,
-    navList,
-    validations,
-    isTutorWebsite,
-    extraProps,
-    hideLogin,
-    isCustomWebsite,
-    _id,
-    countryCode,
-    currencySymbol
-  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
-  const theme = useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
-  const Wrapper = SectionWrapper || Fragment;
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(PageContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(FontSeeder, {
-    fontFamily: font
-  }), !!header && /*#__PURE__*/React.createElement(Wrapper, !!SectionWrapper && {
-    sectionData: header,
-    isHeader: true
-  }, /*#__PURE__*/React.createElement(Header, {
-    data: header,
-    isLandingPage: isLandingPage,
-    extraProps: extraProps
-  })), sections?.length ? sections?.map((sectionData, sectionIndex) => /*#__PURE__*/React.createElement(Wrapper, _extends({}, !!SectionWrapper && {
-    sectionData,
-    sectionIndex
-  }, {
-    key: sectionData.type + (sectionData._id || sectionIndex)
-  }), /*#__PURE__*/React.createElement(SectionRenderer, {
-    sectionData: sectionData,
-    extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite,
-    sectionIndex: sectionIndex
-  }))) : sectionPlaceholder, !!footer && /*#__PURE__*/React.createElement(Wrapper, !!SectionWrapper && {
-    sectionData: footer,
-    isFooter: true
-  }, /*#__PURE__*/React.createElement(Footer, {
-    data: footer
-  }))));
-}
-
-const componentParser = compObj => {
-  if (compObj.type === 'componentCollection') {
-    const component = {
-      _id: compObj._id,
-      metadata: compObj.metadata || {}
-    };
-    compObj.components.forEach(comp => {
-      component[comp.name] = componentParser(comp);
-    });
-    return component;
-  }
-  if (Array.isArray(compObj.components)) {
-    compObj.components = compObj.components.map(componentParser);
-  }
-  return compObj;
-};
-const inverseComponentParser = compObj => {
-  if (!compObj.type) {
-    const {
-      metadata,
-      _id,
-      ...existingComponent
-    } = compObj;
-    const newComponent = {
-      type: 'componentCollection',
-      name: '',
-      elementType: '',
-      label: '',
-      metadata: metadata || {},
-      components: [],
-      _id
-    };
-    newComponent.components = Object.values(existingComponent).map(inverseComponentParser);
-    return newComponent;
-  } else {
-    if (compObj.components) {
-      compObj.components = compObj.components.map(inverseComponentParser);
-    }
-    return compObj;
-  }
-};
-
 const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
   return {
     section: {
@@ -13035,10 +12869,210 @@ function VideoWorkshopPromotion({
 }
 
 var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': VideoWorkshopPromotion
+    __proto__: null,
+    'default': VideoWorkshopPromotion
 });
 
+const TYPE_TO_COMPONENT_MAP = {
+  BANNER_CAROUSEL_RIGHT: BannerCarouselRight,
+  GRID_CARD: List,
+  BANNER_CAROUSEL_CENTER: BannerCarouselCenter,
+  BANNER_CAROUSEL_CENTER_V2: BannerCarouselCenterv2,
+  BANNER_CAROUSEL_LEFT: BannerCarouselLeft,
+  FORM_SUBSCRIBE: SubscribeToNewsletter,
+  TEXT_TESTIMONIAL: Testimonials,
+  VIDEO_TESTIMONIAL: VideoTestimonial,
+  VIDEO: Video,
+  INFO: Info,
+  TEXT: TextSection,
+  IMAGE_GALLERY: PhotoGallery,
+  FAQ_LISTING: FAQListing,
+  TEXT_GRID: TextGrid,
+  COURSE_CAROUSEL: courses,
+  TEAM_CARD: TeamCard,
+  CONTACT: FormEnquiry,
+  FORM_ENQUIRY: Contact,
+  WEBINAR_LANDING_PAGE: CoursePromotionPage$1,
+  COURSE_LANDING_PAGE: CoursePromotionPage,
+  FORM_LANDING_PAGE: FormPage,
+  TILES_SECTION: Tiles,
+  EMAIL_DRIP_MARKET: EmailDripMarket,
+  ABOUT_INSTITUTE,
+  COUNTER_SECTION: CounterSection,
+  STICKY_CTA: StickyCta,
+  CUSTOM_HTML_SECTION: CustomHtmlRender,
+  TIMER_AND_CALL: TimerAndCall,
+  VIDEO_WORKSHOP_PROMOTION: VideoWorkshopPromotion
+};
+const getCompToRender = type => TYPE_TO_COMPONENT_MAP[type] || (() => null);
+const MemoisedSection = /*#__PURE__*/memo(({
+  sectionData,
+  extraProps,
+  isCustomWebsite,
+  sectionIndex
+}) => {
+  console.log('extraProps in section data', extraProps);
+  const SectionComp = getCompToRender(sectionData.type);
+  return /*#__PURE__*/React.createElement(SectionComp, {
+    sectionData: sectionData,
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
+  });
+});
+const SectionWithBackground = withSectionBackground(MemoisedSection);
+function SectionRenderer({
+  sectionData,
+  extraProps,
+  isCustomWebsite,
+  sectionIndex
+}) {
+  let sectionBg = {};
+  if (sectionData?.isV2Section) {
+    sectionBg = sectionData?.bgSection?.components?.[0]?.sectionBgData || {};
+  }
+  return /*#__PURE__*/React.createElement(SectionWithBackground, {
+    sectionData: sectionData,
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex,
+    isSkipV2Section: sectionData?.isV2Section,
+    componentBg: sectionBg || {}
+  });
+}
+
+function PageRenderer({
+  pageData: {
+    metadata: {
+      theme: {
+        color = defaultTheme.color,
+        font = defaultTheme.font,
+        roundness = defaultTheme.roundness
+      } = defaultTheme,
+      layout = defaultLayout
+    } = defaultMetadata,
+    sections,
+    header,
+    footer,
+    validations = {},
+    _id,
+    isLandingPage = false,
+    isCustomWebsite = false
+  },
+  isMobile = false,
+  isLandingPages = false,
+  baseURLs = {},
+  hashToken,
+  SectionWrapper,
+  isMasterTemplate,
+  basePath,
+  countryCode,
+  currencySymbol,
+  isPreview,
+  isEdit,
+  sectionPlaceholder,
+  templateId,
+  isTutorWebsite = false,
+  extraProps,
+  hideLogin
+}) {
+  const navList = header?.navs;
+  const context = useMemo(() => ({
+    isMobile,
+    isLandingPages,
+    layout,
+    baseURLs,
+    hashToken,
+    isMasterTemplate,
+    basePath,
+    isPreview,
+    isEdit,
+    templateId,
+    navList,
+    validations,
+    isTutorWebsite,
+    extraProps,
+    hideLogin,
+    isCustomWebsite,
+    _id,
+    countryCode,
+    currencySymbol
+  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
+  const theme = useMemo(() => generateTheme(color, font, context.isMobile, roundness), [color, font, context.isMobile, roundness]);
+  const Wrapper = SectionWrapper || Fragment;
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(PageContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(FontSeeder, {
+    fontFamily: font
+  }), !!header && /*#__PURE__*/React.createElement(Wrapper, !!SectionWrapper && {
+    sectionData: header,
+    isHeader: true
+  }, /*#__PURE__*/React.createElement(Header, {
+    data: header,
+    isLandingPage: isLandingPage,
+    extraProps: extraProps
+  })), sections?.length ? sections?.map((sectionData, sectionIndex) => /*#__PURE__*/React.createElement(Wrapper, _extends({}, !!SectionWrapper && {
+    sectionData,
+    sectionIndex
+  }, {
+    key: sectionData.type + (sectionData._id || sectionIndex)
+  }), /*#__PURE__*/React.createElement(SectionRenderer, {
+    sectionData: sectionData,
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
+  }))) : sectionPlaceholder, !!footer && /*#__PURE__*/React.createElement(Wrapper, !!SectionWrapper && {
+    sectionData: footer,
+    isFooter: true
+  }, /*#__PURE__*/React.createElement(Footer, {
+    data: footer
+  }))));
+}
+
+const componentParser = compObj => {
+  if (compObj.type === 'componentCollection') {
+    const component = {
+      _id: compObj._id,
+      metadata: compObj.metadata || {}
+    };
+    compObj.components.forEach(comp => {
+      component[comp.name] = componentParser(comp);
+    });
+    return component;
+  }
+  if (Array.isArray(compObj.components)) {
+    compObj.components = compObj.components.map(componentParser);
+  }
+  return compObj;
+};
+const inverseComponentParser = compObj => {
+  if (!compObj.type) {
+    const {
+      metadata,
+      _id,
+      ...existingComponent
+    } = compObj;
+    const newComponent = {
+      type: 'componentCollection',
+      name: '',
+      elementType: '',
+      label: '',
+      metadata: metadata || {},
+      components: [],
+      _id
+    };
+    newComponent.components = Object.values(existingComponent).map(inverseComponentParser);
+    return newComponent;
+  } else {
+    if (compObj.components) {
+      compObj.components = compObj.components.map(inverseComponentParser);
+    }
+    return compObj;
+  }
+};
+
 const useCoursePromotionPage = createUseStyles(theme => {
   console.log(theme, 'themere');
   return {
@@ -13668,8 +13702,8 @@ function CoursePromotionPagev2({
 }
 
 var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CoursePromotionPagev2
+    __proto__: null,
+    'default': CoursePromotionPagev2
 });
 
 export { Icon, PageRenderer$1 as PageRenderer, PageRenderer as PageRendererStatic, componentParser, getTheme, inverseComponentParser };