@app-studio/web 0.9.56 → 0.9.59

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');
@@ -8847,7 +8846,7 @@ var Item = _ref => {
     fontSize: appStudio.Typography.fontSizes[size],
     fontWeight: "400" // Regular weight
     ,
-    lineHeight: "1.5"
+    lineHeight: "15px"
   }, style), option.label));
 };
 /**
@@ -10366,7 +10365,7 @@ var CheckboxView = _ref => {
     size: "sm",
     fontWeight: "400" // Regular weight
     ,
-    lineHeight: "1.5"
+    lineHeight: "15"
   }, views == null ? void 0 : views.infoText), infoText))), error && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
     size: "xs",
     marginTop: 4,
@@ -13987,7 +13986,6 @@ var OTPInputView = _ref => {
     border: '0 solid transparent',
     outline: '0 solid transparent',
     boxShadow: 'none',
-    lineHeight: '1',
     letterSpacing: '-.5em',
     fontSize: 'var(--root-height)',
     fontFamily: 'monospace',
@@ -14278,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;
@@ -14394,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;
@@ -14428,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
@@ -14585,7 +14573,7 @@ var DefaultAgentChatStyles = {
     marginBottom: '4px'
   },
   messageContent: {
-    lineHeight: 1.5
+    lineHeight: 15
   },
   messageFooter: {
     marginTop: '8px'
@@ -14757,7 +14745,7 @@ var DefaultChatInputStyles = {
     maxHeight: '200px',
     padding: '8px 12px',
     fontSize: '14px',
-    lineHeight: '1.5',
+    lineHeight: '15px',
     color: 'color.gray.900',
     backgroundColor: 'color.white',
     border: 'none',
@@ -15589,7 +15577,6 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     color: "color.gray.400",
     pointerEvents: "none",
     fontSize: "14px",
-    lineHeight: "1.5",
     zIndex: 1
   }, views == null ? void 0 : views.placeholder), placeholder)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     as: "div",
@@ -15610,7 +15597,6 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
     fontSize: "14px",
-    lineHeight: "1.5",
     color: "color.gray.900",
     backgroundColor: "transparent"
   }, views == null ? void 0 : views.input))), showMentions && filteredMentions.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
@@ -16955,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;
@@ -16972,7 +16953,7 @@ var toArrayValue = value => {
 var FormikUploader = _ref => {
   var {
       name,
-      uploadFile = defaultUploadFile,
+      uploadFile,
       onUploadSuccess,
       onUploadError,
       transformResponse,
@@ -19512,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, '\\$&');
 }
@@ -19525,7 +19506,6 @@ var TitleView = _ref => {
       highlightSecondaryColor,
       size = 'lg',
       responsive = true,
-      centered = false,
       views,
       highlightAnimate,
       animate,
@@ -19640,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({
@@ -19674,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({
@@ -19706,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);
@@ -24317,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,
@@ -24335,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"
@@ -24356,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;
@@ -26173,14 +26219,12 @@ var ToastView = _ref => {
     fontWeight: "600" // Semi-bold for better readability
     ,
     color: Theme[variant].content.color,
-    lineHeight: "1.4",
     bgColor: Theme[variant].container.backgroundColor
   }, views == null ? void 0 : views.title), title), description && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
     size: "sm",
     color: Theme[variant].content.color,
     fontWeight: "400" // Regular weight
     ,
-    lineHeight: "1.5",
     bgColor: Theme[variant].container.backgroundColor
   }, views == null ? void 0 : views.description), description)), action && actionText && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
     size: "sm",
@@ -27413,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
   }
 };
@@ -27446,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
@@ -27722,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({});
 /**
@@ -28116,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,
@@ -28133,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
@@ -28156,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,
@@ -28179,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
@@ -28194,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));
@@ -28216,6 +28259,7 @@ BackgroundView.Ripples = Ripples;
 BackgroundView.Image = BackgroundImage;
 BackgroundView.Video = BackgroundVideo;
 BackgroundView.Gradient = BackgroundGradient;
+BackgroundView.Overlay = BackgroundOverlay;
 
 /**
  * Background Component with compound pattern
@@ -28277,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';