@app-studio/web 0.9.56 → 0.9.59

package/dist/web.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/es.string.starts-with.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/es.string.replace.js'), 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'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/es.string.starts-with.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.parse-int.js', 'react-router-dom', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/es.string.replace.js', 'src/services/api', 'core-js/modules/es.promise.finally.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, null, null, null, null, null, null, null, null, null, global.zustand, null, global.reactRouterDom, null, null, global.contrast, null, null, null, global.format, null, null, null, global.formik, null, global.api));
-}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, es_string_startsWith_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, es_parseInt_js, reactRouterDom, es_parseFloat_js, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, format, es_string_trim_js, es_regexp_constructor_js, es_regexp_exec_js, formik, es_string_replace_js, api) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/es.string.starts-with.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/es.promise.finally.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/es.string.starts-with.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.parse-int.js', 'react-router-dom', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.promise.finally.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, null, null, null, null, null, null, null, null, null, global.zustand, null, global.reactRouterDom, null, null, global.contrast, null, null, null, global.format, null, null, null, global.formik));
+}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, es_string_startsWith_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, es_parseInt_js, reactRouterDom, es_parseFloat_js, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, format, es_string_trim_js, es_regexp_constructor_js, es_regexp_exec_js, formik) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
@@ -8808,7 +8808,7 @@
       fontSize: appStudio.Typography.fontSizes[size],
       fontWeight: "400" // Regular weight
       ,
-      lineHeight: "1.5"
+      lineHeight: "15px"
     }, style), option.label));
   };
   /**
@@ -10327,7 +10327,7 @@
       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,
@@ -13948,7 +13948,6 @@
       border: '0 solid transparent',
       outline: '0 solid transparent',
       boxShadow: 'none',
-      lineHeight: '1',
       letterSpacing: '-.5em',
       fontSize: 'var(--root-height)',
       fontFamily: 'monospace',
@@ -14239,7 +14238,11 @@
       disabled = false,
       isAgentRunning = false,
       onStopAgent,
-      sandboxId
+      sandboxId,
+      onUploadProgress,
+      onUploadSuccess,
+      onUploadError,
+      onFileUpload
     } = props;
     // Determine if the component is controlled
     var isControlled = controlledValue !== undefined && controlledOnChange !== undefined;
@@ -14355,28 +14358,6 @@
       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;
@@ -14389,25 +14370,33 @@
     }, [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
@@ -14546,7 +14535,7 @@
       marginBottom: '4px'
     },
     messageContent: {
-      lineHeight: 1.5
+      lineHeight: 15
     },
     messageFooter: {
       marginTop: '8px'
@@ -14718,7 +14707,7 @@
       maxHeight: '200px',
       padding: '8px 12px',
       fontSize: '14px',
-      lineHeight: '1.5',
+      lineHeight: '15px',
       color: 'color.gray.900',
       backgroundColor: 'color.white',
       border: 'none',
@@ -15550,7 +15539,6 @@
       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",
@@ -15571,7 +15559,6 @@
       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({
@@ -16916,11 +16903,6 @@
   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;
@@ -16933,7 +16915,7 @@
   var FormikUploader = _ref => {
     var {
         name,
-        uploadFile = defaultUploadFile,
+        uploadFile,
         onUploadSuccess,
         onUploadError,
         transformResponse,
@@ -19473,7 +19455,7 @@
     })));
   };
 
-  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, '\\$&');
   }
@@ -19486,7 +19468,6 @@
         highlightSecondaryColor,
         size = 'lg',
         responsive = true,
-        centered = false,
         views,
         highlightAnimate,
         animate,
@@ -19601,7 +19582,6 @@
         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({
@@ -19635,7 +19615,6 @@
         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({
@@ -19667,7 +19646,6 @@
       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);
@@ -24278,15 +24256,22 @@
   };
   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,
@@ -24296,20 +24281,78 @@
       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"
@@ -24317,12 +24360,16 @@
       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;
@@ -26134,14 +26181,12 @@
       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",
@@ -27374,16 +27419,10 @@
       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
     }
   };
@@ -27407,14 +27446,6 @@
       height: '100%',
       objectFit: 'cover'
     },
-    overlay: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      pointerEvents: 'none'
-    },
     content: {
       position: 'relative',
       zIndex: 2
@@ -27683,7 +27714,8 @@
     _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({});
   /**
@@ -28077,15 +28109,11 @@
         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,
@@ -28094,17 +28122,9 @@
       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
@@ -28117,21 +28137,11 @@
         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,
@@ -28140,9 +28150,7 @@
       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
@@ -28155,12 +28163,48 @@
       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));
@@ -28177,6 +28221,7 @@
   BackgroundView.Image = BackgroundImage;
   BackgroundView.Video = BackgroundVideo;
   BackgroundView.Gradient = BackgroundGradient;
+  BackgroundView.Overlay = BackgroundOverlay;
 
   /**
    * Background Component with compound pattern
@@ -28238,7 +28283,8 @@
     Ripples: BackgroundView.Ripples,
     Image: BackgroundView.Image,
     Video: BackgroundView.Video,
-    Gradient: BackgroundView.Gradient
+    Gradient: BackgroundView.Gradient,
+    Overlay: BackgroundView.Overlay
   });
   Background.displayName = 'Background';