@app-studio/web 0.9.24 → 0.9.26

package/dist/web.umd.development.js

@@ -18824,13 +18824,7 @@
         item: item,
         views: views
       });
-    }),  (/*#__PURE__*/React__default.createElement("div", {
-      style: {
-        fontSize: '10px',
-        opacity: 0.7,
-        padding: '4px'
-      }
-    }, "Placement: ", optimalPosition.placement, relation && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("br", null), "Space: ", relation.space.vertical, "-", relation.space.horizontal)))));
+    }));
   };
   // DropdownMenu Item component
   var DropdownMenuItem = _ref4 => {
@@ -22678,6 +22672,55 @@
   };
   var Pagination = PaginationComponent;
 
+  var _excluded$16 = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
+  var ProgressBarView = _ref => {
+    var {
+        value = 0,
+        max = 100,
+        color = 'theme.primary',
+        backgroundColor = 'color.gray.200',
+        height = 8,
+        radius = 4,
+        views,
+        themeMode: elementMode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var currentMode = elementMode ? elementMode : themeMode;
+    var percentage = Math.min(100, Math.max(0, value / max * 100));
+    var trackColor = getColor(backgroundColor, {
+      themeMode: currentMode
+    });
+    var barColor = getColor(color, {
+      themeMode: currentMode
+    });
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      width: "100%",
+      height: height,
+      backgroundColor: trackColor,
+      borderRadius: radius,
+      overflow: "hidden"
+    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      width: percentage + "%",
+      height: "100%",
+      backgroundColor: barColor,
+      borderRadius: radius
+    }, views == null ? void 0 : views.bar)));
+  };
+
+  /**
+   * ProgressBar component displays completion status of a task or process.
+   */
+  var ProgressBarComponent = props => (/*#__PURE__*/React__default.createElement(ProgressBarView, Object.assign({}, props)));
+  var ProgressBar = ProgressBarComponent;
+
   /**
    * Separator Styles
    *
@@ -22724,7 +22767,7 @@
     }
   };
 
-  var _excluded$16 = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+  var _excluded$17 = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
   var SeparatorView = _ref => {
     var {
         orientation = 'horizontal',
@@ -22736,7 +22779,7 @@
         decorative = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
     // Access theme if needed for future enhancements
     var {
       themeMode
@@ -22804,6 +22847,82 @@
   var Separator = SeparatorComponent;
   var Divider = SeparatorComponent;
 
+  var getThemes$2 = themeMode => {
+    return {
+      default: {
+        indicator: {
+          backgroundColor: 'color.gray.400'
+        },
+        label: {
+          color: 'color.gray.700'
+        }
+      },
+      info: {
+        indicator: {
+          backgroundColor: 'color.blue.500'
+        },
+        label: {
+          color: 'color.blue.700'
+        }
+      },
+      success: {
+        indicator: {
+          backgroundColor: 'color.green.500'
+        },
+        label: {
+          color: 'color.green.700'
+        }
+      },
+      warning: {
+        indicator: {
+          backgroundColor: 'color.orange.500'
+        },
+        label: {
+          color: 'color.orange.700'
+        }
+      },
+      error: {
+        indicator: {
+          backgroundColor: 'color.red.500'
+        },
+        label: {
+          color: 'color.red.700'
+        }
+      }
+    };
+  };
+
+  var _excluded$18 = ["label", "status", "views", "themeMode"];
+  var StatusIndicatorView = _ref => {
+    var {
+        label,
+        status = 'default',
+        views,
+        themeMode: elementMode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+    var {
+      themeMode
+    } = appStudio.useTheme();
+    var themes = getThemes$2();
+    return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      alignItems: "center",
+      gap: 8,
+      role: "status-indicator"
+    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      role: "status-dot",
+      width: "8px",
+      height: "8px",
+      borderRadius: "50%"
+    }, themes[status].indicator, views == null ? void 0 : views.indicator)), label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+      role: "status-label",
+      fontSize: "14px",
+      lineHeight: "20px"
+    }, themes[status].label, views == null ? void 0 : views.label), label)));
+  };
+
+  var StatusIndicator = props => (/*#__PURE__*/React__default.createElement(StatusIndicatorView, Object.assign({}, props)));
+
   var useSidebarState = function useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint) {
     if (defaultExpanded === void 0) {
       defaultExpanded = true;
@@ -22974,7 +23093,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$17 = ["children", "showToggleButton", "views"],
+  var _excluded$19 = ["children", "showToggleButton", "views"],
     _excluded2$g = ["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"];
@@ -23007,7 +23126,7 @@
         showToggleButton = true,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$17);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$19);
     var {
       isExpanded,
       toggleExpanded,
@@ -23162,7 +23281,7 @@
     }))));
   };
 
-  var _excluded$18 = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
+  var _excluded$1a = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
   /**
    * Sidebar component for creating collapsible, themeable and customizable sidebars.
    */
@@ -23184,7 +23303,7 @@
         breakpointBehavior = 'overlay',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
     var {
       isExpanded,
       toggleExpanded,
@@ -23649,7 +23768,7 @@
     }
   };
 
-  var _excluded$19 = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
+  var _excluded$1b = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
     _excluded2$h = ["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
@@ -23694,7 +23813,7 @@
         onCollapseChange,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$19);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1b);
     var {
       orientation,
       registerPanel,
@@ -23909,7 +24028,7 @@
     }, ResizableOrientations[orientation], views == null ? void 0 : views.container, props), children);
   };
 
-  var _excluded$1a = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
+  var _excluded$1c = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
   /**
    * Resizable component for creating resizable panel groups and layouts.
    */
@@ -23929,7 +24048,7 @@
         keyboardResizeBy = 10,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
     var {
       isResizing,
       setIsResizing,
@@ -24697,7 +24816,7 @@
     color: 'color.gray.500'
   };
 
-  var _excluded$1b = ["value", "onValueChange", "placeholder", "views"],
+  var _excluded$1d = ["value", "onValueChange", "placeholder", "views"],
     _excluded2$i = ["children", "views"],
     _excluded3$c = ["heading", "children", "views"],
     _excluded4$a = ["item", "selected", "onSelect", "views"],
@@ -24729,7 +24848,7 @@
         placeholder = 'Type a command or search...',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1b);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1d);
     var inputRef = React.useRef(null);
     // Focus input when component mounts
     React__default.useEffect(() => {
@@ -24912,7 +25031,7 @@
     })))), footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandFooterStyles, views == null ? void 0 : views.footer), footer)))));
   };
 
-  var _excluded$1c = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
+  var _excluded$1e = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
   /**
    * Command component for displaying a command palette with search functionality.
    */
@@ -24930,7 +25049,7 @@
         footer,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
     var {
       search,
       setSearch,
@@ -25158,7 +25277,7 @@
     }
   };
 
-  var _excluded$1d = ["children", "views", "asChild"],
+  var _excluded$1f = ["children", "views", "asChild"],
     _excluded2$j = ["children", "views"],
     _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
   // Create context for the Tooltip
@@ -25194,7 +25313,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1d);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
     var {
       openTooltip,
       closeTooltip,
@@ -25375,16 +25494,10 @@
       borderRadius: 4,
       boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
       style: positionStyles
-    }, 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)),  (/*#__PURE__*/React__default.createElement("div", {
-      style: {
-        fontSize: '8px',
-        opacity: 0.7,
-        marginTop: '2px'
-      }
-    }, "Placement: ", optimalPosition.placement, relation && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("br", null), "Space: ", relation.space.vertical, "-", relation.space.horizontal)))))));
+    }, 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$1e = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
+  var _excluded$1g = ["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.
@@ -25404,7 +25517,7 @@
         isDisabled = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
     var tooltipState = useTooltipState({
       defaultOpen,
       openDelay,
@@ -25877,7 +25990,7 @@
     }
   };
 
-  var _excluded$1f = ["children", "views", "baseId"],
+  var _excluded$1h = ["children", "views", "baseId"],
     _excluded2$k = ["value", "disabled", "icon", "children", "views", "style", "draggable"],
     _excluded3$e = ["children", "onClick", "onToggleExpand", "hasChildren", "expanded", "icon", "disabled", "isSelected", "isDragging", "size", "variant", "views"],
     _excluded4$b = ["children", "views"];
@@ -25913,7 +26026,7 @@
         baseId
         // themeMode, // If 'app-studio' ViewProps supports themeMode
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1h);
     var {
       allowDragAndDrop,
       handleDrop,
@@ -26193,7 +26306,7 @@
     }))));
   };
 
-  var _excluded$1g = ["children", "items", "size", "variant", "defaultExpandedItems", "expandedItems", "onExpandedItemsChange", "defaultSelectedItem", "selectedItem", "onItemSelect", "multiSelect", "allowDragAndDrop", "dragHandleIcon", "onItemsReorder", "onDragStart", "onDragEnd", "views"];
+  var _excluded$1i = ["children", "items", "size", "variant", "defaultExpandedItems", "expandedItems", "onExpandedItemsChange", "defaultSelectedItem", "selectedItem", "onItemSelect", "multiSelect", "allowDragAndDrop", "dragHandleIcon", "onItemsReorder", "onDragStart", "onDragEnd", "views"];
   /**
    * Tree component for displaying hierarchical data.
    * Supports both compound component pattern (using Tree.Item, Tree.ItemLabel, Tree.ItemContent)
@@ -26262,7 +26375,7 @@
         views // Global views configuration
         // Remaining ViewProps for the root TreeView container
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
     var treeState = useTreeState({
       defaultExpandedItems,
       expandedItems,
@@ -26835,7 +26948,7 @@
     }
   };
 
-  var _excluded$1h = ["node", "onSelect", "isSelected", "isDragging", "onDragStart", "onDrag", "onDragEnd", "size", "variant", "views"],
+  var _excluded$1j = ["node", "onSelect", "isSelected", "isDragging", "onDragStart", "onDrag", "onDragEnd", "size", "variant", "views"],
     _excluded2$l = ["onZoomIn", "onZoomOut", "onReset", "views"],
     _excluded3$f = ["onClick", "views"],
     _excluded4$c = ["nodes", "edges", "selectedNodeId", "draggedNodeId", "onNodeSelect", "onAddNode", "onNodeDragStart", "onNodeDrag", "onNodeDragEnd", "size", "variant", "direction", "showControls", "allowAddingNodes", "allowDraggingNodes", "views", "baseId", "viewport", "onZoomIn", "onZoomOut", "onReset", "onViewportChange"];
@@ -26851,7 +26964,7 @@
         variant = 'default',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
     var handleClick = () => {
       if (onSelect) {
         onSelect(node.id);
@@ -27498,7 +27611,7 @@
     }, "Zoom: ", Math.round(viewport.zoom * 100), "%")));
   };
 
-  var _excluded$1i = ["children", "nodes", "edges", "size", "variant", "direction", "showControls", "allowAddingNodes", "allowDraggingNodes", "onNodesChange", "onEdgesChange", "onNodeSelect", "onNodeAdd", "onNodeDragStart", "onNodeDrag", "onNodeDragEnd", "selectedNodeId", "initialViewport", "viewport", "onViewportChange", "views"];
+  var _excluded$1k = ["children", "nodes", "edges", "size", "variant", "direction", "showControls", "allowAddingNodes", "allowDraggingNodes", "onNodesChange", "onEdgesChange", "onNodeSelect", "onNodeAdd", "onNodeDragStart", "onNodeDrag", "onNodeDragEnd", "selectedNodeId", "initialViewport", "viewport", "onViewportChange", "views"];
   /**
    * Flow component for creating workflow diagrams.
    *
@@ -27555,7 +27668,7 @@
         onViewportChange,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
     var flowState = useFlowState({
       initialNodes: controlledNodes,
       initialEdges: controlledEdges,
@@ -27729,6 +27842,39 @@
       zIndex: 2
     }
   };
+  /**
+   * Background Video styles
+   */
+  var BackgroundVideoStyles = {
+    container: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden'
+    },
+    video: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover'
+    },
+    overlay: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    },
+    content: {
+      position: 'relative',
+      zIndex: 2
+    }
+  };
 
   /**
    * Gradient Styles
@@ -27891,7 +28037,7 @@
     }
   };
 
-  var _excluded$1j = ["type", "direction", "shape", "position", "from", "to", "colors", "animate", "animationDuration", "children", "views", "themeMode"];
+  var _excluded$1l = ["type", "direction", "shape", "position", "from", "to", "colors", "animate", "animationDuration", "children", "views", "themeMode"];
   var GradientView = _ref => {
     var {
         type = 'linear',
@@ -27907,7 +28053,7 @@
         views,
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
     var {
       getColor,
       themeMode
@@ -27983,15 +28129,16 @@
     return /*#__PURE__*/React__default.createElement(GradientView, Object.assign({}, props));
   };
 
-  var _excluded$1k = ["children", "showRadialGradient", "views", "themeMode"],
+  var _excluded$1m = ["children", "showRadialGradient", "views", "themeMode"],
     _excluded2$m = ["number", "children"],
     _excluded3$g = ["rows", "cols", "squareSize"],
     _excluded4$d = ["count", "colors", "speed", "shapes"],
     _excluded5$6 = ["gridSize", "lineColor", "pulseColor", "animationSpeed"],
     _excluded6$4 = ["rippleCount", "colors", "maxSize", "frequency"],
     _excluded7$1 = ["children", "src", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "imageOpacity", "overlay", "blendMode", "views", "themeMode"],
-    _excluded8$1 = ["children"],
-    _excluded9$1 = ["children", "views"];
+    _excluded8$1 = ["children", "src", "autoPlay", "loop", "muted", "playsInline", "overlay", "blendMode", "views", "themeMode"],
+    _excluded9$1 = ["children"],
+    _excluded10$1 = ["children", "views"];
   // Background Context
   var BackgroundContext = /*#__PURE__*/React.createContext({});
   /**
@@ -28003,7 +28150,7 @@
         showRadialGradient = true,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
     var gradientColors = {
       white: 'rgba(255,255,255,1)',
       transparent: 'rgba(255,255,255,0)'
@@ -28414,23 +28561,61 @@
       style: overlayStyle
     }), children && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, BackgroundImageStyles.content, views == null ? void 0 : views.content), children)));
   };
+  /**
+   * Background Video Component
+   */
+  var BackgroundVideo = _ref8 => {
+    var {
+        children,
+        src,
+        autoPlay = true,
+        loop = true,
+        muted = true,
+        playsInline = true,
+        overlay,
+        blendMode = 'normal',
+        views,
+        themeMode: elementMode
+      } = _ref8,
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded8$1);
+    var {
+      getColor
+    } = appStudio.useTheme();
+    var overlayStyle = overlay ? Object.assign({}, BackgroundVideoStyles.overlay, {
+      backgroundColor: getColor(overlay, elementMode ? {
+        themeMode: elementMode
+      } : undefined),
+      mixBlendMode: blendMode
+    }) : {};
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, BackgroundVideoStyles.container, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      as: "video",
+      src: src,
+      autoPlay: autoPlay,
+      loop: loop,
+      muted: muted,
+      playsInline: playsInline,
+      style: BackgroundVideoStyles.video
+    }, views == null ? void 0 : views.video)), overlay && /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      style: overlayStyle
+    }, views == null ? void 0 : views.overlay)), children && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, BackgroundVideoStyles.content, views == null ? void 0 : views.content), children)));
+  };
   /**
    * Background Gradient Component
    * Uses the existing Gradient component as a background
    */
-  var BackgroundGradient = _ref8 => {
+  var BackgroundGradient = _ref9 => {
     var {
         children
-      } = _ref8,
-      gradientProps = _objectWithoutPropertiesLoose(_ref8, _excluded8$1);
+      } = _ref9,
+      gradientProps = _objectWithoutPropertiesLoose(_ref9, _excluded9$1);
     return /*#__PURE__*/React__default.createElement(Gradient, Object.assign({}, gradientProps), children);
   };
-  var BackgroundViewBase = _ref9 => {
+  var BackgroundViewBase = _ref10 => {
     var {
         children,
         views
-      } = _ref9,
-      props = _objectWithoutPropertiesLoose(_ref9, _excluded9$1);
+      } = _ref10,
+      props = _objectWithoutPropertiesLoose(_ref10, _excluded10$1);
     return /*#__PURE__*/React__default.createElement(BackgroundContext.Provider, {
       value: {}
     }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultBackgroundStyles.container, views == null ? void 0 : views.container, props), children));
@@ -28445,6 +28630,7 @@
   BackgroundView.Grid = Grid;
   BackgroundView.Ripples = Ripples;
   BackgroundView.Image = BackgroundImage;
+  BackgroundView.Video = BackgroundVideo;
   BackgroundView.Gradient = BackgroundGradient;
 
   /**
@@ -28483,6 +28669,12 @@
    * </Background.Image>
    *
    * @example
+   * // Background Video
+   * <Background.Video src="/path/to/video.mp4" overlay="rgba(0,0,0,0.5)">
+   *   <Text color="white">Content over video</Text>
+   * </Background.Video>
+   *
+   * @example
    * // Background Gradient
    * <Background.Gradient from="blue.500" to="purple.500" animate={true}>
    *   <Text color="white">Content over gradient</Text>
@@ -28500,6 +28692,7 @@
     Grid: BackgroundView.Grid,
     Ripples: BackgroundView.Ripples,
     Image: BackgroundView.Image,
+    Video: BackgroundView.Video,
     Gradient: BackgroundView.Gradient
   });
   Background.displayName = 'Background';
@@ -28857,7 +29050,7 @@
     }, step.label))))));
   };
 
-  var _excluded$1l = ["placeholder", "showTimestamps", "showAvatars", "showTypingIndicator", "autoScroll", "enableFileUpload", "enableAudioRecording", "enableVideoRecording", "views", "containerProps", "colorScheme", "compact", "rounded", "ariaLabel", "ariaDescribedBy", "messages", "currentSession", "isLoading", "isTyping", "error", "inputValue", "selectedFiles", "sessionId", "sendMessage", "setInputValue", "handleFileSelect", "removeFile", "messagesEndRef", "setError", "setSelectedFiles"];
+  var _excluded$1n = ["placeholder", "showTimestamps", "showAvatars", "showTypingIndicator", "autoScroll", "enableFileUpload", "enableAudioRecording", "enableVideoRecording", "views", "containerProps", "colorScheme", "compact", "rounded", "ariaLabel", "ariaDescribedBy", "messages", "currentSession", "isLoading", "isTyping", "error", "inputValue", "selectedFiles", "sessionId", "sendMessage", "setInputValue", "handleFileSelect", "removeFile", "messagesEndRef", "setError", "setSelectedFiles"];
   /**
    * AgentChat View Component
    *
@@ -28897,7 +29090,7 @@
         setError,
         setSelectedFiles
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
     /**
      * Auto-scroll to bottom when new messages arrive
      */
@@ -30038,7 +30231,7 @@
     }, "Clear all filters")))));
   };
 
-  var _excluded$1m = ["showSessionHistory", "enableSessionImport", "enableSessionExport", "enableSessionDelete", "enableSessionSearch", "showSessionInfo", "showSessionActions", "showCreateButton", "showRefreshButton", "compactMode", "views", "containerProps", "colorScheme", "layout", "showPreviews", "ariaLabel", "ariaDescribedBy", "sessions", "selectedSession", "isLoading", "isCreating", "error", "searchQuery", "filters", "sortOptions", "fetchSessions", "createSession", "selectSession", "deleteSession", "exportSession", "handleFileImport", "setSearchQuery", "setFilters", "setSortOptions", "setError", "fileInputRef", "handleFileSelect"];
+  var _excluded$1o = ["showSessionHistory", "enableSessionImport", "enableSessionExport", "enableSessionDelete", "enableSessionSearch", "showSessionInfo", "showSessionActions", "showCreateButton", "showRefreshButton", "compactMode", "views", "containerProps", "colorScheme", "layout", "showPreviews", "ariaLabel", "ariaDescribedBy", "sessions", "selectedSession", "isLoading", "isCreating", "error", "searchQuery", "filters", "sortOptions", "fetchSessions", "createSession", "selectSession", "deleteSession", "exportSession", "handleFileImport", "setSearchQuery", "setFilters", "setSortOptions", "setError", "fileInputRef", "handleFileSelect"];
   /**
    * AgentSession View Component
    *
@@ -30086,7 +30279,7 @@
         fileInputRef,
         handleFileSelect
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1o);
     /**
      * Handle session creation
      */
@@ -31925,7 +32118,7 @@
     }, renderVisualization())));
   };
 
-  var _excluded$1n = ["showTimeline", "showMetrics", "showVisualization", "enableFiltering", "enableExport", "enableSearch", "showEventDetails", "showPerformanceMetrics", "compactMode", "views", "ariaLabel", "ariaDescribedBy", "events", "spans", "selectedEvent", "selectedSpan", "metrics", "isLoading", "error", "filter", "searchQuery", "currentVisualization", "fetchTraceEvents", "selectEvent", "selectSpan", "updateFilter", "exportTrace", "setSearchQuery", "setCurrentVisualization", "setError"];
+  var _excluded$1p = ["showTimeline", "showMetrics", "showVisualization", "enableFiltering", "enableExport", "enableSearch", "showEventDetails", "showPerformanceMetrics", "compactMode", "views", "ariaLabel", "ariaDescribedBy", "events", "spans", "selectedEvent", "selectedSpan", "metrics", "isLoading", "error", "filter", "searchQuery", "currentVisualization", "fetchTraceEvents", "selectEvent", "selectSpan", "updateFilter", "exportTrace", "setSearchQuery", "setCurrentVisualization", "setError"];
   /**
    * AgentTrace View Component
    *
@@ -31966,7 +32159,7 @@
         setCurrentVisualization,
         setError
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1p);
     /**
      * Handle event selection
      */
@@ -33655,7 +33848,7 @@
     }, "Run some evaluations to see performance metrics")))));
   };
 
-  var _excluded$1o = ["enableBatchEvaluation", "enableMetricsComparison", "enableResultExport", "enableTemplates", "showEvaluationHistory", "showMetricsPanel", "showTestCaseDetails", "showProgressIndicators", "compactMode", "views", "ariaLabel", "ariaDescribedBy", "evaluations", "selectedEvaluation", "selectedResult", "isLoading", "isCreating", "error", "searchQuery", "templates", "runningEvaluationsCount", "canStartNewEvaluation", "fetchEvaluations", "createEvaluation", "startEvaluation", "cancelEvaluation", "deleteEvaluation", "selectEvaluation", "selectResult", "exportEvaluations", "setSearchQuery", "setError"];
+  var _excluded$1q = ["enableBatchEvaluation", "enableMetricsComparison", "enableResultExport", "enableTemplates", "showEvaluationHistory", "showMetricsPanel", "showTestCaseDetails", "showProgressIndicators", "compactMode", "views", "ariaLabel", "ariaDescribedBy", "evaluations", "selectedEvaluation", "selectedResult", "isLoading", "isCreating", "error", "searchQuery", "templates", "runningEvaluationsCount", "canStartNewEvaluation", "fetchEvaluations", "createEvaluation", "startEvaluation", "cancelEvaluation", "deleteEvaluation", "selectEvaluation", "selectResult", "exportEvaluations", "setSearchQuery", "setError"];
   /**
    * AgentEval View Component
    *
@@ -33698,7 +33891,7 @@
         setSearchQuery,
         setError
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1q);
     var [activeTab, setActiveTab] = React__default.useState('evaluations');
     /**
      * Handle evaluation creation
@@ -34480,6 +34673,7 @@
   exports.PowerOffIcon = PowerOffIcon;
   exports.PrintIcon = PrintIcon;
   exports.ProfileIcon = ProfileIcon;
+  exports.ProgressBar = ProgressBar;
   exports.RefreshIcon = RefreshIcon;
   exports.Resizable = Resizable;
   exports.RotateIcon = RotateIcon;
@@ -34497,6 +34691,7 @@
   exports.SliderIcon = SliderIcon;
   exports.SpinnerIcon = SpinnerIcon;
   exports.StarIcon = StarIcon;
+  exports.StatusIndicator = StatusIndicator;
   exports.StopIcon = StopIcon;
   exports.SuccessIcon = SuccessIcon;
   exports.Switch = Switch;