@app-studio/web 0.9.57 → 0.9.60

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');
@@ -9812,7 +9811,7 @@ var TextAreaView = _ref => {
     maxHeight: 'calc(100vh - 100px)',
     height: 'calc(5em)',
     border: 'none',
-    resize: 'vertical',
+    // resize property removed to avoid type error, added via style prop
     // Focus state
     on: {
       focus: {
@@ -9889,8 +9888,12 @@ var TextAreaView = _ref => {
     onBlur: handleBlur,
     onFocus: handleFocus,
     multiline: "" + !!isMultiline.toString(),
-    onChange: handleChange
-  }, fieldStyles, views == null ? void 0 : views.textarea)))));
+    onChange: e => handleChange(e)
+  }, fieldStyles, {
+    style: {
+      resize: 'vertical'
+    }
+  }, views == null ? void 0 : views.textarea)))));
 };
 
 // Defines the TextAreaComponent as a functional component that accepts TextAreaProps for type safety and structure.
@@ -10747,7 +10750,7 @@ var DefaultColorPalette = [
   value: 'transparent'
 }];
 
-var _excluded$y = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "shadow", "error", "isDisabled", "isReadOnly", "isFocused", "isHovered", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "setIsFocused", "setIsHovered", "triggerRef", "dropdownRef"];
+var _excluded$y = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "shadow", "error", "isDisabled", "isReadOnly", "isFocused", "isHovered", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "setIsFocused", "setIsHovered", "triggerRef", "dropdownRef", "onChange"];
 var ColorInputView = _ref => {
   var {
       // Basic props
@@ -14277,7 +14280,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 +14400,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 +14412,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
@@ -15805,7 +15798,7 @@ var AudioRecorder = _ref => {
   }))));
 };
 
-var _excluded$M = ["onSubmit", "placeholder", "loading", "disabled", "isAgentRunning", "enableAudioRecording", "leftButtons", "rightButtons", "onStopAgent", "loadingText", "autoFocus", "sandboxId", "hideAttachments", "attachmentText", "promptExamples", "suggestions", "errorMessage", "size", "shape", "variant", "views", "mentionData", "mentionTrigger", "onMentionSelect", "onAudioRecordingStart", "onAudioRecordingStop", "value", "handleChange", "handleSubmit", "editableRef", "fileInputRef", "isUploading", "uploadProgress", "isDraggingOver", "uploadedFiles", "removeUploadedFile", "setPendingFiles", "setUploadedFiles", "setIsUploading", "startUpload", "selectedModel", "handleModelChange", "modelOptions", "subscriptionStatus", "canAccessModel", "isGuideTipShown", "hideGuideTip", "handlePromptExampleSelect", "handleDragOver", "handleDragLeave"];
+var _excluded$M = ["onSubmit", "placeholder", "loading", "disabled", "isAgentRunning", "enableAudioRecording", "leftButtons", "rightButtons", "onStopAgent", "loadingText", "autoFocus", "sandboxId", "hideAttachments", "attachmentText", "promptExamples", "suggestions", "errorMessage", "size", "shape", "variant", "views", "mentionData", "mentionTrigger", "onMentionSelect", "onAudioRecordingStart", "onAudioRecordingStop", "value", "handleChange", "handleSubmit", "editableRef", "fileInputRef", "isUploading", "uploadProgress", "isDraggingOver", "uploadedFiles", "removeUploadedFile", "setPendingFiles", "setUploadedFiles", "setIsUploading", "startUpload", "selectedModel", "handleModelChange", "modelOptions", "subscriptionStatus", "canAccessModel", "isGuideTipShown", "hideGuideTip", "handlePromptExampleSelect", "handleDragOver", "handleDragLeave", "onChange"];
 var ChatInputView = _ref => {
   var _value$trim$length;
   var {
@@ -16585,7 +16578,7 @@ var OrientationStyles = {
   }
 };
 
-var _excluded$S = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "backgroundColor", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
+var _excluded$S = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "backgroundColor", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views", "onChange", "onDrag"];
 var SliderView = _ref => {
   var _views$tooltip, _views$tooltip2;
   var {
@@ -16952,11 +16945,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 +16957,7 @@ var toArrayValue = value => {
 var FormikUploader = _ref => {
   var {
       name,
-      uploadFile = defaultUploadFile,
+      uploadFile,
       onUploadSuccess,
       onUploadError,
       transformResponse,
@@ -19217,10 +19205,12 @@ var ResponsiveTypography = {
  */
 var HighlightStyles = {
   underline: color => ({
-    textDecoration: 'underline',
-    textDecorationColor: color,
-    textDecorationThickness: '4px',
-    textUnderlineOffset: '4px'
+    style: {
+      textDecoration: 'underline',
+      textDecorationColor: color,
+      textDecorationThickness: '4px',
+      textUnderlineOffset: '4px'
+    }
   }),
   background: color => ({
     backgroundColor: color,
@@ -19229,17 +19219,21 @@ var HighlightStyles = {
     borderRadius: '4px'
   }),
   gradient: (color, secondaryColor) => ({
-    background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
-    backgroundClip: 'text !important',
-    webkitBackgroundClip: 'text !important',
+    style: {
+      background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
+      backgroundClip: 'text',
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent'
+    },
     color: 'transparent',
-    webkitTextFillColor: 'transparent',
     display: 'inline-block',
     textShadow: 'none'
   }),
   outline: color => ({
-    webkitTextStroke: "1px " + color,
-    webkitTextFillColor: 'transparent',
+    style: {
+      WebkitTextStroke: "1px " + color,
+      WebkitTextFillColor: 'transparent'
+    },
     color: 'transparent',
     textShadow: 'none'
   }),
@@ -19509,7 +19503,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 +19516,6 @@ var TitleView = _ref => {
       highlightSecondaryColor,
       size = 'lg',
       responsive = true,
-      centered = false,
       views,
       highlightAnimate,
       animate,
@@ -19540,31 +19533,6 @@ var TitleView = _ref => {
     ref,
     inView
   } = appStudio.useInView();
-  var {
-    getColor,
-    themeMode: ctxMode
-  } = appStudio.useTheme();
-  var themeMode = props.themeMode || ctxMode;
-  // Resolve colors, handling both theme colors and direct hex values
-  var resolveColorValue = colorValue => {
-    // If it's already a hex color, return it directly
-    if (colorValue.startsWith('#')) {
-      return colorValue;
-    }
-    // Otherwise, use the theme's getColor function
-    return getColor(colorValue, {
-      themeMode
-    });
-  };
-  var resolvedColor = resolveColorValue(highlightColor);
-  var resolvedSecondary = highlightSecondaryColor ? resolveColorValue(highlightSecondaryColor) : undefined;
-  var baseHighlightProps = HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary);
-  var highlightViewProps = highlightStyle === 'background' ? Object.assign({}, baseHighlightProps, {
-    color: undefined
-  }) : baseHighlightProps;
-  var highlightBackgroundOverrides = highlightStyle === 'background' ? {
-    bgColor: resolvedColor
-  } : {};
   var {
     finalDisplayedText,
     activeHighlightTarget,
@@ -19584,12 +19552,13 @@ var TitleView = _ref => {
     highlightSlideStagger,
     highlightSlideSequential
   }, props));
-  // Determine if we should use responsive sizing or static sizing
-  var useResponsive = responsive && !props.media; // Don't override if media prop is already provided
+  // Common style calculations
+  var useResponsive = responsive && !props.media;
   var fontSize = TitleSizes[size];
-  // Get responsive styles if responsive prop is true
   var responsiveStyles = useResponsive ? ResponsiveTypography[size] : null;
-  // Helper function to apply loop control to animations
+  // Highlight style props
+  var highlightProps = HighlightStyles[highlightStyle](highlightColor, highlightSecondaryColor);
+  // Apply loop control to animations
   var applyAnimationLoop = (animation, loopControl) => {
     if (!animation) return animation;
     if (Array.isArray(animation)) {
@@ -19601,112 +19570,88 @@ var TitleView = _ref => {
       iterationCount: loopControl.toString()
     });
   };
-  // Apply loop control to animations
   var controlledAnimate = applyAnimationLoop(animate, animationLoop);
   var controlledHighlightAnimate = applyAnimationLoop(highlightAnimate, highlightAnimationLoop);
   // Get the text to display
   var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
+  // Common container props
+  var containerProps = {
+    ref,
+    as: 'h1',
+    fontSize: useResponsive ? undefined : fontSize,
+    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,
+    animate: inView ? controlledAnimate : undefined,
+    media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
+  };
+  // Render highlighted text content (typewriter, slide, or plain)
+  var renderHighlightedContent = content => {
+    // If animations are enabled but not in view, render invisible placeholder
+    // This holds layout space and prevents animations (like typewriter) from running off-screen
+    if (!inView && (highlightTypewriter || highlightSlide)) {
+      return /*#__PURE__*/React__default.createElement("span", {
+        style: {
+          opacity: 0
+        }
+      }, content);
+    }
+    if (highlightTypewriter) {
+      return /*#__PURE__*/React__default.createElement(TypewriterEffect, Object.assign({
+        text: content,
+        typingSpeed: Math.max(30, highlightTypewriterDuration / (content.length * 10)),
+        showCursor: true,
+        cursorColor: "currentColor"
+      }, highlightProps));
+    }
+    if (highlightSlide) {
+      return /*#__PURE__*/React__default.createElement(SlideEffect, {
+        text: content,
+        duration: stateHighlightSlideDuration,
+        stagger: stateHighlightSlideStagger,
+        sequential: stateHighlightSlideSequential,
+        direction: "up",
+        fontSize: useResponsive ? undefined : fontSize,
+        fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
+        wordProps: highlightProps
+      });
+    }
+    return content;
+  };
+  // Case 1: Has highlight target - render with highlighted parts
   if (typeof text === 'string' && activeHighlightTarget) {
-    var pattern = (() => {
-      if (Array.isArray(activeHighlightTarget)) {
-        var escaped = activeHighlightTarget.map(t => escapeRegExp(String(t)));
-        return new RegExp("(" + escaped.join('|') + ")", 'gi');
-      }
-      return new RegExp("(" + escapeRegExp(String(activeHighlightTarget)) + ")", 'gi');
-    })();
+    var pattern = Array.isArray(activeHighlightTarget) ? new RegExp("(" + activeHighlightTarget.map(t => escapeRegExp(String(t))).join('|') + ")", 'gi') : new RegExp("(" + escapeRegExp(String(activeHighlightTarget)) + ")", 'gi');
     var parts = [];
     var lastIndex = 0;
     var match;
     while (match = pattern.exec(text)) {
-      if (match.index > lastIndex) {
-        parts.push(text.substring(lastIndex, match.index));
-      }
+      if (match.index > lastIndex) parts.push(text.substring(lastIndex, match.index));
       parts.push({
         highlight: true,
         text: match[0]
       });
       lastIndex = match.index + match[0].length;
     }
-    if (lastIndex < text.length) {
-      parts.push(text.substring(lastIndex));
-    }
-    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-      ref: ref,
-      as: "h1",
-      fontSize: useResponsive ? undefined : fontSize,
-      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({
+    if (lastIndex < text.length) parts.push(text.substring(lastIndex));
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       key: "highlight-" + idx,
       as: "span",
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined,
       fontSize: useResponsive ? undefined : fontSize
-    }, !highlightSlide ? highlightViewProps : {}, highlightBackgroundOverrides, views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
-      text: part.text,
-      typingSpeed: Math.max(30, highlightTypewriterDuration / (part.text.length * 10)),
-      showCursor: true,
-      cursorColor: "currentColor"
-    })) : highlightSlide ? (/*#__PURE__*/React__default.createElement(SlideEffect, {
-      text: part.text,
-      duration: stateHighlightSlideDuration,
-      stagger: stateHighlightSlideStagger,
-      sequential: stateHighlightSlideSequential,
-      direction: "up",
-      fontSize: useResponsive ? undefined : fontSize,
-      fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
-      wordProps: highlightViewProps
-    })) : part.text))));
+    }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(part.text)))));
   }
-  // If highlightStyle is provided but no highlightText, apply the style to the entire title
+  // Case 2: Has highlight style but no highlight target - apply style to entire title
   if (highlightStyle && !activeHighlightTarget) {
-    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-      ref: ref,
-      as: "h1",
-      fontSize: useResponsive ? undefined : fontSize,
-      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({
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       as: "span",
       fontSize: fontSize,
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined
-    }, !highlightSlide ? highlightViewProps : {}, highlightBackgroundOverrides, views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
-      text: text,
-      typingSpeed: Math.max(30, highlightTypewriterDuration / (text.length * 10)),
-      showCursor: true,
-      cursorColor: "currentColor"
-    })) : highlightSlide ? (/*#__PURE__*/React__default.createElement(SlideEffect, {
-      text: text,
-      duration: stateHighlightSlideDuration,
-      stagger: stateHighlightSlideStagger,
-      sequential: stateHighlightSlideSequential,
-      direction: "up",
-      fontSize: fontSize,
-      fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
-      wordProps: highlightViewProps
-    })) : text));
+    }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
   }
-  // Default case - no highlighting
-  return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
-    ref: ref,
-    as: "h1",
-    fontSize: fontSize,
-    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);
+  // Case 3: Default - no highlighting
+  return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), text);
 };
 
 /**
@@ -20973,7 +20918,7 @@ var DefaultColorPalette$1 = [
   category: 'neutral'
 }];
 
-var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
+var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef", "onChange"];
 var ColorPickerView = _ref => {
   var {
       // Basic props
@@ -23340,7 +23285,7 @@ var useEmojiPickerState = props => {
   };
 };
 
-var _excluded$15 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
+var _excluded$15 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef", "onChange"];
 var EmojiPickerView = _ref => {
   var {
       // Basic props
@@ -24314,15 +24259,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 +24284,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 +24363,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;
@@ -24439,7 +24453,7 @@ var SeparatorView = _ref => {
   var borderWidth = SeparatorThicknesses[thickness];
   // Set appropriate ARIA attributes based on decorative prop
   var ariaProps = decorative ? {
-    'aria-hidden': 'true'
+    'aria-hidden': true
   } : {
     role: 'separator',
     'aria-orientation': orientation
@@ -27408,16 +27422,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 +27449,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 +27717,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 +28112,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 +28125,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 +28140,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 +28153,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 +28166,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 +28224,7 @@ BackgroundView.Ripples = Ripples;
 BackgroundView.Image = BackgroundImage;
 BackgroundView.Video = BackgroundVideo;
 BackgroundView.Gradient = BackgroundGradient;
+BackgroundView.Overlay = BackgroundOverlay;
 
 /**
  * Background Component with compound pattern
@@ -28272,7 +28286,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';