@app-studio/web 0.9.49 → 0.9.51

package/dist/web.umd.development.js

@@ -5016,6 +5016,28 @@
           boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
         },
         transition: 'opacity 0.2s ease'
+      },
+      subtle: {
+        backgroundColor: 'white',
+        color: color,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 6,
+        fontWeight: 500,
+        _hover: {
+          backgroundColor: 'rgba(0, 0, 0, 0.05)'
+        },
+        _active: {
+          backgroundColor: 'rgba(0, 0, 0, 0.1)'
+        },
+        _focusVisible: {
+          outline: 'none',
+          boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+        },
+        transition: 'all 0.2s ease'
       }
     };
   };
@@ -6504,12 +6526,14 @@
     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;
@@ -6542,7 +6566,7 @@
         }
       }), 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({
@@ -6564,7 +6588,7 @@
     }), 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];
@@ -6677,12 +6701,14 @@
       });
       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;
@@ -6691,7 +6717,7 @@
     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 ');
@@ -6703,7 +6729,7 @@
       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";
@@ -6736,7 +6762,7 @@
         }
       }), 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({
@@ -6768,7 +6794,7 @@
         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];
@@ -6900,6 +6926,22 @@
     }, [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++) {
@@ -6920,13 +6962,13 @@
         // 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;
@@ -6940,7 +6982,7 @@
         // 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,
@@ -7047,19 +7089,24 @@
         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",
@@ -8331,7 +8378,8 @@
       // Layout properties
       gap: 8,
       position: "relative",
-      width: "100%"
+      width: "100%",
+      marginVertical: 4
     }, props, views == null ? void 0 : views.container), children, !error && helperText && (/*#__PURE__*/React__default.createElement(HelperText, Object.assign({
       marginTop: 4
     }, views == null ? void 0 : views.helperText), helperText)), error && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
@@ -8528,7 +8576,7 @@
       opacity: isDisabled ? 0.6 : 1,
       // Animation
       transition: "all 0.2s ease"
-    }, showLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], views['box'], props), children);
+    }, showLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], InputVariants[variant], views == null ? void 0 : views.container, props), children);
   };
 
   var _excluded$o = ["children"];
@@ -12192,12 +12240,10 @@
         text: {}
       }
     } = _ref3;
-    var [isHovered, setIsHovered] = React.useState(false);
     var handleOptionClick = event => {
       if (event && event.stopPropagation) event.stopPropagation();
       callback(option);
     };
-    var handleHover = () => setIsHovered(!isHovered);
     return /*#__PURE__*/React__default.createElement(CountryItem, Object.assign({
       margin: 0,
       role: "DropDownItem",
@@ -12205,11 +12251,11 @@
       fontWeight: "normal",
       paddingVertical: 6,
       paddingHorizontal: 12,
-      onMouseEnter: handleHover,
-      onMouseLeave: handleHover,
       onClick: handleOptionClick,
       fontSize: appStudio.Typography.fontSizes[size],
-      backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
+      _hover: {
+        opacity: 0.8
+      }
     }, views['text']), option);
   };
   var DropDown$1 = _ref4 => {
@@ -12288,7 +12334,6 @@
     var IconColor = getColor('color.blueGray.700', {
       themeMode: elementMode ? elementMode : themeMode
     });
-    var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);
     var handleCallback = option => {
       setHide(!hide);
@@ -12345,13 +12390,13 @@
       variant: variant,
       value: value,
       color: 'theme.primary',
-      isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       showLabel: showLabel,
-      onMouseEnter: handleHover,
-      onMouseLeave: handleHover
+      _hover: !isDisabled && !error ? {
+        borderColor: 'theme.primary'
+      } : undefined
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
       color: 'theme.primary',
@@ -12626,6 +12671,7 @@
       relation
     } = appStudio.useElementPosition();
     var dropdownRef = React.useRef(null);
+    var [isHovered, setIsHovered] = React.useState(false);
     // Get optimal positioning style based on available space
     var getDropdownStyle = () => {
       if (!relation) {
@@ -12665,13 +12711,13 @@
       var handleClickOutside = event => {
         var path = event.composedPath();
         var isOutside = !path.some(element => (element == null ? void 0 : element.id) === 'combobox-dropdown');
-        if (isOutside) {
+        if (isOutside && triggerRef.current && !triggerRef.current.contains(event.target)) {
           setIsDropdownVisible(false);
         }
       };
       document.addEventListener('mousedown', handleClickOutside);
       return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, []);
+    }, []); // triggerRef is stable
     // Defines 'handleSearch' to filter items based on the user's query.
     var handleSearch = query => {
       setSearchQuery(query);
@@ -12700,71 +12746,102 @@
       views: views == null ? void 0 : views.label,
       htmlFor: props.id
     }, label)), /*#__PURE__*/React__default.createElement(appStudio.View, {
-      position: "relative"
-    }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      position: "relative",
+      width: "100%"
+    }, /*#__PURE__*/React__default.createElement("div", {
       ref: triggerRef,
+      onClick: () => setIsDropdownVisible(!isDropdownVisible),
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React__default.createElement(FieldContent, {
+      isHovered: isHovered,
+      isFocused: isDropdownVisible,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
       cursor: "pointer",
-      backgroundColor: "color.white",
-      boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
-      padding: "12px",
-      display: "flex",
-      alignItems: "center",
-      borderRadius: "4px",
-      justifyContent: "space-between",
-      minWidth: 300,
-      flexWrap: "nowrap"
-    }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
-      gap: 15,
+      views: {
+        container: views == null ? void 0 : views.container
+      }
+    }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      gap: 10,
       alignItems: "center",
-      position: "relative",
-      width: "100%",
-      onClick: () => setIsDropdownVisible(!isDropdownVisible)
-    }, views == null ? void 0 : views.labelContainer), left, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      width: "100%"
+    }, views == null ? void 0 : views.labelContainer), left, selectedItem.icon && selectedItem.label !== placeholder && (/*#__PURE__*/React__default.createElement(appStudio.View, null, selectedItem.icon)), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       weight: "medium",
       flexGrow: 1,
-      color: "color.gray.800"
-    }, views == null ? void 0 : views.label), selectedItem.label)), right), isDropdownVisible && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      color: selectedItem.label === placeholder ? 'color.gray.500' : 'color.gray.800',
+      style: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    }, views == null ? void 0 : views.label), selectedItem.label)), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      gap: 5,
+      alignItems: "center"
+    }, right, /*#__PURE__*/React__default.createElement(ChevronIcon, {
+      widthHeight: 16,
+      orientation: isDropdownVisible ? 'up' : 'down',
+      color: "color.gray.500"
+    })))), isDropdownVisible && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: dropdownRef,
       id: "combobox-dropdown",
       backgroundColor: "color.white",
-      boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
+      boxShadow: "rgba(0, 0, 0, 0.16) 0px 4px 16px",
       overflowY: "auto",
-      borderRadius: "4px",
+      borderRadius: "8px",
       style: getDropdownStyle()
-    }, views == null ? void 0 : views.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
-      id: props.id,
-      name: props.name,
+    }, views == null ? void 0 : views.dropdown, {
+      border: "1px solid #eee"
+    }), searchEnabled && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      padding: "8px"
+    }, /*#__PURE__*/React__default.createElement(TextFieldView, {
+      id: props.id + "-search",
+      name: props.name + "-search",
       width: "100%",
       type: "search",
+      autoFocus: true,
       value: searchQuery,
       onChange: value => handleSearch(value),
-      hint: placeholder,
+      hint: placeholder || 'Search...',
       isClearable: false,
       left: /*#__PURE__*/React__default.createElement(SearchIcon, {
-        widthHeight: 16
+        widthHeight: 16,
+        color: "color.gray.400"
       }),
       views: {
         container: Object.assign({
           width: '100%',
-          padding: '6px 12px',
-          borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
-        }, views == null ? void 0 : views.text)
+          padding: '0'
+        }, views == null ? void 0 : views.text),
+        field: {
+          fontSize: '14px'
+        }
       }
-    })), filteredItems.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+    }))), filteredItems.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, {
       margin: 0,
       padding: 4
     }, filteredItems.map((item, index) => (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       justifyContent: "space-between",
       key: item.value,
-      padding: "12px",
+      padding: "8px 12px",
       cursor: "pointer",
       borderRadius: 4,
       backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
       onMouseEnter: () => setHighlightedIndex(index),
-      onClick: () => handleSelect(item)
-    }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(appStudio.Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(TickIcon, {
-      widthHeight: 20
-    })))))))))));
+      onClick: () => handleSelect(item),
+      transition: "background-color 0.2s"
+    }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      color: "color.gray.800"
+    }, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && (/*#__PURE__*/React__default.createElement(TickIcon, {
+      widthHeight: 16,
+      color: "theme.primary"
+    })))))))), filteredItems.length === 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      padding: "12px"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      color: "color.gray.500",
+      align: "center"
+    }, "No items found")))))));
   };
 
   var _excluded$C = ["id", "name", "items", "placeholder", "searchPlaceholder"];
@@ -13006,53 +13083,56 @@
       isDisabled,
       isReadOnly
     } = _ref;
+    var [isRemoveHovered, setIsRemoveHovered] = React__default.useState(false);
     var {
       getColor
     } = appStudio.useTheme();
     var chipSize = {
       xs: {
-        padding: '2px 6px',
+        padding: '2px 8px',
         fontSize: '10px',
         iconSize: 10
       },
       sm: {
-        padding: '4px 8px',
+        padding: '4px 10px',
         fontSize: '12px',
         iconSize: 12
       },
       md: {
-        padding: '6px 10px',
+        padding: '6px 14px',
         fontSize: '14px',
         iconSize: 14
       },
       lg: {
-        padding: '8px 12px',
+        padding: '8px 16px',
         fontSize: '16px',
         iconSize: 16
       },
       xl: {
-        padding: '10px 14px',
+        padding: '10px 18px',
         fontSize: '18px',
         iconSize: 18
       }
     }[size] || {
-      padding: '6px 10px',
+      padding: '6px 14px',
       fontSize: '14px',
       iconSize: 14
     };
     return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       alignItems: "center",
-      gap: 4,
+      gap: 6,
       padding: chipSize.padding,
-      backgroundColor: "color.gray.100",
+      backgroundColor: "white",
       borderRadius: "16px",
       border: "1px solid",
-      borderColor: "color.gray.200",
-      transition: "all 0.2s ease",
+      borderColor: "color.black.100",
+      boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
+      transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
       opacity: isDisabled ? 0.6 : 1,
       _hover: !isDisabled && !isReadOnly ? {
-        backgroundColor: 'color.gray.200',
-        borderColor: 'color.gray.300'
+        borderColor: 'color.gray.300',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
+        transform: 'translateY(-1px)'
       } : {}
     }, views == null ? void 0 : views.tag), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: chipSize.fontSize,
@@ -13064,13 +13144,19 @@
       padding: "2px",
       borderRadius: "50%",
       transition: "all 0.2s ease",
-      _hover: {
-        backgroundColor: 'color.gray.300'
+      backgroundColor: isRemoveHovered ? 'color.red.50' : 'transparent',
+      onMouseEnter: () => setIsRemoveHovered(true),
+      onMouseLeave: () => setIsRemoveHovered(false),
+      onClick: e => {
+        e.stopPropagation();
+        onRemove();
       },
-      onClick: onRemove
+      _hover: {
+        backgroundColor: 'color.red.50'
+      }
     }, views == null ? void 0 : views.tagRemove), /*#__PURE__*/React__default.createElement(CloseIcon, {
       widthHeight: chipSize.iconSize,
-      color: "color.gray.500"
+      color: isRemoveHovered ? 'color.red.500' : 'color.gray.400'
     }))));
   };
   /**
@@ -13156,7 +13242,7 @@
       views: views
     }, label)), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       alignItems: "center",
-      gap: 4,
+      gap: 8,
       flexWrap: "wrap",
       width: "100%",
       minHeight: appStudio.Typography.fontSizes[size],
@@ -16750,6 +16836,166 @@
   };
   FormikUploader.displayName = 'FormikUploader';
 
+  // Initializes the custom hook 'useSelectorState' for managing the state of the Selector component
+  var useSelectorState = _ref => {
+    var {
+      placeholder,
+      isMulti,
+      options,
+      id = "selector-" + Math.random().toString(36).substr(2, 9)
+    } = _ref;
+    // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
+    var defaultValue = placeholder ? isMulti ? [] : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
+    : Array.isArray(options) && options.length > 0 ? options[0].value : isMulti ? [] : ''; // If no placeholder, use the first option value if available, otherwise empty array for multi-select or empty string for single select
+    // State hook for tracking mouse hover status over the Selector component
+    var [isHovered, setIsHovered] = React__default.useState(false);
+    // State hook for tracking focus status of the Selector input field
+    var [isFocused, setIsFocused] = React__default.useState(false);
+    // State hook for managing the value(s) selected by the user, initialized with the default value
+    var [value, setValue] = React__default.useState(defaultValue);
+    // State hook for keeping track of the currently highlighted index in the options list
+    var [highlightedIndex, setHighlightedIndex] = React__default.useState(0);
+    // State hook for managing visibility of the Selector dropdown, initially set to hidden
+    var [hide, setHide] = React__default.useState(true);
+    // Returns an object containing all stateful values and their associated setters to manage the Selector component's state
+    return {
+      id,
+      value,
+      setValue,
+      hide,
+      setHide,
+      isHovered,
+      setIsHovered,
+      isFocused,
+      setIsFocused,
+      highlightedIndex,
+      setHighlightedIndex
+    };
+  };
+
+  var _excluded$T = ["id", "name", "label", "value", "views", "options", "onChange", "setValue"];
+  /**
+   * SelectorView Component
+   *
+   * Renders a segmented control style selector.
+   */
+  var SelectorView = _ref => {
+    var {
+        id,
+        name,
+        label,
+        value,
+        views = {},
+        options = [],
+        onChange = () => {},
+        setValue = () => {}
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+    var {
+      getColor
+    } = appStudio.useTheme();
+    var handleCallback = React.useCallback(option => {
+      setValue(option.value);
+      if (onChange) onChange(option.value);
+    }, [setValue, onChange]);
+    return /*#__PURE__*/React__default.createElement(FieldContainer, {
+      id: id,
+      width: "100%",
+      views: views
+    }, label && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      fontSize: "10px",
+      letterSpacing: "wider",
+      color: "color.black.500",
+      fontWeight: "bold",
+      marginBottom: 12,
+      alignItems: "center",
+      gap: 6,
+      //Text transform uppercase
+      style: {
+        textTransform: 'uppercase'
+      }
+    }, /*#__PURE__*/React__default.createElement(InfoIcon, {
+      widthHeight: 14
+    }), " ", /*#__PURE__*/React__default.createElement(appStudio.Text, null, label))), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      gap: 0
+    }, options.map((option, index, arr) => {
+      var isSelected = value === option.value;
+      var borderColor = getColor('color.gray.200');
+      var textColor = getColor('color.gray.500');
+      var bgColor = 'transparent';
+      if (isSelected) {
+        if (option.color) {
+          // We need a way to get related colors (50, 500, 700 etc) from a base color if we want full fidelity.
+          // But passing full style strings is easier.
+          borderColor = getColor(option.color);
+          textColor = getColor(option.color);
+          // Try to approximate background color if possible, or just use white/transparent.
+          // Simplification: if color provided, use it for border/text.
+          // Background is hard to derive without more specific props.
+          // Let's try to use a very light opacity of the color for background.
+          bgColor = 'rgba(0,0,0,0.05)'; // Generic active background
+        } else {
+          // Default active style
+          var primary = getColor('theme.primary');
+          borderColor = primary;
+          textColor = primary;
+          bgColor = 'color.gray.50';
+        }
+        // Specific overrides based on user request "ComplexitySelector" style
+        // If the values match 'High', 'Medium', 'Low' we can hardcode for *demo* fidelity if generic logic fails.
+        // But let's try to make it generic.
+        // The user simply pasted code.
+        if (option.color) {
+          // Fallback for customized options
+          borderColor = getColor(option.color);
+          textColor = getColor(option.color);
+          bgColor = 'transparent';
+        } else {
+          // Default fallback
+          borderColor = getColor('theme.primary');
+          textColor = getColor('theme.primary');
+          bgColor = getColor('color.blue.50');
+        }
+      }
+      return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+        key: option.value,
+        onClick: () => handleCallback(option),
+        flex: 1,
+        paddingVertical: 6,
+        fontSize: "12px",
+        fontWeight: isSelected ? 'bold' : 'normal',
+        style: {
+          borderTop: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+          borderBottom: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+          borderLeft: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+          borderRight: index === arr.length - 1 || isSelected ? "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')) : 'none',
+          backgroundColor: bgColor,
+          color: textColor,
+          borderRadius: index === 0 ? '6px 0 0 6px' : index === arr.length - 1 ? '0 6px 6px 0' : '0',
+          zIndex: isSelected ? 1 : 0,
+          boxShadow: 'none'
+        }
+      }, views.item), option.label);
+    })), /*#__PURE__*/React__default.createElement("input", {
+      type: "hidden",
+      id: id,
+      name: name,
+      value: Array.isArray(value) ? value.join(',') : value,
+      onChange: () => {}
+    }));
+  };
+
+  var SelectorComponent = props => {
+    var formProps = useFormikInput(props);
+    formProps.selected = formProps.value;
+    var selectorStates = useSelectorState(props);
+    return /*#__PURE__*/React__default.createElement(SelectorView, Object.assign({}, selectorStates, formProps));
+  };
+  /**
+   * Selector provides a dropdown list of options for the user to choose from.
+   */
+  var FormikSelector = SelectorComponent;
+
   var AttachmentPreview = _ref => {
     var {
       files,
@@ -17096,7 +17342,7 @@
     }
   };
 
-  var _excluded$T = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
+  var _excluded$U = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
     _excluded2$e = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
     _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
     _excluded4$8 = ["children", "views"],
@@ -17111,7 +17357,7 @@
         position = 'center',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -17359,7 +17605,7 @@
     }
   };
 
-  var _excluded$U = ["isOpen", "onClose", "isClosePrevented", "blur", "children"],
+  var _excluded$V = ["isOpen", "onClose", "isClosePrevented", "blur", "children"],
     _excluded2$f = ["placement", "size", "children"],
     _excluded3$a = ["children", "onClose", "buttonPosition"],
     _excluded4$9 = ["children"],
@@ -17372,7 +17618,7 @@
         blur,
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -17484,7 +17730,7 @@
     }, props), children);
   };
 
-  var _excluded$V = ["isOpen", "onClose", "placement", "size", "isClosePrevented", "children"];
+  var _excluded$W = ["isOpen", "onClose", "placement", "size", "isClosePrevented", "children"];
   /**
    * A drawer is a panel that slides out from the edge of the screen.
    * It can be useful when you need users to complete a task or view some details without leaving the current page.
@@ -17498,7 +17744,7 @@
         isClosePrevented,
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
     var transformStyle = isOpen ? {} : {
       transform: placement === 'left' || placement === 'right' ? "translateX(" + (placement === 'left' ? '-100%' : '100%') + ")" : "translateY(" + (placement === 'top' ? '-100%' : '100%') + ")"
     };
@@ -17668,7 +17914,7 @@
     }
   };
 
-  var _excluded$W = ["href", "children", "views"];
+  var _excluded$X = ["href", "children", "views"];
   // Create context for the NavigationMenu
   var NavigationMenuContext = /*#__PURE__*/React.createContext({
     activeItemId: null,
@@ -18044,7 +18290,7 @@
         children,
         views
       } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded$W);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded$X);
     var {
       itemValue,
       isDisabled
@@ -18111,7 +18357,7 @@
     })))));
   };
 
-  var _excluded$X = ["items", "children", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
+  var _excluded$Y = ["items", "children", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
   /**
    * NavigationMenu component for creating navigation menus with optional nested items.
    * Supports both data-driven approach (with items prop) and compound component pattern.
@@ -18128,7 +18374,7 @@
         onItemActivate,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
     var {
       activeItemId,
       setActiveItemId,
@@ -18941,7 +19187,7 @@
     })
   };
 
-  var _excluded$Y = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
+  var _excluded$Z = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
   /**
    * A component that creates a typewriter effect for text
    */
@@ -18955,7 +19201,7 @@
         cursorColor = 'currentColor',
         textStyle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
     // Convert text to array if it's a string
     var textArray = Array.isArray(text) ? text : [text];
     // State for the currently displayed text
@@ -19022,7 +19268,7 @@
     }))))));
   };
 
-  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';
@@ -19044,7 +19290,7 @@
         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);
@@ -19174,7 +19420,7 @@
     })));
   };
 
-  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, '\\$&');
   }
@@ -19200,7 +19446,7 @@
         highlightSlideStagger = 50,
         highlightSlideSequential = true
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     var {
       ref,
       inView
@@ -19499,7 +19745,7 @@
     }
   });
 
-  var _excluded$$ = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
+  var _excluded$10 = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
   var ToggleView = _ref => {
     var _ref2;
     var {
@@ -19519,7 +19765,7 @@
         // 2nd candidate for main color
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
     /* theme helpers */
     var {
       getColor,
@@ -19563,7 +19809,7 @@
     }, props, views == null ? void 0 : views.container), children);
   };
 
-  var _excluded$10 = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+  var _excluded$11 = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
   // Destructuring properties from ToggleProps to be used within the ToggleComponent.
   var ToggleComponent = _ref => {
     var {
@@ -19575,7 +19821,7 @@
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,
@@ -19795,8 +20041,7 @@
       onTouchStart: e => handleDragStart(e, index),
       position: "relative",
       cursor: "grab",
-      transition: "transform 0.2s",
-      backgroundColor: draggedIndex === index ? 'color.gray.100' : 'transparent'
+      transition: "transform 0.2s"
     }, itemProps, views == null ? void 0 : views.item), renderItem ? renderItem(item, index) : item))));
   };
 
@@ -19910,7 +20155,7 @@
     }
   };
 
-  var _excluded$11 = ["children", "views"],
+  var _excluded$12 = ["children", "views"],
     _excluded2$h = ["items", "side", "align", "views"],
     _excluded3$b = ["item", "views"],
     _excluded4$a = ["views"],
@@ -19951,7 +20196,7 @@
         children,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$12);
     var {
       isOpen,
       setIsOpen,
@@ -20204,7 +20449,7 @@
     }));
   };
 
-  var _excluded$12 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+  var _excluded$13 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
   /**
    * DropdownMenu component for displaying a menu when clicking on a trigger element.
    */
@@ -20219,7 +20464,7 @@
         defaultOpen = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
     var {
       isOpen,
       setIsOpen,
@@ -20633,7 +20878,7 @@
     category: 'neutral'
   }];
 
-  var _excluded$13 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
+  var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
   var ColorPickerView = _ref => {
     var {
         // Basic props
@@ -20668,7 +20913,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
     var {
       getColor
     } = appStudio.useTheme();
@@ -20871,7 +21116,8 @@
       gap: '4px',
       maxHeight: '240px',
       overflowY: 'auto',
-      padding: '4px'
+      padding: '4px',
+      color: 'color.black'
     },
     emoji: {
       width: '32px',
@@ -22999,7 +23245,7 @@
     };
   };
 
-  var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
+  var _excluded$15 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
   var EmojiPickerView = _ref => {
     var {
         // Basic props
@@ -23037,7 +23283,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
     var {
       getColor
     } = appStudio.useTheme();
@@ -23099,7 +23345,8 @@
       title: emoji.name,
       _hover: {
         backgroundColor: 'color.gray.100'
-      }
+      },
+      color: "color.gray.800"
     }, views == null ? void 0 : views.emoji), emoji.emoji))) : (/*#__PURE__*/React__default.createElement(appStudio.View, {
       gridColumn: "1 / -1",
       padding: "20px",
@@ -23224,7 +23471,7 @@
     }
   };
 
-  var _excluded$15 = ["children", "orientation", "size", "variant", "views"];
+  var _excluded$16 = ["children", "orientation", "size", "variant", "views"];
   // Create context for the Menubar
   var MenubarContext = /*#__PURE__*/React.createContext({
     activeMenuId: null,
@@ -23261,7 +23508,7 @@
         variant = 'default',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$16);
     var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
     return /*#__PURE__*/React__default.createElement(Container, Object.assign({
       role: "menubar",
@@ -23581,7 +23828,7 @@
     })))))));
   };
 
-  var _excluded$16 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+  var _excluded$17 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
   /**
    * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
    */
@@ -23595,7 +23842,7 @@
         defaultOpenMenuId = null,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
     var {
       activeMenuId,
       setActiveMenuId,
@@ -23777,7 +24024,7 @@
     }
   };
 
-  var _excluded$17 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+  var _excluded$18 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
   var PaginationView = _ref => {
     var {
         currentPage,
@@ -23808,7 +24055,7 @@
         visiblePageNumbers,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
     var handlePageChange = page => {
       if (page < 1 || page > totalPages || page === currentPage) {
         return;
@@ -23927,7 +24174,7 @@
     }, option.label))))));
   };
 
-  var _excluded$18 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+  var _excluded$19 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
   /**
    * Pagination component for navigating through pages of content.
    */
@@ -23948,7 +24195,7 @@
         shape = 'rounded',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
     var {
       visiblePageNumbers
     } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -23972,7 +24219,7 @@
   };
   var Pagination = PaginationComponent;
 
-  var _excluded$19 = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
+  var _excluded$1a = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
   var ProgressBarView = _ref => {
     var {
         value = 0,
@@ -23984,7 +24231,7 @@
         views,
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
     var {
       getColor,
       themeMode
@@ -24074,7 +24321,7 @@
     }
   };
 
-  var _excluded$1a = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+  var _excluded$1b = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
   var SeparatorView = _ref => {
     var {
         orientation = 'horizontal',
@@ -24086,7 +24333,7 @@
         decorative = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
     // Access theme if needed for future enhancements
     var {
       themeMode
@@ -24154,7 +24401,7 @@
   var Separator = SeparatorComponent;
   var Divider = SeparatorComponent;
 
-  var _excluded$1b = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
+  var _excluded$1c = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
   var ICON_SIZE_MAP = {
     xs: 12,
     sm: 14,
@@ -24177,7 +24424,7 @@
         iconPosition,
         disableWhenUnsupported = true
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
     var resolvedSize = size != null ? size : 'md';
     var resolvedIcon = icon != null ? icon : (/*#__PURE__*/React__default.createElement(ShareIcon, {
       widthHeight: ICON_SIZE_MAP[resolvedSize],
@@ -24279,14 +24526,14 @@
     };
   };
 
-  var _excluded$1c = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
+  var _excluded$1d = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
   var ShareButtonComponent = props => {
     var {
       isSupported,
       isSharing,
       handleShare
     } = useShareButton(props);
-    var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1c);
+    var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1d);
     return /*#__PURE__*/React__default.createElement(ShareButtonView, Object.assign({}, viewProps, {
       isSupported: isSupported,
       isSharing: isSharing,
@@ -24340,7 +24587,7 @@
     };
   };
 
-  var _excluded$1d = ["label", "status", "views", "themeMode"];
+  var _excluded$1e = ["label", "status", "views", "themeMode"];
   var StatusIndicatorView = _ref => {
     var {
         label,
@@ -24348,7 +24595,7 @@
         views,
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1d);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
     var {
       themeMode
     } = appStudio.useTheme();
@@ -24531,7 +24778,7 @@
     bounce: 'width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)'
   };
 
-  var _excluded$1e = ["children", "showToggleButton", "views"],
+  var _excluded$1f = ["children", "showToggleButton", "views"],
     _excluded2$i = ["children", "views"],
     _excluded3$c = ["children", "views"],
     _excluded4$b = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
@@ -24564,7 +24811,7 @@
         showToggleButton = true,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1e);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
     var {
       isExpanded,
       toggleExpanded,
@@ -24719,7 +24966,7 @@
     }))));
   };
 
-  var _excluded$1f = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
+  var _excluded$1g = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
   /**
    * Sidebar component for creating collapsible, themeable and customizable sidebars.
    */
@@ -24741,7 +24988,7 @@
         breakpointBehavior = 'overlay',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
     var {
       isExpanded,
       toggleExpanded,
@@ -25206,7 +25453,7 @@
     }
   };
 
-  var _excluded$1g = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
+  var _excluded$1h = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
     _excluded2$j = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
     _excluded3$d = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
   // Create context for the Resizable component
@@ -25251,7 +25498,7 @@
         onCollapseChange,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1g);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1h);
     var {
       orientation,
       registerPanel,
@@ -25466,7 +25713,7 @@
     }, ResizableOrientations[orientation], views == null ? void 0 : views.container, props), children);
   };
 
-  var _excluded$1h = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
+  var _excluded$1i = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
   /**
    * Resizable component for creating resizable panel groups and layouts.
    */
@@ -25486,7 +25733,7 @@
         keyboardResizeBy = 10,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
     var {
       isResizing,
       setIsResizing,
@@ -26257,7 +26504,7 @@
     color: 'color.gray.500'
   };
 
-  var _excluded$1i = ["value", "onValueChange", "placeholder", "views"],
+  var _excluded$1j = ["value", "onValueChange", "placeholder", "views"],
     _excluded2$k = ["children", "views"],
     _excluded3$e = ["heading", "children", "views"],
     _excluded4$c = ["item", "selected", "onSelect", "views"],
@@ -26289,7 +26536,7 @@
         placeholder = 'Type a command or search...',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1i);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1j);
     var inputRef = React.useRef(null);
     // Focus input when component mounts
     React__default.useEffect(() => {
@@ -26472,7 +26719,7 @@
     })))), footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandFooterStyles, views == null ? void 0 : views.footer), footer)))));
   };
 
-  var _excluded$1j = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
+  var _excluded$1k = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
   /**
    * Command component for displaying a command palette with search functionality.
    */
@@ -26490,7 +26737,7 @@
         footer,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
     var {
       search,
       setSearch,
@@ -26727,7 +26974,7 @@
     }
   };
 
-  var _excluded$1k = ["children", "views", "asChild"],
+  var _excluded$1l = ["children", "views", "asChild"],
     _excluded2$l = ["children", "views"],
     _excluded3$f = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
   // Create context for the Tooltip
@@ -26763,7 +27010,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1k);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1l);
     var {
       openTooltip,
       closeTooltip,
@@ -26947,7 +27194,7 @@
     }, TooltipSizes[size], TooltipVariants[variant], views == null ? void 0 : views.content), typeof content === 'string' ? (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, views == null ? void 0 : views.text), content)) : content, showArrow && /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, arrowStyles, views == null ? void 0 : views.arrow)))));
   };
 
-  var _excluded$1l = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
+  var _excluded$1m = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
   /**
    * Tooltip component for displaying additional information when hovering over an element.
    * Supports configurable positions, delays, and styling.
@@ -26967,7 +27214,7 @@
         isDisabled = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
     var tooltipState = useTooltipState({
       defaultOpen,
       openDelay,
@@ -27276,7 +27523,7 @@
     }
   };
 
-  var _excluded$1m = ["type", "direction", "shape", "position", "from", "to", "colors", "animate", "animationDuration", "children", "views", "themeMode"];
+  var _excluded$1n = ["type", "direction", "shape", "position", "from", "to", "colors", "animate", "animationDuration", "children", "views", "themeMode"];
   var GradientView = _ref => {
     var {
         type = 'linear',
@@ -27292,7 +27539,7 @@
         views,
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
     var {
       getColor,
       themeMode
@@ -27368,7 +27615,7 @@
     return /*#__PURE__*/React__default.createElement(GradientView, Object.assign({}, props));
   };
 
-  var _excluded$1n = ["children", "showRadialGradient", "views", "themeMode"],
+  var _excluded$1o = ["children", "showRadialGradient", "views", "themeMode"],
     _excluded2$m = ["number", "children"],
     _excluded3$g = ["rows", "cols", "squareSize"],
     _excluded4$d = ["count", "colors", "speed", "shapes"],
@@ -27389,7 +27636,7 @@
         showRadialGradient = true,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1o);
     var gradientColors = {
       white: 'rgba(255,255,255,1)',
       transparent: 'rgba(255,255,255,0)'
@@ -28009,6 +28256,7 @@
   exports.FormikOTPInput = FormikOTPInput;
   exports.FormikPassword = FormikPassword;
   exports.FormikSelect = FormikSelect;
+  exports.FormikSelector = FormikSelector;
   exports.FormikSlider = FormikSlider;
   exports.FormikSwitch = FormikSwitch;
   exports.FormikTagInput = FormikTagInput;