diy-template-components 5.1.1 → 5.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.js CHANGED
@@ -32,7 +32,7 @@ function insertStyle(css) {
32
32
  return css;
33
33
  }
34
34
 
35
- 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}");
35
+ 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}");
36
36
 
37
37
  function _extends() {
38
38
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -2562,7 +2562,7 @@ function FontSeeder({
2562
2562
  return null;
2563
2563
  }
2564
2564
 
2565
- 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}");
2565
+ 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}");
2566
2566
 
2567
2567
  /**
2568
2568
  * Extracts YouTube video ID from various YouTube URL formats.
@@ -2667,7 +2667,7 @@ function withSectionBackground(WrappedSectionRenderer) {
2667
2667
  switch (type) {
2668
2668
  case 'color':
2669
2669
  return {
2670
- backgroundColor: value
2670
+ background: value
2671
2671
  };
2672
2672
  case 'image':
2673
2673
  return {
@@ -12478,10 +12478,10 @@ const useTimerCallPageStyles = createUseStyles(theme => ({
12478
12478
  }
12479
12479
  },
12480
12480
  timerAndCallContainer: {
12481
- padding: '72px',
12482
- background: '#F4F9FF',
12483
- borderRadius: '8px',
12484
- boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
12481
+ // padding: '72px',
12482
+ // background: '#F4F9FF',
12483
+ // borderRadius: '8px',
12484
+ // boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
12485
12485
  },
12486
12486
  timerAndCallBox: {
12487
12487
  display: 'flex',
@@ -12611,7 +12611,7 @@ const TimerAndCall = ({
12611
12611
  }
12612
12612
  })) : null, nodeData?.timerButton?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement(Button, {
12613
12613
  style: {
12614
- width: '100%',
12614
+ width: 'fit-content',
12615
12615
  fontWeight: '700',
12616
12616
  fontSize: '14px'
12617
12617
  },