@app-studio/web 0.9.49 → 0.9.51

package/dist/web.esm.js

@@ -5048,6 +5048,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'
     }
   };
 };
@@ -6536,12 +6558,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 = 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;
@@ -6574,7 +6598,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.createElement(React.Fragment, {
       key: "y-tick-" + index
     }, /*#__PURE__*/React.createElement("text", Object.assign({
@@ -6596,7 +6620,7 @@ var BarChart = _ref => {
   }), data.series.map((series, seriesIndex) => (/*#__PURE__*/React.createElement(React.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];
@@ -6709,12 +6733,14 @@ var LineChart = _ref => {
     });
     return max;
   }, [data]);
+  // Calculate effective max value
+  var effectiveMaxValue = maxValue || 10;
   // Generate y-axis ticks
   var yAxisTicks = 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;
@@ -6723,7 +6749,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 ');
@@ -6735,7 +6761,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";
@@ -6768,7 +6794,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.createElement(React.Fragment, {
       key: "y-tick-" + index
     }, /*#__PURE__*/React.createElement("text", Object.assign({
@@ -6800,7 +6826,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];
@@ -6932,6 +6958,22 @@ var PieChart = _ref => {
   }, [dataPoints]);
   // Generate pie slices
   var slices = 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++) {
@@ -6952,13 +6994,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;
@@ -6972,7 +7014,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,
@@ -7079,19 +7121,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.createElement("g", {
       key: "slice-" + index
     }, /*#__PURE__*/React.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.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.createElement("text", {
       x: slice.labelX,
       y: slice.labelY,
       textAnchor: "middle",
@@ -8363,7 +8410,8 @@ var FieldContainer = /*#__PURE__*/React.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.createElement(HelperText, Object.assign({
     marginTop: 4
   }, views == null ? void 0 : views.helperText), helperText)), error && (/*#__PURE__*/React.createElement(Text, Object.assign({
@@ -8560,7 +8608,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"];
@@ -12224,12 +12272,10 @@ var DropDownItem = _ref3 => {
       text: {}
     }
   } = _ref3;
-  var [isHovered, setIsHovered] = useState(false);
   var handleOptionClick = event => {
     if (event && event.stopPropagation) event.stopPropagation();
     callback(option);
   };
-  var handleHover = () => setIsHovered(!isHovered);
   return /*#__PURE__*/React.createElement(CountryItem, Object.assign({
     margin: 0,
     role: "DropDownItem",
@@ -12237,11 +12283,11 @@ var DropDownItem = _ref3 => {
     fontWeight: "normal",
     paddingVertical: 6,
     paddingHorizontal: 12,
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover,
     onClick: handleOptionClick,
     fontSize: Typography.fontSizes[size],
-    backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
+    _hover: {
+      opacity: 0.8
+    }
   }, views['text']), option);
 };
 var DropDown$1 = _ref4 => {
@@ -12320,7 +12366,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);
@@ -12377,13 +12422,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.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: 'theme.primary',
@@ -12658,6 +12703,7 @@ var ComboBoxView = _ref => {
     relation
   } = useElementPosition();
   var dropdownRef = useRef(null);
+  var [isHovered, setIsHovered] = useState(false);
   // Get optimal positioning style based on available space
   var getDropdownStyle = () => {
     if (!relation) {
@@ -12697,13 +12743,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);
@@ -12732,71 +12778,102 @@ var ComboBoxView = _ref => {
     views: views == null ? void 0 : views.label,
     htmlFor: props.id
   }, label)), /*#__PURE__*/React.createElement(View, {
-    position: "relative"
-  }, /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    position: "relative",
+    width: "100%"
+  }, /*#__PURE__*/React.createElement("div", {
     ref: triggerRef,
+    onClick: () => setIsDropdownVisible(!isDropdownVisible),
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.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.createElement(Horizontal, Object.assign({
-    gap: 15,
+    views: {
+      container: views == null ? void 0 : views.container
+    }
+  }, /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    gap: 10,
     alignItems: "center",
-    position: "relative",
-    width: "100%",
-    onClick: () => setIsDropdownVisible(!isDropdownVisible)
-  }, views == null ? void 0 : views.labelContainer), left, /*#__PURE__*/React.createElement(Text, Object.assign({
+    width: "100%"
+  }, views == null ? void 0 : views.labelContainer), left, selectedItem.icon && selectedItem.label !== placeholder && (/*#__PURE__*/React.createElement(View, null, selectedItem.icon)), /*#__PURE__*/React.createElement(Text, Object.assign({
     weight: "medium",
     flexGrow: 1,
-    color: "color.gray.800"
-  }, views == null ? void 0 : views.label), selectedItem.label)), right), isDropdownVisible && (/*#__PURE__*/React.createElement(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.createElement(Horizontal, {
+    gap: 5,
+    alignItems: "center"
+  }, right, /*#__PURE__*/React.createElement(ChevronIcon, {
+    widthHeight: 16,
+    orientation: isDropdownVisible ? 'up' : 'down',
+    color: "color.gray.500"
+  })))), isDropdownVisible && (/*#__PURE__*/React.createElement(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.createElement(TextFieldView, {
-    id: props.id,
-    name: props.name,
+  }, views == null ? void 0 : views.dropdown, {
+    border: "1px solid #eee"
+  }), searchEnabled && (/*#__PURE__*/React.createElement(View, {
+    padding: "8px"
+  }, /*#__PURE__*/React.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.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.createElement(View, {
+  }))), filteredItems.length > 0 && (/*#__PURE__*/React.createElement(View, {
     margin: 0,
     padding: 4
   }, filteredItems.map((item, index) => (/*#__PURE__*/React.createElement(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.createElement(Text, null, item.label), /*#__PURE__*/React.createElement(React.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React.createElement(TickIcon, {
-    widthHeight: 20
-  })))))))))));
+    onClick: () => handleSelect(item),
+    transition: "background-color 0.2s"
+  }, views == null ? void 0 : views.item), /*#__PURE__*/React.createElement(Text, {
+    color: "color.gray.800"
+  }, item.label), /*#__PURE__*/React.createElement(React.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && (/*#__PURE__*/React.createElement(TickIcon, {
+    widthHeight: 16,
+    color: "theme.primary"
+  })))))))), filteredItems.length === 0 && (/*#__PURE__*/React.createElement(View, {
+    padding: "12px"
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "color.gray.500",
+    align: "center"
+  }, "No items found")))))));
 };
 
 var _excluded$C = ["id", "name", "items", "placeholder", "searchPlaceholder"];
@@ -13038,53 +13115,56 @@ var TagChip = _ref => {
     isDisabled,
     isReadOnly
   } = _ref;
+  var [isRemoveHovered, setIsRemoveHovered] = React.useState(false);
   var {
     getColor
   } = 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.createElement(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.createElement(Text, Object.assign({
     fontSize: chipSize.fontSize,
@@ -13096,13 +13176,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.createElement(CloseIcon, {
     widthHeight: chipSize.iconSize,
-    color: "color.gray.500"
+    color: isRemoveHovered ? 'color.red.500' : 'color.gray.400'
   }))));
 };
 /**
@@ -13188,7 +13274,7 @@ var TagInputView = _ref2 => {
     views: views
   }, label)), /*#__PURE__*/React.createElement(Horizontal, Object.assign({
     alignItems: "center",
-    gap: 4,
+    gap: 8,
     flexWrap: "wrap",
     width: "100%",
     minHeight: Typography.fontSizes[size],
@@ -16782,6 +16868,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.useState(false);
+  // State hook for tracking focus status of the Selector input field
+  var [isFocused, setIsFocused] = React.useState(false);
+  // State hook for managing the value(s) selected by the user, initialized with the default value
+  var [value, setValue] = React.useState(defaultValue);
+  // State hook for keeping track of the currently highlighted index in the options list
+  var [highlightedIndex, setHighlightedIndex] = React.useState(0);
+  // State hook for managing visibility of the Selector dropdown, initially set to hidden
+  var [hide, setHide] = React.useState(true);
+  // Returns an object containing all stateful values and their associated setters to manage the Selector component's state
+  return {
+    id,
+    value,
+    setValue,
+    hide,
+    setHide,
+    isHovered,
+    setIsHovered,
+    isFocused,
+    setIsFocused,
+    highlightedIndex,
+    setHighlightedIndex
+  };
+};
+
+var _excluded$T = ["id", "name", "label", "value", "views", "options", "onChange", "setValue"];
+/**
+ * SelectorView Component
+ *
+ * Renders a segmented control style selector.
+ */
+var SelectorView = _ref => {
+  var {
+      id,
+      name,
+      label,
+      value,
+      views = {},
+      options = [],
+      onChange = () => {},
+      setValue = () => {}
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+  var {
+    getColor
+  } = useTheme();
+  var handleCallback = useCallback(option => {
+    setValue(option.value);
+    if (onChange) onChange(option.value);
+  }, [setValue, onChange]);
+  return /*#__PURE__*/React.createElement(FieldContainer, {
+    id: id,
+    width: "100%",
+    views: views
+  }, label && (/*#__PURE__*/React.createElement(Horizontal, {
+    fontSize: "10px",
+    letterSpacing: "wider",
+    color: "color.black.500",
+    fontWeight: "bold",
+    marginBottom: 12,
+    alignItems: "center",
+    gap: 6,
+    //Text transform uppercase
+    style: {
+      textTransform: 'uppercase'
+    }
+  }, /*#__PURE__*/React.createElement(InfoIcon, {
+    widthHeight: 14
+  }), " ", /*#__PURE__*/React.createElement(Text, null, label))), /*#__PURE__*/React.createElement(Horizontal, {
+    gap: 0
+  }, options.map((option, index, arr) => {
+    var isSelected = value === option.value;
+    var borderColor = getColor('color.gray.200');
+    var textColor = getColor('color.gray.500');
+    var bgColor = 'transparent';
+    if (isSelected) {
+      if (option.color) {
+        // We need a way to get related colors (50, 500, 700 etc) from a base color if we want full fidelity.
+        // But passing full style strings is easier.
+        borderColor = getColor(option.color);
+        textColor = getColor(option.color);
+        // Try to approximate background color if possible, or just use white/transparent.
+        // Simplification: if color provided, use it for border/text.
+        // Background is hard to derive without more specific props.
+        // Let's try to use a very light opacity of the color for background.
+        bgColor = 'rgba(0,0,0,0.05)'; // Generic active background
+      } else {
+        // Default active style
+        var primary = getColor('theme.primary');
+        borderColor = primary;
+        textColor = primary;
+        bgColor = 'color.gray.50';
+      }
+      // Specific overrides based on user request "ComplexitySelector" style
+      // If the values match 'High', 'Medium', 'Low' we can hardcode for *demo* fidelity if generic logic fails.
+      // But let's try to make it generic.
+      // The user simply pasted code.
+      if (option.color) {
+        // Fallback for customized options
+        borderColor = getColor(option.color);
+        textColor = getColor(option.color);
+        bgColor = 'transparent';
+      } else {
+        // Default fallback
+        borderColor = getColor('theme.primary');
+        textColor = getColor('theme.primary');
+        bgColor = getColor('color.blue.50');
+      }
+    }
+    return /*#__PURE__*/React.createElement(Button, Object.assign({
+      key: option.value,
+      onClick: () => handleCallback(option),
+      flex: 1,
+      paddingVertical: 6,
+      fontSize: "12px",
+      fontWeight: isSelected ? 'bold' : 'normal',
+      style: {
+        borderTop: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+        borderBottom: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+        borderLeft: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
+        borderRight: index === arr.length - 1 || isSelected ? "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')) : 'none',
+        backgroundColor: bgColor,
+        color: textColor,
+        borderRadius: index === 0 ? '6px 0 0 6px' : index === arr.length - 1 ? '0 6px 6px 0' : '0',
+        zIndex: isSelected ? 1 : 0,
+        boxShadow: 'none'
+      }
+    }, views.item), option.label);
+  })), /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    id: id,
+    name: name,
+    value: Array.isArray(value) ? value.join(',') : value,
+    onChange: () => {}
+  }));
+};
+
+var SelectorComponent = props => {
+  var formProps = useFormikInput(props);
+  formProps.selected = formProps.value;
+  var selectorStates = useSelectorState(props);
+  return /*#__PURE__*/React.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,
@@ -17128,7 +17374,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"],
@@ -17143,7 +17389,7 @@ var ModalOverlay = _ref => {
       position = 'center',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -17391,7 +17637,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"],
@@ -17404,7 +17650,7 @@ var DrawerOverlay = _ref => {
       blur,
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -17516,7 +17762,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.
@@ -17530,7 +17776,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%') + ")"
   };
@@ -17700,7 +17946,7 @@ var NavigationMenuItemStates = {
   }
 };
 
-var _excluded$W = ["href", "children", "views"];
+var _excluded$X = ["href", "children", "views"];
 // Create context for the NavigationMenu
 var NavigationMenuContext = /*#__PURE__*/createContext({
   activeItemId: null,
@@ -18076,7 +18322,7 @@ var NavigationMenuLink = _ref6 => {
       children,
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$W);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$X);
   var {
     itemValue,
     isDisabled
@@ -18143,7 +18389,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.
@@ -18160,7 +18406,7 @@ var NavigationMenuComponent = _ref => {
       onItemActivate,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
   var {
     activeItemId,
     setActiveItemId,
@@ -18973,7 +19219,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
  */
@@ -18987,7 +19233,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
@@ -19054,7 +19300,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';
@@ -19076,7 +19322,7 @@ var SlideEffect = _ref => {
       textStyle,
       wordProps
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var [displayedText, setDisplayedText] = useState(text);
   var [phase, setPhase] = useState('entering');
   var [animKey, setAnimKey] = useState(0);
@@ -19206,7 +19452,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, '\\$&');
 }
@@ -19232,7 +19478,7 @@ var TitleView = _ref => {
       highlightSlideStagger = 50,
       highlightSlideSequential = true
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
     ref,
     inView
@@ -19531,7 +19777,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 {
@@ -19551,7 +19797,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,
@@ -19595,7 +19841,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 {
@@ -19607,7 +19853,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,
@@ -19827,8 +20073,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))));
 };
 
@@ -19942,7 +20187,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"],
@@ -19983,7 +20228,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$12);
   var {
     isOpen,
     setIsOpen,
@@ -20236,7 +20481,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.
  */
@@ -20251,7 +20496,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
   var {
     isOpen,
     setIsOpen,
@@ -20665,7 +20910,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
@@ -20700,7 +20945,7 @@ var ColorPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
   var {
     getColor
   } = useTheme();
@@ -20903,7 +21148,8 @@ var DefaultEmojiPickerStyles = {
     gap: '4px',
     maxHeight: '240px',
     overflowY: 'auto',
-    padding: '4px'
+    padding: '4px',
+    color: 'color.black'
   },
   emoji: {
     width: '32px',
@@ -23031,7 +23277,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
@@ -23069,7 +23315,7 @@ var EmojiPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
   var {
     getColor
   } = useTheme();
@@ -23131,7 +23377,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.createElement(View, {
     gridColumn: "1 / -1",
     padding: "20px",
@@ -23256,7 +23503,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__*/createContext({
   activeMenuId: null,
@@ -23293,7 +23540,7 @@ var MenubarRoot = _ref2 => {
       variant = 'default',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$16);
   var Container = orientation === 'horizontal' ? Horizontal : Vertical;
   return /*#__PURE__*/React.createElement(Container, Object.assign({
     role: "menubar",
@@ -23613,7 +23860,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.
  */
@@ -23627,7 +23874,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -23809,7 +24056,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,
@@ -23840,7 +24087,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;
@@ -23959,7 +24206,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.
  */
@@ -23980,7 +24227,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -24004,7 +24251,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,
@@ -24016,7 +24263,7 @@ var ProgressBarView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
   var {
     getColor,
     themeMode
@@ -24106,7 +24353,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',
@@ -24118,7 +24365,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
@@ -24186,7 +24433,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,
@@ -24209,7 +24456,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.createElement(ShareIcon, {
     widthHeight: ICON_SIZE_MAP[resolvedSize],
@@ -24311,14 +24558,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.createElement(ShareButtonView, Object.assign({}, viewProps, {
     isSupported: isSupported,
     isSharing: isSharing,
@@ -24372,7 +24619,7 @@ var getThemes$2 = themeMode => {
   };
 };
 
-var _excluded$1d = ["label", "status", "views", "themeMode"];
+var _excluded$1e = ["label", "status", "views", "themeMode"];
 var StatusIndicatorView = _ref => {
   var {
       label,
@@ -24380,7 +24627,7 @@ var StatusIndicatorView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
   var {
     themeMode
   } = useTheme();
@@ -24563,7 +24810,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"];
@@ -24596,7 +24843,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1e);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1f);
   var {
     isExpanded,
     toggleExpanded,
@@ -24751,7 +24998,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.
  */
@@ -24773,7 +25020,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1g);
   var {
     isExpanded,
     toggleExpanded,
@@ -25238,7 +25485,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
@@ -25283,7 +25530,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1g);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1h);
   var {
     orientation,
     registerPanel,
@@ -25498,7 +25745,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.
  */
@@ -25518,7 +25765,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1i);
   var {
     isResizing,
     setIsResizing,
@@ -26289,7 +26536,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"],
@@ -26321,7 +26568,7 @@ var CommandInput = _ref2 => {
       placeholder = 'Type a command or search...',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1i);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1j);
   var inputRef = useRef(null);
   // Focus input when component mounts
   React.useEffect(() => {
@@ -26504,7 +26751,7 @@ var CommandView = _ref7 => {
   })))), footer && (/*#__PURE__*/React.createElement(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.
  */
@@ -26522,7 +26769,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1k);
   var {
     search,
     setSearch,
@@ -26759,7 +27006,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
@@ -26795,7 +27042,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1k);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$1l);
   var {
     openTooltip,
     closeTooltip,
@@ -26979,7 +27226,7 @@ var TooltipView = _ref4 => {
   }, TooltipSizes[size], TooltipVariants[variant], views == null ? void 0 : views.content), typeof content === 'string' ? (/*#__PURE__*/React.createElement(Text, Object.assign({}, views == null ? void 0 : views.text), content)) : content, showArrow && /*#__PURE__*/React.createElement(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.
@@ -26999,7 +27246,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,
@@ -27308,7 +27555,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',
@@ -27324,7 +27571,7 @@ var GradientView = _ref => {
       views,
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
   var {
     getColor,
     themeMode
@@ -27400,7 +27647,7 @@ var Gradient = props => {
   return /*#__PURE__*/React.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"],
@@ -27421,7 +27668,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)'
@@ -27968,5 +28215,5 @@ var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
 });
 Background.displayName = 'Background';
 
-export { Accordion, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, BackIcon, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, Drawer, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
+export { Accordion, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, BackIcon, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, Drawer, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSelector, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
 //# sourceMappingURL=web.esm.js.map