diy-template-components 5.1.1 → 5.1.4

package/build/index.js

@@ -32,7 +32,7 @@ function insertStyle(css) {
   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}");
+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) {
@@ -2508,9 +2508,9 @@ const getBorderRadius = roundness => {
       large: 24
     },
     pill: {
-      small: 9999,
-      regular: 9999,
-      large: 9999
+      small: 32,
+      regular: 32,
+      large: 32
     }
   };
   return mapping[roundness] || {
@@ -2562,7 +2562,7 @@ function FontSeeder({
   return null;
 }
 
-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}");
+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}");
 
 /**
  * Extracts YouTube video ID from various YouTube URL formats.
@@ -2667,7 +2667,7 @@ function withSectionBackground(WrappedSectionRenderer) {
       switch (type) {
         case 'color':
           return {
-            backgroundColor: value
+            background: value
           };
         case 'image':
           return {
@@ -3224,7 +3224,8 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     width: '100%',
     height: 'calc(100% - 100px)',
     // objectFit: 'cover',
-    objectPosition: '50% 50%'
+    objectPosition: '50% 50%',
+    borderRadius: theme?.shape?.borderRadius?.regular
   },
   absoluteButtonsBannerRight: {
     display: 'flex',
@@ -4199,7 +4200,7 @@ const useSectionStyles$6 = createUseStyles(theme => {
       flexDirection: 'column'
     },
     subTitleHeading: {
-      color: theme?.palette?.font?.invertedDefault,
+      color: theme?.colors?.font2,
       marginBottom: '8px',
       fontSize: theme.typography.fontSize.subHead,
       wordBreak: 'break-word',
@@ -4208,14 +4209,14 @@ const useSectionStyles$6 = createUseStyles(theme => {
     heading: {
       margin: '0',
       fontSize: theme.typography.fontSize.h1,
-      color: theme?.palette?.font?.invertedDefault,
+      color: theme?.colors?.font2,
       wordBreak: ({
         wordBreakValue
       }) => wordBreakValue || 'break-word',
       lineHeight: '80px'
     },
     description: {
-      color: theme?.palette?.font?.invertedDefault,
+      color: theme?.colors?.font2,
       lineHeight: '32px',
       fontWeight: '400',
       wordBreak: 'break-word',
@@ -4490,7 +4491,8 @@ const useSectionStyles$5 = createUseStyles(theme => {
       width: '100%',
       position: 'relative',
       zIndex: '2',
-      objectFit: 'cover'
+      objectFit: 'cover',
+      borderRadius: theme?.shape?.borderRadius?.regular
     },
     textContainer: {
       marginLeft: '72px',
@@ -5593,7 +5595,7 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       display: 'flex',
       alignItems: 'center',
       // marginTop: '16px',
-      borderRadius: '8px'
+      borderRadius: theme?.shape?.borderRadius?.regular
     },
     iframeContainer: {
       width: '100%',
@@ -6394,7 +6396,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       cursor: 'pointer'
     },
     singleCard: {
-      borderRadius: '24px',
+      borderRadius: theme?.shape?.borderRadius?.large,
       margin: '0 1px',
       width: 'calc(100% - 24px)',
       position: 'relative',
@@ -6417,7 +6419,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       height: ({
         cardsCount
       }) => cardsCount === 1 ? '480px' : '100%',
-      borderRadius: '24px',
+      borderRadius: theme?.shape?.borderRadius?.large,
       objectFit: 'cover',
       objectPosition: 'center',
       position: 'absolute',
@@ -6460,7 +6462,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
         height: ({
           cardsCount
         }) => cardsCount === 1 ? '360px' : '',
-        borderRadius: '16px'
+        borderRadius: theme?.shape?.borderRadius?.regular
       },
       singleCard: {
         width: ({
@@ -6609,7 +6611,7 @@ const useFaqListStyles = createUseStyles(theme => ({
   },
   container: {
     boxShadow: theme?.shadows?.secondary,
-    borderRadius: '8px',
+    borderRadius: theme?.shape?.borderRadius?.regular,
     backgroundColor: theme?.colors?.white
   },
   basicCardContainer: {
@@ -8282,7 +8284,7 @@ const useTeamStyles = createUseStyles(theme => {
       height: '208px',
       top: '0',
       left: '0',
-      borderRadius: '12px 12px 0px 0px',
+      borderRadius: `${theme?.shape?.borderRadius?.regular}px ${theme?.shape?.borderRadius?.regular}px 0 0`,
       objectFit: 'cover'
     },
     teamDetailsContainer: {
@@ -11468,7 +11470,7 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
   image: {
     width: '100%',
     height: '100%',
-    borderRadius: '16px',
+    borderRadius: theme?.shape?.borderRadius?.large,
     border: '1px solid var(--stroke, #D8E0F0)'
   },
   infoContainer: {
@@ -11476,7 +11478,7 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     gap: '16px',
     display: 'flex',
     flexDirection: 'column',
-    borderRadius: '16px',
+    borderRadius: theme?.shape?.borderRadius?.large,
     background: 'var(--Blue-Tertiary, #F4F9FF)',
     flex: 1
   },
@@ -11510,7 +11512,7 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    borderRadius: '16px',
+    borderRadius: theme?.shape?.borderRadius?.large,
     background: 'var(--Blue-Tertiary, #F4F9FF)',
     flexGrow: 1
   },
@@ -11570,7 +11572,7 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
       width: '150px'
     },
     image: {
-      borderRadius: '10px',
+      borderRadius: theme?.shape?.borderRadius?.regular,
       border: '1px solid var(--stroke, #D8E0F0)'
     },
     infoContainer: {
@@ -11792,7 +11794,6 @@ const useCounterSectionStyles = createUseStyles(theme => {
   return {
     section: {
       width: '100%',
-      borderRadius: theme.shape?.borderRadius?.regular || '12px',
       overflow: 'hidden',
       backgroundImage: ({
         backgroundImage
@@ -11857,9 +11858,6 @@ const useCounterSectionStyles = createUseStyles(theme => {
       }
     },
     '@media (max-width: 767px)': {
-      section: {
-        borderRadius: theme.shape?.borderRadius?.small || '8px'
-      },
       container: {
         padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.tiny}px`
       },
@@ -12478,10 +12476,10 @@ const useTimerCallPageStyles = createUseStyles(theme => ({
     }
   },
   timerAndCallContainer: {
-    padding: '72px',
-    background: '#F4F9FF',
-    borderRadius: '8px',
-    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
+    // padding: '72px',
+    // background: '#F4F9FF',
+    // borderRadius: '8px',
+    // boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
   },
   timerAndCallBox: {
     display: 'flex',
@@ -12611,7 +12609,7 @@ const TimerAndCall = ({
     }
   })) : null, nodeData?.timerButton?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement(Button, {
     style: {
-      width: '100%',
+      width: 'fit-content',
       fontWeight: '700',
       fontSize: '14px'
     },