diy-template-components 4.0.4 → 4.0.5

package/build/index.js

@@ -21,6 +21,19 @@ var Countdown__default = /*#__PURE__*/_interopDefaultLegacy(Countdown);
 var koreanLocale__default = /*#__PURE__*/_interopDefaultLegacy(koreanLocale);
 var ReactDOMServer__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOMServer);
 
+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++) {
@@ -560,7 +573,7 @@ function useLinkBuilder(data) {
     basePath,
     isMasterTemplate
   } = React.useContext(PageContext);
-  if (isEdit || !data.isLink) {
+  if (!data || isEdit || !data.isLink) {
     return null;
   }
   if (data?.isExistingLink === false) {
@@ -580,7 +593,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' : ''}`;
 }
 
@@ -2297,11 +2310,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}`
@@ -2458,7 +2466,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"`,
@@ -2466,7 +2508,7 @@ function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile) {
     fontWeight
   };
   const shape = {
-    borderRadius
+    borderRadius: getBorderRadius(roundness)
   };
   return {
     palette,
@@ -2533,17 +2575,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}");
 
 /**
@@ -2844,7 +2875,8 @@ function SectionRenderer$1({
 
 const defaultTheme = {
   color: 'blue',
-  font: 'rubik'
+  font: 'rubik',
+  roundness: 'rounded'
 };
 const defaultLayout = {
   containerWidth: 1440
@@ -2918,7 +2950,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) {
@@ -3019,7 +3051,7 @@ const generateTheme = (theme = 'blue', fontFamily = 'Arial', isMobile) => {
     margin: isMobile ? mobileMargin : margin
   };
   return {
-    ...getTheme(theme),
+    ...getTheme(theme, fontFamily, isMobile, roundness),
     typography,
     spacing,
     colors
@@ -3031,7 +3063,8 @@ function PageRenderer$1({
     metadata: {
       theme: {
         color = defaultTheme.color,
-        font = defaultTheme.font
+        font = defaultTheme.font,
+        roundness = defaultTheme.roundness
       } = defaultTheme,
       layout = defaultLayout
     } = defaultMetadata,
@@ -3083,7 +3116,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 = React.useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
+  const theme = React.useMemo(() => generateTheme(color, font, context.isMobile, roundness), [color, font, context.isMobile, roundness]);
   const Wrapper = SectionWrapper || React.Fragment;
   return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
     theme: theme
@@ -3560,9 +3593,9 @@ function BannerCarouselRight({
   });
   const [{
     bannerCarousel
-  }] = sectionData.components;
-  const Wrapper = bannerCarousel.components.length > 1 ? Carousel : React.Fragment;
-  const wrapperProps = bannerCarousel.components.length > 1 ? {
+  }] = sectionData?.components;
+  const Wrapper = bannerCarousel?.components?.length > 1 ? Carousel : React.Fragment;
+  const wrapperProps = bannerCarousel?.components?.length > 1 ? {
     buttonContainerClass: classes.absoluteButtonsBannerRight,
     inverted: false
   } : {};
@@ -3570,7 +3603,7 @@ function BannerCarouselRight({
     className: classes.bannerCarouselRightSection
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$5, {
+  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel?.components?.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$5, {
     nodeData: node,
     key: idx /* or some other unique property */,
     sectionIndex: sectionIndex,
@@ -3579,8 +3612,8 @@ function BannerCarouselRight({
 }
 
 var index$t = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselRight
+    __proto__: null,
+    'default': BannerCarouselRight
 });
 
 const useSectionStyles$8 = createUseStyles(theme => ({
@@ -3803,8 +3836,8 @@ function List({
 }
 
 var index$s = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': List
+    __proto__: null,
+    'default': List
 });
 
 const useSectionStyles$7 = createUseStyles(theme => {
@@ -4093,15 +4126,15 @@ function BannerCarouselCenter({
   });
   const [{
     bannerCarousel
-  }] = sectionData.components;
-  const Wrapper = bannerCarousel.components.length > 1 ? Carousel : React.Fragment;
-  const wrapperProps = bannerCarousel.components.length > 1 ? {
+  }] = sectionData?.components;
+  const Wrapper = bannerCarousel?.components?.length > 1 ? Carousel : React.Fragment;
+  const wrapperProps = bannerCarousel?.components?.length > 1 ? {
     buttonContainerClass: classes.absoluteButtons,
     inverted: true
   } : {};
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.bannerCarouselCenterSection
-  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$4, {
+  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel?.components?.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$4, {
     nodeData: node,
     isCustomWebsite: isCustomWebsite,
     key: idx /* or some other unique property */,
@@ -4111,8 +4144,8 @@ function BannerCarouselCenter({
 }
 
 var index$r = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselCenter
+    __proto__: null,
+    'default': BannerCarouselCenter
 });
 
 const useSectionStyles$6 = createUseStyles(theme => {
@@ -4406,8 +4439,8 @@ function BannerCarouselCenterv2({
 }
 
 var index$q = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselCenterv2
+    __proto__: null,
+    'default': BannerCarouselCenterv2
 });
 
 const useSectionStyles$5 = createUseStyles(theme => {
@@ -4632,13 +4665,13 @@ function BannerCarouselLeft({
   });
   const [{
     bannerCarousel
-  }] = sectionData.components;
-  const Wrapper = bannerCarousel.components.length > 1 ? Carousel : React.Fragment;
+  }] = sectionData?.components;
+  const Wrapper = bannerCarousel?.components?.length > 1 ? Carousel : React.Fragment;
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, null, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$2, {
+  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, null, bannerCarousel?.components?.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$2, {
     nodeData: node,
     key: idx /* or some other unique property */,
     sectionIndex: sectionIndex,
@@ -4647,8 +4680,8 @@ function BannerCarouselLeft({
 }
 
 var index$p = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselLeft
+    __proto__: null,
+    'default': BannerCarouselLeft
 });
 
 const useSectionStyles$4 = createUseStyles(theme => ({
@@ -5043,8 +5076,8 @@ function SubscribeToNewsletter({
 }
 
 var index$o = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': SubscribeToNewsletter
+    __proto__: null,
+    'default': SubscribeToNewsletter
 });
 
 const useTestimonialStyles = createUseStyles(theme => ({
@@ -5331,8 +5364,8 @@ function Testimonials({
 }
 
 var index$n = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Testimonials
+    __proto__: null,
+    'default': Testimonials
 });
 
 const loaderStyle = theme => ({
@@ -5735,8 +5768,8 @@ function VideoTestimonial({
 }
 
 var index$m = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': VideoTestimonial
+    __proto__: null,
+    'default': VideoTestimonial
 });
 
 const useVideoStyles = createUseStyles(theme => {
@@ -5971,8 +6004,8 @@ function Video({
 }
 
 var index$l = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Video
+    __proto__: null,
+    'default': Video
 });
 
 const useSectionStyles$3 = createUseStyles(theme => ({
@@ -6207,8 +6240,8 @@ function Info({
 }
 
 var index$k = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Info
+    __proto__: null,
+    'default': Info
 });
 
 const useSectionStyles$2 = createUseStyles(theme => ({
@@ -6326,8 +6359,8 @@ const TextSection = ({
 };
 
 var index$j = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TextSection
+    __proto__: null,
+    'default': TextSection
 });
 
 const usePhotoGalleryStyles = createUseStyles(theme => {
@@ -6549,8 +6582,8 @@ function PhotoGallery({
 }
 
 var index$i = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': PhotoGallery
+    __proto__: null,
+    'default': PhotoGallery
 });
 
 const useFaqListStyles = createUseStyles(theme => ({
@@ -6732,8 +6765,8 @@ const Accordion = ({
 };
 
 var index$h = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': FAQListing
+    __proto__: null,
+    'default': FAQListing
 });
 
 const useTextGridStyles = createUseStyles(theme => ({
@@ -6903,8 +6936,8 @@ const TextGrid = ({
 };
 
 var index$g = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TextGrid
+    __proto__: null,
+    'default': TextGrid
 });
 
 const useCourseStyles = createUseStyles(theme => {
@@ -8187,8 +8220,8 @@ function SimpleCardsContainer({
 }
 
 var index$f = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': courses
+    __proto__: null,
+    'default': courses
 });
 
 const useTeamStyles = createUseStyles(theme => {
@@ -8505,8 +8538,8 @@ function TeamCard({
 }
 
 var index$e = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TeamCard
+    __proto__: null,
+    'default': TeamCard
 });
 
 const useSectionStyles$1 = createUseStyles(theme => ({
@@ -8926,8 +8959,8 @@ function FormEnquiry({
 }
 
 var index$d = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': FormEnquiry
+    __proto__: null,
+    'default': FormEnquiry
 });
 
 const useSectionStyles = createUseStyles(theme => ({
@@ -9348,8 +9381,8 @@ function Contact({
 }
 
 var index$c = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Contact
+    __proto__: null,
+    'default': Contact
 });
 
 const useWebinarPromotionPage = createUseStyles(theme => {
@@ -9825,12 +9858,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',
@@ -10412,8 +10444,8 @@ function CoursePromotionPage({
 }
 
 var index$a = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CoursePromotionPage
+    __proto__: null,
+    'default': CoursePromotionPage
 });
 
 const useFormPageStyles = createUseStyles(theme => ({
@@ -10775,8 +10807,8 @@ const FormPage = ({
 };
 
 var index$9 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': FormPage
+    __proto__: null,
+    'default': FormPage
 });
 
 const useTilesStyles = createUseStyles(theme => {
@@ -10923,8 +10955,8 @@ function Tiles({
 }
 
 var index$8 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Tiles
+    __proto__: null,
+    'default': Tiles
 });
 
 const useEmailStyles = createUseStyles(theme => ({
@@ -11396,8 +11428,8 @@ function EmailDripMarket({
 }
 
 var index$7 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': EmailDripMarket
+    __proto__: null,
+    'default': EmailDripMarket
 });
 
 const useAboutInstituteStyles = createUseStyles(theme => ({
@@ -11764,8 +11796,8 @@ function ABOUT_INSTITUTE({
 }
 
 var index$6 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': ABOUT_INSTITUTE
+    __proto__: null,
+    'default': ABOUT_INSTITUTE
 });
 
 const useCounterSectionStyles = createUseStyles(theme => {
@@ -11911,8 +11943,8 @@ function CounterSection({
 }
 
 var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CounterSection
+    __proto__: null,
+    'default': CounterSection
 });
 
 const BREAKPOINTS = {
@@ -12279,9 +12311,9 @@ function StickyCta({
 }
 
 var index$4 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': StickyCta,
-  WhatsAppIcon: WhatsAppIcon
+    __proto__: null,
+    'default': StickyCta,
+    WhatsAppIcon: WhatsAppIcon
 });
 
 /**
@@ -12442,8 +12474,8 @@ function CustomHtmlRender({
 }
 
 var index$3 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CustomHtmlRender
+    __proto__: null,
+    'default': CustomHtmlRender
 });
 
 const useTimerCallPageStyles = createUseStyles(theme => ({
@@ -12612,8 +12644,8 @@ const TimerAndCall = ({
 };
 
 var index$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TimerAndCall
+    __proto__: null,
+    'default': TimerAndCall
 });
 
 const TYPE_TO_COMPONENT_MAP = {
@@ -12688,7 +12720,8 @@ function PageRenderer({
     metadata: {
       theme: {
         color = defaultTheme.color,
-        font = defaultTheme.font
+        font = defaultTheme.font,
+        roundness = defaultTheme.roundness
       } = defaultTheme,
       layout = defaultLayout
     } = defaultMetadata,
@@ -12739,7 +12772,7 @@ function PageRenderer({
     countryCode,
     currencySymbol
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
-  const theme = React.useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
+  const theme = React.useMemo(() => generateTheme(color, font, context.isMobile, roundness), [color, font, context.isMobile, roundness]);
   const Wrapper = SectionWrapper || React.Fragment;
   return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
     theme: theme
@@ -13049,8 +13082,8 @@ function VideoWorkshopPromotion({
 }
 
 var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': VideoWorkshopPromotion
+    __proto__: null,
+    'default': VideoWorkshopPromotion
 });
 
 const useCoursePromotionPage = createUseStyles(theme => {
@@ -13682,8 +13715,8 @@ function CoursePromotionPagev2({
 }
 
 var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CoursePromotionPagev2
+    __proto__: null,
+    'default': CoursePromotionPagev2
 });
 
 exports.Icon = Icon;