@app-studio/web 0.9.24 → 0.9.26

package/dist/web.cjs.development.js

@@ -18863,13 +18863,7 @@ var DropdownMenuContent = _ref3 => {
       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 => {
@@ -22717,6 +22711,55 @@ var PaginationComponent = _ref => {
 };
 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
  *
@@ -22763,7 +22806,7 @@ var DefaultSeparatorStyles = {
   }
 };
 
-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',
@@ -22775,7 +22818,7 @@ var SeparatorView = _ref => {
       decorative = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
   // Access theme if needed for future enhancements
   var {
     themeMode
@@ -22843,6 +22886,82 @@ var SeparatorComponent = props => {
 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;
@@ -23013,7 +23132,7 @@ var SidebarTransitions = {
   bounce: 'width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)'
 };
 
-var _excluded$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"];
@@ -23046,7 +23165,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$17);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$19);
   var {
     isExpanded,
     toggleExpanded,
@@ -23201,7 +23320,7 @@ var SidebarView = _ref5 => {
   }))));
 };
 
-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.
  */
@@ -23223,7 +23342,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
   var {
     isExpanded,
     toggleExpanded,
@@ -23688,7 +23807,7 @@ var HandleIconStyles = {
   }
 };
 
-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
@@ -23733,7 +23852,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$19);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1b);
   var {
     orientation,
     registerPanel,
@@ -23948,7 +24067,7 @@ var ResizableView = _ref4 => {
   }, 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.
  */
@@ -23968,7 +24087,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
   var {
     isResizing,
     setIsResizing,
@@ -24736,7 +24855,7 @@ var CommandFooterStyles = {
   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"],
@@ -24768,7 +24887,7 @@ var CommandInput = _ref2 => {
       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(() => {
@@ -24951,7 +25070,7 @@ var CommandView = _ref7 => {
   })))), 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.
  */
@@ -24969,7 +25088,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
   var {
     search,
     setSearch,
@@ -25197,7 +25316,7 @@ var getArrowStyles = position => {
   }
 };
 
-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
@@ -25233,7 +25352,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1d);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
   var {
     openTooltip,
     closeTooltip,
@@ -25414,16 +25533,10 @@ var TooltipView = _ref4 => {
     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.
@@ -25443,7 +25556,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,
@@ -25916,7 +26029,7 @@ var TreeItemStates = {
   }
 };
 
-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"];
@@ -25952,7 +26065,7 @@ var TreeView = _ref2 => {
       baseId
       // themeMode, // If 'app-studio' ViewProps supports themeMode
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1h);
   var {
     allowDragAndDrop,
     handleDrop,
@@ -26232,7 +26345,7 @@ var DataDrivenTreeView = _ref7 => {
   }))));
 };
 
-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)
@@ -26301,7 +26414,7 @@ var TreeComponent = _ref => {
       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,
@@ -26874,7 +26987,7 @@ var FlowNodeStates = {
   }
 };
 
-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"];
@@ -26890,7 +27003,7 @@ var FlowNodeView = _ref => {
       variant = 'default',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
   var handleClick = () => {
     if (onSelect) {
       onSelect(node.id);
@@ -27537,7 +27650,7 @@ var FlowView = _ref5 => {
   }, "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.
  *
@@ -27594,7 +27707,7 @@ var FlowComponent = _ref => {
       onViewportChange,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
   var flowState = useFlowState({
     initialNodes: controlledNodes,
     initialEdges: controlledEdges,
@@ -27768,6 +27881,39 @@ var BackgroundImageStyles = {
     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
@@ -27930,7 +28076,7 @@ var DefaultGradientStyles = {
   }
 };
 
-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',
@@ -27946,7 +28092,7 @@ var GradientView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
   var {
     getColor,
     themeMode
@@ -28022,15 +28168,16 @@ var Gradient = props => {
   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({});
 /**
@@ -28042,7 +28189,7 @@ var AuroraBackground = _ref => {
       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)'
@@ -28453,23 +28600,61 @@ var BackgroundImage = _ref7 => {
     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));
@@ -28484,6 +28669,7 @@ BackgroundView.Particles = Particles;
 BackgroundView.Grid = Grid;
 BackgroundView.Ripples = Ripples;
 BackgroundView.Image = BackgroundImage;
+BackgroundView.Video = BackgroundVideo;
 BackgroundView.Gradient = BackgroundGradient;
 
 /**
@@ -28522,6 +28708,12 @@ BackgroundView.Gradient = BackgroundGradient;
  * </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>
@@ -28539,6 +28731,7 @@ var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
   Grid: BackgroundView.Grid,
   Ripples: BackgroundView.Ripples,
   Image: BackgroundView.Image,
+  Video: BackgroundView.Video,
   Gradient: BackgroundView.Gradient
 });
 Background.displayName = 'Background';
@@ -28896,7 +29089,7 @@ var AgentRunProgress = _ref => {
   }, 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
  *
@@ -28936,7 +29129,7 @@ var AgentChatView = _ref => {
       setError,
       setSelectedFiles
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
   /**
    * Auto-scroll to bottom when new messages arrive
    */
@@ -30077,7 +30270,7 @@ var SessionFilters = _ref => {
   }, "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
  *
@@ -30125,7 +30318,7 @@ var AgentSessionView = _ref => {
       fileInputRef,
       handleFileSelect
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1o);
   /**
    * Handle session creation
    */
@@ -31964,7 +32157,7 @@ var TraceVisualization = _ref => {
   }, 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
  *
@@ -32005,7 +32198,7 @@ var AgentTraceView = _ref => {
       setCurrentVisualization,
       setError
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1p);
   /**
    * Handle event selection
    */
@@ -33694,7 +33887,7 @@ var EvaluationMetrics = _ref => {
   }, "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
  *
@@ -33737,7 +33930,7 @@ var AgentEvalView = _ref => {
       setSearchQuery,
       setError
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1q);
   var [activeTab, setActiveTab] = React__default.useState('evaluations');
   /**
    * Handle evaluation creation
@@ -34519,6 +34712,7 @@ exports.PlusIcon = PlusIcon;
 exports.PowerOffIcon = PowerOffIcon;
 exports.PrintIcon = PrintIcon;
 exports.ProfileIcon = ProfileIcon;
+exports.ProgressBar = ProgressBar;
 exports.RefreshIcon = RefreshIcon;
 exports.Resizable = Resizable;
 exports.RotateIcon = RotateIcon;
@@ -34536,6 +34730,7 @@ exports.Slider = Slider;
 exports.SliderIcon = SliderIcon;
 exports.SpinnerIcon = SpinnerIcon;
 exports.StarIcon = StarIcon;
+exports.StatusIndicator = StatusIndicator;
 exports.StopIcon = StopIcon;
 exports.SuccessIcon = SuccessIcon;
 exports.Switch = Switch;