diy-template-components 5.0.0 → 5.1.2

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) {
@@ -2466,6 +2466,25 @@ const fontWeight = {
   superBold: 900
 };
 
+/**
+ * Central font name resolver.
+ * Maps legacy/display names to canonical Google Fonts family names.
+ */
+const FONT_NAME_ALIASES = {
+  'Ibm Plex Sans': 'IBM Plex Sans'
+};
+
+/**
+ * Resolves a font family name to its canonical form for loading/rendering.
+ * @param {string} fontFamily - Raw font name (e.g. from metadata or user selection)
+ * @returns {string} Resolved font name for CSS/Google Fonts URL
+ */
+function resolveFont(fontFamily) {
+  if (!fontFamily || typeof fontFamily !== 'string') return fontFamily;
+  const normalized = fontFamily.trim();
+  return FONT_NAME_ALIASES[normalized] || normalized;
+}
+
 const getBorderRadius = roundness => {
   const mapping = {
     sharp: {
@@ -2502,8 +2521,9 @@ const getBorderRadius = roundness => {
 };
 function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile, roundness = 'rounded') {
   const palette = palettes[colorTheme] || palettes['blue'];
+  const resolvedFont = resolveFont(fontFamily);
   const typography = {
-    fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
+    fontFamily: `"${resolvedFont}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
     fontSize: isMobile ? fontSizeMob : fontSize,
     fontWeight
   };
@@ -2520,62 +2540,29 @@ function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile, roundness
   };
 }
 
-const fontComponents = {
-  Rubik,
-  'Ibm Plex Sans': IbmPlexSans,
-  'Merriweather Sans': MerriweatherSans,
-  'Arima Madurai': ArimaMadurai,
-  'Nanum Square': NanumSquare
-};
-const getFontComponent = font => fontComponents[font] || (() => null);
+const NANUM_SQUARE_URL = 'https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css';
+const FONT_LINK_ID_PREFIX = 'diy-font-seeder-';
+const getGoogleFontsUrl = fontFamily => `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g, '+')}:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap`;
 function FontSeeder({
   fontFamily
 }) {
-  const Comp = getFontComponent(fontFamily);
-  return /*#__PURE__*/React__default["default"].createElement(Comp, null);
-}
-const useRubikFont = reactJss.createUseStyles({
-  '@import': `url('https://fonts.googleapis.com/css2?family=Lato&family=Rubik:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap')`
-});
-function Rubik() {
-  // to import "Rubik" font css
-  useRubikFont();
-  return null;
-}
-const useIbmPlexSansFont = reactJss.createUseStyles({
-  '@import': 'url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap)'
-});
-function IbmPlexSans() {
-  // to import "Ibm Plex Sans" font css
-  useIbmPlexSansFont();
-  return null;
-}
-const useMerriweatherSansFont = reactJss.createUseStyles({
-  '@import': 'url(https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap)'
-});
-function MerriweatherSans() {
-  // to import "Merriweather Sans" font css
-  useMerriweatherSansFont();
-  return null;
-}
-const useArimaMaduraiFont = reactJss.createUseStyles({
-  '@import': 'url(https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@400;500;700&display=swap)'
-});
-function ArimaMadurai() {
-  // to import "Arima Madurai" font css
-  useArimaMaduraiFont();
-  return null;
-}
-const useNanumSqaureFont = reactJss.createUseStyles({
-  '@import': 'url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css)'
-});
-function NanumSquare() {
-  // to import "Nanum Square" font css
-  useNanumSqaureFont();
+  React.useEffect(() => {
+    if (!fontFamily || typeof document === 'undefined') return;
+    const normalizedName = String(fontFamily).trim();
+    const fontForUrl = resolveFont(normalizedName);
+    const url = normalizedName.toLowerCase() === 'nanum square' ? NANUM_SQUARE_URL : getGoogleFontsUrl(fontForUrl);
+    const linkId = `${FONT_LINK_ID_PREFIX}${normalizedName.replace(/\s+/g, '-')}`;
+    if (document.getElementById(linkId)) return;
+    const link = document.createElement('link');
+    link.id = linkId;
+    link.rel = 'stylesheet';
+    link.href = url;
+    document.head.appendChild(link);
+  }, [fontFamily]);
   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.
@@ -2680,7 +2667,7 @@ function withSectionBackground(WrappedSectionRenderer) {
       switch (type) {
         case 'color':
           return {
-            backgroundColor: value
+            background: value
           };
         case 'image':
           return {
@@ -3040,8 +3027,9 @@ const generateTheme = (theme = 'blue', fontFamily = 'Arial', isMobile, roundness
     headerText: allColors[color],
     headerHover: allColors['tertiary' + color]
   };
+  const resolvedFont = resolveFont(fontFamily);
   const typography = {
-    fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
+    fontFamily: `"${resolvedFont}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
     fontSize: isMobile ? fontSizeMob : fontSize,
     fontWeight
   };
@@ -12490,10 +12478,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',
@@ -12623,7 +12611,7 @@ const TimerAndCall = ({
     }
   })) : null, nodeData?.timerButton?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement(Button, {
     style: {
-      width: '100%',
+      width: 'fit-content',
       fontWeight: '700',
       fontSize: '14px'
     },