@app-studio/web 0.9.50 → 0.9.54

package/dist/web.cjs.development.js

@@ -5055,6 +5055,28 @@ var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight)
         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'
     }
   };
 };
@@ -8395,7 +8417,8 @@ var FieldContainer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     // 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({
@@ -8592,7 +8615,7 @@ var FieldContent = _ref => {
     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"];
@@ -12256,12 +12279,10 @@ var DropDownItem = _ref3 => {
       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",
@@ -12269,11 +12290,11 @@ var DropDownItem = _ref3 => {
     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 => {
@@ -12352,7 +12373,6 @@ var CountryPickerView = _ref5 => {
   var IconColor = getColor('color.blueGray.700', {
     themeMode: elementMode ? elementMode : themeMode
   });
-  var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
   var handleCallback = option => {
     setHide(!hide);
@@ -12409,13 +12429,13 @@ var CountryPickerView = _ref5 => {
     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',
@@ -12690,6 +12710,7 @@ var ComboBoxView = _ref => {
     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) {
@@ -12729,13 +12750,13 @@ var ComboBoxView = _ref => {
     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);
@@ -12764,71 +12785,102 @@ var ComboBoxView = _ref => {
     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"];
@@ -13070,53 +13122,56 @@ var TagChip = _ref => {
     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,
@@ -13128,13 +13183,19 @@ var TagChip = _ref => {
     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'
   }))));
 };
 /**
@@ -13220,7 +13281,7 @@ var TagInputView = _ref2 => {
     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],
@@ -16814,6 +16875,166 @@ var FormikUploader = _ref => {
 };
 FormikUploader.displayName = 'FormikUploader';
 
+// Initializes the custom hook 'useSelectorState' for managing the state of the Selector component
+var useSelectorState = _ref => {
+  var {
+    placeholder,
+    isMulti,
+    options,
+    id = "selector-" + Math.random().toString(36).substr(2, 9)
+  } = _ref;
+  // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
+  var defaultValue = placeholder ? isMulti ? [] : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
+  : Array.isArray(options) && options.length > 0 ? options[0].value : isMulti ? [] : ''; // If no placeholder, use the first option value if available, otherwise empty array for multi-select or empty string for single select
+  // State hook for tracking mouse hover status over the Selector component
+  var [isHovered, setIsHovered] = React__default.useState(false);
+  // State hook for tracking focus status of the Selector input field
+  var [isFocused, setIsFocused] = React__default.useState(false);
+  // State hook for managing the value(s) selected by the user, initialized with the default value
+  var [value, setValue] = React__default.useState(defaultValue);
+  // State hook for keeping track of the currently highlighted index in the options list
+  var [highlightedIndex, setHighlightedIndex] = React__default.useState(0);
+  // State hook for managing visibility of the Selector dropdown, initially set to hidden
+  var [hide, setHide] = React__default.useState(true);
+  // Returns an object containing all stateful values and their associated setters to manage the Selector component's state
+  return {
+    id,
+    value,
+    setValue,
+    hide,
+    setHide,
+    isHovered,
+    setIsHovered,
+    isFocused,
+    setIsFocused,
+    highlightedIndex,
+    setHighlightedIndex
+  };
+};
+
+var _excluded$T = ["id", "name", "label", "value", "views", "options", "onChange", "setValue"];
+/**
+ * SelectorView Component
+ *
+ * Renders a segmented control style selector.
+ */
+var SelectorView = _ref => {
+  var {
+      id,
+      name,
+      label,
+      value,
+      views = {},
+      options = [],
+      onChange = () => {},
+      setValue = () => {}
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+  var {
+    getColor
+  } = appStudio.useTheme();
+  var handleCallback = React.useCallback(option => {
+    setValue(option.value);
+    if (onChange) onChange(option.value);
+  }, [setValue, onChange]);
+  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+    id: id,
+    width: "100%",
+    views: views
+  }, label && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+    fontSize: "10px",
+    letterSpacing: "wider",
+    color: "color.black.500",
+    fontWeight: "bold",
+    marginBottom: 12,
+    alignItems: "center",
+    gap: 6,
+    //Text transform uppercase
+    style: {
+      textTransform: 'uppercase'
+    }
+  }, /*#__PURE__*/React__default.createElement(InfoIcon, {
+    widthHeight: 14
+  }), " ", /*#__PURE__*/React__default.createElement(appStudio.Text, null, label))), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+    gap: 0
+  }, options.map((option, index, arr) => {
+    var isSelected = value === option.value;
+    var borderColor = getColor('color.gray.200');
+    var textColor = getColor('color.gray.500');
+    var bgColor = 'transparent';
+    if (isSelected) {
+      if (option.color) {
+        // We need a way to get related colors (50, 500, 700 etc) from a base color if we want full fidelity.
+        // But passing full style strings is easier.
+        borderColor = getColor(option.color);
+        textColor = getColor(option.color);
+        // Try to approximate background color if possible, or just use white/transparent.
+        // Simplification: if color provided, use it for border/text.
+        // Background is hard to derive without more specific props.
+        // Let's try to use a very light opacity of the color for background.
+        bgColor = 'rgba(0,0,0,0.05)'; // Generic active background
+      } else {
+        // Default active style
+        var primary = getColor('theme.primary');
+        borderColor = primary;
+        textColor = primary;
+        bgColor = 'color.gray.50';
+      }
+      // Specific overrides based on user request "ComplexitySelector" style
+      // If the values match 'High', 'Medium', 'Low' we can hardcode for *demo* fidelity if generic logic fails.
+      // But let's try to make it generic.
+      // The user simply pasted code.
+      if (option.color) {
+        // Fallback for customized options
+        borderColor = getColor(option.color);
+        textColor = getColor(option.color);
+        bgColor = 'transparent';
+      } else {
+        // Default fallback
+        borderColor = getColor('theme.primary');
+        textColor = getColor('theme.primary');
+        bgColor = getColor('color.blue.50');
+      }
+    }
+    return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+      key: option.value,
+      onClick: () => handleCallback(option),
+      flex: 1,
+      paddingVertical: 6,
+      fontSize: "12px",
+      fontWeight: isSelected ? 'bold' : 'normal',
+      style: {
+        borderTop: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+        borderBottom: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+        borderLeft: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+        borderRight: index === arr.length - 1 || isSelected ? "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')) : 'none',
+        backgroundColor: bgColor,
+        color: textColor,
+        borderRadius: index === 0 ? '6px 0 0 6px' : index === arr.length - 1 ? '0 6px 6px 0' : '0',
+        zIndex: isSelected ? 1 : 0,
+        boxShadow: 'none'
+      }
+    }, views.item), option.label);
+  })), /*#__PURE__*/React__default.createElement("input", {
+    type: "hidden",
+    id: id,
+    name: name,
+    value: Array.isArray(value) ? value.join(',') : value,
+    onChange: () => {}
+  }));
+};
+
+var SelectorComponent = props => {
+  var 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,
@@ -17160,7 +17381,7 @@ var ModalTypography = {
   }
 };
 
-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"],
@@ -17175,7 +17396,7 @@ var ModalOverlay = _ref => {
       position = 'center',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -17423,7 +17644,7 @@ var DrawerPlacements = {
   }
 };
 
-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"],
@@ -17436,7 +17657,7 @@ var DrawerOverlay = _ref => {
       blur,
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -17548,7 +17769,7 @@ var DrawerFooter = _ref5 => {
   }, 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.
@@ -17562,7 +17783,7 @@ var DrawerComponent = _ref => {
       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%') + ")"
   };
@@ -17732,7 +17953,7 @@ var NavigationMenuItemStates = {
   }
 };
 
-var _excluded$W = ["href", "children", "views"];
+var _excluded$X = ["href", "children", "views"];
 // Create context for the NavigationMenu
 var NavigationMenuContext = /*#__PURE__*/React.createContext({
   activeItemId: null,
@@ -18108,7 +18329,7 @@ var NavigationMenuLink = _ref6 => {
       children,
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$W);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$X);
   var {
     itemValue,
     isDisabled
@@ -18175,7 +18396,7 @@ var NavigationMenuView = _ref7 => {
   })))));
 };
 
-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.
@@ -18192,7 +18413,7 @@ var NavigationMenuComponent = _ref => {
       onItemActivate,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
   var {
     activeItemId,
     setActiveItemId,
@@ -19005,7 +19226,7 @@ var HighlightStyles = {
   })
 };
 
-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
  */
@@ -19019,7 +19240,7 @@ var TypewriterEffect = _ref => {
       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
@@ -19086,18 +19307,8 @@ var TypewriterEffect = _ref => {
   }))))));
 };
 
-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,
@@ -19108,16 +19319,12 @@ var SlideEffect = _ref => {
       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') {
@@ -19183,12 +19390,10 @@ var SlideEffect = _ref => {
       style: customWordStyle
     } = _ref2,
     restWordProps = _objectWithoutPropertiesLoose(_ref2, _excluded2$g);
-  // Get animation names based on direction
+  // Get animation functions based on direction
   var isUp = direction === 'up';
-  var enterAnim = isUp ? 'slideInUp' : 'slideInDown';
-  var exitAnim = isUp ? 'slideOutUp' : 'slideOutDown';
   // Calculate delay for each word
-  var getDelay = (index, isExit) => {
+  var getDelay = index => {
     if (sequential) {
       // Sequential: one word at a time
       return index * (duration + stagger);
@@ -19210,9 +19415,6 @@ var SlideEffect = _ref => {
     flexWrap: 'nowrap',
     whiteSpace: 'nowrap'
   }), []);
-  // Determine current animation
-  var currentAnim = phase === 'exiting' ? exitAnim : enterAnim;
-  var isAnimating = phase === 'entering' || phase === 'exiting';
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "span",
     style: containerStyle
@@ -19221,26 +19423,72 @@ var SlideEffect = _ref => {
   }, words.map((word, index) => {
     var delay = getDelay(index);
     var isLast = index === words.length - 1;
+    // Create animation based on phase and direction
+    var wordAnimation;
+    var durationStr = duration + "ms";
+    var delayStr = delay + "ms";
+    if (phase === 'entering') {
+      // Use app-studio animations for entering
+      wordAnimation = isUp ? appStudio.Animation.slideInUp({
+        duration: durationStr,
+        delay: delayStr,
+        timingFunction: 'ease-out',
+        fillMode: 'both'
+      }) : appStudio.Animation.slideInDown({
+        duration: durationStr,
+        delay: delayStr,
+        timingFunction: 'ease-out',
+        fillMode: 'both'
+      });
+    } else if (phase === 'exiting') {
+      // Custom animation objects for exiting (slideOut not in app-studio yet)
+      wordAnimation = isUp ? {
+        from: {
+          transform: 'translateY(0)',
+          opacity: 1
+        },
+        to: {
+          transform: 'translateY(-100%)',
+          opacity: 0
+        },
+        duration: durationStr,
+        delay: delayStr,
+        timingFunction: 'ease-in',
+        fillMode: 'both'
+      } : {
+        from: {
+          transform: 'translateY(0)',
+          opacity: 1
+        },
+        to: {
+          transform: 'translateY(100%)',
+          opacity: 0
+        },
+        duration: durationStr,
+        delay: delayStr,
+        timingFunction: 'ease-in',
+        fillMode: 'both'
+      };
+    }
     var wordStyle = Object.assign({}, customWordStyle, {
       display: 'inline-block',
       marginRight: isLast ? 0 : '0.25em',
-      willChange: isAnimating ? 'transform, opacity' : 'auto',
-      animation: isAnimating ? currentAnim + " " + duration + "ms ease-out " + delay + "ms both" : 'none',
       transform: phase === 'visible' ? 'translateY(0)' : undefined,
       opacity: phase === 'visible' ? 1 : undefined
     });
     return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       key: animKey + "-" + index,
-      as: "span"
+      as: "span",
+      animate: wordAnimation
     }, restWordProps, {
       style: wordStyle
     }), word);
   })));
 };
 
-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 {
@@ -19264,7 +19512,7 @@ var TitleView = _ref => {
       highlightSlideStagger = 50,
       highlightSlideSequential = true
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
     ref,
     inView
@@ -19336,7 +19584,13 @@ var TitleView = _ref => {
   // Get the text to display
   var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
   if (typeof text === 'string' && activeHighlightTarget) {
-    var pattern = new RegExp("(" + escapeRegExp(Array.isArray(activeHighlightTarget) ? activeHighlightTarget.join('|') : activeHighlightTarget) + ")", 'gi');
+    var pattern = (() => {
+      if (Array.isArray(activeHighlightTarget)) {
+        var escaped = activeHighlightTarget.map(t => escapeRegExp(String(t)));
+        return new RegExp("(" + escaped.join('|') + ")", 'gi');
+      }
+      return new RegExp("(" + escapeRegExp(String(activeHighlightTarget)) + ")", 'gi');
+    })();
     var parts = [];
     var lastIndex = 0;
     var match;
@@ -19563,7 +19817,7 @@ var getToggleVariants = (color, isLight) => ({
   }
 });
 
-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 {
@@ -19583,7 +19837,7 @@ var ToggleView = _ref => {
       // 2nd candidate for main color
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   /* theme helpers */
   var {
     getColor,
@@ -19627,7 +19881,7 @@ var ToggleView = _ref => {
   }, 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 {
@@ -19639,7 +19893,7 @@ var ToggleComponent = _ref => {
       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,
@@ -19859,8 +20113,7 @@ var DragAndDropView = _ref => {
     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))));
 };
 
@@ -19974,7 +20227,7 @@ var DropdownMenuItemStates = {
   }
 };
 
-var _excluded$11 = ["children", "views"],
+var _excluded$12 = ["children", "views"],
   _excluded2$h = ["items", "side", "align", "views"],
   _excluded3$b = ["item", "views"],
   _excluded4$a = ["views"],
@@ -20015,7 +20268,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$12);
   var {
     isOpen,
     setIsOpen,
@@ -20268,7 +20521,7 @@ var DropdownMenuView = _ref6 => {
   }));
 };
 
-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.
  */
@@ -20283,7 +20536,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
   var {
     isOpen,
     setIsOpen,
@@ -20697,7 +20950,7 @@ var DefaultColorPalette$1 = [
   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
@@ -20732,7 +20985,7 @@ var ColorPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
   var {
     getColor
   } = appStudio.useTheme();
@@ -20935,7 +21188,8 @@ var DefaultEmojiPickerStyles = {
     gap: '4px',
     maxHeight: '240px',
     overflowY: 'auto',
-    padding: '4px'
+    padding: '4px',
+    color: 'color.black'
   },
   emoji: {
     width: '32px',
@@ -23063,7 +23317,7 @@ var useEmojiPickerState = props => {
   };
 };
 
-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
@@ -23101,7 +23355,7 @@ var EmojiPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
   var {
     getColor
   } = appStudio.useTheme();
@@ -23163,7 +23417,8 @@ var EmojiPickerView = _ref => {
     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",
@@ -23288,7 +23543,7 @@ var MenubarItemStates = {
   }
 };
 
-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,
@@ -23325,7 +23580,7 @@ var MenubarRoot = _ref2 => {
       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",
@@ -23645,7 +23900,7 @@ var MenubarView = _ref8 => {
   })))))));
 };
 
-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.
  */
@@ -23659,7 +23914,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -23841,7 +24096,7 @@ var DisabledButtonStyles = {
   }
 };
 
-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,
@@ -23872,7 +24127,7 @@ var PaginationView = _ref => {
       visiblePageNumbers,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
   var handlePageChange = page => {
     if (page < 1 || page > totalPages || page === currentPage) {
       return;
@@ -23991,7 +24246,7 @@ var PaginationView = _ref => {
   }, 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.
  */
@@ -24012,7 +24267,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -24036,7 +24291,7 @@ var PaginationComponent = _ref => {
 };
 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,
@@ -24048,7 +24303,7 @@ var ProgressBarView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
   var {
     getColor,
     themeMode
@@ -24138,7 +24393,7 @@ var DefaultSeparatorStyles = {
   }
 };
 
-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',
@@ -24150,7 +24405,7 @@ var SeparatorView = _ref => {
       decorative = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
   // Access theme if needed for future enhancements
   var {
     themeMode
@@ -24218,7 +24473,7 @@ var SeparatorComponent = props => {
 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,
@@ -24241,7 +24496,7 @@ var ShareButtonView = _ref => {
       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],
@@ -24343,14 +24598,14 @@ var useShareButton = props => {
   };
 };
 
-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,
@@ -24404,7 +24659,7 @@ var getThemes$2 = themeMode => {
   };
 };
 
-var _excluded$1d = ["label", "status", "views", "themeMode"];
+var _excluded$1e = ["label", "status", "views", "themeMode"];
 var StatusIndicatorView = _ref => {
   var {
       label,
@@ -24412,7 +24667,7 @@ var StatusIndicatorView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
   var {
     themeMode
   } = appStudio.useTheme();
@@ -24595,7 +24850,7 @@ var SidebarTransitions = {
   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"];
@@ -24628,7 +24883,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1e);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
   var {
     isExpanded,
     toggleExpanded,
@@ -24783,7 +25038,7 @@ var SidebarView = _ref5 => {
   }))));
 };
 
-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.
  */
@@ -24805,7 +25060,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
   var {
     isExpanded,
     toggleExpanded,
@@ -25270,7 +25525,7 @@ var HandleIconStyles = {
   }
 };
 
-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
@@ -25315,7 +25570,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1g);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1h);
   var {
     orientation,
     registerPanel,
@@ -25530,7 +25785,7 @@ var ResizableView = _ref4 => {
   }, 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.
  */
@@ -25550,7 +25805,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
   var {
     isResizing,
     setIsResizing,
@@ -26321,7 +26576,7 @@ var CommandFooterStyles = {
   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"],
@@ -26353,7 +26608,7 @@ var CommandInput = _ref2 => {
       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(() => {
@@ -26536,7 +26791,7 @@ var CommandView = _ref7 => {
   })))), 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.
  */
@@ -26554,7 +26809,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
   var {
     search,
     setSearch,
@@ -26791,7 +27046,7 @@ var getArrowStyles = position => {
   }
 };
 
-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
@@ -26827,7 +27082,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1k);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1l);
   var {
     openTooltip,
     closeTooltip,
@@ -27011,7 +27266,7 @@ var TooltipView = _ref4 => {
   }, 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.
@@ -27031,7 +27286,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,
@@ -27340,7 +27595,7 @@ var DefaultGradientStyles = {
   }
 };
 
-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',
@@ -27356,7 +27611,7 @@ var GradientView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
   var {
     getColor,
     themeMode
@@ -27432,7 +27687,7 @@ var Gradient = props => {
   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"],
@@ -27453,7 +27708,7 @@ var AuroraBackground = _ref => {
       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)'
@@ -28073,6 +28328,7 @@ exports.FormikForm = FormikForm;
 exports.FormikOTPInput = FormikOTPInput;
 exports.FormikPassword = FormikPassword;
 exports.FormikSelect = FormikSelect;
+exports.FormikSelector = FormikSelector;
 exports.FormikSlider = FormikSlider;
 exports.FormikSwitch = FormikSwitch;
 exports.FormikTagInput = FormikTagInput;