diy-template-components 5.1.2 → 5.10.0

package/build/index.js

@@ -9,6 +9,7 @@ var moment = require('moment');
 var Countdown = require('react-countdown');
 var koreanLocale = require('moment/locale/ko');
 var ReactDOMServer = require('react-dom/server');
+require('@storybook/theming');
 var reactJss = require('react-jss');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -2508,9 +2509,9 @@ const getBorderRadius = roundness => {
       large: 24
     },
     pill: {
-      small: 9999,
-      regular: 9999,
-      large: 9999
+      small: 32,
+      regular: 32,
+      large: 32
     }
   };
   return mapping[roundness] || {
@@ -3224,7 +3225,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 +4201,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 +4210,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 +4492,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 +5596,7 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       display: 'flex',
       alignItems: 'center',
       // marginTop: '16px',
-      borderRadius: '8px'
+      borderRadius: theme?.shape?.borderRadius?.regular
     },
     iframeContainer: {
       width: '100%',
@@ -6394,7 +6397,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 +6420,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 +6463,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
         height: ({
           cardsCount
         }) => cardsCount === 1 ? '360px' : '',
-        borderRadius: '16px'
+        borderRadius: theme?.shape?.borderRadius?.regular
       },
       singleCard: {
         width: ({
@@ -6609,7 +6612,7 @@ const useFaqListStyles = createUseStyles(theme => ({
   },
   container: {
     boxShadow: theme?.shadows?.secondary,
-    borderRadius: '8px',
+    borderRadius: theme?.shape?.borderRadius?.regular,
     backgroundColor: theme?.colors?.white
   },
   basicCardContainer: {
@@ -8282,7 +8285,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 +11471,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 +11479,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 +11513,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 +11573,7 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
       width: '150px'
     },
     image: {
-      borderRadius: '10px',
+      borderRadius: theme?.shape?.borderRadius?.regular,
       border: '1px solid var(--stroke, #D8E0F0)'
     },
     infoContainer: {
@@ -11792,14 +11795,13 @@ const useCounterSectionStyles = createUseStyles(theme => {
   return {
     section: {
       width: '100%',
-      borderRadius: theme.shape?.borderRadius?.regular || '12px',
       overflow: 'hidden',
       backgroundImage: ({
         backgroundImage
       } = {}) => backgroundImage ? `url("${backgroundImage}")` : 'none',
       backgroundColor: ({
         backgroundColor
-      } = {}) => backgroundColor || '#f8f8fa',
+      } = {}) => backgroundColor || theme?.colors?.background2,
       backgroundSize: 'cover',
       backgroundPosition: 'center',
       backgroundRepeat: 'no-repeat',
@@ -11820,7 +11822,8 @@ const useCounterSectionStyles = createUseStyles(theme => {
     },
     grid: {
       display: 'grid',
-      gridTemplateColumns: 'repeat(4, 1fr)',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+      // fits 4 columns in desktop
       gap: ({
         isMobile
       } = {}) => isMobile ? '24px' : '32px',
@@ -11839,7 +11842,7 @@ const useCounterSectionStyles = createUseStyles(theme => {
       fontSize: '64px',
       fontWeight: theme.typography?.fontWeight?.bold,
       lineHeight: 1.1,
-      color: 'rgba(247, 37, 133, 1)' ,
+      color: theme?.colors?.AccentColor,
       wordBreak: 'break-word'
     },
     description: {
@@ -11847,7 +11850,7 @@ const useCounterSectionStyles = createUseStyles(theme => {
       fontSize: '20px',
       lineHeight: 1.4,
       fontWeight: '700',
-      color: 'rgba(51, 51, 51, 1)' ,
+      color: theme?.colors?.font3,
       wordBreak: 'break-word'
     },
     '@media (max-width: 1024px)': {
@@ -11857,9 +11860,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`
       },
@@ -11880,6 +11880,83 @@ const useCounterSectionStyles = createUseStyles(theme => {
   };
 });
 
+const DURATION_MS = 2000;
+const EASING = t => 1 - Math.pow(1 - t, 3); // easeOutCubic
+
+function parseCounterValue(value) {
+  if (value == null || value === '') return null;
+  const match = String(value).trim().match(/^([\d.]+)(.*)$/);
+  if (!match) return null;
+  const num = parseFloat(match[1]);
+  if (Number.isNaN(num)) return null;
+  return {
+    end: num,
+    suffix: match[2] || ''
+  };
+}
+function AnimatedCounter({
+  value,
+  className,
+  refSetter
+}) {
+  const elRef = React.useRef(null);
+  const rafIdRef = React.useRef(null);
+  const hasAnimatedRef = React.useRef(false);
+  React.useLayoutEffect(() => {
+    hasAnimatedRef.current = false; // Reset so we can re-animate when value changes (e.g. live edit)
+    const parsed = parseCounterValue(value);
+    if (!parsed || !elRef.current) return;
+    const observer = new IntersectionObserver(entries => {
+      const [entry] = entries;
+      if (!entry.isIntersecting || hasAnimatedRef.current) return;
+      hasAnimatedRef.current = true;
+      const startTime = performance.now();
+      const {
+        end,
+        suffix
+      } = parsed;
+      const tick = now => {
+        const elapsed = now - startTime;
+        const progress = Math.min(elapsed / DURATION_MS, 1);
+        const eased = EASING(progress);
+        const current = eased * end;
+        if (elRef.current) {
+          const displayValue = Number.isInteger(end) ? Math.round(current) : parseFloat(current.toFixed(2));
+          elRef.current.textContent = displayValue + suffix;
+        }
+        if (progress < 1) {
+          rafIdRef.current = requestAnimationFrame(tick);
+        }
+      };
+      rafIdRef.current = requestAnimationFrame(tick);
+    }, {
+      threshold: 0.2
+    });
+    observer.observe(elRef.current);
+    return () => {
+      observer.disconnect();
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    };
+  }, [value]);
+  const parsed = parseCounterValue(value);
+  const setRef = el => {
+    elRef.current = el;
+    refSetter?.(el);
+  };
+  if (parsed) {
+    return /*#__PURE__*/React__default["default"].createElement("h2", {
+      ref: setRef,
+      className: className
+    }, "0", parsed.suffix);
+  }
+  return /*#__PURE__*/React__default["default"].createElement("h2", {
+    ref: refSetter,
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: value
+    }
+  });
+}
 function CounterSection({
   sectionData,
   sectionIndex
@@ -11890,44 +11967,49 @@ function CounterSection({
     },
     isMobile
   } = React.useContext(PageContext);
-  console.log('llll', sectionData);
-  sectionData.components = sectionData.components;
   const metadata = sectionData.metadata || {};
   const backgroundImage = metadata.backgroundImage || '';
-  const backgroundColor = metadata.backgroundColor || '#f8f8fa';
+  const backgroundColor = metadata.backgroundColor;
   const classes = useCounterSectionStyles({
     containerWidth,
     isMobile,
     backgroundImage: backgroundImage || null,
     backgroundColor
   });
-  const cardData = sectionData?.components[0];
-  const [sectionComponent] = sectionData.components || [];
+  const cardData = sectionData?.components?.[0];
+  const [sectionComponent] = sectionData?.components || [];
   const counterSection = sectionComponent?.counterSection;
-  counterSection?.components || [];
+  const counters = counterSection?.components || [];
+  const items = cardData?.contentList?.components || counters;
   if (!cardData) return null;
+  const getValue = item => item?.contentHeading?.metadata?.value ?? item?.value?.metadata?.value;
+  const getDescription = item => item?.contentPara?.metadata?.value ?? item?.description?.metadata?.value;
+  const getValueRefSetter = item => item?.contentHeading?.refSetter ?? item?.value?.refSetter;
+  const getDescRefSetter = item => item?.contentPara?.refSetter ?? item?.description?.refSetter;
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.container
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.grid
-  }, cardData?.contentList?.components?.map((item, index) => /*#__PURE__*/React__default["default"].createElement("div", {
-    key: item._id || index,
-    className: classes.counterItem
-  }, item.contentHeading?.metadata?.value != null && item.contentHeading?.metadata?.value !== '' && /*#__PURE__*/React__default["default"].createElement("h2", {
-    ref: item.contentHeading?.refSetter,
-    className: classes.value,
-    dangerouslySetInnerHTML: {
-      __html: item.contentHeading.metadata.value
-    }
-  }), item.contentPara?.metadata?.value != null && item.contentPara?.metadata?.value !== '' && /*#__PURE__*/React__default["default"].createElement("p", {
-    ref: item.contentPara?.refSetter,
-    className: classes.description,
-    dangerouslySetInnerHTML: {
-      __html: item.contentPara.metadata.value
-    }
-  }))))));
+  }, items?.map((item, index) => {
+    const value = getValue(item);
+    const description = getDescription(item);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: item._id || index,
+      className: classes.counterItem
+    }, value != null && value !== '' && /*#__PURE__*/React__default["default"].createElement(AnimatedCounter, {
+      value: value,
+      className: classes.value,
+      refSetter: getValueRefSetter(item)
+    }), description != null && description !== '' && /*#__PURE__*/React__default["default"].createElement("p", {
+      ref: getDescRefSetter(item),
+      className: classes.description,
+      dangerouslySetInnerHTML: {
+        __html: description
+      }
+    }));
+  }))));
 }
 
 var index$5 = /*#__PURE__*/Object.freeze({
@@ -11944,12 +12026,13 @@ const BREAKPOINTS = {
 /**
  * Get current breakpoint from window width
  */
-const getBreakpoint = width => {
+const getBreakpoint = (width, isMobile) => {
+  if (isMobile) return 'mobile';
   if (width >= BREAKPOINTS.desktop) return 'desktop';
   if (width >= BREAKPOINTS.tablet) return 'tablet';
   return 'mobile';
 };
-const stickyBarBase = {
+const getStickyBarBase = theme => ({
   position: 'fixed',
   left: 0,
   right: 0,
@@ -11958,100 +12041,86 @@ const stickyBarBase = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: '#F8F9FB',
-  boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.06)',
-  borderTop: '1px solid #E5E7EB'
-};
-const stickyBarResponsive = {
-  mobile: {
-    ...stickyBarBase,
-    padding: '12px 16px',
-    gap: '12px',
-    flexDirection: 'column',
-    alignItems: 'stretch'
-  },
-  tablet: {
-    ...stickyBarBase,
-    padding: '14px 24px',
-    gap: '16px',
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  desktop: {
-    ...stickyBarBase,
-    padding: '16px 32px',
-    gap: '24px',
-    flexDirection: 'row',
-    alignItems: 'center'
-  }
+  fontFamily: theme?.typography?.fontFamily,
+  backgroundColor: theme?.colors?.ctaColor || '#FFFFFF',
+  boxShadow: theme?.shadows?.secondary ?? '0 -2px 8px rgba(0, 0, 0, 0.06)',
+  borderTop: `1px solid ${theme?.colors?.border2}`
+});
+const getStickyBarResponsive = (theme, bgColor) => {
+  const base = getStickyBarBase(theme);
+  return {
+    mobile: {
+      ...base,
+      padding: '12px 16px',
+      gap: '12px',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      background: '#FFFFFF',
+      color: theme?.colors?.CtaTextColor || 'white'
+    },
+    tablet: {
+      ...base,
+      padding: '14px 24px',
+      gap: '16px',
+      flexDirection: 'row',
+      alignItems: 'center',
+      background: '#FFFFFF',
+      color: theme?.colors?.CtaTextColor || 'white'
+    },
+    desktop: {
+      ...base,
+      padding: '16px 32px',
+      gap: '24px',
+      flexDirection: 'row',
+      alignItems: 'center',
+      background: '#FFFFFF',
+      color: theme?.colors?.CtaTextColor || 'white'
+    }
+  };
 };
-const getStickyBarStyle = breakpoint => stickyBarResponsive[breakpoint] || stickyBarResponsive.mobile;
-const stickyTextBase = {
-  color: '#343A40',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+const getStickyBarStyle = (breakpoint, theme = {}, bgColor) => getStickyBarResponsive(theme)[breakpoint] || getStickyBarResponsive(theme).mobile;
+const getStickyTextBase = theme => ({
+  color: theme?.colors?.font2,
+  fontFamily: theme?.typography?.fontFamily ?? 'inherit',
   margin: 0
+});
+const getStickyTextResponsive = (theme, bgColor) => {
+  const base = getStickyTextBase(theme);
+  return {
+    mobile: {
+      ...base,
+      fontSize: '13px',
+      lineHeight: 1.4,
+      textAlign: 'center',
+      color: '#000000' ,
+      background: '#FFFFFF'
+    },
+    tablet: {
+      ...base,
+      fontSize: '14px',
+      lineHeight: 1.45,
+      textAlign: 'left',
+      color: '#000000' ,
+      background: '#FFFFFF'
+    },
+    desktop: {
+      ...base,
+      fontSize: '15px',
+      lineHeight: 1.5,
+      textAlign: 'left',
+      color: '#000000' ,
+      background: '#FFFFFF'
+    }
+  };
 };
-const stickyTextResponsive = {
-  mobile: {
-    ...stickyTextBase,
-    fontSize: '13px',
-    lineHeight: 1.4,
-    textAlign: 'center'
-  },
-  tablet: {
-    ...stickyTextBase,
-    fontSize: '14px',
-    lineHeight: 1.45,
-    textAlign: 'left'
-  },
-  desktop: {
-    ...stickyTextBase,
-    fontSize: '15px',
-    lineHeight: 1.5,
-    textAlign: 'left'
-  }
-};
-const getStickyTextStyle = breakpoint => stickyTextResponsive[breakpoint] || stickyTextResponsive.mobile;
-const stickyButtonBase = {
-  backgroundColor: '#3366FF',
-  color: '#FFFFFF',
-  border: 'none',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  fontWeight: 600,
-  textTransform: 'uppercase',
-  letterSpacing: '0.02em',
-  cursor: 'pointer',
-  whiteSpace: 'nowrap',
-  flexShrink: 0
-};
-const stickyButtonResponsive = {
-  mobile: {
-    ...stickyButtonBase,
-    padding: '10px 20px',
-    fontSize: '12px',
-    borderRadius: '6px'
-  },
-  tablet: {
-    ...stickyButtonBase,
-    padding: '12px 24px',
-    fontSize: '13px',
-    borderRadius: '8px'
-  },
-  desktop: {
-    ...stickyButtonBase,
-    padding: '14px 28px',
-    fontSize: '14px',
-    borderRadius: '8px'
-  }
-};
-const getStickyButtonStyle = breakpoint => stickyButtonResponsive[breakpoint] || stickyButtonResponsive.mobile;
+const getStickyTextStyle = (breakpoint, theme = {}) => getStickyTextResponsive(theme)[breakpoint] || getStickyTextResponsive(theme).mobile;
 
 // --- Floating (WhatsApp) type ---
 
-const floatingButtonBase = {
+const getFloatingButtonBase = theme => ({
   position: 'fixed',
   bottom: 24,
-  right: 24,
+  right: 9,
   width: 'fit-content',
   marginLeft: 'auto',
   zIndex: 9999,
@@ -12059,47 +12128,50 @@ const floatingButtonBase = {
   alignItems: 'center',
   gap: '10px',
   padding: '12px 20px',
-  backgroundColor: '#FFFFFF',
-  border: '1px solid #E5E7EB',
+  backgroundColor: theme?.colors?.ctaColor || '#FFFFFF',
+  border: `1px solid ${theme?.palette?.border?.secondary ?? '#E5E7EB'}`,
   borderRadius: '9999px',
-  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+  boxShadow: theme?.shadows?.primary ?? '0 4px 12px rgba(0, 0, 0, 0.1)',
   cursor: 'pointer',
   textDecoration: 'none',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  fontWeight: 700,
+  fontFamily: theme?.typography?.fontFamily ?? 'inherit',
+  fontWeight: theme?.typography?.fontWeight?.bold ?? 700,
   fontSize: '14px',
   textTransform: 'uppercase',
   letterSpacing: '0.02em',
-  color: '#000000',
+  color: theme?.colors?.CtaTextColor || 'white',
   transition: 'box-shadow 0.2s ease, transform 0.2s ease'
+});
+const getFloatingButtonResponsive = theme => {
+  const base = getFloatingButtonBase(theme);
+  return {
+    mobile: {
+      ...base,
+      bottom: 142,
+      left: 16,
+      padding: '10px 16px',
+      gap: '8px',
+      fontSize: '12px'
+    },
+    tablet: {
+      ...base,
+      bottom: 20,
+      left: 20,
+      padding: '12px 18px',
+      gap: '10px',
+      fontSize: '13px'
+    },
+    desktop: {
+      ...base,
+      bottom: 24,
+      left: 24,
+      padding: '12px 20px',
+      gap: '10px',
+      fontSize: '14px'
+    }
+  };
 };
-const floatingButtonResponsive = {
-  mobile: {
-    ...floatingButtonBase,
-    bottom: 16,
-    left: 16,
-    padding: '10px 16px',
-    gap: '8px',
-    fontSize: '12px'
-  },
-  tablet: {
-    ...floatingButtonBase,
-    bottom: 20,
-    left: 20,
-    padding: '12px 18px',
-    gap: '10px',
-    fontSize: '13px'
-  },
-  desktop: {
-    ...floatingButtonBase,
-    bottom: 24,
-    left: 24,
-    padding: '12px 20px',
-    gap: '10px',
-    fontSize: '14px'
-  }
-};
-const getFloatingButtonStyle = breakpoint => floatingButtonResponsive[breakpoint] || floatingButtonResponsive.mobile;
+const getFloatingButtonStyle = (breakpoint, theme = {}) => getFloatingButtonResponsive(theme)[breakpoint] || getFloatingButtonResponsive(theme).mobile;
 const whatsAppIconSvgSize = {
   mobile: 24,
   tablet: 26,
@@ -12187,12 +12259,17 @@ function StickyCta({
   whatsAppLabel = 'SUPPORT',
   whatsAppIconColor,
   whatsAppButtonBackgroundColor,
-  iconImageUrl
+  iconImageUrl,
+  nodeData,
+  extraProps
 }) {
-  console.log('nishu03333', sectionData);
+  const {
+    isMobile
+  } = React.useContext(PageContext);
   const node = sectionData?.components?.[0];
   const contentList = node?.contentList?.components || [];
   const showEditHint = sectionData?.isDefaultEditor ?? false;
+  sectionData?.bgSection?.components?.[0]?.sectionBgData?.metadata?.value;
   const propsFromSection = node ? {
     type: node?.title?.metadata?.value ?? type,
     stickyMessage: contentList[1]?.contentPara?.metadata?.value ?? stickyMessage,
@@ -12215,8 +12292,9 @@ function StickyCta({
     whatsAppButtonBackgroundColor,
     iconImageUrl
   };
-  const whatsAppUrl = p?.whatsAppPhoneNumber ? p?.whatsAppPhoneNumber : buildWhatsAppUrl(p?.whatsAppPhoneNumber);
-  const [breakpoint, setBreakpoint] = React.useState(() => typeof window !== 'undefined' ? getBreakpoint(window.innerWidth) : 'mobile');
+  const whatsAppUrl = buildWhatsAppUrl(p?.whatsAppPhoneNumber) ?? p?.whatsAppHref ?? '#';
+  const theme = useTheme() || {};
+  const [breakpoint, setBreakpoint] = React.useState(() => typeof window !== 'undefined' ? getBreakpoint(window.innerWidth, isMobile) : 'mobile');
   React.useEffect(() => {
     if (typeof window === 'undefined') return;
     const onResize = () => setBreakpoint(getBreakpoint(window.innerWidth));
@@ -12245,14 +12323,14 @@ function StickyCta({
   }, "Click on edit button to edit this section")) : null;
   if (p.type === 'floating') {
     const buttonStyle = {
-      ...getFloatingButtonStyle(breakpoint),
+      ...getFloatingButtonStyle(breakpoint, theme),
       ...(p.whatsAppButtonBackgroundColor != null && {
         backgroundColor: p.whatsAppButtonBackgroundColor
       })
     };
     const iconSize = getWhatsAppIconSize(breakpoint);
     const iconColor = p.whatsAppIconColor ?? DEFAULT_WHATSAPP_ICON_COLOR;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, editHintBlock, /*#__PURE__*/React__default["default"].createElement("a", {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMobile ? null : editHintBlock, /*#__PURE__*/React__default["default"].createElement("a", {
       href: whatsAppUrl,
       target: "_blank",
       rel: "noopener noreferrer",
@@ -12274,28 +12352,29 @@ function StickyCta({
     }), /*#__PURE__*/React__default["default"].createElement("span", null, p.whatsAppLabel)));
   }
 
-  // type === 'sticky' – button uses mobile number from props to build URL; click redirects to WhatsApp
-  const barStyle = getStickyBarStyle(breakpoint);
-  const textStyle = getStickyTextStyle(breakpoint);
-  const buttonStyle = getStickyButtonStyle(breakpoint);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, editHintBlock, /*#__PURE__*/React__default["default"].createElement("div", {
+  // type === 'sticky' – use primary Button (same as other sections) linking to WhatsApp
+  const barStyle = getStickyBarStyle(breakpoint, theme);
+  const textStyle = getStickyTextStyle(breakpoint, theme);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMobile ? null : editHintBlock, /*#__PURE__*/React__default["default"].createElement("div", {
     style: barStyle,
-    role: "banner"
+    role: "banner",
+    "access-cta-sticky": "DIY"
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: textStyle
-  }, p.stickyMessage), /*#__PURE__*/React__default["default"].createElement("a", {
-    href: whatsAppUrl,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    "access-cta-container": "DIY",
-    style: {
-      ...buttonStyle,
-      textDecoration: 'none',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, p.stickyButtonText)));
+  }, p.stickyMessage), /*#__PURE__*/React__default["default"].createElement(Button, {
+    data: {
+      isLink: 1,
+      isExternal: 1,
+      link: whatsAppUrl,
+      value: p.stickyButtonText
+    },
+    type: "primary",
+    styling: {
+      background: theme?.colors?.ctaColor
+    },
+    size: breakpoint === 'mobile' ? 'small' : 'medium',
+    "access-cta-container": "DIY"
+  })));
 }
 
 var index$4 = /*#__PURE__*/Object.freeze({
@@ -12640,7 +12719,8 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
   return {
     section: {
       width: '100%',
-      background: 'linear-gradient(135deg, #6b2d5c 0%, #4a3f6b 40%, #2d5a6b 70%, #3d6b5a 100%)',
+      background: theme?.colors?.background2,
+      color: theme?.colors?.font3,
       minHeight: '100%',
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
@@ -12680,7 +12760,6 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
       lineHeight: 1.25,
       letterSpacing: '3px',
       textTransform: 'uppercase',
-      color: theme.palette?.font?.invertedDefault || 'rgba(255,255,255,0.9)',
       wordBreak: 'break-word',
       fontWeight: theme.typography?.fontWeight?.regular
     },
@@ -12689,15 +12768,12 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.h2,
       lineHeight: 1.1,
       letterSpacing: '-1px',
-      fontWeight: theme.typography?.fontWeight?.bold,
-      color: theme.palette?.font?.invertedDefault || '#ffffff',
       wordBreak: 'break-word'
     },
     subHeading: {
       margin: 0,
       fontSize: theme.typography.fontSize.body,
       lineHeight: 1.5,
-      color: theme.palette?.font?.invertedDefault || 'rgba(255,255,255,0.95)',
       wordBreak: 'break-word',
       maxWidth: '600px'
     },
@@ -12743,7 +12819,6 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
         margin: 0,
         fontSize: theme.typography.fontSize.body,
         fontWeight: theme.typography?.fontWeight?.semiBold,
-        color: '#ffffff',
         lineHeight: 1.3
       }
     },
@@ -12758,7 +12833,6 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
       '& p': {
         margin: 0,
         fontSize: theme.typography.fontSize.body,
-        color: '#ffffff',
         lineHeight: 1.4
       }
     },