@app-studio/web 0.9.54 → 0.9.55

package/dist/web.esm.js

@@ -9549,6 +9549,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.useState(false);
+  // State hook for tracking focus status of the Selector input field
+  var [isFocused, setIsFocused] = React.useState(false);
+  // State hook for managing the value(s) selected by the user, initialized with the default value
+  var [value, setValue] = React.useState(defaultValue);
+  // State hook for keeping track of the currently highlighted index in the options list
+  var [highlightedIndex, setHighlightedIndex] = React.useState(0);
+  // State hook for managing visibility of the Selector dropdown, initially set to hidden
+  var [hide, setHide] = React.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
+  } = useTheme();
+  var handleCallback = useCallback(option => {
+    setValue(option.value);
+    if (onChange) onChange(option.value);
+  }, [setValue, onChange]);
+  return /*#__PURE__*/React.createElement(FieldContainer, {
+    id: id,
+    width: "100%",
+    views: views
+  }, label && (/*#__PURE__*/React.createElement(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.createElement(InfoIcon, {
+    widthHeight: 14
+  }), " ", /*#__PURE__*/React.createElement(Text, null, label))), /*#__PURE__*/React.createElement(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.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.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.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 {
@@ -9581,7 +9750,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,
@@ -9616,7 +9785,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
@@ -9755,7 +9924,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
  */
@@ -9801,7 +9970,7 @@ var TextFieldView = _ref => {
       onBlur = () => {},
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var {
     getColor,
     themeMode
@@ -10080,7 +10249,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,
@@ -10107,7 +10276,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) {
@@ -10565,7 +10734,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
@@ -10606,7 +10775,7 @@ var ColorInputView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var {
     getColor
   } = useTheme();
@@ -12245,11 +12414,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.createElement(Element, Object.assign({
     as: "ul"
   }, props));
@@ -12487,7 +12656,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.createElement(Input, Object.assign({
   type: "date"
 }, props));
@@ -12520,7 +12689,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);
@@ -12607,7 +12776,7 @@ var usePasswordState = props => {
   }, props, textFieldStates);
 };
 
-var _excluded$A = ["visibleIcon", "hiddenIcon"],
+var _excluded$B = ["visibleIcon", "hiddenIcon"],
   _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
@@ -12618,7 +12787,7 @@ var PasswordComponent = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   var _usePasswordState = usePasswordState(props),
     {
       isVisible,
@@ -12672,7 +12841,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 {
@@ -12697,7 +12866,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
@@ -12876,7 +13045,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 {
@@ -12892,7 +13061,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 (
@@ -13101,7 +13270,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
  */
@@ -13226,7 +13395,7 @@ var TagInputView = _ref2 => {
       setIsHovered,
       onClick
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$E);
   var {
     getColor,
     themeMode
@@ -13309,7 +13478,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
  *
@@ -13321,7 +13490,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.createElement(TagInputView, Object.assign({}, tagInputState, restProps));
 };
@@ -13634,7 +13803,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__*/createContext({
   slots: [],
@@ -13688,7 +13857,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);
   useTheme(); // Initialize theme context
   var showLabel = !!label;
   // Create context value for slots
@@ -13920,7 +14089,7 @@ var OTPInputComponent = props => {
 };
 var OTPInput = OTPInputComponent;
 
-var _excluded$G = ["children", "autoFocus", "initFocus", "onChange"];
+var _excluded$H = ["children", "autoFocus", "initFocus", "onChange"];
 var FocusContext = /*#__PURE__*/createContext({
   active: false,
   focusNextInput: () => {},
@@ -13936,7 +14105,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var formik = useFormikContext();
   useEffect(() => {
     onChange(formik.values);
@@ -13984,7 +14153,7 @@ var FormikForm = _ref => {
   }, /*#__PURE__*/React.createElement(Form, Object.assign({}, props), children));
 };
 
-var _excluded$H = ["name", "type"];
+var _excluded$I = ["name", "type"];
 var getInputTypeProps = type => {
   switch (type) {
     case 'email':
@@ -14023,7 +14192,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var focus = useFormFocus();
   var {
     touched,
@@ -14067,13 +14236,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.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -14793,7 +14962,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__*/createContext({
@@ -14832,7 +15001,7 @@ var HoverCardTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$J);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$K);
   var {
     openCard,
     closeCard,
@@ -15002,7 +15171,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.
@@ -15014,7 +15183,7 @@ var HoverCardComponent = _ref => {
       openDelay,
       closeDelay
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
   var hoverCardState = useHoverCardState({
     openDelay,
     closeDelay
@@ -15626,7 +15795,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 {
@@ -15671,7 +15840,7 @@ var ChatInputView = _ref => {
       handleDragLeave
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
   var {} = useTheme();
   // Combine styles
   var containerStyles = Object.assign({}, DefaultChatInputStyles.container, Shapes$2[shape], views == null ? void 0 : views.container);
@@ -15898,13 +16067,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] = useState([]);
   // Get Formik integration props
@@ -16001,7 +16170,7 @@ var SwitchComponent$1 = props => {
 };
 var FormikSwitch = SwitchComponent$1;
 
-var _excluded$N = ["name"],
+var _excluded$O = ["name"],
   _excluded2$c = ["tags"];
 /**
  * Formik-integrated TagInput component
@@ -16010,7 +16179,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,
@@ -16068,11 +16237,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.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -16080,7 +16249,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 {
@@ -16091,7 +16260,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),
     {
@@ -16116,14 +16285,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
@@ -16406,7 +16575,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 {
@@ -16449,7 +16618,7 @@ var SliderView = _ref => {
         tooltip: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
   var {
     getColor,
     themeMode
@@ -16772,7 +16941,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 UploadService.uploadControllerFile({
     file
@@ -16798,7 +16967,7 @@ var FormikUploader = _ref => {
       onFileSelect,
       multiple = true
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
   var {
     setFieldValue,
     setFieldTouched,
@@ -16868,156 +17037,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.useState(false);
-  // State hook for tracking focus status of the Selector input field
-  var [isFocused, setIsFocused] = React.useState(false);
-  // State hook for managing the value(s) selected by the user, initialized with the default value
-  var [value, setValue] = React.useState(defaultValue);
-  // State hook for keeping track of the currently highlighted index in the options list
-  var [highlightedIndex, setHighlightedIndex] = React.useState(0);
-  // State hook for managing visibility of the Selector dropdown, initially set to hidden
-  var [hide, setHide] = React.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
-  } = useTheme();
-  var handleCallback = useCallback(option => {
-    setValue(option.value);
-    if (onChange) onChange(option.value);
-  }, [setValue, onChange]);
-  return /*#__PURE__*/React.createElement(FieldContainer, {
-    id: id,
-    width: "100%",
-    views: views
-  }, label && (/*#__PURE__*/React.createElement(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.createElement(InfoIcon, {
-    widthHeight: 14
-  }), " ", /*#__PURE__*/React.createElement(Text, null, label))), /*#__PURE__*/React.createElement(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.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.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);
@@ -17026,7 +17046,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 {
@@ -28248,5 +28268,5 @@ var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
 });
 Background.displayName = 'Background';
 
-export { Accordion, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, BackIcon, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, Drawer, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSelector, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
+export { Accordion, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, BackIcon, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, Drawer, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSelector, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, Selector, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
 //# sourceMappingURL=web.esm.js.map