@app-studio/web 0.9.57 → 0.9.59

package/dist/components/Background/Background/Background.props.d.ts

@@ -94,15 +94,15 @@ export interface BackgroundImageProps extends Omit<BackgroundProps, 'position'>
      * @default 1
      */
     imageOpacity?: number;
-    /**
-     * Overlay color to blend with image
-     */
-    overlay?: string;
     /**
      * Blend mode for overlay
      * @default 'normal'
      */
     blendMode?: BlendMode;
+    /**
+     * Overlay content
+     */
+    overlay?: ReactNode;
     /**
      * Custom views for styling
      */
@@ -110,7 +110,6 @@ export interface BackgroundImageProps extends Omit<BackgroundProps, 'position'>
         container?: ViewProps;
         content?: ViewProps;
         image?: ViewProps;
-        overlay?: ViewProps;
     };
 }
 /**
@@ -144,7 +143,7 @@ export interface BackgroundVideoProps extends Omit<BackgroundProps, 'position'>
     /**
      * Overlay color to blend with video
      */
-    overlay?: string;
+    overlay?: ReactNode;
     /**
      * Blend mode for overlay
      * @default 'normal'
@@ -157,7 +156,6 @@ export interface BackgroundVideoProps extends Omit<BackgroundProps, 'position'>
         container?: ViewProps;
         content?: ViewProps;
         video?: ViewProps;
-        overlay?: ViewProps;
     };
 }
 /**
@@ -166,6 +164,16 @@ export interface BackgroundVideoProps extends Omit<BackgroundProps, 'position'>
  */
 export interface BackgroundGradientProps extends GradientProps {
 }
+/**
+ * Background Overlay component props
+ */
+export interface BackgroundOverlayProps extends ViewProps {
+    /**
+     * Position of the content relative to the overlay
+     * @default 'center'
+     */
+    contentPosition?: 'left' | 'right' | 'center' | 'bottom' | 'top';
+}
 /**
  * Background styles for customization
  */
@@ -176,6 +184,5 @@ export interface BackgroundStyles {
     meteors?: ViewProps;
     image?: ViewProps;
     video?: ViewProps;
-    overlay?: ViewProps;
     gradient?: ViewProps;
 }

package/dist/components/Background/Background/Background.style.d.ts

@@ -19,7 +19,6 @@ export declare const AuroraStyles: {
 export declare const BackgroundImageStyles: {
     container: ViewProps;
     image: ViewProps;
-    overlay: ViewProps;
     content: ViewProps;
 };
 /**
@@ -28,7 +27,6 @@ export declare const BackgroundImageStyles: {
 export declare const BackgroundVideoStyles: {
     container: ViewProps;
     video: ViewProps;
-    overlay: ViewProps;
     content: ViewProps;
 };
 /**

package/dist/components/Background/Background/Background.view.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps, ParticlesProps, GridProps, RipplesProps, BackgroundImageProps, BackgroundVideoProps, BackgroundGradientProps } from './Background.props';
+import { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps, ParticlesProps, GridProps, RipplesProps, BackgroundImageProps, BackgroundVideoProps, BackgroundGradientProps, BackgroundOverlayProps } from './Background.props';
 /**
  * Main Background View Component with compound pattern
  */
@@ -13,6 +13,7 @@ interface BackgroundViewComponent extends React.FC<BackgroundProps> {
     Image: React.FC<BackgroundImageProps>;
     Video: React.FC<BackgroundVideoProps>;
     Gradient: React.FC<BackgroundGradientProps>;
+    Overlay: React.FC<BackgroundOverlayProps>;
 }
 export declare const BackgroundView: BackgroundViewComponent;
 export {};

package/dist/components/Background/Background.d.ts

@@ -18,4 +18,5 @@ export declare const Background: React.ForwardRefExoticComponent<Pick<Background
     Image: React.FC<import("./Background/Background.props").BackgroundImageProps>;
     Video: React.FC<import("./Background/Background.props").BackgroundVideoProps>;
     Gradient: React.FC<import("./Background/Background.props").BackgroundGradientProps>;
+    Overlay: React.FC<import("./Background/Background.props").BackgroundOverlayProps>;
 };

package/dist/components/ChatInput/ChatInput/ChatInput.props.d.ts

@@ -61,6 +61,23 @@ export interface ChatInputProps extends ViewProps {
      * ID of the sandbox
      */
     sandboxId?: string;
+    /**
+     * Callback when file upload progress changes
+     */
+    onUploadProgress?: (progress: number) => void;
+    /**
+     * Callback when file upload succeeds
+     */
+    onUploadSuccess?: (data: any) => void;
+    /**
+     * Callback when file upload fails
+     */
+    onUploadError?: (error: any) => void;
+    /**
+     * Function to execute file upload. Parent should provide this.
+     * Should return an object with a loading property.
+     */
+    onFileUpload?: (file: File) => void;
     /**
      * Whether to hide the attachment button
      */

package/dist/components/Formik/Formik.Uploader.d.ts

@@ -9,7 +9,7 @@ export interface FormikUploaderProps extends Omit<UploadProps, 'onFileSelect' |
     /**
      * Custom upload handler. Defaults to the platform UploadService
      */
-    uploadFile?: UploadFileHandler;
+    uploadFile: UploadFileHandler;
     /**
      * Callback fired when a single file upload succeeds
      */

package/dist/components/ProgressBar/ProgressBar/ProgressBar.props.d.ts

@@ -1,9 +1,18 @@
+/// <reference types="react" />
 import { ViewProps } from 'app-studio';
 export interface ProgressBarStyles {
     container?: ViewProps;
     bar?: ViewProps;
+    track?: React.SVGAttributes<SVGCircleElement>;
+    indicator?: React.SVGAttributes<SVGCircleElement>;
+    text?: ViewProps;
 }
 export interface ProgressBarProps extends ViewProps {
+    /**
+     * The shape of the progress bar
+     * @default 'linear'
+     */
+    shape?: 'linear' | 'circle';
     /**
      * Current progress value
      */
@@ -21,13 +30,38 @@ export interface ProgressBarProps extends ViewProps {
      */
     backgroundColor?: string;
     /**
-     * Height of the progress bar
+     * Height of the progress bar (linear) or size (circle)
      */
     height?: number | string;
     /**
-     * Border radius for rounded corners
+     * Diameter of the circle (alias for height/width when shape is circle)
+     */
+    size?: number;
+    /**
+     * Border radius for rounded corners (linear only)
      */
     radius?: number | string;
+    /**
+     * Width of the stroke (circle only)
+     */
+    strokeWidth?: number;
+    /**
+     * Whether to show the percentage label in the center (circle only)
+     */
+    showLabel?: boolean;
+    /**
+     * Color of the label text (circle only)
+     */
+    labelColor?: string;
+    /**
+     * Whether to animate the progress change smoothly
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Duration of the animation
+     */
+    animationDuration?: string;
     /**
      * Custom styles for container or bar
      */

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { ProgressBarProps } from './ProgressBar/ProgressBar.props';
 export declare const ProgressBar: React.FC<ProgressBarProps>;
+export * from './ProgressBar/ProgressBar.props';

package/dist/components/Title/Title/Title.props.d.ts

@@ -102,11 +102,6 @@ export interface TitleProps extends ViewProps {
      * @default false
      */
     responsive?: boolean;
-    /**
-     * Whether to center the title
-     * @default false
-     */
-    centered?: boolean;
     /**
      * Custom styles for different parts of the component
      */

package/dist/web.cjs.development.js

@@ -40,7 +40,6 @@ require('core-js/modules/es.regexp.constructor.js');
 require('core-js/modules/es.regexp.exec.js');
 var formik = require('formik');
 require('core-js/modules/es.string.replace.js');
-var api = require('src/services/api');
 require('core-js/modules/es.promise.finally.js');
 require('core-js/modules/es.string.match.js');
 require('core-js/modules/es.string.search.js');
@@ -14277,7 +14276,11 @@ var useChatInputState = props => {
     disabled = false,
     isAgentRunning = false,
     onStopAgent,
-    sandboxId
+    sandboxId,
+    onUploadProgress,
+    onUploadSuccess,
+    onUploadError,
+    onFileUpload
   } = props;
   // Determine if the component is controlled
   var isControlled = controlledValue !== undefined && controlledOnChange !== undefined;
@@ -14393,28 +14396,6 @@ var useChatInputState = props => {
     e.stopPropagation();
     setIsDraggingOver(false);
   };
-  // Upload service hook (single file at a time)
-  var uploadFileRequest = api.UploadService.useUploadControllerFileService({
-    onProgress: p => setUploadProgress(p || 0),
-    onSuccess: () => {
-      // Advance the queue
-      setUploadQueue(prev => prev.slice(1));
-      setIsProcessingQueue(false);
-      currentUploadRef.current = null;
-      setUploadProgress(0);
-      // If queue emptied, stop uploading state
-      setIsUploading(prev => uploadQueue.length - 1 > 0 || false);
-    },
-    onError: _err => {
-      // Remove the failed file from queue and continue
-      setUploadQueue(prev => prev.slice(1));
-      setIsProcessingQueue(false);
-      currentUploadRef.current = null;
-      setUploadProgress(0);
-      // If queue emptied, stop uploading state
-      setIsUploading(prev => uploadQueue.length - 1 > 0 || false);
-    }
-  });
   // Start uploading a batch of files (enqueue and process)
   var startUpload = React.useCallback(files => {
     if (!files || files.length === 0) return;
@@ -14427,25 +14408,33 @@ var useChatInputState = props => {
   }, [setPendingFiles, setUploadedFiles]);
   // Process upload queue sequentially
   var processUploadQueue = React.useCallback(() => {
-    if (uploadQueue.length > 0 && !isProcessingQueue && !uploadFileRequest.loading) {
+    if (uploadQueue.length > 0 && !isProcessingQueue && onFileUpload) {
       setIsProcessingQueue(true);
       var nextFile = uploadQueue[0];
       currentUploadRef.current = nextFile;
       setUploadProgress(0);
-      // Fire upload
-      uploadFileRequest.run({
-        file: nextFile
-      });
+      // Execute user-provided upload function
+      try {
+        onFileUpload(nextFile);
+      } catch (err) {
+        // Handle synchronous errors
+        setUploadQueue(prev => prev.slice(1));
+        setIsProcessingQueue(false);
+        currentUploadRef.current = null;
+        setUploadProgress(0);
+        setIsUploading(prev => uploadQueue.length - 1 > 0 || false);
+        onUploadError == null || onUploadError(err);
+      }
     } else if (uploadQueue.length === 0 && isUploading) {
       // Nothing left to upload
       setIsUploading(false);
       setUploadProgress(0);
     }
-  }, [uploadQueue, isProcessingQueue, uploadFileRequest.loading, uploadFileRequest, isUploading]);
-  // Effect: process whenever queue or request/loading changes
+  }, [uploadQueue, isProcessingQueue, onFileUpload, isUploading, onUploadError]);
+  // Effect: process whenever queue changes
   React.useEffect(() => {
     processUploadQueue();
-  }, [uploadQueue, isProcessingQueue, uploadFileRequest.loading, processUploadQueue]);
+  }, [uploadQueue, isProcessingQueue, processUploadQueue]);
   // Mock function for subscription status
   var subscriptionStatus = 'active';
   // Mock function to check if user can access a model
@@ -16952,11 +16941,6 @@ var OTPInputComponent$1 = props => {
 var FormikOTPInput = OTPInputComponent$1;
 
 var _excluded$T = ["name", "uploadFile", "onUploadSuccess", "onUploadError", "transformResponse", "onMultipleFileSelect", "onFileSelect", "multiple"];
-var defaultUploadFile = (file, onProgress) => {
-  return api.UploadService.uploadControllerFile({
-    file
-  }, onProgress);
-};
 var toArrayValue = value => {
   if (Array.isArray(value)) {
     return value;
@@ -16969,7 +16953,7 @@ var toArrayValue = value => {
 var FormikUploader = _ref => {
   var {
       name,
-      uploadFile = defaultUploadFile,
+      uploadFile,
       onUploadSuccess,
       onUploadError,
       transformResponse,
@@ -19509,7 +19493,7 @@ var SlideEffect = _ref => {
   })));
 };
 
-var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential"];
+var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential"];
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -19522,7 +19506,6 @@ var TitleView = _ref => {
       highlightSecondaryColor,
       size = 'lg',
       responsive = true,
-      centered = false,
       views,
       highlightAnimate,
       animate,
@@ -19637,7 +19620,6 @@ var TitleView = _ref => {
       fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
       letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
       marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
-      textAlign: centered ? 'center' : 'left',
       animate: inView ? controlledAnimate : undefined,
       media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
     }, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
@@ -19671,7 +19653,6 @@ var TitleView = _ref => {
       fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
       letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
       marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
-      textAlign: centered ? 'center' : 'left',
       animate: inView ? controlledAnimate : undefined,
       media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
     }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
@@ -19703,7 +19684,6 @@ var TitleView = _ref => {
     fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
     letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
     marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
-    textAlign: centered ? 'center' : 'left',
     animate: inView ? controlledAnimate : undefined,
     media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
   }, views == null ? void 0 : views.container, props), text);
@@ -24314,15 +24294,22 @@ var PaginationComponent = _ref => {
 };
 var Pagination = PaginationComponent;
 
-var _excluded$1a = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
+var _excluded$1a = ["shape", "value", "max", "color", "backgroundColor", "height", "size", "radius", "strokeWidth", "showLabel", "labelColor", "animated", "animationDuration", "views", "themeMode"];
 var ProgressBarView = _ref => {
   var {
+      shape = 'linear',
       value = 0,
       max = 100,
       color = 'theme.primary',
       backgroundColor = 'color.gray.200',
-      height = 8,
+      height,
+      size,
       radius = 4,
+      strokeWidth = 10,
+      showLabel = false,
+      labelColor = 'theme.text.primary',
+      animated = true,
+      animationDuration = '0.5s',
       views,
       themeMode: elementMode
     } = _ref,
@@ -24332,20 +24319,78 @@ var ProgressBarView = _ref => {
     themeMode
   } = appStudio.useTheme();
   var currentMode = elementMode ? elementMode : themeMode;
-  var percentage = Math.min(100, Math.max(0, value / max * 100));
+  var validValue = Math.min(max, Math.max(0, value));
+  var percentage = validValue / max * 100;
   var trackColor = getColor(backgroundColor, {
     themeMode: currentMode
   });
   var barColor = getColor(color, {
     themeMode: currentMode
   });
+  if (shape === 'circle') {
+    var circleSize = size || (typeof height === 'number' ? height : 100);
+    var radiusCalc = (circleSize - strokeWidth) / 2;
+    var circumference = 2 * Math.PI * radiusCalc;
+    var offset = circumference - percentage / 100 * circumference;
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      width: circleSize,
+      height: circleSize,
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement("svg", {
+      width: circleSize,
+      height: circleSize,
+      viewBox: "0 0 " + circleSize + " " + circleSize,
+      style: {
+        transform: 'rotate(-90deg)'
+      }
+    }, /*#__PURE__*/React__default.createElement("circle", Object.assign({
+      cx: circleSize / 2,
+      cy: circleSize / 2,
+      r: radiusCalc,
+      stroke: trackColor,
+      strokeWidth: strokeWidth,
+      fill: "transparent"
+    }, views == null ? void 0 : views.track)), /*#__PURE__*/React__default.createElement("circle", Object.assign({
+      cx: circleSize / 2,
+      cy: circleSize / 2,
+      r: radiusCalc,
+      stroke: barColor,
+      strokeWidth: strokeWidth,
+      strokeDasharray: circumference,
+      strokeDashoffset: offset,
+      strokeLinecap: "round",
+      fill: "transparent",
+      style: {
+        transition: animated ? "stroke-dashoffset " + animationDuration + " ease-in-out" : 'none'
+      }
+    }, views == null ? void 0 : views.indicator))), showLabel && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      color: labelColor,
+      fontSize: circleSize * 0.2 + "px",
+      fontWeight: "bold"
+    }, views == null ? void 0 : views.text), Math.round(percentage), "%"))));
+  }
+  // Linear Progress Bar
+  var linearHeight = height || 8;
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     role: "progressbar",
     "aria-valuenow": value,
     "aria-valuemin": 0,
     "aria-valuemax": max,
     width: "100%",
-    height: height,
+    height: linearHeight,
     backgroundColor: trackColor,
     borderRadius: radius,
     overflow: "hidden"
@@ -24353,12 +24398,16 @@ var ProgressBarView = _ref => {
     width: percentage + "%",
     height: "100%",
     backgroundColor: barColor,
-    borderRadius: radius
+    borderRadius: radius,
+    style: {
+      transition: animated ? "width " + animationDuration + " ease-in-out" : 'none'
+    }
   }, views == null ? void 0 : views.bar)));
 };
 
 /**
  * ProgressBar component displays completion status of a task or process.
+ * Supports both linear and circular shapes.
  */
 var ProgressBarComponent = props => (/*#__PURE__*/React__default.createElement(ProgressBarView, Object.assign({}, props)));
 var ProgressBar = ProgressBarComponent;
@@ -27408,16 +27457,10 @@ var BackgroundImageStyles = {
     backgroundRepeat: 'no-repeat',
     backgroundAttachment: 'scroll'
   },
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    pointerEvents: 'none'
-  },
   content: {
     position: 'relative',
+    width: '100%',
+    height: '100%',
     zIndex: 2
   }
 };
@@ -27441,14 +27484,6 @@ var BackgroundVideoStyles = {
     height: '100%',
     objectFit: 'cover'
   },
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    pointerEvents: 'none'
-  },
   content: {
     position: 'relative',
     zIndex: 2
@@ -27717,7 +27752,8 @@ var _excluded$1o = ["children", "showRadialGradient", "views", "themeMode"],
   _excluded7$1 = ["children", "src", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "imageOpacity", "overlay", "blendMode", "views", "themeMode"],
   _excluded8$1 = ["children", "src", "autoPlay", "loop", "muted", "playsInline", "overlay", "blendMode", "views", "themeMode"],
   _excluded9$1 = ["children"],
-  _excluded10$1 = ["children", "views"];
+  _excluded10$1 = ["contentPosition"],
+  _excluded11$1 = ["children", "views"];
 // Background Context
 var BackgroundContext = /*#__PURE__*/React.createContext({});
 /**
@@ -28111,15 +28147,11 @@ var BackgroundImage = _ref7 => {
       backgroundRepeat = 'no-repeat',
       backgroundAttachment = 'scroll',
       imageOpacity = 1,
-      overlay,
+      overlay = null,
       blendMode = 'normal',
-      views,
-      themeMode: elementMode
+      views
     } = _ref7,
     props = _objectWithoutPropertiesLoose(_ref7, _excluded7$1);
-  var {
-    getColor
-  } = appStudio.useTheme();
   var imageStyle = Object.assign({}, BackgroundImageStyles.image, {
     backgroundImage: "url(" + src + ")",
     backgroundSize,
@@ -28128,17 +28160,9 @@ var BackgroundImage = _ref7 => {
     backgroundAttachment,
     opacity: imageOpacity
   });
-  var overlayStyle = overlay ? Object.assign({}, BackgroundImageStyles.overlay, {
-    backgroundColor: getColor(overlay, elementMode ? {
-      themeMode: elementMode
-    } : undefined),
-    mixBlendMode: blendMode
-  }) : {};
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, BackgroundImageStyles.container, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     style: imageStyle
-  }, views == null ? void 0 : views.image)), overlay && /*#__PURE__*/React__default.createElement(appStudio.View, {
-    style: overlayStyle
-  }), children && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, BackgroundImageStyles.content, views == null ? void 0 : views.content), children)));
+  }, views == null ? void 0 : views.image)), overlay, children && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, BackgroundImageStyles.content, views == null ? void 0 : views.content), children)));
 };
 /**
  * Background Video Component
@@ -28151,21 +28175,11 @@ var BackgroundVideo = _ref8 => {
       loop = true,
       muted = true,
       playsInline = true,
-      overlay,
+      overlay = null,
       blendMode = 'normal',
-      views,
-      themeMode: elementMode
+      views
     } = _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,
@@ -28174,9 +28188,7 @@ var BackgroundVideo = _ref8 => {
     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)));
+  }, views == null ? void 0 : views.video)), overlay, children && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, BackgroundVideoStyles.content, views == null ? void 0 : views.content), children)));
 };
 /**
  * Background Gradient Component
@@ -28189,12 +28201,48 @@ var BackgroundGradient = _ref9 => {
     gradientProps = _objectWithoutPropertiesLoose(_ref9, _excluded9$1);
   return /*#__PURE__*/React__default.createElement(Gradient, Object.assign({}, gradientProps), children);
 };
-var BackgroundViewBase = _ref10 => {
+/**
+ * Background Overlay Component
+ */
+var BackgroundOverlay = _ref10 => {
   var {
-      children,
-      views
+      contentPosition
     } = _ref10,
     props = _objectWithoutPropertiesLoose(_ref10, _excluded10$1);
+  var getDefaultOverlay = () => {
+    switch (contentPosition) {
+      case 'left':
+        return 'radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%)';
+      case 'right':
+        return 'radial-gradient(circle at 30% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%)';
+      case 'top':
+        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%)';
+      case 'bottom':
+        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%)';
+      case 'center':
+        return 'radial-gradient(circle at 50% 90%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)';
+      default:
+        return 'rgba(0,0,0,0.5)';
+    }
+  };
+  var background = getDefaultOverlay();
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    background: background,
+    pointerEvents: "none",
+    zIndex: 1
+  }, props));
+};
+var BackgroundViewBase = _ref11 => {
+  var {
+      children,
+      views
+    } = _ref11,
+    props = _objectWithoutPropertiesLoose(_ref11, _excluded11$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));
@@ -28211,6 +28259,7 @@ BackgroundView.Ripples = Ripples;
 BackgroundView.Image = BackgroundImage;
 BackgroundView.Video = BackgroundVideo;
 BackgroundView.Gradient = BackgroundGradient;
+BackgroundView.Overlay = BackgroundOverlay;
 
 /**
  * Background Component with compound pattern
@@ -28272,7 +28321,8 @@ var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
   Ripples: BackgroundView.Ripples,
   Image: BackgroundView.Image,
   Video: BackgroundView.Video,
-  Gradient: BackgroundView.Gradient
+  Gradient: BackgroundView.Gradient,
+  Overlay: BackgroundView.Overlay
 });
 Background.displayName = 'Background';