@app-studio/web 0.9.49 → 0.9.51

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'
     }
   };
 };
@@ -6543,12 +6565,14 @@ var BarChart = _ref => {
   var groupWidth = chartWidth / barCount;
   var barWidth = groupWidth * 0.8 / seriesCount;
   var barSpacing = groupWidth * 0.2 / (seriesCount + 1);
+  // Calculate effective max value
+  var effectiveMaxValue = maxValue || 10;
   // Generate y-axis ticks
   var yAxisTicks = React.useMemo(() => {
     var tickCount = 5;
     var ticks = [];
     for (var i = 0; i <= tickCount; i++) {
-      var value = maxValue / tickCount * i;
+      var value = effectiveMaxValue / tickCount * i;
       ticks.push(value);
     }
     return ticks;
@@ -6581,7 +6605,7 @@ var BarChart = _ref => {
       }
     }), label);
   }), yAxisTicks.map((tick, index) => {
-    var y = height - padding.bottom - tick / maxValue * chartHeight;
+    var y = height - padding.bottom - tick / effectiveMaxValue * chartHeight;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: "y-tick-" + index
     }, /*#__PURE__*/React__default.createElement("text", Object.assign({
@@ -6603,7 +6627,7 @@ var BarChart = _ref => {
   }), data.series.map((series, seriesIndex) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
     key: "series-" + seriesIndex
   }, series.data.map((value, dataIndex) => {
-    var barHeight = value / maxValue * chartHeight * animationProgress;
+    var barHeight = value / effectiveMaxValue * chartHeight * animationProgress;
     var x = padding.left + dataIndex * groupWidth + barSpacing * (seriesIndex + 1) + barWidth * seriesIndex;
     var y = height - padding.bottom - barHeight;
     var categoryLabel = data.labels[dataIndex];
@@ -6716,12 +6740,14 @@ var LineChart = _ref => {
     });
     return max;
   }, [data]);
+  // Calculate effective max value
+  var effectiveMaxValue = maxValue || 10;
   // Generate y-axis ticks
   var yAxisTicks = React.useMemo(() => {
     var tickCount = 5;
     var ticks = [];
     for (var i = 0; i <= tickCount; i++) {
-      var value = maxValue / tickCount * i;
+      var value = effectiveMaxValue / tickCount * i;
       ticks.push(value);
     }
     return ticks;
@@ -6730,7 +6756,7 @@ var LineChart = _ref => {
   var generatePath = series => {
     var points = series.map((value, index) => {
       var x = padding.left + index / (data.labels.length - 1) * chartWidth;
-      var y = height - padding.bottom - value / maxValue * chartHeight * animationProgress;
+      var y = height - padding.bottom - value / effectiveMaxValue * chartHeight * animationProgress;
       return x + "," + y;
     });
     return "M " + points.join(' L ');
@@ -6742,7 +6768,7 @@ var LineChart = _ref => {
     var baseY = height - padding.bottom;
     var points = series.map((value, index) => {
       var x = padding.left + index / (data.labels.length - 1) * chartWidth;
-      var y = height - padding.bottom - value / maxValue * chartHeight * animationProgress;
+      var y = height - padding.bottom - value / effectiveMaxValue * chartHeight * animationProgress;
       return x + "," + y;
     });
     return "M " + startX + "," + baseY + " L " + points.join(' L ') + " L " + endX + "," + baseY + " Z";
@@ -6775,7 +6801,7 @@ var LineChart = _ref => {
       }
     }), label);
   }), yAxisTicks.map((tick, index) => {
-    var y = height - padding.bottom - tick / maxValue * chartHeight;
+    var y = height - padding.bottom - tick / effectiveMaxValue * chartHeight;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: "y-tick-" + index
     }, /*#__PURE__*/React__default.createElement("text", Object.assign({
@@ -6807,7 +6833,7 @@ var LineChart = _ref => {
       stroke: lineColor
     }, LineStyles, views == null ? void 0 : views.line)), series.data.map((value, dataIndex) => {
       var x = padding.left + dataIndex / (data.labels.length - 1) * chartWidth;
-      var y = height - padding.bottom - value / maxValue * chartHeight * animationProgress;
+      var y = height - padding.bottom - value / effectiveMaxValue * chartHeight * animationProgress;
       var categoryLabel = data.labels[dataIndex];
       var categoryTotal = data.series.reduce((sum, currentSeries) => {
         var seriesValue = currentSeries.data[dataIndex];
@@ -6939,6 +6965,22 @@ var PieChart = _ref => {
   }, [dataPoints]);
   // Generate pie slices
   var slices = React.useMemo(() => {
+    if (total === 0) {
+      // Return a single placeholder slice
+      var path = isDonut ? ["M " + centerX + " " + (centerY - radius), "A " + radius + " " + radius + " 0 1 1 " + centerX + " " + (centerY + radius), "A " + radius + " " + radius + " 0 1 1 " + centerX + " " + (centerY - radius), "M " + centerX + " " + (centerY - donutRadius), "A " + donutRadius + " " + donutRadius + " 0 1 0 " + centerX + " " + (centerY + donutRadius), "A " + donutRadius + " " + donutRadius + " 0 1 0 " + centerX + " " + (centerY - donutRadius), 'Z'].join(' ') : ["M " + centerX + " " + centerY, "M " + centerX + " " + (centerY - radius), "A " + radius + " " + radius + " 0 1 1 " + centerX + " " + (centerY + radius), "A " + radius + " " + radius + " 0 1 1 " + centerX + " " + (centerY - radius), 'Z'].join(' ');
+      return [{
+        path,
+        color: '#E2E8F0',
+        label: 'Total',
+        value: 0,
+        percentage: '0%',
+        labelX: centerX,
+        labelY: centerY,
+        startAngle: 0,
+        endAngle: Math.PI * 2,
+        index: -1
+      }];
+    }
     var result = [];
     var startAngle = -Math.PI / 2; // Start from top (12 o'clock position)
     for (var i = 0; i < dataPoints.length; i++) {
@@ -6959,13 +7001,13 @@ var PieChart = _ref => {
       // Create arc flag
       var largeArcFlag = angle > Math.PI ? 1 : 0;
       // Create path
-      var path = void 0;
+      var _path = void 0;
       if (isDonut) {
         // Donut slice path
-        path = ["M " + startX + " " + startY, "A " + radius + " " + radius + " 0 " + largeArcFlag + " 1 " + endX + " " + endY, "L " + innerEndX + " " + innerEndY, "A " + donutRadius + " " + donutRadius + " 0 " + largeArcFlag + " 0 " + innerStartX + " " + innerStartY, 'Z'].join(' ');
+        _path = ["M " + startX + " " + startY, "A " + radius + " " + radius + " 0 " + largeArcFlag + " 1 " + endX + " " + endY, "L " + innerEndX + " " + innerEndY, "A " + donutRadius + " " + donutRadius + " 0 " + largeArcFlag + " 0 " + innerStartX + " " + innerStartY, 'Z'].join(' ');
       } else {
         // Regular pie slice path
-        path = ["M " + centerX + " " + centerY, "L " + startX + " " + startY, "A " + radius + " " + radius + " 0 " + largeArcFlag + " 1 " + endX + " " + endY, 'Z'].join(' ');
+        _path = ["M " + centerX + " " + centerY, "L " + startX + " " + startY, "A " + radius + " " + radius + " 0 " + largeArcFlag + " 1 " + endX + " " + endY, 'Z'].join(' ');
       }
       // Calculate label position
       var labelAngle = startAngle + angle / 2;
@@ -6979,7 +7021,7 @@ var PieChart = _ref => {
       // Resolve the color through the theme system
       var resolvedColor = getColor(colorValue);
       result.push({
-        path,
+        path: _path,
         color: resolvedColor,
         label: dataPoints[i].label,
         value: dataPoints[i].value,
@@ -7086,19 +7128,24 @@ var PieChart = _ref => {
       showTooltip(x, y, tooltipContent);
     };
     var handleClick = () => {
-      if (onSliceClick) {
+      if (slice.index !== -1 && onSliceClick) {
         onSliceClick(dataPoints[slice.index], slice.index);
       }
     };
+    var isPlaceholder = slice.index === -1;
     return /*#__PURE__*/React__default.createElement("g", {
       key: "slice-" + index
     }, /*#__PURE__*/React__default.createElement("path", Object.assign({
       d: slice.path,
       fill: slice.color,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: hideTooltip,
+      onMouseEnter: !isPlaceholder ? handleMouseEnter : undefined,
+      onMouseLeave: !isPlaceholder ? hideTooltip : undefined,
       onClick: handleClick
-    }, PieSliceStyles, views == null ? void 0 : views.pie)), slice.endAngle - slice.startAngle > 0.2 && (/*#__PURE__*/React__default.createElement("text", {
+    }, PieSliceStyles, {
+      style: Object.assign({}, PieSliceStyles == null ? void 0 : PieSliceStyles.style, {
+        cursor: isPlaceholder ? 'default' : 'pointer'
+      })
+    }, views == null ? void 0 : views.pie)), !isPlaceholder && slice.endAngle - slice.startAngle > 0.2 && (/*#__PURE__*/React__default.createElement("text", {
       x: slice.labelX,
       y: slice.labelY,
       textAnchor: "middle",
@@ -8370,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({
@@ -8567,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"];
@@ -12231,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",
@@ -12244,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 => {
@@ -12327,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);
@@ -12384,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',
@@ -12665,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) {
@@ -12704,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);
@@ -12739,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"];
@@ -13045,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,
@@ -13103,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'
   }))));
 };
 /**
@@ -13195,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],
@@ -16789,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,
@@ -17135,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"],
@@ -17150,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();
   };
@@ -17398,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"],
@@ -17411,7 +17657,7 @@ var DrawerOverlay = _ref => {
       blur,
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -17523,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.
@@ -17537,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%') + ")"
   };
@@ -17707,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,
@@ -18083,7 +18329,7 @@ var NavigationMenuLink = _ref6 => {
       children,
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$W);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$X);
   var {
     itemValue,
     isDisabled
@@ -18150,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.
@@ -18167,7 +18413,7 @@ var NavigationMenuComponent = _ref => {
       onItemActivate,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
   var {
     activeItemId,
     setActiveItemId,
@@ -18980,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
  */
@@ -18994,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
@@ -19061,7 +19307,7 @@ 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';
@@ -19083,7 +19329,7 @@ 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);
@@ -19213,7 +19459,7 @@ var SlideEffect = _ref => {
   })));
 };
 
-var _excluded$_ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential"];
+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, '\\$&');
 }
@@ -19239,7 +19485,7 @@ var TitleView = _ref => {
       highlightSlideStagger = 50,
       highlightSlideSequential = true
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
     ref,
     inView
@@ -19538,7 +19784,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 {
@@ -19558,7 +19804,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,
@@ -19602,7 +19848,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 {
@@ -19614,7 +19860,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,
@@ -19834,8 +20080,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))));
 };
 
@@ -19949,7 +20194,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"],
@@ -19990,7 +20235,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$12);
   var {
     isOpen,
     setIsOpen,
@@ -20243,7 +20488,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.
  */
@@ -20258,7 +20503,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
   var {
     isOpen,
     setIsOpen,
@@ -20672,7 +20917,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
@@ -20707,7 +20952,7 @@ var ColorPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
   var {
     getColor
   } = appStudio.useTheme();
@@ -20910,7 +21155,8 @@ var DefaultEmojiPickerStyles = {
     gap: '4px',
     maxHeight: '240px',
     overflowY: 'auto',
-    padding: '4px'
+    padding: '4px',
+    color: 'color.black'
   },
   emoji: {
     width: '32px',
@@ -23038,7 +23284,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
@@ -23076,7 +23322,7 @@ var EmojiPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
   var {
     getColor
   } = appStudio.useTheme();
@@ -23138,7 +23384,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",
@@ -23263,7 +23510,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,
@@ -23300,7 +23547,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",
@@ -23620,7 +23867,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.
  */
@@ -23634,7 +23881,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -23816,7 +24063,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,
@@ -23847,7 +24094,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;
@@ -23966,7 +24213,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.
  */
@@ -23987,7 +24234,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -24011,7 +24258,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,
@@ -24023,7 +24270,7 @@ var ProgressBarView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
   var {
     getColor,
     themeMode
@@ -24113,7 +24360,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',
@@ -24125,7 +24372,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
@@ -24193,7 +24440,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,
@@ -24216,7 +24463,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],
@@ -24318,14 +24565,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,
@@ -24379,7 +24626,7 @@ var getThemes$2 = themeMode => {
   };
 };
 
-var _excluded$1d = ["label", "status", "views", "themeMode"];
+var _excluded$1e = ["label", "status", "views", "themeMode"];
 var StatusIndicatorView = _ref => {
   var {
       label,
@@ -24387,7 +24634,7 @@ var StatusIndicatorView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
   var {
     themeMode
   } = appStudio.useTheme();
@@ -24570,7 +24817,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"];
@@ -24603,7 +24850,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1e);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
   var {
     isExpanded,
     toggleExpanded,
@@ -24758,7 +25005,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.
  */
@@ -24780,7 +25027,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
   var {
     isExpanded,
     toggleExpanded,
@@ -25245,7 +25492,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
@@ -25290,7 +25537,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1g);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1h);
   var {
     orientation,
     registerPanel,
@@ -25505,7 +25752,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.
  */
@@ -25525,7 +25772,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
   var {
     isResizing,
     setIsResizing,
@@ -26296,7 +26543,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"],
@@ -26328,7 +26575,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(() => {
@@ -26511,7 +26758,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.
  */
@@ -26529,7 +26776,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
   var {
     search,
     setSearch,
@@ -26766,7 +27013,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
@@ -26802,7 +27049,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1k);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1l);
   var {
     openTooltip,
     closeTooltip,
@@ -26986,7 +27233,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.
@@ -27006,7 +27253,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,
@@ -27315,7 +27562,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',
@@ -27331,7 +27578,7 @@ var GradientView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
   var {
     getColor,
     themeMode
@@ -27407,7 +27654,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"],
@@ -27428,7 +27675,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)'
@@ -28048,6 +28295,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;