@app-studio/web 0.9.57 → 0.9.60

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;
@@ -9773,7 +9773,7 @@
       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: {
@@ -9850,8 +9850,12 @@
       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.
@@ -10708,7 +10712,7 @@
     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
@@ -14238,7 +14242,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;
@@ -14354,28 +14362,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;
@@ -14388,25 +14374,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
@@ -15766,7 +15760,7 @@
     }))));
   };
 
-  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 {
@@ -16546,7 +16540,7 @@
     }
   };
 
-  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 {
@@ -16913,11 +16907,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;
@@ -16930,7 +16919,7 @@
   var FormikUploader = _ref => {
     var {
         name,
-        uploadFile = defaultUploadFile,
+        uploadFile,
         onUploadSuccess,
         onUploadError,
         transformResponse,
@@ -19178,10 +19167,12 @@
    */
   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,
@@ -19190,17 +19181,21 @@
       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'
     }),
@@ -19470,7 +19465,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, '\\$&');
   }
@@ -19483,7 +19478,6 @@
         highlightSecondaryColor,
         size = 'lg',
         responsive = true,
-        centered = false,
         views,
         highlightAnimate,
         animate,
@@ -19501,31 +19495,6 @@
       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,
@@ -19545,12 +19514,13 @@
       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)) {
@@ -19562,112 +19532,88 @@
         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);
   };
 
   /**
@@ -20934,7 +20880,7 @@
     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
@@ -23301,7 +23247,7 @@
     };
   };
 
-  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
@@ -24275,15 +24221,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,
@@ -24293,20 +24246,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"
@@ -24314,12 +24325,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;
@@ -24400,7 +24415,7 @@
     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
@@ -27369,16 +27384,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
     }
   };
@@ -27402,14 +27411,6 @@
       height: '100%',
       objectFit: 'cover'
     },
-    overlay: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      pointerEvents: 'none'
-    },
     content: {
       position: 'relative',
       zIndex: 2
@@ -27678,7 +27679,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({});
   /**
@@ -28072,15 +28074,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,
@@ -28089,17 +28087,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
@@ -28112,21 +28102,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,
@@ -28135,9 +28115,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
@@ -28150,12 +28128,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));
@@ -28172,6 +28186,7 @@
   BackgroundView.Image = BackgroundImage;
   BackgroundView.Video = BackgroundVideo;
   BackgroundView.Gradient = BackgroundGradient;
+  BackgroundView.Overlay = BackgroundOverlay;
 
   /**
    * Background Component with compound pattern
@@ -28233,7 +28248,8 @@
     Ripples: BackgroundView.Ripples,
     Image: BackgroundView.Image,
     Video: BackgroundView.Video,
-    Gradient: BackgroundView.Gradient
+    Gradient: BackgroundView.Gradient,
+    Overlay: BackgroundView.Overlay
   });
   Background.displayName = 'Background';