@app-studio/web 0.9.61 → 0.9.63

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
@@ -19082,20 +19084,16 @@
     // xl maps to H1 - Largest heading
     xl: {
       fontWeight: 500,
-      marginBottom: 20,
       letterSpacing: 1.25,
       media: {
         mobile: {
-          fontSize: 42,
-          width: '100%'
+          fontSize: 60
         },
         tablet: {
-          fontSize: 50,
-          width: '100%'
+          fontSize: 60
         },
         desktop: {
-          fontSize: 58,
-          minWidth: '60%'
+          fontSize: 96
         }
       }
     },
@@ -19104,13 +19102,13 @@
       fontWeight: 500,
       media: {
         mobile: {
-          fontSize: 32
+          fontSize: 48
         },
         tablet: {
-          fontSize: 40
+          fontSize: 48
         },
         desktop: {
-          fontSize: 48
+          fontSize: 70
         }
       }
     },
@@ -19119,13 +19117,13 @@
       fontWeight: 500,
       media: {
         mobile: {
-          fontSize: 20
+          fontSize: 32
         },
         tablet: {
-          fontSize: 30
+          fontSize: 40
         },
         desktop: {
-          fontSize: 40
+          fontSize: 56
         }
       }
     },
@@ -19135,10 +19133,10 @@
       letterSpacing: -0.2,
       media: {
         mobile: {
-          fontSize: 16
+          fontSize: 20
         },
         tablet: {
-          fontSize: 28
+          fontSize: 24
         },
         desktop: {
           fontSize: 32
@@ -19151,13 +19149,13 @@
       letterSpacing: -0.2,
       media: {
         mobile: {
-          fontSize: 12
+          fontSize: 14
         },
         tablet: {
           fontSize: 18
         },
         desktop: {
-          fontSize: 24
+          fontSize: 20
         }
       }
     }
@@ -19167,12 +19165,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 +19177,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 +19264,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,9 +19450,7 @@
         key: animKey + "-" + index,
         as: "span",
         animate: wordAnimation
-      }, restWordProps, {
-        style: wordStyle
-      }), word);
+      }, restWordProps, wordStyle), word);
     })));
   };
 
@@ -19498,15 +19487,32 @@
     } = appStudio.useInView();
     var {
       getColor,
-      themeMode
+      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,