@app-studio/web 0.9.50 → 0.9.54

package/dist/web.umd.development.js

@@ -5016,6 +5016,28 @@
           boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
         },
         transition: 'opacity 0.2s ease'
+      },
+      subtle: {
+        backgroundColor: 'white',
+        color: color,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 6,
+        fontWeight: 500,
+        _hover: {
+          backgroundColor: 'rgba(0, 0, 0, 0.05)'
+        },
+        _active: {
+          backgroundColor: 'rgba(0, 0, 0, 0.1)'
+        },
+        _focusVisible: {
+          outline: 'none',
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+        },
+        transition: 'all 0.2s ease'
       }
     };
   };
@@ -8356,7 +8378,8 @@
       // Layout properties
       gap: 8,
       position: "relative",
-      width: "100%"
+      width: "100%",
+      marginVertical: 4
     }, props, views == null ? void 0 : views.container), children, !error && helperText && (/*#__PURE__*/React__default.createElement(HelperText, Object.assign({
       marginTop: 4
     }, views == null ? void 0 : views.helperText), helperText)), error && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
@@ -8553,7 +8576,7 @@
       opacity: isDisabled ? 0.6 : 1,
       // Animation
       transition: "all 0.2s ease"
-    }, showLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], views['box'], props), children);
+    }, showLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], InputVariants[variant], views == null ? void 0 : views.container, props), children);
   };
 
   var _excluded$o = ["children"];
@@ -12217,12 +12240,10 @@
         text: {}
       }
     } = _ref3;
-    var [isHovered, setIsHovered] = React.useState(false);
     var handleOptionClick = event => {
       if (event && event.stopPropagation) event.stopPropagation();
       callback(option);
     };
-    var handleHover = () => setIsHovered(!isHovered);
     return /*#__PURE__*/React__default.createElement(CountryItem, Object.assign({
       margin: 0,
       role: "DropDownItem",
@@ -12230,11 +12251,11 @@
       fontWeight: "normal",
       paddingVertical: 6,
       paddingHorizontal: 12,
-      onMouseEnter: handleHover,
-      onMouseLeave: handleHover,
       onClick: handleOptionClick,
       fontSize: appStudio.Typography.fontSizes[size],
-      backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
+      _hover: {
+        opacity: 0.8
+      }
     }, views['text']), option);
   };
   var DropDown$1 = _ref4 => {
@@ -12313,7 +12334,6 @@
     var IconColor = getColor('color.blueGray.700', {
       themeMode: elementMode ? elementMode : themeMode
     });
-    var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);
     var handleCallback = option => {
       setHide(!hide);
@@ -12370,13 +12390,13 @@
       variant: variant,
       value: value,
       color: 'theme.primary',
-      isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       showLabel: showLabel,
-      onMouseEnter: handleHover,
-      onMouseLeave: handleHover
+      _hover: !isDisabled && !error ? {
+        borderColor: 'theme.primary'
+      } : undefined
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
       color: 'theme.primary',
@@ -12651,6 +12671,7 @@
       relation
     } = appStudio.useElementPosition();
     var dropdownRef = React.useRef(null);
+    var [isHovered, setIsHovered] = React.useState(false);
     // Get optimal positioning style based on available space
     var getDropdownStyle = () => {
       if (!relation) {
@@ -12690,13 +12711,13 @@
       var handleClickOutside = event => {
         var path = event.composedPath();
         var isOutside = !path.some(element => (element == null ? void 0 : element.id) === 'combobox-dropdown');
-        if (isOutside) {
+        if (isOutside && triggerRef.current && !triggerRef.current.contains(event.target)) {
           setIsDropdownVisible(false);
         }
       };
       document.addEventListener('mousedown', handleClickOutside);
       return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, []);
+    }, []); // triggerRef is stable
     // Defines 'handleSearch' to filter items based on the user's query.
     var handleSearch = query => {
       setSearchQuery(query);
@@ -12725,71 +12746,102 @@
       views: views == null ? void 0 : views.label,
       htmlFor: props.id
     }, label)), /*#__PURE__*/React__default.createElement(appStudio.View, {
-      position: "relative"
-    }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      position: "relative",
+      width: "100%"
+    }, /*#__PURE__*/React__default.createElement("div", {
       ref: triggerRef,
+      onClick: () => setIsDropdownVisible(!isDropdownVisible),
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React__default.createElement(FieldContent, {
+      isHovered: isHovered,
+      isFocused: isDropdownVisible,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
       cursor: "pointer",
-      backgroundColor: "color.white",
-      boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
-      padding: "12px",
-      display: "flex",
-      alignItems: "center",
-      borderRadius: "4px",
-      justifyContent: "space-between",
-      minWidth: 300,
-      flexWrap: "nowrap"
-    }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
-      gap: 15,
+      views: {
+        container: views == null ? void 0 : views.container
+      }
+    }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      gap: 10,
       alignItems: "center",
-      position: "relative",
-      width: "100%",
-      onClick: () => setIsDropdownVisible(!isDropdownVisible)
-    }, views == null ? void 0 : views.labelContainer), left, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      width: "100%"
+    }, views == null ? void 0 : views.labelContainer), left, selectedItem.icon && selectedItem.label !== placeholder && (/*#__PURE__*/React__default.createElement(appStudio.View, null, selectedItem.icon)), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       weight: "medium",
       flexGrow: 1,
-      color: "color.gray.800"
-    }, views == null ? void 0 : views.label), selectedItem.label)), right), isDropdownVisible && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      color: selectedItem.label === placeholder ? 'color.gray.500' : 'color.gray.800',
+      style: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    }, views == null ? void 0 : views.label), selectedItem.label)), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      gap: 5,
+      alignItems: "center"
+    }, right, /*#__PURE__*/React__default.createElement(ChevronIcon, {
+      widthHeight: 16,
+      orientation: isDropdownVisible ? 'up' : 'down',
+      color: "color.gray.500"
+    })))), isDropdownVisible && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: dropdownRef,
       id: "combobox-dropdown",
       backgroundColor: "color.white",
-      boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
+      boxShadow: "rgba(0, 0, 0, 0.16) 0px 4px 16px",
       overflowY: "auto",
-      borderRadius: "4px",
+      borderRadius: "8px",
       style: getDropdownStyle()
-    }, views == null ? void 0 : views.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
-      id: props.id,
-      name: props.name,
+    }, views == null ? void 0 : views.dropdown, {
+      border: "1px solid #eee"
+    }), searchEnabled && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      padding: "8px"
+    }, /*#__PURE__*/React__default.createElement(TextFieldView, {
+      id: props.id + "-search",
+      name: props.name + "-search",
       width: "100%",
       type: "search",
+      autoFocus: true,
       value: searchQuery,
       onChange: value => handleSearch(value),
-      hint: placeholder,
+      hint: placeholder || 'Search...',
       isClearable: false,
       left: /*#__PURE__*/React__default.createElement(SearchIcon, {
-        widthHeight: 16
+        widthHeight: 16,
+        color: "color.gray.400"
       }),
       views: {
         container: Object.assign({
           width: '100%',
-          padding: '6px 12px',
-          borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
-        }, views == null ? void 0 : views.text)
+          padding: '0'
+        }, views == null ? void 0 : views.text),
+        field: {
+          fontSize: '14px'
+        }
       }
-    })), filteredItems.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+    }))), filteredItems.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, {
       margin: 0,
       padding: 4
     }, filteredItems.map((item, index) => (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       justifyContent: "space-between",
       key: item.value,
-      padding: "12px",
+      padding: "8px 12px",
       cursor: "pointer",
       borderRadius: 4,
       backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
       onMouseEnter: () => setHighlightedIndex(index),
-      onClick: () => handleSelect(item)
-    }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(appStudio.Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(TickIcon, {
-      widthHeight: 20
-    })))))))))));
+      onClick: () => handleSelect(item),
+      transition: "background-color 0.2s"
+    }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      color: "color.gray.800"
+    }, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && (/*#__PURE__*/React__default.createElement(TickIcon, {
+      widthHeight: 16,
+      color: "theme.primary"
+    })))))))), filteredItems.length === 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      padding: "12px"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      color: "color.gray.500",
+      align: "center"
+    }, "No items found")))))));
   };
 
   var _excluded$C = ["id", "name", "items", "placeholder", "searchPlaceholder"];
@@ -13031,53 +13083,56 @@
       isDisabled,
       isReadOnly
     } = _ref;
+    var [isRemoveHovered, setIsRemoveHovered] = React__default.useState(false);
     var {
       getColor
     } = appStudio.useTheme();
     var chipSize = {
       xs: {
-        padding: '2px 6px',
+        padding: '2px 8px',
         fontSize: '10px',
         iconSize: 10
       },
       sm: {
-        padding: '4px 8px',
+        padding: '4px 10px',
         fontSize: '12px',
         iconSize: 12
       },
       md: {
-        padding: '6px 10px',
+        padding: '6px 14px',
         fontSize: '14px',
         iconSize: 14
       },
       lg: {
-        padding: '8px 12px',
+        padding: '8px 16px',
         fontSize: '16px',
         iconSize: 16
       },
       xl: {
-        padding: '10px 14px',
+        padding: '10px 18px',
         fontSize: '18px',
         iconSize: 18
       }
     }[size] || {
-      padding: '6px 10px',
+      padding: '6px 14px',
       fontSize: '14px',
       iconSize: 14
     };
     return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       alignItems: "center",
-      gap: 4,
+      gap: 6,
       padding: chipSize.padding,
-      backgroundColor: "color.gray.100",
+      backgroundColor: "white",
       borderRadius: "16px",
       border: "1px solid",
-      borderColor: "color.gray.200",
-      transition: "all 0.2s ease",
+      borderColor: "color.black.100",
+      boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
+      transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
       opacity: isDisabled ? 0.6 : 1,
       _hover: !isDisabled && !isReadOnly ? {
-        backgroundColor: 'color.gray.200',
-        borderColor: 'color.gray.300'
+        borderColor: 'color.gray.300',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
+        transform: 'translateY(-1px)'
       } : {}
     }, views == null ? void 0 : views.tag), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: chipSize.fontSize,
@@ -13089,13 +13144,19 @@
       padding: "2px",
       borderRadius: "50%",
       transition: "all 0.2s ease",
-      _hover: {
-        backgroundColor: 'color.gray.300'
+      backgroundColor: isRemoveHovered ? 'color.red.50' : 'transparent',
+      onMouseEnter: () => setIsRemoveHovered(true),
+      onMouseLeave: () => setIsRemoveHovered(false),
+      onClick: e => {
+        e.stopPropagation();
+        onRemove();
       },
-      onClick: onRemove
+      _hover: {
+        backgroundColor: 'color.red.50'
+      }
     }, views == null ? void 0 : views.tagRemove), /*#__PURE__*/React__default.createElement(CloseIcon, {
       widthHeight: chipSize.iconSize,
-      color: "color.gray.500"
+      color: isRemoveHovered ? 'color.red.500' : 'color.gray.400'
     }))));
   };
   /**
@@ -13181,7 +13242,7 @@
       views: views
     }, label)), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       alignItems: "center",
-      gap: 4,
+      gap: 8,
       flexWrap: "wrap",
       width: "100%",
       minHeight: appStudio.Typography.fontSizes[size],
@@ -16775,6 +16836,166 @@
   };
   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 formProps = useFormikInput(props);
+    formProps.selected = formProps.value;
+    var selectorStates = useSelectorState(props);
+    return /*#__PURE__*/React__default.createElement(SelectorView, Object.assign({}, selectorStates, formProps));
+  };
+  /**
+   * Selector provides a dropdown list of options for the user to choose from.
+   */
+  var FormikSelector = SelectorComponent;
+
   var AttachmentPreview = _ref => {
     var {
       files,
@@ -17121,7 +17342,7 @@
     }
   };
 
-  var _excluded$T = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
+  var _excluded$U = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
     _excluded2$e = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
     _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
     _excluded4$8 = ["children", "views"],
@@ -17136,7 +17357,7 @@
         position = 'center',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -17384,7 +17605,7 @@
     }
   };
 
-  var _excluded$U = ["isOpen", "onClose", "isClosePrevented", "blur", "children"],
+  var _excluded$V = ["isOpen", "onClose", "isClosePrevented", "blur", "children"],
     _excluded2$f = ["placement", "size", "children"],
     _excluded3$a = ["children", "onClose", "buttonPosition"],
     _excluded4$9 = ["children"],
@@ -17397,7 +17618,7 @@
         blur,
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -17509,7 +17730,7 @@
     }, props), children);
   };
 
-  var _excluded$V = ["isOpen", "onClose", "placement", "size", "isClosePrevented", "children"];
+  var _excluded$W = ["isOpen", "onClose", "placement", "size", "isClosePrevented", "children"];
   /**
    * A drawer is a panel that slides out from the edge of the screen.
    * It can be useful when you need users to complete a task or view some details without leaving the current page.
@@ -17523,7 +17744,7 @@
         isClosePrevented,
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
     var transformStyle = isOpen ? {} : {
       transform: placement === 'left' || placement === 'right' ? "translateX(" + (placement === 'left' ? '-100%' : '100%') + ")" : "translateY(" + (placement === 'top' ? '-100%' : '100%') + ")"
     };
@@ -17693,7 +17914,7 @@
     }
   };
 
-  var _excluded$W = ["href", "children", "views"];
+  var _excluded$X = ["href", "children", "views"];
   // Create context for the NavigationMenu
   var NavigationMenuContext = /*#__PURE__*/React.createContext({
     activeItemId: null,
@@ -18069,7 +18290,7 @@
         children,
         views
       } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded$W);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded$X);
     var {
       itemValue,
       isDisabled
@@ -18136,7 +18357,7 @@
     })))));
   };
 
-  var _excluded$X = ["items", "children", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
+  var _excluded$Y = ["items", "children", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
   /**
    * NavigationMenu component for creating navigation menus with optional nested items.
    * Supports both data-driven approach (with items prop) and compound component pattern.
@@ -18153,7 +18374,7 @@
         onItemActivate,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
     var {
       activeItemId,
       setActiveItemId,
@@ -18966,7 +19187,7 @@
     })
   };
 
-  var _excluded$Y = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
+  var _excluded$Z = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
   /**
    * A component that creates a typewriter effect for text
    */
@@ -18980,7 +19201,7 @@
         cursorColor = 'currentColor',
         textStyle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
     // Convert text to array if it's a string
     var textArray = Array.isArray(text) ? text : [text];
     // State for the currently displayed text
@@ -19047,18 +19268,8 @@
     }))))));
   };
 
-  var _excluded$Z = ["text", "duration", "direction", "stagger", "sequential", "textStyle", "as", "wordProps"],
+  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,
@@ -19069,16 +19280,12 @@
         textStyle,
         wordProps
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
     var [displayedText, setDisplayedText] = React.useState(text);
     var [phase, setPhase] = React.useState('entering');
     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') {
@@ -19144,12 +19351,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);
@@ -19171,9 +19376,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
@@ -19182,26 +19384,72 @@
     }, 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);
     })));
   };
 
-  var _excluded$_ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential"];
+  var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "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 {
@@ -19225,7 +19473,7 @@
         highlightSlideStagger = 50,
         highlightSlideSequential = true
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     var {
       ref,
       inView
@@ -19297,7 +19545,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;
@@ -19524,7 +19778,7 @@
     }
   });
 
-  var _excluded$$ = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
+  var _excluded$10 = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
   var ToggleView = _ref => {
     var _ref2;
     var {
@@ -19544,7 +19798,7 @@
         // 2nd candidate for main color
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
     /* theme helpers */
     var {
       getColor,
@@ -19588,7 +19842,7 @@
     }, props, views == null ? void 0 : views.container), children);
   };
 
-  var _excluded$10 = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+  var _excluded$11 = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
   // Destructuring properties from ToggleProps to be used within the ToggleComponent.
   var ToggleComponent = _ref => {
     var {
@@ -19600,7 +19854,7 @@
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,
@@ -19820,8 +20074,7 @@
       onTouchStart: e => handleDragStart(e, index),
       position: "relative",
       cursor: "grab",
-      transition: "transform 0.2s",
-      backgroundColor: draggedIndex === index ? 'color.gray.100' : 'transparent'
+      transition: "transform 0.2s"
     }, itemProps, views == null ? void 0 : views.item), renderItem ? renderItem(item, index) : item))));
   };
 
@@ -19935,7 +20188,7 @@
     }
   };
 
-  var _excluded$11 = ["children", "views"],
+  var _excluded$12 = ["children", "views"],
     _excluded2$h = ["items", "side", "align", "views"],
     _excluded3$b = ["item", "views"],
     _excluded4$a = ["views"],
@@ -19976,7 +20229,7 @@
         children,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$12);
     var {
       isOpen,
       setIsOpen,
@@ -20229,7 +20482,7 @@
     }));
   };
 
-  var _excluded$12 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+  var _excluded$13 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
   /**
    * DropdownMenu component for displaying a menu when clicking on a trigger element.
    */
@@ -20244,7 +20497,7 @@
         defaultOpen = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
     var {
       isOpen,
       setIsOpen,
@@ -20658,7 +20911,7 @@
     category: 'neutral'
   }];
 
-  var _excluded$13 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
+  var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
   var ColorPickerView = _ref => {
     var {
         // Basic props
@@ -20693,7 +20946,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
     var {
       getColor
     } = appStudio.useTheme();
@@ -20896,7 +21149,8 @@
       gap: '4px',
       maxHeight: '240px',
       overflowY: 'auto',
-      padding: '4px'
+      padding: '4px',
+      color: 'color.black'
     },
     emoji: {
       width: '32px',
@@ -23024,7 +23278,7 @@
     };
   };
 
-  var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
+  var _excluded$15 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
   var EmojiPickerView = _ref => {
     var {
         // Basic props
@@ -23062,7 +23316,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
     var {
       getColor
     } = appStudio.useTheme();
@@ -23124,7 +23378,8 @@
       title: emoji.name,
       _hover: {
         backgroundColor: 'color.gray.100'
-      }
+      },
+      color: "color.gray.800"
     }, views == null ? void 0 : views.emoji), emoji.emoji))) : (/*#__PURE__*/React__default.createElement(appStudio.View, {
       gridColumn: "1 / -1",
       padding: "20px",
@@ -23249,7 +23504,7 @@
     }
   };
 
-  var _excluded$15 = ["children", "orientation", "size", "variant", "views"];
+  var _excluded$16 = ["children", "orientation", "size", "variant", "views"];
   // Create context for the Menubar
   var MenubarContext = /*#__PURE__*/React.createContext({
     activeMenuId: null,
@@ -23286,7 +23541,7 @@
         variant = 'default',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$16);
     var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
     return /*#__PURE__*/React__default.createElement(Container, Object.assign({
       role: "menubar",
@@ -23606,7 +23861,7 @@
     })))))));
   };
 
-  var _excluded$16 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+  var _excluded$17 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
   /**
    * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
    */
@@ -23620,7 +23875,7 @@
         defaultOpenMenuId = null,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
     var {
       activeMenuId,
       setActiveMenuId,
@@ -23802,7 +24057,7 @@
     }
   };
 
-  var _excluded$17 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+  var _excluded$18 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
   var PaginationView = _ref => {
     var {
         currentPage,
@@ -23833,7 +24088,7 @@
         visiblePageNumbers,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
     var handlePageChange = page => {
       if (page < 1 || page > totalPages || page === currentPage) {
         return;
@@ -23952,7 +24207,7 @@
     }, option.label))))));
   };
 
-  var _excluded$18 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+  var _excluded$19 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
   /**
    * Pagination component for navigating through pages of content.
    */
@@ -23973,7 +24228,7 @@
         shape = 'rounded',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
     var {
       visiblePageNumbers
     } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -23997,7 +24252,7 @@
   };
   var Pagination = PaginationComponent;
 
-  var _excluded$19 = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
+  var _excluded$1a = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
   var ProgressBarView = _ref => {
     var {
         value = 0,
@@ -24009,7 +24264,7 @@
         views,
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
     var {
       getColor,
       themeMode
@@ -24099,7 +24354,7 @@
     }
   };
 
-  var _excluded$1a = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+  var _excluded$1b = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
   var SeparatorView = _ref => {
     var {
         orientation = 'horizontal',
@@ -24111,7 +24366,7 @@
         decorative = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
     // Access theme if needed for future enhancements
     var {
       themeMode
@@ -24179,7 +24434,7 @@
   var Separator = SeparatorComponent;
   var Divider = SeparatorComponent;
 
-  var _excluded$1b = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
+  var _excluded$1c = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
   var ICON_SIZE_MAP = {
     xs: 12,
     sm: 14,
@@ -24202,7 +24457,7 @@
         iconPosition,
         disableWhenUnsupported = true
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
     var resolvedSize = size != null ? size : 'md';
     var resolvedIcon = icon != null ? icon : (/*#__PURE__*/React__default.createElement(ShareIcon, {
       widthHeight: ICON_SIZE_MAP[resolvedSize],
@@ -24304,14 +24559,14 @@
     };
   };
 
-  var _excluded$1c = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
+  var _excluded$1d = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
   var ShareButtonComponent = props => {
     var {
       isSupported,
       isSharing,
       handleShare
     } = useShareButton(props);
-    var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1c);
+    var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1d);
     return /*#__PURE__*/React__default.createElement(ShareButtonView, Object.assign({}, viewProps, {
       isSupported: isSupported,
       isSharing: isSharing,
@@ -24365,7 +24620,7 @@
     };
   };
 
-  var _excluded$1d = ["label", "status", "views", "themeMode"];
+  var _excluded$1e = ["label", "status", "views", "themeMode"];
   var StatusIndicatorView = _ref => {
     var {
         label,
@@ -24373,7 +24628,7 @@
         views,
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1d);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
     var {
       themeMode
     } = appStudio.useTheme();
@@ -24556,7 +24811,7 @@
     bounce: 'width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)'
   };
 
-  var _excluded$1e = ["children", "showToggleButton", "views"],
+  var _excluded$1f = ["children", "showToggleButton", "views"],
     _excluded2$i = ["children", "views"],
     _excluded3$c = ["children", "views"],
     _excluded4$b = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
@@ -24589,7 +24844,7 @@
         showToggleButton = true,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1e);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
     var {
       isExpanded,
       toggleExpanded,
@@ -24744,7 +24999,7 @@
     }))));
   };
 
-  var _excluded$1f = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
+  var _excluded$1g = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
   /**
    * Sidebar component for creating collapsible, themeable and customizable sidebars.
    */
@@ -24766,7 +25021,7 @@
         breakpointBehavior = 'overlay',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
     var {
       isExpanded,
       toggleExpanded,
@@ -25231,7 +25486,7 @@
     }
   };
 
-  var _excluded$1g = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
+  var _excluded$1h = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
     _excluded2$j = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
     _excluded3$d = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
   // Create context for the Resizable component
@@ -25276,7 +25531,7 @@
         onCollapseChange,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1g);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1h);
     var {
       orientation,
       registerPanel,
@@ -25491,7 +25746,7 @@
     }, ResizableOrientations[orientation], views == null ? void 0 : views.container, props), children);
   };
 
-  var _excluded$1h = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
+  var _excluded$1i = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
   /**
    * Resizable component for creating resizable panel groups and layouts.
    */
@@ -25511,7 +25766,7 @@
         keyboardResizeBy = 10,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
     var {
       isResizing,
       setIsResizing,
@@ -26282,7 +26537,7 @@
     color: 'color.gray.500'
   };
 
-  var _excluded$1i = ["value", "onValueChange", "placeholder", "views"],
+  var _excluded$1j = ["value", "onValueChange", "placeholder", "views"],
     _excluded2$k = ["children", "views"],
     _excluded3$e = ["heading", "children", "views"],
     _excluded4$c = ["item", "selected", "onSelect", "views"],
@@ -26314,7 +26569,7 @@
         placeholder = 'Type a command or search...',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1i);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1j);
     var inputRef = React.useRef(null);
     // Focus input when component mounts
     React__default.useEffect(() => {
@@ -26497,7 +26752,7 @@
     })))), footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandFooterStyles, views == null ? void 0 : views.footer), footer)))));
   };
 
-  var _excluded$1j = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
+  var _excluded$1k = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
   /**
    * Command component for displaying a command palette with search functionality.
    */
@@ -26515,7 +26770,7 @@
         footer,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
     var {
       search,
       setSearch,
@@ -26752,7 +27007,7 @@
     }
   };
 
-  var _excluded$1k = ["children", "views", "asChild"],
+  var _excluded$1l = ["children", "views", "asChild"],
     _excluded2$l = ["children", "views"],
     _excluded3$f = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
   // Create context for the Tooltip
@@ -26788,7 +27043,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1k);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1l);
     var {
       openTooltip,
       closeTooltip,
@@ -26972,7 +27227,7 @@
     }, TooltipSizes[size], TooltipVariants[variant], views == null ? void 0 : views.content), typeof content === 'string' ? (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, views == null ? void 0 : views.text), content)) : content, showArrow && /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, arrowStyles, views == null ? void 0 : views.arrow)))));
   };
 
-  var _excluded$1l = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
+  var _excluded$1m = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
   /**
    * Tooltip component for displaying additional information when hovering over an element.
    * Supports configurable positions, delays, and styling.
@@ -26992,7 +27247,7 @@
         isDisabled = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
     var tooltipState = useTooltipState({
       defaultOpen,
       openDelay,
@@ -27301,7 +27556,7 @@
     }
   };
 
-  var _excluded$1m = ["type", "direction", "shape", "position", "from", "to", "colors", "animate", "animationDuration", "children", "views", "themeMode"];
+  var _excluded$1n = ["type", "direction", "shape", "position", "from", "to", "colors", "animate", "animationDuration", "children", "views", "themeMode"];
   var GradientView = _ref => {
     var {
         type = 'linear',
@@ -27317,7 +27572,7 @@
         views,
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
     var {
       getColor,
       themeMode
@@ -27393,7 +27648,7 @@
     return /*#__PURE__*/React__default.createElement(GradientView, Object.assign({}, props));
   };
 
-  var _excluded$1n = ["children", "showRadialGradient", "views", "themeMode"],
+  var _excluded$1o = ["children", "showRadialGradient", "views", "themeMode"],
     _excluded2$m = ["number", "children"],
     _excluded3$g = ["rows", "cols", "squareSize"],
     _excluded4$d = ["count", "colors", "speed", "shapes"],
@@ -27414,7 +27669,7 @@
         showRadialGradient = true,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1o);
     var gradientColors = {
       white: 'rgba(255,255,255,1)',
       transparent: 'rgba(255,255,255,0)'
@@ -28034,6 +28289,7 @@
   exports.FormikOTPInput = FormikOTPInput;
   exports.FormikPassword = FormikPassword;
   exports.FormikSelect = FormikSelect;
+  exports.FormikSelector = FormikSelector;
   exports.FormikSlider = FormikSlider;
   exports.FormikSwitch = FormikSwitch;
   exports.FormikTagInput = FormikTagInput;