@app-studio/web 0.9.43 → 0.9.44

package/dist/web.umd.development.js

@@ -4483,7 +4483,6 @@
       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);
@@ -4495,8 +4494,7 @@
       ,
       textAlign: "center"
     }, views == null ? void 0 : views.text, {
-      color: combinedStyles.color,
-      bgColor: combinedStyles.backgroundColor
+      color: combinedStyles.color
     }), content || ''));
   };
 
@@ -18674,7 +18672,11 @@
       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);
@@ -18719,7 +18721,11 @@
     return {
       finalDisplayedText,
       activeHighlightTarget,
-      highlightTypewriter
+      highlightTypewriter,
+      highlightSlide,
+      highlightSlideDuration,
+      highlightSlideStagger,
+      highlightSlideSequential
     };
   };
 
@@ -18939,7 +18945,159 @@
     }))))));
   };
 
-  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, '\\$&');
   }
@@ -18959,9 +19117,13 @@
         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
@@ -18994,13 +19156,21 @@
     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
@@ -19053,16 +19223,25 @@
         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
@@ -19082,11 +19261,20 @@
         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
@@ -19234,7 +19422,7 @@
     }
   });
 
-  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 {
@@ -19254,7 +19442,7 @@
         // 2nd candidate for main color
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     /* theme helpers */
     var {
       getColor,
@@ -19298,7 +19486,7 @@
     }, 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 {
@@ -19310,7 +19498,7 @@
         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,
@@ -19645,8 +19833,8 @@
     }
   };
 
-  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"];
@@ -19686,7 +19874,7 @@
         children,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$10);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
     var {
       isOpen,
       setIsOpen,
@@ -19713,7 +19901,7 @@
         align = 'start',
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
     var {
       isOpen,
       variant,
@@ -19939,7 +20127,7 @@
     }));
   };
 
-  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.
    */
@@ -19954,7 +20142,7 @@
         defaultOpen = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
     var {
       isOpen,
       setIsOpen,
@@ -20368,7 +20556,7 @@
     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
@@ -20403,7 +20591,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
     var {
       getColor
     } = appStudio.useTheme();
@@ -20565,6 +20753,7 @@
     },
     dropdown: {
       position: 'absolute',
+      mixBlendMode: 'normal',
       top: 'calc(100% + 4px)',
       left: 0,
       right: 0,
@@ -22733,7 +22922,7 @@
     };
   };
 
-  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
@@ -22771,7 +22960,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
     var {
       getColor
     } = appStudio.useTheme();
@@ -22805,8 +22994,6 @@
       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, {
@@ -22960,7 +23147,7 @@
     }
   };
 
-  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,
@@ -22997,7 +23184,7 @@
         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",
@@ -23317,7 +23504,7 @@
     })))))));
   };
 
-  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.
    */
@@ -23331,7 +23518,7 @@
         defaultOpenMenuId = null,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
     var {
       activeMenuId,
       setActiveMenuId,
@@ -23513,7 +23700,7 @@
     }
   };
 
-  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,
@@ -23544,7 +23731,7 @@
         visiblePageNumbers,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
     var handlePageChange = page => {
       if (page < 1 || page > totalPages || page === currentPage) {
         return;
@@ -23663,7 +23850,7 @@
     }, 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.
    */
@@ -23684,7 +23871,7 @@
         shape = 'rounded',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
     var {
       visiblePageNumbers
     } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -23708,7 +23895,7 @@
   };
   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,
@@ -23720,7 +23907,7 @@
         views,
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
     var {
       getColor,
       themeMode
@@ -23810,7 +23997,7 @@
     }
   };
 
-  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',
@@ -23822,7 +24009,7 @@
         decorative = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
     // Access theme if needed for future enhancements
     var {
       themeMode
@@ -23890,7 +24077,7 @@
   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,
@@ -23913,7 +24100,7 @@
         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],
@@ -24015,14 +24202,14 @@
     };
   };
 
-  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,
@@ -24076,7 +24263,7 @@
     };
   };
 
-  var _excluded$1c = ["label", "status", "views", "themeMode"];
+  var _excluded$1d = ["label", "status", "views", "themeMode"];
   var StatusIndicatorView = _ref => {
     var {
         label,
@@ -24084,7 +24271,7 @@
         views,
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1d);
     var {
       themeMode
     } = appStudio.useTheme();
@@ -24267,8 +24454,8 @@
     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
@@ -24300,7 +24487,7 @@
         showToggleButton = true,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1d);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1e);
     var {
       isExpanded,
       toggleExpanded,
@@ -24367,7 +24554,7 @@
         children,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
     var {
       isExpanded
     } = useSidebarContext();
@@ -24455,7 +24642,7 @@
     }))));
   };
 
-  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.
    */
@@ -24477,7 +24664,7 @@
         breakpointBehavior = 'overlay',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
     var {
       isExpanded,
       toggleExpanded,
@@ -24942,8 +25129,8 @@
     }
   };
 
-  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({
@@ -24987,7 +25174,7 @@
         onCollapseChange,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1g);
     var {
       orientation,
       registerPanel,
@@ -25051,7 +25238,7 @@
         collapseTarget,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
     var {
       orientation,
       size,
@@ -25202,7 +25389,7 @@
     }, 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.
    */
@@ -25222,7 +25409,7 @@
         keyboardResizeBy = 10,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
     var {
       isResizing,
       setIsResizing,
@@ -25993,8 +26180,8 @@
     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"],
@@ -26025,7 +26212,7 @@
         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(() => {
@@ -26057,7 +26244,7 @@
         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
@@ -26208,7 +26395,7 @@
     })))), 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.
    */
@@ -26226,7 +26413,7 @@
         footer,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
     var {
       search,
       setSearch,
@@ -26463,8 +26650,8 @@
     }
   };
 
-  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({
@@ -26499,7 +26686,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1j);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1k);
     var {
       openTooltip,
       closeTooltip,
@@ -26535,7 +26722,7 @@
         children,
         views
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$j);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$k);
     var {
       isOpen,
       contentRef,
@@ -26683,7 +26870,7 @@
     }, 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.
@@ -26703,7 +26890,7 @@
         isDisabled = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
     var tooltipState = useTooltipState({
       defaultOpen,
       openDelay,
@@ -27012,7 +27199,7 @@
     }
   };
 
-  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',
@@ -27028,7 +27215,7 @@
         views,
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
     var {
       getColor,
       themeMode
@@ -27104,8 +27291,8 @@
     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"],
@@ -27125,7 +27312,7 @@
         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)'
@@ -27149,7 +27336,7 @@
         number = 20,
         children
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$k);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$l);
     var meteors = Array.from({
       length: number
     }, (_, i) => i);