@app-studio/web 0.9.24 → 0.9.25

package/dist/web.esm.js

@@ -22710,6 +22710,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
+  } = 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.createElement(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.createElement(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.createElement(ProgressBarView, Object.assign({}, props)));
+var ProgressBar = ProgressBarComponent;
+
 /**
  * Separator Styles
  *
@@ -22756,7 +22805,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',
@@ -22768,7 +22817,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
@@ -22836,6 +22885,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
+  } = useTheme();
+  var themes = getThemes$2();
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    alignItems: "center",
+    gap: 8,
+    role: "status-indicator"
+  }, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(View, Object.assign({
+    role: "status-dot",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%"
+  }, themes[status].indicator, views == null ? void 0 : views.indicator)), label && (/*#__PURE__*/React.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.createElement(StatusIndicatorView, Object.assign({}, props)));
+
 var useSidebarState = function useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint) {
   if (defaultExpanded === void 0) {
     defaultExpanded = true;
@@ -23006,7 +23131,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"];
@@ -23039,7 +23164,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$17);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$19);
   var {
     isExpanded,
     toggleExpanded,
@@ -23194,7 +23319,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.
  */
@@ -23216,7 +23341,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
   var {
     isExpanded,
     toggleExpanded,
@@ -23681,7 +23806,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
@@ -23726,7 +23851,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$19);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1b);
   var {
     orientation,
     registerPanel,
@@ -23941,7 +24066,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.
  */
@@ -23961,7 +24086,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
   var {
     isResizing,
     setIsResizing,
@@ -24729,7 +24854,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"],
@@ -24761,7 +24886,7 @@ var CommandInput = _ref2 => {
       placeholder = 'Type a command or search...',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1b);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1d);
   var inputRef = useRef(null);
   // Focus input when component mounts
   React.useEffect(() => {
@@ -24944,7 +25069,7 @@ var CommandView = _ref7 => {
   })))), footer && (/*#__PURE__*/React.createElement(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.
  */
@@ -24962,7 +25087,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
   var {
     search,
     setSearch,
@@ -25190,7 +25315,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
@@ -25226,7 +25351,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1d);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
   var {
     openTooltip,
     closeTooltip,
@@ -25416,7 +25541,7 @@ var TooltipView = _ref4 => {
   }, "Placement: ", optimalPosition.placement, relation && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), "Space: ", relation.space.vertical, "-", relation.space.horizontal)))))));
 };
 
-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.
@@ -25436,7 +25561,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,
@@ -25909,7 +26034,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"];
@@ -25945,7 +26070,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,
@@ -26225,7 +26350,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)
@@ -26294,7 +26419,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,
@@ -26867,7 +26992,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"];
@@ -26883,7 +27008,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);
@@ -27530,7 +27655,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.
  *
@@ -27587,7 +27712,7 @@ var FlowComponent = _ref => {
       onViewportChange,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
   var flowState = useFlowState({
     initialNodes: controlledNodes,
     initialEdges: controlledEdges,
@@ -27761,6 +27886,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
@@ -27923,7 +28081,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',
@@ -27939,7 +28097,7 @@ var GradientView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
   var {
     getColor,
     themeMode
@@ -28015,15 +28173,16 @@ var Gradient = props => {
   return /*#__PURE__*/React.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__*/createContext({});
 /**
@@ -28035,7 +28194,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)'
@@ -28446,23 +28605,61 @@ var BackgroundImage = _ref7 => {
     style: overlayStyle
   }), children && (/*#__PURE__*/React.createElement(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
+  } = useTheme();
+  var overlayStyle = overlay ? Object.assign({}, BackgroundVideoStyles.overlay, {
+    backgroundColor: getColor(overlay, elementMode ? {
+      themeMode: elementMode
+    } : undefined),
+    mixBlendMode: blendMode
+  }) : {};
+  return /*#__PURE__*/React.createElement(View, Object.assign({}, BackgroundVideoStyles.container, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(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.createElement(View, Object.assign({
+    style: overlayStyle
+  }, views == null ? void 0 : views.overlay)), children && (/*#__PURE__*/React.createElement(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.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.createElement(BackgroundContext.Provider, {
     value: {}
   }, /*#__PURE__*/React.createElement(View, Object.assign({}, DefaultBackgroundStyles.container, views == null ? void 0 : views.container, props), children));
@@ -28477,6 +28674,7 @@ BackgroundView.Particles = Particles;
 BackgroundView.Grid = Grid;
 BackgroundView.Ripples = Ripples;
 BackgroundView.Image = BackgroundImage;
+BackgroundView.Video = BackgroundVideo;
 BackgroundView.Gradient = BackgroundGradient;
 
 /**
@@ -28515,6 +28713,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>
@@ -28532,6 +28736,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';
@@ -28889,7 +29094,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
  *
@@ -28929,7 +29134,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
    */
@@ -30070,7 +30275,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
  *
@@ -30118,7 +30323,7 @@ var AgentSessionView = _ref => {
       fileInputRef,
       handleFileSelect
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1o);
   /**
    * Handle session creation
    */
@@ -31957,7 +32162,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
  *
@@ -31998,7 +32203,7 @@ var AgentTraceView = _ref => {
       setCurrentVisualization,
       setError
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1p);
   /**
    * Handle event selection
    */
@@ -33687,7 +33892,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
  *
@@ -33730,7 +33935,7 @@ var AgentEvalView = _ref => {
       setSearchQuery,
       setError
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1q);
   var [activeTab, setActiveTab] = React.useState('evaluations');
   /**
    * Handle evaluation creation
@@ -34392,5 +34597,5 @@ var AgentEval = props => {
   return /*#__PURE__*/React.createElement(AgentEvalView, Object.assign({}, props, evalState));
 };
 
-export { Accordion, AgentChat, AgentEval, AgentSession, AgentTrace, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AudioIcon, AudioInput, AudioWaveform, Avatar, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, Flow, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, Tree, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
+export { Accordion, AgentChat, AgentEval, AgentSession, AgentTrace, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AudioIcon, AudioInput, AudioWaveform, Avatar, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, Flow, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, Tree, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
 //# sourceMappingURL=web.esm.js.map