@app-studio/web 0.9.61 → 0.9.63

package/dist/web.cjs.development.js

@@ -19075,7 +19075,9 @@ var useTitleState = props => {
     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
@@ -19120,20 +19122,16 @@ var ResponsiveTypography = {
   // 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
       }
     }
   },
@@ -19142,13 +19140,13 @@ var ResponsiveTypography = {
     fontWeight: 500,
     media: {
       mobile: {
-        fontSize: 32
+        fontSize: 48
       },
       tablet: {
-        fontSize: 40
+        fontSize: 48
       },
       desktop: {
-        fontSize: 48
+        fontSize: 70
       }
     }
   },
@@ -19157,13 +19155,13 @@ var ResponsiveTypography = {
     fontWeight: 500,
     media: {
       mobile: {
-        fontSize: 20
+        fontSize: 32
       },
       tablet: {
-        fontSize: 30
+        fontSize: 40
       },
       desktop: {
-        fontSize: 40
+        fontSize: 56
       }
     }
   },
@@ -19173,10 +19171,10 @@ var ResponsiveTypography = {
     letterSpacing: -0.2,
     media: {
       mobile: {
-        fontSize: 16
+        fontSize: 20
       },
       tablet: {
-        fontSize: 28
+        fontSize: 24
       },
       desktop: {
         fontSize: 32
@@ -19189,13 +19187,13 @@ var ResponsiveTypography = {
     letterSpacing: -0.2,
     media: {
       mobile: {
-        fontSize: 12
+        fontSize: 14
       },
       tablet: {
         fontSize: 18
       },
       desktop: {
-        fontSize: 24
+        fontSize: 20
       }
     }
   }
@@ -19205,12 +19203,10 @@ var ResponsiveTypography = {
  */
 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,
@@ -19219,21 +19215,17 @@ var HighlightStyles = {
     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'
   }),
@@ -19310,18 +19302,17 @@ var TypewriterEffect = _ref => {
   }, [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"],
@@ -19497,9 +19488,7 @@ var SlideEffect = _ref => {
       key: animKey + "-" + index,
       as: "span",
       animate: wordAnimation
-    }, restWordProps, {
-      style: wordStyle
-    }), word);
+    }, restWordProps, wordStyle), word);
   })));
 };
 
@@ -19536,15 +19525,32 @@ var TitleView = _ref => {
   } = 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,