@app-studio/web 0.9.43 → 0.9.45

package/dist/web.cjs.development.js

@@ -3753,7 +3753,7 @@ var UploadView = _ref => {
         height: 4,
         width: progress + "%",
         borderRadius: 2,
-        backgroundColor: "#000"
+        backgroundColor: "color.dark.50"
       }, views == null ? void 0 : views.view))), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         fontSize: 12
       }, views == null ? void 0 : views.text), progress, "%"));
@@ -4522,7 +4522,6 @@ var BadgeView = _ref => {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'color.black',
     // Apply shape, size, and variant styles
     borderRadius: BadgeShapes[shape]
   }, BadgeSizes[size], variantStyles, position ? PositionStyles[position] : {}, views == null ? void 0 : views.container);
@@ -4534,8 +4533,7 @@ var BadgeView = _ref => {
     ,
     textAlign: "center"
   }, views == null ? void 0 : views.text, {
-    color: combinedStyles.color,
-    bgColor: combinedStyles.backgroundColor
+    color: combinedStyles.color
   }), content || ''));
 };
 
@@ -18713,7 +18711,11 @@ var useTitleState = props => {
     highlightText: initialHighlightText,
     // Renamed to avoid confusion with the dynamic target
     highlightTypewriter = false,
-    highlightTypewriterDuration = 1500
+    highlightTypewriterDuration = 1500,
+    highlightSlide = false,
+    highlightSlideDuration = 500,
+    highlightSlideStagger = 50,
+    highlightSlideSequential = true
   } = props;
   // State for the final text to be displayed (could be original children or alternating text)
   var [finalDisplayedText, setFinalDisplayedText] = React.useState(children);
@@ -18758,7 +18760,11 @@ var useTitleState = props => {
   return {
     finalDisplayedText,
     activeHighlightTarget,
-    highlightTypewriter
+    highlightTypewriter,
+    highlightSlide,
+    highlightSlideDuration,
+    highlightSlideStagger,
+    highlightSlideSequential
   };
 };
 
@@ -18978,7 +18984,159 @@ var TypewriterEffect = _ref => {
   }))))));
 };
 
-var _excluded$Z = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration"];
+var _excluded$Z = ["text", "duration", "direction", "stagger", "sequential", "textStyle", "as", "wordProps"],
+  _excluded2$f = ["style"];
+// CSS keyframes injection - done once
+var KEYFRAMES_ID = 'slide-effect-keyframes';
+var injectKeyframes = () => {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(KEYFRAMES_ID)) return;
+  var style = document.createElement('style');
+  style.id = KEYFRAMES_ID;
+  style.textContent = "\n    @keyframes slideInUp {\n      from { transform: translateY(100%); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\n    }\n    @keyframes slideOutUp {\n      from { transform: translateY(0); opacity: 1; }\n      to { transform: translateY(-100%); opacity: 0; }\n    }\n    @keyframes slideInDown {\n      from { transform: translateY(-100%); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\n    }\n    @keyframes slideOutDown {\n      from { transform: translateY(0); opacity: 1; }\n      to { transform: translateY(100%); opacity: 0; }\n    }\n  ";
+  document.head.appendChild(style);
+};
+var SlideEffect = _ref => {
+  var {
+      text,
+      duration = 500,
+      direction = 'up',
+      stagger = 50,
+      sequential = false,
+      textStyle,
+      wordProps
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+  var [displayedText, setDisplayedText] = React.useState(text);
+  var [phase, setPhase] = React.useState('entering');
+  var [animKey, setAnimKey] = React.useState(0);
+  var pendingTextRef = React.useRef(null);
+  var timeoutRef = React.useRef(null);
+  // Inject keyframes once on mount
+  React.useEffect(() => {
+    injectKeyframes();
+  }, []);
+  // Handle text changes
+  React.useEffect(() => {
+    if (text === displayedText && phase === 'visible') {
+      return;
+    }
+    if (text !== displayedText) {
+      // New text arrived
+      if (phase === 'entering' || phase === 'visible') {
+        // Store the new text and start exit animation
+        pendingTextRef.current = text;
+        setPhase('exiting');
+      } else if (phase === 'exiting') {
+        // Already exiting, just update pending text
+        pendingTextRef.current = text;
+      }
+    }
+  }, [text, displayedText, phase]);
+  // Calculate animation durations
+  var words = React.useMemo(() => displayedText.split(' '), [displayedText]);
+  var wordCount = words.length;
+  var totalEnterDuration = React.useMemo(() => {
+    if (sequential) {
+      return wordCount * (duration + stagger);
+    }
+    return (wordCount - 1) * stagger + duration;
+  }, [wordCount, duration, stagger, sequential]);
+  var totalExitDuration = React.useMemo(() => {
+    if (sequential) {
+      return wordCount * (duration + stagger);
+    }
+    return (wordCount - 1) * stagger + duration;
+  }, [wordCount, duration, stagger, sequential]);
+  // Handle phase transitions
+  React.useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    if (phase === 'entering') {
+      // After enter animation completes, go to visible
+      timeoutRef.current = setTimeout(() => {
+        setPhase('visible');
+      }, totalEnterDuration + 50);
+    } else if (phase === 'exiting') {
+      // After exit animation completes, swap text and enter again
+      timeoutRef.current = setTimeout(() => {
+        if (pendingTextRef.current !== null) {
+          setDisplayedText(pendingTextRef.current);
+          pendingTextRef.current = null;
+        }
+        setAnimKey(k => k + 1);
+        setPhase('entering');
+      }, totalExitDuration + 50);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [phase, totalEnterDuration, totalExitDuration]);
+  // Memoize word props extraction
+  var _ref2 = wordProps || {},
+    {
+      style: customWordStyle
+    } = _ref2,
+    restWordProps = _objectWithoutPropertiesLoose(_ref2, _excluded2$f);
+  // Get animation names based on direction
+  var isUp = direction === 'up';
+  var enterAnim = isUp ? 'slideInUp' : 'slideInDown';
+  var exitAnim = isUp ? 'slideOutUp' : 'slideOutDown';
+  // Calculate delay for each word
+  var getDelay = (index, isExit) => {
+    if (sequential) {
+      // Sequential: one word at a time
+      return index * (duration + stagger);
+    }
+    // Parallel with stagger
+    return index * stagger;
+  };
+  // Container styles
+  var containerStyle = React.useMemo(() => Object.assign({
+    display: 'inline-block',
+    position: 'relative',
+    overflow: 'hidden',
+    verticalAlign: 'bottom',
+    whiteSpace: 'nowrap'
+  }, textStyle), [textStyle]);
+  // Word row container style
+  var wordRowStyle = React.useMemo(() => ({
+    display: 'inline-flex',
+    flexWrap: 'nowrap',
+    whiteSpace: 'nowrap'
+  }), []);
+  // Determine current animation
+  var currentAnim = phase === 'exiting' ? exitAnim : enterAnim;
+  var isAnimating = phase === 'entering' || phase === 'exiting';
+  return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+    as: "span",
+    style: containerStyle
+  }, props), /*#__PURE__*/React__default.createElement("span", {
+    style: wordRowStyle
+  }, words.map((word, index) => {
+    var delay = getDelay(index);
+    var isLast = index === words.length - 1;
+    var wordStyle = Object.assign({}, customWordStyle, {
+      display: 'inline-block',
+      marginRight: isLast ? 0 : '0.25em',
+      willChange: isAnimating ? 'transform, opacity' : 'auto',
+      animation: isAnimating ? currentAnim + " " + duration + "ms ease-out " + delay + "ms both" : 'none',
+      transform: phase === 'visible' ? 'translateY(0)' : undefined,
+      opacity: phase === 'visible' ? 1 : undefined
+    });
+    return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      key: animKey + "-" + index,
+      as: "span"
+    }, restWordProps, {
+      style: wordStyle
+    }), word);
+  })));
+};
+
+var _excluded$_ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential"];
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
 }
@@ -18998,9 +19156,13 @@ var TitleView = _ref => {
       animationLoop = 1,
       highlightAnimationLoop = 1,
       highlightTypewriter: propHighlightTypewriter = false,
-      highlightTypewriterDuration = 3000
+      highlightTypewriterDuration = 3000,
+      highlightSlide: propHighlightSlide = false,
+      highlightSlideDuration = 500,
+      highlightSlideStagger = 50,
+      highlightSlideSequential = true
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var {
     ref,
     inView
@@ -19033,13 +19195,21 @@ var TitleView = _ref => {
   var {
     finalDisplayedText,
     activeHighlightTarget,
-    highlightTypewriter
+    highlightTypewriter,
+    highlightSlide,
+    highlightSlideDuration: stateHighlightSlideDuration,
+    highlightSlideStagger: stateHighlightSlideStagger,
+    highlightSlideSequential: stateHighlightSlideSequential
   } = useTitleState(Object.assign({
     children,
     highlightText,
     _isInView: inView,
     highlightTypewriter: propHighlightTypewriter,
-    highlightTypewriterDuration
+    highlightTypewriterDuration,
+    highlightSlide: propHighlightSlide,
+    highlightSlideDuration,
+    highlightSlideStagger,
+    highlightSlideSequential
   }, props));
   // Determine if we should use responsive sizing or static sizing
   var useResponsive = responsive && !props.media; // Don't override if media prop is already provided
@@ -19092,16 +19262,25 @@ var TitleView = _ref => {
       animate: inView ? controlledAnimate : undefined,
       media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : 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,
+      key: "highlight-" + idx,
       as: "span",
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined,
-      fontSize: fontSize
-    }, highlightViewProps, highlightBackgroundOverrides, views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
+      fontSize: useResponsive ? undefined : fontSize
+    }, !highlightSlide ? highlightViewProps : {}, highlightBackgroundOverrides, 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"
+    })) : highlightSlide ? (/*#__PURE__*/React__default.createElement(SlideEffect, {
+      text: part.text,
+      duration: stateHighlightSlideDuration,
+      stagger: stateHighlightSlideStagger,
+      sequential: stateHighlightSlideSequential,
+      direction: "up",
+      fontSize: useResponsive ? undefined : fontSize,
+      fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
+      wordProps: highlightViewProps
     })) : part.text))));
   }
   // If highlightStyle is provided but no highlightText, apply the style to the entire title
@@ -19121,11 +19300,20 @@ var TitleView = _ref => {
       fontSize: fontSize,
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined
-    }, highlightViewProps, highlightBackgroundOverrides, views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
+    }, !highlightSlide ? highlightViewProps : {}, highlightBackgroundOverrides, 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"
+    })) : highlightSlide ? (/*#__PURE__*/React__default.createElement(SlideEffect, {
+      text: text,
+      duration: stateHighlightSlideDuration,
+      stagger: stateHighlightSlideStagger,
+      sequential: stateHighlightSlideSequential,
+      direction: "up",
+      fontSize: fontSize,
+      fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
+      wordProps: highlightViewProps
     })) : text));
   }
   // Default case - no highlighting
@@ -19273,7 +19461,7 @@ var getToggleVariants = (color, isLight) => ({
   }
 });
 
-var _excluded$_ = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
+var _excluded$$ = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
 var ToggleView = _ref => {
   var _ref2;
   var {
@@ -19293,7 +19481,7 @@ var ToggleView = _ref => {
       // 2nd candidate for main color
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   /* theme helpers */
   var {
     getColor,
@@ -19337,7 +19525,7 @@ var ToggleView = _ref => {
   }, props, views == null ? void 0 : views.container), children);
 };
 
-var _excluded$$ = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$10 = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
 // Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = _ref => {
   var {
@@ -19349,7 +19537,7 @@ var ToggleComponent = _ref => {
       isToggled = false,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   // Initializing toggle state and set state functions using the custom hook useToggleState.
   var {
     isHovered,
@@ -19684,8 +19872,8 @@ var DropdownMenuItemStates = {
   }
 };
 
-var _excluded$10 = ["children", "views"],
-  _excluded2$f = ["items", "side", "align", "views"],
+var _excluded$11 = ["children", "views"],
+  _excluded2$g = ["items", "side", "align", "views"],
   _excluded3$a = ["item", "views"],
   _excluded4$9 = ["views"],
   _excluded5$5 = ["trigger", "items", "side", "align", "views", "themeMode"];
@@ -19725,7 +19913,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$10);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
   var {
     isOpen,
     setIsOpen,
@@ -19752,7 +19940,7 @@ var DropdownMenuContent = _ref3 => {
       align = 'start',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
   var {
     isOpen,
     variant,
@@ -19978,7 +20166,7 @@ var DropdownMenuView = _ref6 => {
   }));
 };
 
-var _excluded$11 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+var _excluded$12 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
 /**
  * DropdownMenu component for displaying a menu when clicking on a trigger element.
  */
@@ -19993,7 +20181,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
   var {
     isOpen,
     setIsOpen,
@@ -20407,7 +20595,7 @@ var DefaultColorPalette$1 = [
   category: 'neutral'
 }];
 
-var _excluded$12 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
+var _excluded$13 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
 var ColorPickerView = _ref => {
   var {
       // Basic props
@@ -20442,7 +20630,7 @@ var ColorPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
   var {
     getColor
   } = appStudio.useTheme();
@@ -20604,6 +20792,7 @@ var DefaultEmojiPickerStyles = {
   },
   dropdown: {
     position: 'absolute',
+    mixBlendMode: 'normal',
     top: 'calc(100% + 4px)',
     left: 0,
     right: 0,
@@ -22772,7 +22961,7 @@ var useEmojiPickerState = props => {
   };
 };
 
-var _excluded$13 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
+var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
 var EmojiPickerView = _ref => {
   var {
       // Basic props
@@ -22810,7 +22999,7 @@ var EmojiPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
   var {
     getColor
   } = appStudio.useTheme();
@@ -22844,8 +23033,6 @@ var EmojiPickerView = _ref => {
     alignItems: "center",
     gap: 8
   }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-    fontSize: "20px"
-  }, selectedEmoji || '😀'), /*#__PURE__*/React__default.createElement(appStudio.Text, {
     color: selectedEmoji ? 'color.gray.800' : 'color.gray.500',
     fontSize: "inherit"
   }, selectedEmoji || placeholder)), !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(ChevronIcon, {
@@ -22999,7 +23186,7 @@ var MenubarItemStates = {
   }
 };
 
-var _excluded$14 = ["children", "orientation", "size", "variant", "views"];
+var _excluded$15 = ["children", "orientation", "size", "variant", "views"];
 // Create context for the Menubar
 var MenubarContext = /*#__PURE__*/React.createContext({
   activeMenuId: null,
@@ -23036,7 +23223,7 @@ var MenubarRoot = _ref2 => {
       variant = 'default',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$14);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
   var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
   return /*#__PURE__*/React__default.createElement(Container, Object.assign({
     role: "menubar",
@@ -23356,7 +23543,7 @@ var MenubarView = _ref8 => {
   })))))));
 };
 
-var _excluded$15 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+var _excluded$16 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
 /**
  * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
  */
@@ -23370,7 +23557,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -23552,7 +23739,7 @@ var DisabledButtonStyles = {
   }
 };
 
-var _excluded$16 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+var _excluded$17 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
 var PaginationView = _ref => {
   var {
       currentPage,
@@ -23583,7 +23770,7 @@ var PaginationView = _ref => {
       visiblePageNumbers,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
   var handlePageChange = page => {
     if (page < 1 || page > totalPages || page === currentPage) {
       return;
@@ -23702,7 +23889,7 @@ var PaginationView = _ref => {
   }, option.label))))));
 };
 
-var _excluded$17 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+var _excluded$18 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
 /**
  * Pagination component for navigating through pages of content.
  */
@@ -23723,7 +23910,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -23747,7 +23934,7 @@ var PaginationComponent = _ref => {
 };
 var Pagination = PaginationComponent;
 
-var _excluded$18 = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
+var _excluded$19 = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
 var ProgressBarView = _ref => {
   var {
       value = 0,
@@ -23759,7 +23946,7 @@ var ProgressBarView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
   var {
     getColor,
     themeMode
@@ -23849,7 +24036,7 @@ var DefaultSeparatorStyles = {
   }
 };
 
-var _excluded$19 = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+var _excluded$1a = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
 var SeparatorView = _ref => {
   var {
       orientation = 'horizontal',
@@ -23861,7 +24048,7 @@ var SeparatorView = _ref => {
       decorative = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
   // Access theme if needed for future enhancements
   var {
     themeMode
@@ -23929,7 +24116,7 @@ var SeparatorComponent = props => {
 var Separator = SeparatorComponent;
 var Divider = SeparatorComponent;
 
-var _excluded$1a = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
+var _excluded$1b = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
 var ICON_SIZE_MAP = {
   xs: 12,
   sm: 14,
@@ -23952,7 +24139,7 @@ var ShareButtonView = _ref => {
       iconPosition,
       disableWhenUnsupported = true
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
   var resolvedSize = size != null ? size : 'md';
   var resolvedIcon = icon != null ? icon : (/*#__PURE__*/React__default.createElement(ShareIcon, {
     widthHeight: ICON_SIZE_MAP[resolvedSize],
@@ -24054,14 +24241,14 @@ var useShareButton = props => {
   };
 };
 
-var _excluded$1b = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
+var _excluded$1c = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
 var ShareButtonComponent = props => {
   var {
     isSupported,
     isSharing,
     handleShare
   } = useShareButton(props);
-  var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1b);
+  var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1c);
   return /*#__PURE__*/React__default.createElement(ShareButtonView, Object.assign({}, viewProps, {
     isSupported: isSupported,
     isSharing: isSharing,
@@ -24115,7 +24302,7 @@ var getThemes$2 = themeMode => {
   };
 };
 
-var _excluded$1c = ["label", "status", "views", "themeMode"];
+var _excluded$1d = ["label", "status", "views", "themeMode"];
 var StatusIndicatorView = _ref => {
   var {
       label,
@@ -24123,7 +24310,7 @@ var StatusIndicatorView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1d);
   var {
     themeMode
   } = appStudio.useTheme();
@@ -24306,8 +24493,8 @@ 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$1d = ["children", "showToggleButton", "views"],
-  _excluded2$g = ["children", "views"],
+var _excluded$1e = ["children", "showToggleButton", "views"],
+  _excluded2$h = ["children", "views"],
   _excluded3$b = ["children", "views"],
   _excluded4$a = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
 // Create context for the Sidebar
@@ -24339,7 +24526,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1d);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1e);
   var {
     isExpanded,
     toggleExpanded,
@@ -24406,7 +24593,7 @@ var SidebarContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
   var {
     isExpanded
   } = useSidebarContext();
@@ -24494,7 +24681,7 @@ var SidebarView = _ref5 => {
   }))));
 };
 
-var _excluded$1e = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
+var _excluded$1f = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
 /**
  * Sidebar component for creating collapsible, themeable and customizable sidebars.
  */
@@ -24516,7 +24703,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
   var {
     isExpanded,
     toggleExpanded,
@@ -24981,8 +25168,8 @@ var HandleIconStyles = {
   }
 };
 
-var _excluded$1f = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
-  _excluded2$h = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
+var _excluded$1g = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
+  _excluded2$i = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
   _excluded3$c = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
 // Create context for the Resizable component
 var ResizableContext = /*#__PURE__*/React.createContext({
@@ -25026,7 +25213,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1g);
   var {
     orientation,
     registerPanel,
@@ -25090,7 +25277,7 @@ var ResizableHandle = _ref3 => {
       collapseTarget,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
   var {
     orientation,
     size,
@@ -25241,7 +25428,7 @@ var ResizableView = _ref4 => {
   }, ResizableOrientations[orientation], views == null ? void 0 : views.container, props), children);
 };
 
-var _excluded$1g = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
+var _excluded$1h = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
 /**
  * Resizable component for creating resizable panel groups and layouts.
  */
@@ -25261,7 +25448,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
   var {
     isResizing,
     setIsResizing,
@@ -26032,8 +26219,8 @@ var CommandFooterStyles = {
   color: 'color.gray.500'
 };
 
-var _excluded$1h = ["value", "onValueChange", "placeholder", "views"],
-  _excluded2$i = ["children", "views"],
+var _excluded$1i = ["value", "onValueChange", "placeholder", "views"],
+  _excluded2$j = ["children", "views"],
   _excluded3$d = ["heading", "children", "views"],
   _excluded4$b = ["item", "selected", "onSelect", "views"],
   _excluded5$6 = ["children", "views"],
@@ -26064,7 +26251,7 @@ var CommandInput = _ref2 => {
       placeholder = 'Type a command or search...',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1h);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1i);
   var inputRef = React.useRef(null);
   // Focus input when component mounts
   React__default.useEffect(() => {
@@ -26096,7 +26283,7 @@ var CommandList = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$j);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandListStyles, views == null ? void 0 : views.container, props), children);
 };
 // Command Group component
@@ -26247,7 +26434,7 @@ var CommandView = _ref7 => {
   })))), footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandFooterStyles, views == null ? void 0 : views.footer), footer)))));
 };
 
-var _excluded$1i = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
+var _excluded$1j = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
 /**
  * Command component for displaying a command palette with search functionality.
  */
@@ -26265,7 +26452,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
   var {
     search,
     setSearch,
@@ -26502,8 +26689,8 @@ var getArrowStyles = position => {
   }
 };
 
-var _excluded$1j = ["children", "views", "asChild"],
-  _excluded2$j = ["children", "views"],
+var _excluded$1k = ["children", "views", "asChild"],
+  _excluded2$k = ["children", "views"],
   _excluded3$e = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
 // Create context for the Tooltip
 var TooltipContext = /*#__PURE__*/React.createContext({
@@ -26538,7 +26725,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1j);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1k);
   var {
     openTooltip,
     closeTooltip,
@@ -26574,7 +26761,7 @@ var TooltipContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$j);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$k);
   var {
     isOpen,
     contentRef,
@@ -26722,7 +26909,7 @@ var TooltipView = _ref4 => {
   }, TooltipSizes[size], TooltipVariants[variant], 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$1k = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
+var _excluded$1l = ["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.
@@ -26742,7 +26929,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,
@@ -27051,7 +27238,7 @@ var DefaultGradientStyles = {
   }
 };
 
-var _excluded$1l = ["type", "direction", "shape", "position", "from", "to", "colors", "animate", "animationDuration", "children", "views", "themeMode"];
+var _excluded$1m = ["type", "direction", "shape", "position", "from", "to", "colors", "animate", "animationDuration", "children", "views", "themeMode"];
 var GradientView = _ref => {
   var {
       type = 'linear',
@@ -27067,7 +27254,7 @@ var GradientView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
   var {
     getColor,
     themeMode
@@ -27143,8 +27330,8 @@ var Gradient = props => {
   return /*#__PURE__*/React__default.createElement(GradientView, Object.assign({}, props));
 };
 
-var _excluded$1m = ["children", "showRadialGradient", "views", "themeMode"],
-  _excluded2$k = ["number", "children"],
+var _excluded$1n = ["children", "showRadialGradient", "views", "themeMode"],
+  _excluded2$l = ["number", "children"],
   _excluded3$f = ["rows", "cols", "squareSize"],
   _excluded4$c = ["count", "colors", "speed", "shapes"],
   _excluded5$7 = ["gridSize", "lineColor", "pulseColor", "animationSpeed"],
@@ -27164,7 +27351,7 @@ var AuroraBackground = _ref => {
       showRadialGradient = true,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
   var gradientColors = {
     white: 'rgba(255,255,255,1)',
     transparent: 'rgba(255,255,255,0)'
@@ -27188,7 +27375,7 @@ var Meteors = _ref2 => {
       number = 20,
       children
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$k);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$l);
   var meteors = Array.from({
     length: number
   }, (_, i) => i);