@app-studio/web 0.8.91 → 0.8.93

package/dist/web.cjs.development.js

@@ -3401,18 +3401,6 @@ var BadgeView = _ref => {
 // Badge component that displays a small indicator, typically used for counts or status
 var Badge = props => /*#__PURE__*/React__default.createElement(BadgeView, Object.assign({}, props));
 
-var useButtonState = () => {
-  var [isHovered, setIsHovered] = React__default.useState(false);
-  // This custom react hook 'useButtonState' is defined for managing the state of a button, especially for hover interactions.
-  return {
-    isHovered,
-    setIsHovered
-  };
-  // The 'setIsHovered' function is used to update the value of 'isHovered' state when the hover status of the button changes.
-  // A state variable 'isHovered' is declared with its initial value set to 'false', indicating that the button is not hovered by default.
-};
-// The hook returns an object containing 'isHovered' state and the 'setIsHovered' function to enable state management from the consumer component.
-
 // This function initializes the Link component's state using the useState hook and exposes its state and setter function.
 var useLinkState = () => {
   var [isHovered, setIsHovered] = React.useState(false);
@@ -3997,25 +3985,14 @@ var ButtonView = _ref => {
 
 // Importing a custom hook to manage the state specific to the button component.
 var ButtonComponent = props => {
-  // Importing the view part of the button, which is presumably a presentational component.
-  var {
-    isHovered,
-    setIsHovered
-  } = useButtonState();
-  // Defining the button component with generic React Functional Component type augmented with ButtonProps type.
-  var handleHover = () => setIsHovered(!isHovered);
+  var [ref, hover] = appStudio.useHover();
   // Destructuring the state and state update function from the custom hook for button state management.
   return (
     /*#__PURE__*/
     // Defines a function to toggle the hover state of the button.
     React__default.createElement(ButtonView, Object.assign({
-      isHovered: isHovered,
-      // Rendering the ButtonView component and spreading the received props on it.
-      setIsHovered: setIsHovered,
-      // Passing the isHovered state and the setIsHovered function to the ButtonView.
-      onMouseEnter: handleHover,
-      // Binding handleHover function to onMouseEnter and onMouseLeave events to toggle hover effect.
-      onMouseLeave: handleHover
+      ref: ref,
+      isHovered: hover
     }, props))
   );
   // Exports the Button component for use in other parts of the application.
@@ -13645,227 +13622,66 @@ var TabsComponent = _ref => {
 var Tabs = /*#__PURE__*/React__default.memo(TabsComponent);
 
 /**
- * Custom hook for managing Title component state and animations
+ * Custom hook for managing Title component state
  */
 var useTitleState = props => {
   var {
-    animation = 'none',
-    animationDirection = 'left',
-    animationDuration = '1s',
-    animationDelay = '0s',
     children,
+    // Original children
     _isInView = false,
     alternateHighlightText = [],
     alternateAnimation = false,
+    // Default to false as per prop definition
     alternateDuration = 3000,
-    highlightText
+    highlightText: initialHighlightText,
+    // Renamed to avoid confusion with the dynamic target
+    highlightTypewriter = false,
+    highlightTypewriterDuration = 1500
   } = props;
-  // State for typewriter animation
-  var [displayText, setDisplayText] = React.useState('');
-  // State for alternating highlight text
-  var [currentHighlightText, setCurrentHighlightText] = React.useState(highlightText);
-  // State for the alternating text content
-  var [alternatingContent, setAlternatingContent] = React.useState(children);
+  // State for the final text to be displayed (could be original children or alternating text)
+  var [finalDisplayedText, setFinalDisplayedText] = React.useState(children);
+  // State for the text that should be actively highlighted (could be initialHighlightText or a word from alternateHighlightText)
+  var [activeHighlightTarget, setActiveHighlightTarget] = React.useState(initialHighlightText);
+  // We don't need state for typewriter text anymore as we're using the TypewriterEffect component
   // Handle alternating highlight text animation
   React.useEffect(() => {
-    // Initialize with the provided highlightText
-    setCurrentHighlightText(highlightText);
-    // If not using alternating animation or no alternateHighlightText provided, return early
-    if (!alternateAnimation || alternateHighlightText.length === 0 || !_isInView) {
+    // If not using alternating animation or conditions not met, reset to initial/non-alternating state
+    if (!alternateAnimation || alternateHighlightText.length === 0 || !_isInView || typeof children !== 'string' ||
+    // Base text must be a string for replacement
+    typeof initialHighlightText !== 'string' // Placeholder must be a string
+    ) {
+      setFinalDisplayedText(children);
+      setActiveHighlightTarget(initialHighlightText);
       return () => {};
     }
-    // Only proceed if children is a string
-    if (typeof children !== 'string') {
-      return () => {};
-    }
-    // Set initial content with the first alternating text
+    // Proceed with alternating animation
     var baseText = children;
+    var placeholder = initialHighlightText;
     var currentIndex = 0;
-    // Function to update the content with the current alternating text
-    var updateContent = index => {
-      if (highlightText && typeof highlightText === 'string') {
-        // Replace the highlightText with the current alternating text
-        var regex = new RegExp(highlightText, 'gi');
-        var newContent = baseText.replace(regex, alternateHighlightText[index]);
-        setAlternatingContent(newContent);
-      }
+    // Function to update the state for alternating text
+    var updateAlternatingState = index => {
+      var currentWordToHighlight = alternateHighlightText[index];
+      // Replace the placeholder in the baseText with the current alternating word
+      var regex = new RegExp(placeholder, 'gi');
+      var newContent = baseText.replace(regex, currentWordToHighlight);
+      setFinalDisplayedText(newContent);
+      setActiveHighlightTarget(currentWordToHighlight); // Set the current word as the highlight target
     };
-    // Set initial content
-    updateContent(currentIndex);
+    // Set initial alternating state
+    updateAlternatingState(currentIndex);
     // Create interval to cycle through the alternateHighlightText array
     var interval = setInterval(() => {
       currentIndex = (currentIndex + 1) % alternateHighlightText.length;
-      updateContent(currentIndex);
+      updateAlternatingState(currentIndex);
     }, alternateDuration);
     return () => clearInterval(interval);
-  }, [alternateAnimation, alternateHighlightText, alternateDuration, highlightText, children, _isInView]);
-  // Handle typewriter animation
-  React.useEffect(() => {
-    // Only start the typewriter animation when the component is in view
-    if (animation === 'typewriter' && typeof children === 'string' && _isInView) {
-      var text = children;
-      var currentIndex = 0;
-      setDisplayText('');
-      var interval = setInterval(() => {
-        if (currentIndex <= text.length) {
-          setDisplayText(text.substring(0, currentIndex));
-          currentIndex++;
-        } else {
-          clearInterval(interval);
-        }
-      }, 100);
-      return () => clearInterval(interval);
-    }
-    // Reset the text if not in view
-    if (animation === 'typewriter' && !_isInView) {
-      setDisplayText('');
-    }
-    return () => {};
-  }, [animation, children, _isInView]);
-  // Get animation configuration based on animation type
-  var getAnimation = () => {
-    // For typewriter animation, we handle it separately with useState and useEffect
-    if (animation === 'typewriter') {
-      return undefined;
-    }
-    switch (animation) {
-      case 'fadeIn':
-        return {
-          from: {
-            opacity: 0
-          },
-          to: {
-            opacity: 1
-          },
-          duration: animationDuration,
-          delay: animationDelay,
-          // iterationCount: 'infinite',
-          direction: 'alternate'
-        };
-      case 'slideIn':
-        switch (animationDirection) {
-          case 'left':
-            return {
-              from: {
-                transform: 'translateX(-100%)'
-              },
-              to: {
-                transform: 'translateX(0)'
-              },
-              duration: animationDuration,
-              delay: animationDelay,
-              // iterationCount: 'infinite',
-              direction: 'alternate'
-            };
-          case 'right':
-            return {
-              from: {
-                transform: 'translateX(100%)'
-              },
-              to: {
-                transform: 'translateX(0)'
-              },
-              duration: animationDuration,
-              delay: animationDelay,
-              // iterationCount: 'infinite',
-              direction: 'alternate'
-            };
-          case 'top':
-            return {
-              from: {
-                transform: 'translateY(-100%)'
-              },
-              to: {
-                transform: 'translateY(0)'
-              },
-              duration: animationDuration,
-              delay: animationDelay,
-              // iterationCount: 'infinite',
-              direction: 'alternate'
-            };
-          case 'bottom':
-            return {
-              from: {
-                transform: 'translateY(100%)'
-              },
-              to: {
-                transform: 'translateY(0)'
-              },
-              duration: animationDuration,
-              delay: animationDelay,
-              // iterationCount: 'infinite',
-              direction: 'alternate'
-            };
-          default:
-            return {
-              from: {
-                transform: 'translateX(-100%)'
-              },
-              to: {
-                transform: 'translateX(0)'
-              },
-              duration: animationDuration,
-              delay: animationDelay,
-              // iterationCount: 'infinite',
-              direction: 'alternate'
-            };
-        }
-      case 'bounce':
-        return {
-          from: {
-            transform: 'translateY(0)'
-          },
-          '20%': {
-            transform: 'translateY(-30px)'
-          },
-          '40%': {
-            transform: 'translateY(0)'
-          },
-          '60%': {
-            transform: 'translateY(-15px)'
-          },
-          '80%': {
-            transform: 'translateY(0)'
-          },
-          to: {
-            transform: 'translateY(0)'
-          },
-          duration: animationDuration,
-          delay: animationDelay,
-          iterationCount: '1'
-        };
-      case 'highlight':
-        return {
-          from: {
-            backgroundSize: '0 100%'
-          },
-          to: {
-            backgroundSize: '100% 100%'
-          },
-          duration: animationDuration,
-          delay: animationDelay
-        };
-      case 'reveal':
-        return {
-          from: {
-            clipPath: 'polygon(0 0, 0 0, 0 100%, 0% 100%)'
-          },
-          to: {
-            clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)'
-          },
-          duration: animationDuration,
-          delay: animationDelay
-        };
-      case 'none':
-      default:
-        return undefined;
-    }
-  };
+  }, [alternateAnimation, alternateHighlightText, alternateDuration, initialHighlightText, children, _isInView]);
+  // We don't need a separate effect for typewriter animation anymore
+  // as we're using the TypewriterEffect component directly in the view
   return {
-    displayText,
-    getAnimation,
-    currentHighlightText,
-    alternatingContent
+    finalDisplayedText,
+    activeHighlightTarget,
+    highlightTypewriter
   };
 };
 
@@ -13891,8 +13707,13 @@ var LineHeights$1 = {
   xs: 24,
   sm: 28,
   md: 32,
-  lg: 64,
-  xl: 88
+  lg: 40,
+  xl: 48,
+  '2xl': 56,
+  '3xl': 64,
+  '4xl': 72,
+  '5xl': 80,
+  '6xl': 88
 };
 /**
  * Default styles for different highlight types
@@ -13912,11 +13733,12 @@ var HighlightStyles = {
   }),
   gradient: (color, secondaryColor) => ({
     background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
-    webkitBackgroundClip: 'text',
-    webkitTextFillColor: 'transparent',
     backgroundClip: 'text',
+    webkitBackgroundClip: 'text',
     color: 'transparent',
-    display: 'inline-block'
+    webkitTextFillColor: 'transparent',
+    display: 'inline-block',
+    textShadow: 'none'
   }),
   outline: color => ({
     webkitTextStroke: "1px " + color,
@@ -13930,12 +13752,91 @@ var HighlightStyles = {
   })
 };
 
-var _excluded$L = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "animation", "size", "centered", "views"];
+var _excluded$L = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
 /**
- * Title View Component
- *
- * Renders a title with optional highlighting and animations for hero sections.
+ * A component that creates a typewriter effect for text
  */
+var TypewriterEffect = _ref => {
+  var {
+      text,
+      typingSpeed = 50,
+      pauseTime = 500,
+      onComplete,
+      showCursor = true,
+      cursorColor = 'currentColor',
+      textStyle
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+  // Convert text to array if it's a string
+  var textArray = Array.isArray(text) ? text : [text];
+  // State for the currently displayed text
+  var [displayedText, setDisplayedText] = React.useState(textArray.map(() => ''));
+  // State to track if typing is complete
+  var [isComplete, setIsComplete] = React.useState(false);
+  // State to track which text item we're currently typing
+  var [currentTextIndex, setCurrentTextIndex] = React.useState(0);
+  // State to track the character position within the current text
+  var [charIndex, setCharIndex] = React.useState(0);
+  React.useEffect(() => {
+    // Reset state when text changes
+    setDisplayedText(textArray.map(() => ''));
+    setIsComplete(false);
+    setCurrentTextIndex(0);
+    setCharIndex(0);
+  }, [text]);
+  React.useEffect(() => {
+    // If all text is typed, call onComplete and return
+    if (isComplete) {
+      if (onComplete) onComplete();
+      return;
+    }
+    // Get the current text we're typing
+    var currentText = textArray[currentTextIndex];
+    // If we've typed all characters in the current text
+    if (charIndex >= currentText.length) {
+      // If we've typed all texts, we're done
+      if (currentTextIndex >= textArray.length - 1) {
+        setIsComplete(true);
+        return;
+      }
+      // Otherwise, move to the next text after a pause
+      var _timeout = setTimeout(() => {
+        setCurrentTextIndex(prev => prev + 1);
+        setCharIndex(0);
+      }, pauseTime);
+      return () => clearTimeout(_timeout);
+    }
+    // Type the next character
+    var timeout = setTimeout(() => {
+      setDisplayedText(prev => {
+        var newText = [...prev];
+        newText[currentTextIndex] = currentText.substring(0, charIndex + 1);
+        return newText;
+      });
+      setCharIndex(prev => prev + 1);
+    }, typingSpeed);
+    return () => clearTimeout(timeout);
+  }, [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, {
+    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)
+  }))))));
+};
+
+var _excluded$M = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "centered", "views", "highlightAnimate", "animate", "highlightTypewriter", "highlightTypewriterDuration"];
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
+}
 var TitleView = _ref => {
   var {
       children,
@@ -13943,150 +13844,112 @@ var TitleView = _ref => {
       highlightStyle = 'background',
       highlightColor = 'theme.primary',
       highlightSecondaryColor,
-      animation = 'none',
       size = 'xl',
       centered = false,
-      views
+      views,
+      highlightAnimate,
+      animate,
+      highlightTypewriter: propHighlightTypewriter = false,
+      highlightTypewriterDuration = 3000
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
-  // Use the inView hook to detect when the component is visible
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
   var {
     ref,
     inView
   } = appStudio.useInView();
-  // Get theme utilities
   var {
     getColor,
-    themeMode: contextThemeMode
+    themeMode: ctxMode
   } = appStudio.useTheme();
-  var themeMode = props.themeMode || contextThemeMode;
-  // Resolve theme colors
-  var resolvedHighlightColor = getColor(highlightColor, {
-    themeMode
-  });
-  var resolvedSecondaryColor = highlightSecondaryColor ? getColor(highlightSecondaryColor, {
-    themeMode
-  }) : undefined;
-  // Get state and animation functions from custom hook
+  var themeMode = props.themeMode || ctxMode;
+  // Resolve colors, handling both theme colors and direct hex values
+  var resolveColorValue = colorValue => {
+    // If it's already a hex color, return it directly
+    if (colorValue.startsWith('#')) {
+      return colorValue;
+    }
+    // Otherwise, use the theme's getColor function
+    return getColor(colorValue, {
+      themeMode
+    });
+  };
+  var resolvedColor = resolveColorValue(highlightColor);
+  var resolvedSecondary = highlightSecondaryColor ? resolveColorValue(highlightSecondaryColor) : undefined;
   var {
-    displayText,
-    getAnimation,
-    currentHighlightText,
-    alternatingContent
+    finalDisplayedText,
+    activeHighlightTarget,
+    highlightTypewriter
   } = useTitleState(Object.assign({
     children,
     highlightText,
-    highlightStyle,
-    highlightColor: resolvedHighlightColor,
-    animation,
-    _isInView: inView
+    _isInView: inView,
+    highlightTypewriter: propHighlightTypewriter,
+    highlightTypewriterDuration
   }, props));
-  // Get animation configuration only when the component is in view
-  // For typewriter animation, we don't need an animation config as it's handled by useState/useEffect
-  var animationConfig = inView && animation !== 'typewriter' ? getAnimation() : undefined;
-  // Get highlight styles
-  var highlightStyleProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedSecondaryColor);
-  // Get font size and line height based on size prop
   var fontSize = TitleSizes[size];
   var lineHeight = LineHeights$1[size];
-  // For typewriter animation, use the displayText state
-  // For alternating animation, use the alternatingContent state
-  var content = animation === 'typewriter' ? displayText : props.alternateAnimation && typeof alternatingContent === 'string' ? alternatingContent : children;
-  // If the content is a simple string and we have highlight text
-  if (typeof children === 'string' && currentHighlightText) {
-    var text = children;
-    // For a single highlight text
-    if (typeof currentHighlightText === 'string') {
-      // Create a regex pattern to match the highlight text
-      // Use a more flexible approach that can match within words
-      var pattern = new RegExp("(" + currentHighlightText + ")", 'gi');
-      // Check if the pattern matches anything in the text
-      if (pattern.test(text)) {
-        // Reset the regex pattern's lastIndex property
-        pattern.lastIndex = 0;
-        // Split the text by the pattern and keep the matches
-        var parts = [];
-        var lastIndex = 0;
-        var match;
-        while ((match = pattern.exec(text)) !== null) {
-          // Add the text before the match
-          if (match.index > lastIndex) {
-            parts.push(text.substring(lastIndex, match.index));
-          }
-          // Add the match as a special part to be highlighted
-          parts.push({
-            highlight: true,
-            text: match[0]
-          });
-          lastIndex = match.index + match[0].length;
-        }
-        // Add any remaining text after the last match
-        if (lastIndex < text.length) {
-          parts.push(text.substring(lastIndex));
-        }
-        return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-          ref: ref,
-          as: "h1",
-          fontSize: fontSize,
-          lineHeight: lineHeight + "px",
-          fontWeight: "bold",
-          textAlign: centered ? 'center' : 'left',
-          animate: animationConfig
-        }, props, views == null ? void 0 : views.container), parts.map((part, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
-          key: index
-        }, typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
-          as: "span",
-          display: "inline"
-        }, highlightStyleProps, views == null ? void 0 : views.highlight), part.text))))));
+  // Get the text to display
+  var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
+  if (typeof text === 'string' && activeHighlightTarget) {
+    var pattern = new RegExp("(" + escapeRegExp(Array.isArray(activeHighlightTarget) ? activeHighlightTarget.join('|') : activeHighlightTarget) + ")", 'gi');
+    var parts = [];
+    var lastIndex = 0;
+    var match;
+    while (match = pattern.exec(text)) {
+      if (match.index > lastIndex) {
+        parts.push(text.substring(lastIndex, match.index));
       }
+      parts.push({
+        highlight: true,
+        text: match[0]
+      });
+      lastIndex = match.index + match[0].length;
     }
-    // For multiple highlight texts
-    if (Array.isArray(currentHighlightText)) {
-      // Create a regex pattern to match any of the highlight texts
-      // Use a more flexible approach that can match within words
-      var _pattern = new RegExp("(" + currentHighlightText.join('|') + ")", 'gi');
-      // Check if the pattern matches anything in the text
-      if (_pattern.test(text)) {
-        // Reset the regex pattern's lastIndex property
-        _pattern.lastIndex = 0;
-        // Split the text by the pattern and keep the matches
-        var _parts = [];
-        var _lastIndex = 0;
-        var _match;
-        while ((_match = _pattern.exec(text)) !== null) {
-          // Add the text before the match
-          if (_match.index > _lastIndex) {
-            _parts.push(text.substring(_lastIndex, _match.index));
-          }
-          // Add the match as a special part to be highlighted
-          _parts.push({
-            highlight: true,
-            text: _match[0]
-          });
-          _lastIndex = _match.index + _match[0].length;
-        }
-        // Add any remaining text after the last match
-        if (_lastIndex < text.length) {
-          _parts.push(text.substring(_lastIndex));
-        }
-        return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-          ref: ref,
-          as: "h1",
-          fontSize: fontSize,
-          lineHeight: lineHeight + "px",
-          fontWeight: "bold",
-          textAlign: centered ? 'center' : 'left',
-          animate: animationConfig
-        }, props, views == null ? void 0 : views.container), _parts.map((part, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
-          key: index
-        }, typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
-          as: "span",
-          display: "inline"
-        }, highlightStyleProps, views == null ? void 0 : views.highlight), part.text))))));
-      }
+    if (lastIndex < text.length) {
+      parts.push(text.substring(lastIndex));
     }
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+      ref: ref,
+      as: "h1",
+      fontSize: fontSize,
+      lineHeight: lineHeight + "px",
+      fontWeight: "bold",
+      textAlign: centered ? 'center' : 'left',
+      animate: inView ? animate : undefined
+    }, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      key: part.text + "-" + idx,
+      as: "span",
+      display: "inline",
+      animate: inView ? highlightAnimate : undefined
+    }, HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary), views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
+      text: part.text,
+      typingSpeed: Math.max(30, highlightTypewriterDuration / (part.text.length * 10)),
+      showCursor: true,
+      cursorColor: "currentColor"
+    })) : part.text))));
   }
-  // Default rendering for non-string children or no highlighting
+  // If highlightStyle is provided but no highlightText, apply the style to the entire title
+  if (highlightStyle && !activeHighlightTarget) {
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+      ref: ref,
+      as: "h1",
+      fontSize: fontSize,
+      lineHeight: lineHeight + "px",
+      fontWeight: "bold",
+      textAlign: centered ? 'center' : 'left',
+      animate: inView ? animate : undefined
+    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      as: "span",
+      display: "inline",
+      animate: inView ? highlightAnimate : undefined
+    }, HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary), views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
+      text: text,
+      typingSpeed: Math.max(30, highlightTypewriterDuration / (text.length * 10)),
+      showCursor: true,
+      cursorColor: "currentColor"
+    })) : text));
+  }
+  // Default case - no highlighting
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     ref: ref,
     as: "h1",
@@ -14094,8 +13957,8 @@ var TitleView = _ref => {
     lineHeight: lineHeight + "px",
     fontWeight: "bold",
     textAlign: centered ? 'center' : 'left',
-    animate: animationConfig
-  }, props, views == null ? void 0 : views.container), content);
+    animate: inView ? animate : undefined
+  }, views == null ? void 0 : views.container, props), text);
 };
 
 /**
@@ -14160,7 +14023,7 @@ var useToggleState = defaultToggled => {
   };
 };
 
-var _excluded$M = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
+var _excluded$N = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
 var ToggleView = _ref => {
   var {
       children,
@@ -14174,7 +14037,7 @@ var ToggleView = _ref => {
       onToggle,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
   var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
   var isActive = !!(isToggle || isHovered);
   var toggleVariants = {
@@ -14217,7 +14080,7 @@ var ToggleView = _ref => {
   }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
 };
 
-var _excluded$N = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$O = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
 // Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = _ref => {
   var {
@@ -14229,7 +14092,7 @@ var ToggleComponent = _ref => {
       isToggled = false,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
   // Initializing toggle state and set state functions using the custom hook useToggleState.
   var {
     isHovered,
@@ -14620,7 +14483,7 @@ var getDropdownPosition = function getDropdownPosition(side, align) {
   return positions[side];
 };
 
-var _excluded$O = ["children", "views"],
+var _excluded$P = ["children", "views"],
   _excluded2$d = ["items", "side", "align", "views"],
   _excluded3$9 = ["item", "views"],
   _excluded4$8 = ["views"],
@@ -14658,7 +14521,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$P);
   var {
     isOpen,
     setIsOpen
@@ -14818,7 +14681,7 @@ var DropdownMenuView = _ref6 => {
   }));
 };
 
-var _excluded$P = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+var _excluded$Q = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
 /**
  * DropdownMenu component for displaying a menu when clicking on a trigger element.
  */
@@ -14833,7 +14696,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
   var {
     isOpen,
     setIsOpen,
@@ -15031,7 +14894,7 @@ var useRect = ref => {
   return rect;
 };
 
-var _excluded$Q = ["children", "views", "asChild"],
+var _excluded$R = ["children", "views", "asChild"],
   _excluded2$e = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
 // Create context for the HoverCard
 var HoverCardContext = /*#__PURE__*/React.createContext({
@@ -15070,7 +14933,7 @@ var HoverCardTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Q);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$R);
   var {
     openCard,
     closeCard,
@@ -15157,7 +15020,7 @@ var HoverCardContent = _ref3 => {
   }, views == null ? void 0 : views.container, props), children);
 };
 
-var _excluded$R = ["children", "views", "openDelay", "closeDelay"];
+var _excluded$S = ["children", "views", "openDelay", "closeDelay"];
 /**
  * HoverCard component displays floating content when hovering over a trigger element.
  * Supports configurable open and close delays for a smoother user experience.
@@ -15169,7 +15032,7 @@ var HoverCardComponent = _ref => {
       openDelay,
       closeDelay
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
   var hoverCardState = useHoverCardState({
     openDelay,
     closeDelay
@@ -15299,7 +15162,7 @@ var getMenubarContentPosition = orientation => {
   };
 };
 
-var _excluded$S = ["children", "orientation", "size", "variant", "views"];
+var _excluded$T = ["children", "orientation", "size", "variant", "views"];
 // Create context for the Menubar
 var MenubarContext = /*#__PURE__*/React.createContext({
   activeMenuId: null,
@@ -15333,7 +15196,7 @@ var MenubarRoot = _ref2 => {
       variant = 'default',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$S);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$T);
   var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
   return /*#__PURE__*/React__default.createElement(Container, Object.assign({
     role: "menubar",
@@ -15519,7 +15382,7 @@ var MenubarView = _ref8 => {
   })))))));
 };
 
-var _excluded$T = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+var _excluded$U = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
 /**
  * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
  */
@@ -15533,7 +15396,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -15689,7 +15552,7 @@ var DisabledButtonStyles = {
   }
 };
 
-var _excluded$U = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+var _excluded$V = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
 var PaginationView = _ref => {
   var {
       currentPage,
@@ -15720,7 +15583,7 @@ var PaginationView = _ref => {
       visiblePageNumbers,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
   var handlePageChange = page => {
     if (page < 1 || page > totalPages || page === currentPage) {
       return;
@@ -15839,7 +15702,7 @@ var PaginationView = _ref => {
   }, option.label))))));
 };
 
-var _excluded$V = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+var _excluded$W = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
 /**
  * Pagination component for navigating through pages of content.
  */
@@ -15860,7 +15723,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -15930,7 +15793,7 @@ var DefaultSeparatorStyles = {
   }
 };
 
-var _excluded$W = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+var _excluded$X = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
 var SeparatorView = _ref => {
   var {
       orientation = 'horizontal',
@@ -15942,7 +15805,7 @@ var SeparatorView = _ref => {
       decorative = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
   // Access theme if needed for future enhancements
   var {
     themeMode
@@ -16180,7 +16043,7 @@ var SidebarTransitions = {
   bounce: 'width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)'
 };
 
-var _excluded$X = ["children", "showToggleButton", "views"],
+var _excluded$Y = ["children", "showToggleButton", "views"],
   _excluded2$f = ["children", "views"],
   _excluded3$a = ["children", "views"],
   _excluded4$9 = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
@@ -16213,7 +16076,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Y);
   var {
     isExpanded,
     toggleExpanded,
@@ -16368,7 +16231,7 @@ var SidebarView = _ref5 => {
   }))));
 };
 
-var _excluded$Y = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
+var _excluded$Z = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
 /**
  * Sidebar component for creating collapsible, themeable and customizable sidebars.
  */
@@ -16390,7 +16253,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
   var {
     isExpanded,
     toggleExpanded,
@@ -16855,7 +16718,7 @@ var HandleIconStyles = {
   }
 };
 
-var _excluded$Z = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
+var _excluded$_ = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
   _excluded2$g = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
   _excluded3$b = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
 // Create context for the Resizable component
@@ -16900,7 +16763,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$_);
   var {
     orientation,
     registerPanel,
@@ -17115,7 +16978,7 @@ var ResizableView = _ref4 => {
   }, ResizableOrientations[orientation], views == null ? void 0 : views.container, props), children);
 };
 
-var _excluded$_ = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
+var _excluded$$ = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
 /**
  * Resizable component for creating resizable panel groups and layouts.
  */
@@ -17135,7 +16998,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
     isResizing,
     setIsResizing,
@@ -17903,7 +17766,7 @@ var CommandFooterStyles = {
   color: 'color.gray.500'
 };
 
-var _excluded$$ = ["value", "onValueChange", "placeholder", "views"],
+var _excluded$10 = ["value", "onValueChange", "placeholder", "views"],
   _excluded2$h = ["children", "views"],
   _excluded3$c = ["heading", "children", "views"],
   _excluded4$a = ["item", "selected", "onSelect", "views"],
@@ -17935,7 +17798,7 @@ var CommandInput = _ref2 => {
       placeholder = 'Type a command or search...',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$10);
   var inputRef = React.useRef(null);
   // Focus input when component mounts
   React__default.useEffect(() => {
@@ -18118,7 +17981,7 @@ var CommandView = _ref7 => {
   })))), footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandFooterStyles, views == null ? void 0 : views.footer), footer)))));
 };
 
-var _excluded$10 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
+var _excluded$11 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
 /**
  * Command component for displaying a command palette with search functionality.
  */
@@ -18136,7 +17999,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
   var {
     search,
     setSearch,
@@ -18423,7 +18286,7 @@ var getArrowStyles = position => {
   }
 };
 
-var _excluded$11 = ["children", "views", "asChild"],
+var _excluded$12 = ["children", "views", "asChild"],
   _excluded2$i = ["children", "views"],
   _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
 // Create context for the Tooltip
@@ -18459,7 +18322,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$12);
   var {
     openTooltip,
     closeTooltip,
@@ -18552,7 +18415,7 @@ var TooltipView = _ref4 => {
   }, TooltipSizes[size], TooltipVariants[variant], positionStyles, views == null ? void 0 : views.content), typeof content === 'string' ? (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, views == null ? void 0 : views.text), content)) : content, showArrow && /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, arrowStyles, views == null ? void 0 : views.arrow)))));
 };
 
-var _excluded$12 = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
+var _excluded$13 = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
 /**
  * Tooltip component for displaying additional information when hovering over an element.
  * Supports configurable positions, delays, and styling.
@@ -18572,7 +18435,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,