@app-studio/web 0.9.51 → 0.9.55

package/dist/web.umd.development.js

@@ -9517,6 +9517,175 @@
   // Exports the SwitchComponent as 'Switch' for use in other parts of the application.
   var Switch = SwitchComponent;
 
+  // Initializes the custom hook 'useSelectorState' for managing the state of the Selector component
+  var useSelectorState = _ref => {
+    var {
+      placeholder,
+      isMulti,
+      options,
+      id = "selector-" + Math.random().toString(36).substr(2, 9)
+    } = _ref;
+    // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
+    var defaultValue = placeholder ? isMulti ? [] : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
+    : Array.isArray(options) && options.length > 0 ? options[0].value : isMulti ? [] : ''; // If no placeholder, use the first option value if available, otherwise empty array for multi-select or empty string for single select
+    // State hook for tracking mouse hover status over the Selector component
+    var [isHovered, setIsHovered] = React__default.useState(false);
+    // State hook for tracking focus status of the Selector input field
+    var [isFocused, setIsFocused] = React__default.useState(false);
+    // State hook for managing the value(s) selected by the user, initialized with the default value
+    var [value, setValue] = React__default.useState(defaultValue);
+    // State hook for keeping track of the currently highlighted index in the options list
+    var [highlightedIndex, setHighlightedIndex] = React__default.useState(0);
+    // State hook for managing visibility of the Selector dropdown, initially set to hidden
+    var [hide, setHide] = React__default.useState(true);
+    // Returns an object containing all stateful values and their associated setters to manage the Selector component's state
+    return {
+      id,
+      value,
+      setValue,
+      hide,
+      setHide,
+      isHovered,
+      setIsHovered,
+      isFocused,
+      setIsFocused,
+      highlightedIndex,
+      setHighlightedIndex
+    };
+  };
+
+  var _excluded$u = ["id", "name", "label", "value", "views", "options", "onChange", "setValue"];
+  /**
+   * SelectorView Component
+   *
+   * Renders a segmented control style selector.
+   */
+  var SelectorView = _ref => {
+    var {
+        id,
+        name,
+        label,
+        value,
+        views = {},
+        options = [],
+        onChange = () => {},
+        setValue = () => {}
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    var {
+      getColor
+    } = appStudio.useTheme();
+    var handleCallback = React.useCallback(option => {
+      setValue(option.value);
+      if (onChange) onChange(option.value);
+    }, [setValue, onChange]);
+    return /*#__PURE__*/React__default.createElement(FieldContainer, {
+      id: id,
+      width: "100%",
+      views: views
+    }, label && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      fontSize: "10px",
+      letterSpacing: "wider",
+      color: "color.black.500",
+      fontWeight: "bold",
+      marginBottom: 12,
+      alignItems: "center",
+      gap: 6,
+      //Text transform uppercase
+      style: {
+        textTransform: 'uppercase'
+      }
+    }, /*#__PURE__*/React__default.createElement(InfoIcon, {
+      widthHeight: 14
+    }), " ", /*#__PURE__*/React__default.createElement(appStudio.Text, null, label))), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      gap: 0
+    }, options.map((option, index, arr) => {
+      var isSelected = value === option.value;
+      var borderColor = getColor('color.gray.200');
+      var textColor = getColor('color.gray.500');
+      var bgColor = 'transparent';
+      if (isSelected) {
+        if (option.color) {
+          // We need a way to get related colors (50, 500, 700 etc) from a base color if we want full fidelity.
+          // But passing full style strings is easier.
+          borderColor = getColor(option.color);
+          textColor = getColor(option.color);
+          // Try to approximate background color if possible, or just use white/transparent.
+          // Simplification: if color provided, use it for border/text.
+          // Background is hard to derive without more specific props.
+          // Let's try to use a very light opacity of the color for background.
+          bgColor = 'rgba(0,0,0,0.05)'; // Generic active background
+        } else {
+          // Default active style
+          var primary = getColor('theme.primary');
+          borderColor = primary;
+          textColor = primary;
+          bgColor = 'color.gray.50';
+        }
+        // Specific overrides based on user request "ComplexitySelector" style
+        // If the values match 'High', 'Medium', 'Low' we can hardcode for *demo* fidelity if generic logic fails.
+        // But let's try to make it generic.
+        // The user simply pasted code.
+        if (option.color) {
+          // Fallback for customized options
+          borderColor = getColor(option.color);
+          textColor = getColor(option.color);
+          bgColor = 'transparent';
+        } else {
+          // Default fallback
+          borderColor = getColor('theme.primary');
+          textColor = getColor('theme.primary');
+          bgColor = getColor('color.blue.50');
+        }
+      }
+      return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+        key: option.value,
+        onClick: () => handleCallback(option),
+        flex: 1,
+        paddingVertical: 6,
+        fontSize: "12px",
+        fontWeight: isSelected ? 'bold' : 'normal',
+        style: {
+          borderTop: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+          borderBottom: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+          borderLeft: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+          borderRight: index === arr.length - 1 || isSelected ? "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')) : 'none',
+          backgroundColor: bgColor,
+          color: textColor,
+          borderRadius: index === 0 ? '6px 0 0 6px' : index === arr.length - 1 ? '0 6px 6px 0' : '0',
+          zIndex: isSelected ? 1 : 0,
+          boxShadow: 'none'
+        }
+      }, views.item), option.label);
+    })), /*#__PURE__*/React__default.createElement("input", {
+      type: "hidden",
+      id: id,
+      name: name,
+      value: Array.isArray(value) ? value.join(',') : value,
+      onChange: () => {}
+    }));
+  };
+
+  // Defines a functional component named 'SelectorComponent', which is expected to receive 'SelectorProps' as properties.
+  var SelectorComponent = props => {
+    // Ensure options is always an array
+    var safeProps = Object.assign({}, props, {
+      options: props.options || []
+    });
+    // Invokes the 'useSelectorState' hook with props to obtain stateful logic for the Selector component.
+    var selectorStates = useSelectorState(safeProps);
+    // Renders the 'SelectorView' component, passing along any states controlled by 'useSelectorState' and all properties passed to 'SelectorComponent'.
+    return /*#__PURE__*/React__default.createElement(SelectorView, Object.assign({}, selectorStates, safeProps, {
+      onClick: e => {
+        // Stop propagation to prevent the global click handler from closing other dropdowns
+        e.stopPropagation();
+        if (props.onClick) props.onClick(e);
+      }
+    }));
+  };
+  // Exports 'SelectorComponent' as 'Selector', making it available for import in other parts of the application.
+  var Selector = SelectorComponent;
+
   // Declaration of the useTextAreaState custom hook for managing the text area component state.
   var useTextAreaState = _ref => {
     var {
@@ -9549,7 +9718,7 @@
     // Export of the useTextAreaState hook for external usage.
   };
 
-  var _excluded$u = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
+  var _excluded$v = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
   var TextAreaView = _ref => {
     var {
         id,
@@ -9584,7 +9753,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
     var showLabel = !!(isFocused && label);
     /**
      * Styles for the textarea field
@@ -9723,7 +9892,7 @@
     };
   };
 
-  var _excluded$v = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "views", "size", "shape", "variant", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
+  var _excluded$w = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "views", "size", "shape", "variant", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
   /**
    * Input component for text fields
    */
@@ -9769,7 +9938,7 @@
         onBlur = () => {},
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
     var {
       getColor,
       themeMode
@@ -10048,7 +10217,7 @@
     }
   };
 
-  var _excluded$w = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
+  var _excluded$x = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
   var CheckboxView = _ref => {
     var {
         id,
@@ -10075,7 +10244,7 @@
         },
         infoText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
     var handleHover = () => setIsHovered(!isHovered);
     var handleChange = () => {
       if (!isReadOnly && !isDisabled) {
@@ -10533,7 +10702,7 @@
     value: 'transparent'
   }];
 
-  var _excluded$x = ["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"];
   var ColorInputView = _ref => {
     var {
         // Basic props
@@ -10574,7 +10743,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
     var {
       getColor
     } = appStudio.useTheme();
@@ -12213,11 +12382,11 @@
     xl: 16
   };
 
-  var _excluded$y = ["size"],
+  var _excluded$z = ["size"],
     _excluded2$9 = ["size"],
     _excluded3$8 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
   var CountryList = _ref => {
-    var props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    var props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "ul"
     }, props));
@@ -12455,7 +12624,7 @@
     };
   };
 
-  var _excluded$z = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+  var _excluded$A = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
   var DatePickerContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "date"
   }, props));
@@ -12488,7 +12657,7 @@
         onChange,
         onChangeText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     var showLabel = !!(isFocused && label);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);
@@ -12575,7 +12744,7 @@
     }, props, textFieldStates);
   };
 
-  var _excluded$A = ["visibleIcon", "hiddenIcon"],
+  var _excluded$B = ["visibleIcon", "hiddenIcon"],
     _excluded2$a = ["isVisible", "setIsVisible"];
   var PasswordComponent = _ref => {
     var {
@@ -12586,7 +12755,7 @@
           widthHeight: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
     var _usePasswordState = usePasswordState(props),
       {
         isVisible,
@@ -12640,7 +12809,7 @@
     };
   };
 
-  var _excluded$B = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
+  var _excluded$C = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
   // Defines the functional component 'ComboBoxView' with destructured props.
   var ComboBoxView = _ref => {
     var {
@@ -12665,7 +12834,7 @@
         setIsDropdownVisible
         // Collects all further props not destructured explicitly.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
     var {
       ref: triggerRef,
       relation
@@ -12844,7 +13013,7 @@
     }, "No items found")))))));
   };
 
-  var _excluded$C = ["id", "name", "items", "placeholder", "searchPlaceholder"];
+  var _excluded$D = ["id", "name", "items", "placeholder", "searchPlaceholder"];
   // Defines the ComboBoxComponent functional component with ComboBoxProps
   var ComboBoxComponent = _ref => {
     var {
@@ -12860,7 +13029,7 @@
         searchPlaceholder
         // Destructures the rest of the props not explicitly defined
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
     // Initializes ComboBox state using custom hook with items and placeholders
     var state = useComboBoxState(items, placeholder, searchPlaceholder);
     return (
@@ -13069,7 +13238,7 @@
     };
   };
 
-  var _excluded$D = ["id", "name", "label", "placeholder", "helperText", "error", "inputValue", "tags", "left", "right", "shadow", "views", "size", "shape", "variant", "isDisabled", "isReadOnly", "isAutoFocus", "isRemovable", "isFocused", "isHovered", "maxTags", "handleInputChange", "handleKeyDown", "handleFocus", "handleBlur", "removeTag", "setIsHovered", "onClick"];
+  var _excluded$E = ["id", "name", "label", "placeholder", "helperText", "error", "inputValue", "tags", "left", "right", "shadow", "views", "size", "shape", "variant", "isDisabled", "isReadOnly", "isAutoFocus", "isRemovable", "isFocused", "isHovered", "maxTags", "handleInputChange", "handleKeyDown", "handleFocus", "handleBlur", "removeTag", "setIsHovered", "onClick"];
   /**
    * Individual tag chip component
    */
@@ -13194,7 +13363,7 @@
         setIsHovered,
         onClick
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$D);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$E);
     var {
       getColor,
       themeMode
@@ -13277,7 +13446,7 @@
     }, views == null ? void 0 : views.placeholder), "Maximum ", maxTags, " tags reached")))), right));
   };
 
-  var _excluded$E = ["tags"];
+  var _excluded$F = ["tags"];
   /**
    * TagInput Component
    *
@@ -13289,7 +13458,7 @@
     // Initialize state management with the custom hook
     var tagInputState = useTagInputState(props);
     // Separate the tags prop to avoid type conflicts
-    var restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
+    var restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
     // Render the view component with combined props and state
     return /*#__PURE__*/React__default.createElement(TagInputView, Object.assign({}, tagInputState, restProps));
   };
@@ -13602,7 +13771,7 @@
     };
   };
 
-  var _excluded$F = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
+  var _excluded$G = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
   // Create a context for OTP input slots
   var OTPInputContext = /*#__PURE__*/React.createContext({
     slots: [],
@@ -13656,7 +13825,7 @@
         onFocus = () => {}
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
     appStudio.useTheme(); // Initialize theme context
     var showLabel = !!label;
     // Create context value for slots
@@ -13888,7 +14057,7 @@
   };
   var OTPInput = OTPInputComponent;
 
-  var _excluded$G = ["children", "autoFocus", "initFocus", "onChange"];
+  var _excluded$H = ["children", "autoFocus", "initFocus", "onChange"];
   var FocusContext = /*#__PURE__*/React.createContext({
     active: false,
     focusNextInput: () => {},
@@ -13904,7 +14073,7 @@
         initFocus,
         onChange = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
     var formik$1 = formik.useFormikContext();
     React.useEffect(() => {
       onChange(formik$1.values);
@@ -13952,7 +14121,7 @@
     }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
   };
 
-  var _excluded$H = ["name", "type"];
+  var _excluded$I = ["name", "type"];
   var getInputTypeProps = type => {
     switch (type) {
       case 'email':
@@ -13991,7 +14160,7 @@
         name,
         type
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
     var focus = useFormFocus();
     var {
       touched,
@@ -14035,13 +14204,13 @@
     } : {});
   };
 
-  var _excluded$I = ["value"];
+  var _excluded$J = ["value"];
   var CheckboxComponent$1 = props => {
     var _useFormikInput = useFormikInput(props),
       {
         value
       } = _useFormikInput,
-      formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$I);
+      formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$J);
     formProps.isChecked = value;
     var checkboxStates = useCheckboxState(props);
     return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -14761,7 +14930,7 @@
     };
   };
 
-  var _excluded$J = ["children", "views", "asChild"],
+  var _excluded$K = ["children", "views", "asChild"],
     _excluded2$b = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
   // Create context for the HoverCard
   var HoverCardContext = /*#__PURE__*/React.createContext({
@@ -14800,7 +14969,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$J);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$K);
     var {
       openCard,
       closeCard,
@@ -14970,7 +15139,7 @@
     }, views == null ? void 0 : views.container, props), children);
   };
 
-  var _excluded$K = ["children", "views", "openDelay", "closeDelay"];
+  var _excluded$L = ["children", "views", "openDelay", "closeDelay"];
   /**
    * HoverCard component displays floating content when hovering over a trigger element.
    * Supports configurable open and close delays for a smoother user experience.
@@ -14982,7 +15151,7 @@
         openDelay,
         closeDelay
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
     var hoverCardState = useHoverCardState({
       openDelay,
       closeDelay
@@ -15594,7 +15763,7 @@
     }))));
   };
 
-  var _excluded$L = ["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"];
   var ChatInputView = _ref => {
     var _value$trim$length;
     var {
@@ -15639,7 +15808,7 @@
         handleDragLeave
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
     var {} = appStudio.useTheme();
     // Combine styles
     var containerStyles = Object.assign({}, DefaultChatInputStyles.container, Shapes$2[shape], views == null ? void 0 : views.container);
@@ -15866,13 +16035,13 @@
     }, views == null ? void 0 : views.bottomTip), errorMessage)));
   };
 
-  var _excluded$M = ["name", "onSubmit"];
+  var _excluded$N = ["name", "onSubmit"];
   var ChatInputComponent = props => {
     var {
         name,
         onSubmit
       } = props,
-      chatInputProps = _objectWithoutPropertiesLoose(props, _excluded$M);
+      chatInputProps = _objectWithoutPropertiesLoose(props, _excluded$N);
     // State for managing pending files
     var [pendingFiles, setPendingFiles] = React.useState([]);
     // Get Formik integration props
@@ -15969,7 +16138,7 @@
   };
   var FormikSwitch = SwitchComponent$1;
 
-  var _excluded$N = ["name"],
+  var _excluded$O = ["name"],
     _excluded2$c = ["tags"];
   /**
    * Formik-integrated TagInput component
@@ -15978,7 +16147,7 @@
     var {
         name
       } = props,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$N);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$O);
     // Get Formik context directly for better control
     var {
       values,
@@ -16036,11 +16205,11 @@
    */
   var FormikTextArea = TextAreaComponent$1;
 
-  var _excluded$O = ["value"];
+  var _excluded$P = ["value"];
   var TextFieldComponent$1 = props => {
     var formProps = useFormikInput(props);
     var _useTextFieldState = useTextFieldState(props),
-      textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$O);
+      textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$P);
     return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
   };
   /**
@@ -16048,7 +16217,7 @@
    */
   var FormikTextField = TextFieldComponent$1;
 
-  var _excluded$P = ["visibleIcon", "hiddenIcon"],
+  var _excluded$Q = ["visibleIcon", "hiddenIcon"],
     _excluded2$d = ["isVisible", "setIsVisible"];
   var PasswordComponent$1 = _ref => {
     var {
@@ -16059,7 +16228,7 @@
           widthHeight: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
     var formProps = useFormikInput(props);
     var _usePasswordState = usePasswordState(formProps),
       {
@@ -16084,14 +16253,14 @@
    */
   var FormikPassword = PasswordComponent$1;
 
-  var _excluded$Q = ["items", "placeholder", "searchPlaceholder"];
+  var _excluded$R = ["items", "placeholder", "searchPlaceholder"];
   var ComboBoxComponent$1 = _ref => {
     var {
         items,
         placeholder,
         searchPlaceholder
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
     var formProps = useFormikInput(props);
     var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
     // Ensure the onChange function from formProps is being called when an item is selected
@@ -16374,7 +16543,7 @@
     }
   };
 
-  var _excluded$R = ["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"];
   var SliderView = _ref => {
     var _views$tooltip, _views$tooltip2;
     var {
@@ -16417,7 +16586,7 @@
           tooltip: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
     var {
       getColor,
       themeMode
@@ -16740,7 +16909,7 @@
    */
   var FormikOTPInput = OTPInputComponent$1;
 
-  var _excluded$S = ["name", "uploadFile", "onUploadSuccess", "onUploadError", "transformResponse", "onMultipleFileSelect", "onFileSelect", "multiple"];
+  var _excluded$T = ["name", "uploadFile", "onUploadSuccess", "onUploadError", "transformResponse", "onMultipleFileSelect", "onFileSelect", "multiple"];
   var defaultUploadFile = (file, onProgress) => {
     return api.UploadService.uploadControllerFile({
       file
@@ -16766,7 +16935,7 @@
         onFileSelect,
         multiple = true
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
     var {
       setFieldValue,
       setFieldTouched,
@@ -16836,156 +17005,7 @@
   };
   FormikUploader.displayName = 'FormikUploader';
 
-  // Initializes the custom hook 'useSelectorState' for managing the state of the Selector component
-  var useSelectorState = _ref => {
-    var {
-      placeholder,
-      isMulti,
-      options,
-      id = "selector-" + Math.random().toString(36).substr(2, 9)
-    } = _ref;
-    // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
-    var defaultValue = placeholder ? isMulti ? [] : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
-    : Array.isArray(options) && options.length > 0 ? options[0].value : isMulti ? [] : ''; // If no placeholder, use the first option value if available, otherwise empty array for multi-select or empty string for single select
-    // State hook for tracking mouse hover status over the Selector component
-    var [isHovered, setIsHovered] = React__default.useState(false);
-    // State hook for tracking focus status of the Selector input field
-    var [isFocused, setIsFocused] = React__default.useState(false);
-    // State hook for managing the value(s) selected by the user, initialized with the default value
-    var [value, setValue] = React__default.useState(defaultValue);
-    // State hook for keeping track of the currently highlighted index in the options list
-    var [highlightedIndex, setHighlightedIndex] = React__default.useState(0);
-    // State hook for managing visibility of the Selector dropdown, initially set to hidden
-    var [hide, setHide] = React__default.useState(true);
-    // Returns an object containing all stateful values and their associated setters to manage the Selector component's state
-    return {
-      id,
-      value,
-      setValue,
-      hide,
-      setHide,
-      isHovered,
-      setIsHovered,
-      isFocused,
-      setIsFocused,
-      highlightedIndex,
-      setHighlightedIndex
-    };
-  };
-
-  var _excluded$T = ["id", "name", "label", "value", "views", "options", "onChange", "setValue"];
-  /**
-   * SelectorView Component
-   *
-   * Renders a segmented control style selector.
-   */
-  var SelectorView = _ref => {
-    var {
-        id,
-        name,
-        label,
-        value,
-        views = {},
-        options = [],
-        onChange = () => {},
-        setValue = () => {}
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
-    var {
-      getColor
-    } = appStudio.useTheme();
-    var handleCallback = React.useCallback(option => {
-      setValue(option.value);
-      if (onChange) onChange(option.value);
-    }, [setValue, onChange]);
-    return /*#__PURE__*/React__default.createElement(FieldContainer, {
-      id: id,
-      width: "100%",
-      views: views
-    }, label && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
-      fontSize: "10px",
-      letterSpacing: "wider",
-      color: "color.black.500",
-      fontWeight: "bold",
-      marginBottom: 12,
-      alignItems: "center",
-      gap: 6,
-      //Text transform uppercase
-      style: {
-        textTransform: 'uppercase'
-      }
-    }, /*#__PURE__*/React__default.createElement(InfoIcon, {
-      widthHeight: 14
-    }), " ", /*#__PURE__*/React__default.createElement(appStudio.Text, null, label))), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
-      gap: 0
-    }, options.map((option, index, arr) => {
-      var isSelected = value === option.value;
-      var borderColor = getColor('color.gray.200');
-      var textColor = getColor('color.gray.500');
-      var bgColor = 'transparent';
-      if (isSelected) {
-        if (option.color) {
-          // We need a way to get related colors (50, 500, 700 etc) from a base color if we want full fidelity.
-          // But passing full style strings is easier.
-          borderColor = getColor(option.color);
-          textColor = getColor(option.color);
-          // Try to approximate background color if possible, or just use white/transparent.
-          // Simplification: if color provided, use it for border/text.
-          // Background is hard to derive without more specific props.
-          // Let's try to use a very light opacity of the color for background.
-          bgColor = 'rgba(0,0,0,0.05)'; // Generic active background
-        } else {
-          // Default active style
-          var primary = getColor('theme.primary');
-          borderColor = primary;
-          textColor = primary;
-          bgColor = 'color.gray.50';
-        }
-        // Specific overrides based on user request "ComplexitySelector" style
-        // If the values match 'High', 'Medium', 'Low' we can hardcode for *demo* fidelity if generic logic fails.
-        // But let's try to make it generic.
-        // The user simply pasted code.
-        if (option.color) {
-          // Fallback for customized options
-          borderColor = getColor(option.color);
-          textColor = getColor(option.color);
-          bgColor = 'transparent';
-        } else {
-          // Default fallback
-          borderColor = getColor('theme.primary');
-          textColor = getColor('theme.primary');
-          bgColor = getColor('color.blue.50');
-        }
-      }
-      return /*#__PURE__*/React__default.createElement(Button, Object.assign({
-        key: option.value,
-        onClick: () => handleCallback(option),
-        flex: 1,
-        paddingVertical: 6,
-        fontSize: "12px",
-        fontWeight: isSelected ? 'bold' : 'normal',
-        style: {
-          borderTop: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
-          borderBottom: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
-          borderLeft: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
-          borderRight: index === arr.length - 1 || isSelected ? "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')) : 'none',
-          backgroundColor: bgColor,
-          color: textColor,
-          borderRadius: index === 0 ? '6px 0 0 6px' : index === arr.length - 1 ? '0 6px 6px 0' : '0',
-          zIndex: isSelected ? 1 : 0,
-          boxShadow: 'none'
-        }
-      }, views.item), option.label);
-    })), /*#__PURE__*/React__default.createElement("input", {
-      type: "hidden",
-      id: id,
-      name: name,
-      value: Array.isArray(value) ? value.join(',') : value,
-      onChange: () => {}
-    }));
-  };
-
-  var SelectorComponent = props => {
+  var SelectorComponent$1 = props => {
     var formProps = useFormikInput(props);
     formProps.selected = formProps.value;
     var selectorStates = useSelectorState(props);
@@ -16994,7 +17014,7 @@
   /**
    * Selector provides a dropdown list of options for the user to choose from.
    */
-  var FormikSelector = SelectorComponent;
+  var FormikSelector = SelectorComponent$1;
 
   var AttachmentPreview = _ref => {
     var {
@@ -19270,16 +19290,6 @@
 
   var _excluded$_ = ["text", "duration", "direction", "stagger", "sequential", "textStyle", "as", "wordProps"],
     _excluded2$g = ["style"];
-  // CSS keyframes injection - done once
-  var KEYFRAMES_ID = 'slide-effect-keyframes';
-  var injectKeyframes = () => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(KEYFRAMES_ID)) return;
-    var style = document.createElement('style');
-    style.id = KEYFRAMES_ID;
-    style.textContent = "\n    @keyframes slideInUp {\n      from { transform: translateY(100%); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\n    }\n    @keyframes slideOutUp {\n      from { transform: translateY(0); opacity: 1; }\n      to { transform: translateY(-100%); opacity: 0; }\n    }\n    @keyframes slideInDown {\n      from { transform: translateY(-100%); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\n    }\n    @keyframes slideOutDown {\n      from { transform: translateY(0); opacity: 1; }\n      to { transform: translateY(100%); opacity: 0; }\n    }\n  ";
-    document.head.appendChild(style);
-  };
   var SlideEffect = _ref => {
     var {
         text,
@@ -19296,10 +19306,6 @@
     var [animKey, setAnimKey] = React.useState(0);
     var pendingTextRef = React.useRef(null);
     var timeoutRef = React.useRef(null);
-    // Inject keyframes once on mount
-    React.useEffect(() => {
-      injectKeyframes();
-    }, []);
     // Handle text changes
     React.useEffect(() => {
       if (text === displayedText && phase === 'visible') {
@@ -19365,12 +19371,10 @@
         style: customWordStyle
       } = _ref2,
       restWordProps = _objectWithoutPropertiesLoose(_ref2, _excluded2$g);
-    // Get animation names based on direction
+    // Get animation functions based on direction
     var isUp = direction === 'up';
-    var enterAnim = isUp ? 'slideInUp' : 'slideInDown';
-    var exitAnim = isUp ? 'slideOutUp' : 'slideOutDown';
     // Calculate delay for each word
-    var getDelay = (index, isExit) => {
+    var getDelay = index => {
       if (sequential) {
         // Sequential: one word at a time
         return index * (duration + stagger);
@@ -19392,9 +19396,6 @@
       flexWrap: 'nowrap',
       whiteSpace: 'nowrap'
     }), []);
-    // Determine current animation
-    var currentAnim = phase === 'exiting' ? exitAnim : enterAnim;
-    var isAnimating = phase === 'entering' || phase === 'exiting';
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "span",
       style: containerStyle
@@ -19403,17 +19404,63 @@
     }, words.map((word, index) => {
       var delay = getDelay(index);
       var isLast = index === words.length - 1;
+      // Create animation based on phase and direction
+      var wordAnimation;
+      var durationStr = duration + "ms";
+      var delayStr = delay + "ms";
+      if (phase === 'entering') {
+        // Use app-studio animations for entering
+        wordAnimation = isUp ? appStudio.Animation.slideInUp({
+          duration: durationStr,
+          delay: delayStr,
+          timingFunction: 'ease-out',
+          fillMode: 'both'
+        }) : appStudio.Animation.slideInDown({
+          duration: durationStr,
+          delay: delayStr,
+          timingFunction: 'ease-out',
+          fillMode: 'both'
+        });
+      } else if (phase === 'exiting') {
+        // Custom animation objects for exiting (slideOut not in app-studio yet)
+        wordAnimation = isUp ? {
+          from: {
+            transform: 'translateY(0)',
+            opacity: 1
+          },
+          to: {
+            transform: 'translateY(-100%)',
+            opacity: 0
+          },
+          duration: durationStr,
+          delay: delayStr,
+          timingFunction: 'ease-in',
+          fillMode: 'both'
+        } : {
+          from: {
+            transform: 'translateY(0)',
+            opacity: 1
+          },
+          to: {
+            transform: 'translateY(100%)',
+            opacity: 0
+          },
+          duration: durationStr,
+          delay: delayStr,
+          timingFunction: 'ease-in',
+          fillMode: 'both'
+        };
+      }
       var wordStyle = Object.assign({}, customWordStyle, {
         display: 'inline-block',
         marginRight: isLast ? 0 : '0.25em',
-        willChange: isAnimating ? 'transform, opacity' : 'auto',
-        animation: isAnimating ? currentAnim + " " + duration + "ms ease-out " + delay + "ms both" : 'none',
         transform: phase === 'visible' ? 'translateY(0)' : undefined,
         opacity: phase === 'visible' ? 1 : undefined
       });
       return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         key: animKey + "-" + index,
-        as: "span"
+        as: "span",
+        animate: wordAnimation
       }, restWordProps, {
         style: wordStyle
       }), word);
@@ -19422,7 +19469,7 @@
 
   var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential"];
   function escapeRegExp(string) {
-    return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
   }
   var TitleView = _ref => {
     var {
@@ -19518,7 +19565,13 @@
     // Get the text to display
     var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
     if (typeof text === 'string' && activeHighlightTarget) {
-      var pattern = new RegExp("(" + escapeRegExp(Array.isArray(activeHighlightTarget) ? activeHighlightTarget.join('|') : activeHighlightTarget) + ")", 'gi');
+      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 parts = [];
       var lastIndex = 0;
       var match;
@@ -28310,6 +28363,7 @@
   exports.SaveIcon = SaveIcon;
   exports.SearchIcon = SearchIcon;
   exports.Select = Select;
+  exports.Selector = Selector;
   exports.SendIcon = SendIcon;
   exports.Separator = Separator;
   exports.SettingsIcon = SettingsIcon;