@app-studio/web 0.9.60 → 0.9.62

package/dist/web.umd.development.js

@@ -19037,7 +19037,9 @@
       var updateAlternatingState = index => {
         var currentWordToHighlight = alternateHighlightText[index];
         // Replace the placeholder in the baseText with the current alternating word
-        var regex = new RegExp(placeholder, 'gi');
+        // Escape regex special characters in placeholder to prevent errors
+        var escapedPlaceholder = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        var regex = new RegExp(escapedPlaceholder, 'gi');
         var newContent = baseText.replace(regex, currentWordToHighlight);
         setFinalDisplayedText(newContent);
         setActiveHighlightTarget(currentWordToHighlight); // Set the current word as the highlight target
@@ -19167,12 +19169,10 @@
    */
   var HighlightStyles = {
     underline: color => ({
-      style: {
-        textDecoration: 'underline',
-        textDecorationColor: color,
-        textDecorationThickness: '4px',
-        textUnderlineOffset: '4px'
-      }
+      textDecoration: 'underline',
+      textDecorationColor: color,
+      textDecorationThickness: '4px',
+      textUnderlineOffset: '4px'
     }),
     background: color => ({
       backgroundColor: color,
@@ -19181,21 +19181,17 @@
       borderRadius: '4px'
     }),
     gradient: (color, secondaryColor) => ({
-      style: {
-        background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
-        backgroundClip: 'text',
-        WebkitBackgroundClip: 'text',
-        WebkitTextFillColor: 'transparent'
-      },
+      background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
+      backgroundClip: 'text',
+      WebkitBackgroundClip: 'text !important',
+      WebkitTextFillColor: 'transparent',
       color: 'transparent',
       display: 'inline-block',
       textShadow: 'none'
     }),
     outline: color => ({
-      style: {
-        WebkitTextStroke: "1px " + color,
-        WebkitTextFillColor: 'transparent'
-      },
+      WebkitTextStroke: "1px " + color,
+      WebkitTextFillColor: 'transparent !important',
       color: 'transparent',
       textShadow: 'none'
     }),
@@ -19272,18 +19268,17 @@
     }, [textArray, currentTextIndex, charIndex, isComplete, onComplete, pauseTime, typingSpeed]);
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, displayedText.map((text, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: index
-    }, text, showCursor && index === currentTextIndex && !isComplete && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+    }, text, showCursor && index === currentTextIndex && !isComplete && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       as: "span",
       display: "inline-block",
       width: "0.1em",
       height: "1em",
-      backgroundColor: cursorColor,
-      style: Object.assign({
-        animation: 'blink 1s step-end infinite',
-        verticalAlign: 'text-bottom',
-        marginLeft: '1px'
-      }, textStyle)
-    }))))));
+      backgroundColor: cursorColor
+    }, Object.assign({
+      animation: 'blink 1s step-end infinite',
+      verticalAlign: 'text-bottom',
+      marginLeft: '1px'
+    }, textStyle))))))));
   };
 
   var _excluded$_ = ["text", "duration", "direction", "stagger", "sequential", "textStyle", "as", "wordProps"],
@@ -19459,13 +19454,11 @@
         key: animKey + "-" + index,
         as: "span",
         animate: wordAnimation
-      }, restWordProps, {
-        style: wordStyle
-      }), word);
+      }, restWordProps, wordStyle), word);
     })));
   };
 
-  var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential"];
+  var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode"];
   function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
   }
@@ -19488,13 +19481,42 @@
         highlightSlide: propHighlightSlide = false,
         highlightSlideDuration = 500,
         highlightSlideStagger = 50,
-        highlightSlideSequential = true
+        highlightSlideSequential = true,
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     var {
       ref,
       inView
     } = appStudio.useInView();
+    var {
+      getColor,
+      themeMode,
+      theme
+    } = appStudio.useTheme();
+    var currentThemeMode = elementMode || themeMode;
+    var resolvedHighlightColor = getColor(highlightColor, {
+      themeMode: currentThemeMode
+    });
+    // Fallback: If getColor returns the token itself (resolution failed), try manual lookup in theme object
+    if (resolvedHighlightColor === highlightColor && highlightColor.startsWith('theme.') && theme) {
+      var tokenPath = highlightColor.replace('theme.', '');
+      var value = tokenPath.split('.').reduce((acc, part) => acc && acc[part], theme);
+      if (typeof value === 'string') {
+        resolvedHighlightColor = value;
+      }
+    }
+    var resolvedHighlightSecondaryColor = highlightSecondaryColor ? getColor(highlightSecondaryColor, {
+      themeMode: currentThemeMode
+    }) : undefined;
+    // Fallback for secondary color
+    if (highlightSecondaryColor && resolvedHighlightSecondaryColor === highlightSecondaryColor && highlightSecondaryColor.startsWith('theme.') && theme) {
+      var _tokenPath = highlightSecondaryColor.replace('theme.', '');
+      var _value = _tokenPath.split('.').reduce((acc, part) => acc && acc[part], theme);
+      if (typeof _value === 'string') {
+        resolvedHighlightSecondaryColor = _value;
+      }
+    }
     var {
       finalDisplayedText,
       activeHighlightTarget,
@@ -19519,7 +19541,7 @@
     var fontSize = TitleSizes[size];
     var responsiveStyles = useResponsive ? ResponsiveTypography[size] : null;
     // Highlight style props
-    var highlightProps = HighlightStyles[highlightStyle](highlightColor, highlightSecondaryColor);
+    var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
     // Apply loop control to animations
     var applyAnimationLoop = (animation, loopControl) => {
       if (!animation) return animation;