@app-studio/web 0.8.91 → 0.8.93

package/dist/web.umd.development.js

@@ -3370,18 +3370,6 @@
   // 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);
@@ -3966,25 +3954,14 @@
 
   // 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.
@@ -13614,227 +13591,66 @@
   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
     };
   };
 
@@ -13860,8 +13676,13 @@
     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
@@ -13881,11 +13702,12 @@
     }),
     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,
@@ -13899,12 +13721,91 @@
     })
   };
 
-  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,
@@ -13912,150 +13813,112 @@
         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",
@@ -14063,8 +13926,8 @@
       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);
   };
 
   /**
@@ -14129,7 +13992,7 @@
     };
   };
 
-  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,
@@ -14143,7 +14006,7 @@
         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 = {
@@ -14186,7 +14049,7 @@
     }, 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 {
@@ -14198,7 +14061,7 @@
         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,
@@ -14589,7 +14452,7 @@
     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"],
@@ -14627,7 +14490,7 @@
         children,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$P);
     var {
       isOpen,
       setIsOpen
@@ -14787,7 +14650,7 @@
     }));
   };
 
-  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.
    */
@@ -14802,7 +14665,7 @@
         defaultOpen = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
     var {
       isOpen,
       setIsOpen,
@@ -15000,7 +14863,7 @@
     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({
@@ -15039,7 +14902,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Q);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$R);
     var {
       openCard,
       closeCard,
@@ -15126,7 +14989,7 @@
     }, 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.
@@ -15138,7 +15001,7 @@
         openDelay,
         closeDelay
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
     var hoverCardState = useHoverCardState({
       openDelay,
       closeDelay
@@ -15268,7 +15131,7 @@
     };
   };
 
-  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,
@@ -15302,7 +15165,7 @@
         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",
@@ -15488,7 +15351,7 @@
     })))))));
   };
 
-  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.
    */
@@ -15502,7 +15365,7 @@
         defaultOpenMenuId = null,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
     var {
       activeMenuId,
       setActiveMenuId,
@@ -15658,7 +15521,7 @@
     }
   };
 
-  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,
@@ -15689,7 +15552,7 @@
         visiblePageNumbers,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
     var handlePageChange = page => {
       if (page < 1 || page > totalPages || page === currentPage) {
         return;
@@ -15808,7 +15671,7 @@
     }, 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.
    */
@@ -15829,7 +15692,7 @@
         shape = 'rounded',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
     var {
       visiblePageNumbers
     } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -15899,7 +15762,7 @@
     }
   };
 
-  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',
@@ -15911,7 +15774,7 @@
         decorative = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
     // Access theme if needed for future enhancements
     var {
       themeMode
@@ -16149,7 +16012,7 @@
     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"];
@@ -16182,7 +16045,7 @@
         showToggleButton = true,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Y);
     var {
       isExpanded,
       toggleExpanded,
@@ -16337,7 +16200,7 @@
     }))));
   };
 
-  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.
    */
@@ -16359,7 +16222,7 @@
         breakpointBehavior = 'overlay',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
     var {
       isExpanded,
       toggleExpanded,
@@ -16824,7 +16687,7 @@
     }
   };
 
-  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
@@ -16869,7 +16732,7 @@
         onCollapseChange,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$_);
     var {
       orientation,
       registerPanel,
@@ -17084,7 +16947,7 @@
     }, 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.
    */
@@ -17104,7 +16967,7 @@
         keyboardResizeBy = 10,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     var {
       isResizing,
       setIsResizing,
@@ -17872,7 +17735,7 @@
     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"],
@@ -17904,7 +17767,7 @@
         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(() => {
@@ -18087,7 +17950,7 @@
     })))), 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.
    */
@@ -18105,7 +17968,7 @@
         footer,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
     var {
       search,
       setSearch,
@@ -18392,7 +18255,7 @@
     }
   };
 
-  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
@@ -18428,7 +18291,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$12);
     var {
       openTooltip,
       closeTooltip,
@@ -18521,7 +18384,7 @@
     }, 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.
@@ -18541,7 +18404,7 @@
         isDisabled = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
     var tooltipState = useTooltipState({
       defaultOpen,
       openDelay,