@app-studio/web 0.9.51 → 0.9.55

package/dist/web.cjs.development.js

@@ -9556,6 +9556,175 @@ var SwitchComponent = props => {
 // 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 {
@@ -9588,7 +9757,7 @@ var useTextAreaState = _ref => {
   // 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,
@@ -9623,7 +9792,7 @@ var TextAreaView = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var showLabel = !!(isFocused && label);
   /**
    * Styles for the textarea field
@@ -9762,7 +9931,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-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
  */
@@ -9808,7 +9977,7 @@ var TextFieldView = _ref => {
       onBlur = () => {},
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var {
     getColor,
     themeMode
@@ -10087,7 +10256,7 @@ var StateStyles = {
   }
 };
 
-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,
@@ -10114,7 +10283,7 @@ var CheckboxView = _ref => {
       },
       infoText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   var handleHover = () => setIsHovered(!isHovered);
   var handleChange = () => {
     if (!isReadOnly && !isDisabled) {
@@ -10572,7 +10741,7 @@ var DefaultColorPalette = [
   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
@@ -10613,7 +10782,7 @@ var ColorInputView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var {
     getColor
   } = appStudio.useTheme();
@@ -12252,11 +12421,11 @@ var IconSizes$4 = {
   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));
@@ -12494,7 +12663,7 @@ var useDatePickerState = () => {
   };
 };
 
-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));
@@ -12527,7 +12696,7 @@ var DatePickerView = _ref => {
       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);
@@ -12614,7 +12783,7 @@ var usePasswordState = props => {
   }, props, textFieldStates);
 };
 
-var _excluded$A = ["visibleIcon", "hiddenIcon"],
+var _excluded$B = ["visibleIcon", "hiddenIcon"],
   _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
@@ -12625,7 +12794,7 @@ var PasswordComponent = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   var _usePasswordState = usePasswordState(props),
     {
       isVisible,
@@ -12679,7 +12848,7 @@ var useComboBoxState = (items, placeholder, searchPlaceholder) => {
   };
 };
 
-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 {
@@ -12704,7 +12873,7 @@ var ComboBoxView = _ref => {
       setIsDropdownVisible
       // Collects all further props not destructured explicitly.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   var {
     ref: triggerRef,
     relation
@@ -12883,7 +13052,7 @@ var ComboBoxView = _ref => {
   }, "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 {
@@ -12899,7 +13068,7 @@ var ComboBoxComponent = _ref => {
       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 (
@@ -13108,7 +13277,7 @@ var useTagInputState = props => {
   };
 };
 
-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
  */
@@ -13233,7 +13402,7 @@ var TagInputView = _ref2 => {
       setIsHovered,
       onClick
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$E);
   var {
     getColor,
     themeMode
@@ -13316,7 +13485,7 @@ var TagInputView = _ref2 => {
   }, views == null ? void 0 : views.placeholder), "Maximum ", maxTags, " tags reached")))), right));
 };
 
-var _excluded$E = ["tags"];
+var _excluded$F = ["tags"];
 /**
  * TagInput Component
  *
@@ -13328,7 +13497,7 @@ var TagInputComponent = props => {
   // 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));
 };
@@ -13641,7 +13810,7 @@ var useOTPInputState = _ref => {
   };
 };
 
-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: [],
@@ -13695,7 +13864,7 @@ var OTPInputView = _ref => {
       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
@@ -13927,7 +14096,7 @@ var OTPInputComponent = props => {
 };
 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: () => {},
@@ -13943,7 +14112,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var formik$1 = formik.useFormikContext();
   React.useEffect(() => {
     onChange(formik$1.values);
@@ -13991,7 +14160,7 @@ var FormikForm = _ref => {
   }, /*#__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':
@@ -14030,7 +14199,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var focus = useFormFocus();
   var {
     touched,
@@ -14074,13 +14243,13 @@ var useFormikInput = _ref => {
   } : {});
 };
 
-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));
@@ -14800,7 +14969,7 @@ var useHoverCardState = function useHoverCardState(_temp) {
   };
 };
 
-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({
@@ -14839,7 +15008,7 @@ var HoverCardTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$J);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$K);
   var {
     openCard,
     closeCard,
@@ -15009,7 +15178,7 @@ var HoverCardContent = _ref3 => {
   }, 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.
@@ -15021,7 +15190,7 @@ var HoverCardComponent = _ref => {
       openDelay,
       closeDelay
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
   var hoverCardState = useHoverCardState({
     openDelay,
     closeDelay
@@ -15633,7 +15802,7 @@ var AudioRecorder = _ref => {
   }))));
 };
 
-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 {
@@ -15678,7 +15847,7 @@ var ChatInputView = _ref => {
       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);
@@ -15905,13 +16074,13 @@ var ChatInputView = _ref => {
   }, 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
@@ -16008,7 +16177,7 @@ var SwitchComponent$1 = props => {
 };
 var FormikSwitch = SwitchComponent$1;
 
-var _excluded$N = ["name"],
+var _excluded$O = ["name"],
   _excluded2$c = ["tags"];
 /**
  * Formik-integrated TagInput component
@@ -16017,7 +16186,7 @@ var TagInputComponent$1 = props => {
   var {
       name
     } = props,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded$N);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$O);
   // Get Formik context directly for better control
   var {
     values,
@@ -16075,11 +16244,11 @@ var TextAreaComponent$1 = props => {
  */
 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));
 };
 /**
@@ -16087,7 +16256,7 @@ var TextFieldComponent$1 = props => {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$P = ["visibleIcon", "hiddenIcon"],
+var _excluded$Q = ["visibleIcon", "hiddenIcon"],
   _excluded2$d = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
@@ -16098,7 +16267,7 @@ var PasswordComponent$1 = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     {
@@ -16123,14 +16292,14 @@ var PasswordComponent$1 = _ref => {
  */
 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
@@ -16413,7 +16582,7 @@ var OrientationStyles = {
   }
 };
 
-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 {
@@ -16456,7 +16625,7 @@ var SliderView = _ref => {
         tooltip: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
   var {
     getColor,
     themeMode
@@ -16779,7 +16948,7 @@ var OTPInputComponent$1 = props => {
  */
 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
@@ -16805,7 +16974,7 @@ var FormikUploader = _ref => {
       onFileSelect,
       multiple = true
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
   var {
     setFieldValue,
     setFieldTouched,
@@ -16875,156 +17044,7 @@ var FormikUploader = _ref => {
 };
 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);
@@ -17033,7 +17053,7 @@ var SelectorComponent = props => {
 /**
  * Selector provides a dropdown list of options for the user to choose from.
  */
-var FormikSelector = SelectorComponent;
+var FormikSelector = SelectorComponent$1;
 
 var AttachmentPreview = _ref => {
   var {
@@ -19309,16 +19329,6 @@ var TypewriterEffect = _ref => {
 
 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,
@@ -19335,10 +19345,6 @@ var SlideEffect = _ref => {
   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') {
@@ -19404,12 +19410,10 @@ var SlideEffect = _ref => {
       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);
@@ -19431,9 +19435,6 @@ var SlideEffect = _ref => {
     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
@@ -19442,17 +19443,63 @@ var SlideEffect = _ref => {
   }, 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);
@@ -19461,7 +19508,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"];
 function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 var TitleView = _ref => {
   var {
@@ -19557,7 +19604,13 @@ var TitleView = _ref => {
   // 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;
@@ -28349,6 +28402,7 @@ exports.RotateIcon = RotateIcon;
 exports.SaveIcon = SaveIcon;
 exports.SearchIcon = SearchIcon;
 exports.Select = Select;
+exports.Selector = Selector;
 exports.SendIcon = SendIcon;
 exports.Separator = Separator;
 exports.SettingsIcon = SettingsIcon;