xmlui 0.11.20 → 0.11.21

package/dist/lib/{index-BQKYtkKU.js → index-CkNqkb53.js}

@@ -29,10 +29,11 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { RenderPropSticky } from "react-sticky-el";
 import * as dropzone from "react-dropzone";
 import toast, { Toaster, ToastBar } from "react-hot-toast";
-import { Popover, PopoverTrigger, Portal, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
+import { Popover, PopoverTrigger, Portal as Portal$1, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
+import { Item as Item$1, ItemText, ItemIndicator, Root, Trigger, Portal, Content, ScrollUpButton, Viewport, Group, Label, ScrollDownButton } from "@radix-ui/react-select";
 import * as InnerRadioGroup from "@radix-ui/react-radio-group";
 import { DayPicker } from "react-day-picker";
-import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
+import { Root as Root$1, Track, Range, Thumb } from "@radix-ui/react-slider";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -43,7 +44,7 @@ import * as HoverCard from "@radix-ui/react-hover-card";
 import { useSpring, useInView, animated } from "@react-spring/web";
 import Papa from "papaparse";
 import getUserLocale from "get-user-locale";
-import { Root as Root$1, List, Trigger, Content } from "@radix-ui/react-tabs";
+import { Root as Root$2, List, Trigger as Trigger$1, Content as Content$1 } from "@radix-ui/react-tabs";
 import scrollIntoView from "scroll-into-view-if-needed";
 import * as RAccordion from "@radix-ui/react-accordion";
 import useEmblaCarousel from "embla-carousel-react";
@@ -94,20 +95,16 @@ class EngineError extends Error {
 }
 class GenericBackendError extends EngineError {
   constructor(info2, errorCode) {
-    let message = "";
-    if (info2?.code) {
-      message += `[Error code: ${info2.code}]
-`;
-    }
-    if (info2?.details && typeof info2.details === "string") {
-      message += `${info2.details}`;
-    } else if (info2?.message) {
-      message += `${info2.message}`;
-    }
-    super(message || info2?.message || "Unknown error");
+    const message = info2?.message || info2?.error?.message || info2?.title || // RFC 7807
+    (typeof info2?.error === "string" ? info2.error : null) || (typeof info2 === "string" ? info2 : null) || "Unknown error";
+    const extractedDetails = info2?.details || info2?.detail || // RFC 7807
+    info2?.error?.details || info2?.errors || // Validation errors array
+    (info2?.error && typeof info2.error === "object" ? info2.error : null) || null;
+    const details = extractedDetails ? info2?.issues ? { ...extractedDetails, issues: info2.issues } : extractedDetails : info2?.issues ? { issues: info2.issues } : null;
+    super(message);
     this.info = info2;
     this.errorCategory = "GenericBackendError";
-    this.details = info2;
+    this.details = details;
     this.statusCode = errorCode;
     Object.setPrototypeOf(this, GenericBackendError.prototype);
   }
@@ -147,6 +144,13 @@ class ThrowStatementError extends EngineError {
     Object.setPrototypeOf(this, ThrowStatementError.prototype);
   }
 }
+function createContextVariableError(err) {
+  return {
+    statusCode: err.statusCode || 500,
+    message: err.message || "An error occurred",
+    details: err.details || {}
+  };
+}
 function reportEngineError(error2, errorToThrow) {
   if (typeof error2 === "string") {
     error2 = new Error(error2);
@@ -773,19 +777,22 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 const themeVars$13 = `'{"textColor-FormItemLabel": "var(--xmlui-textColor-FormItemLabel)", "fontFamily-FormItemLabel": "var(--xmlui-fontFamily-FormItemLabel)", "fontSize-FormItemLabel": "var(--xmlui-fontSize-FormItemLabel)", "fontWeight-FormItemLabel": "var(--xmlui-fontWeight-FormItemLabel)", "fontStyle-FormItemLabel": "var(--xmlui-fontStyle-FormItemLabel)", "textTransform-FormItemLabel": "var(--xmlui-textTransform-FormItemLabel)", "textColor-FormItemLabel-required": "var(--xmlui-textColor-FormItemLabel-required)", "fontSize-FormItemLabel-required": "var(--xmlui-fontSize-FormItemLabel-required)", "fontWeight-FormItemLabel-required": "var(--xmlui-fontWeight-FormItemLabel-required)", "fontStyle-FormItemLabel-required": "var(--xmlui-fontStyle-FormItemLabel-required)", "textTransform-FormItemLabel-required": "var(--xmlui-textTransform-FormItemLabel-required)", "textColor-FormItemLabel-requiredMark": "var(--xmlui-textColor-FormItemLabel-requiredMark)"}'`;
-const container$3 = "_container_1bx6o_14";
-const top$1 = "_top_1bx6o_21";
-const end = "_end_1bx6o_26";
-const bottom$1 = "_bottom_1bx6o_32";
-const start = "_start_1bx6o_37";
-const shrinkToLabel = "_shrinkToLabel_1bx6o_43";
-const inputLabel = "_inputLabel_1bx6o_46";
-const disabled$c = "_disabled_1bx6o_59";
-const labelBreak = "_labelBreak_1bx6o_63";
-const required = "_required_1bx6o_68";
-const requiredMark = "_requiredMark_1bx6o_75";
-const itemWithLabel = "_itemWithLabel_1bx6o_79";
-const helperTextContainer = "_helperTextContainer_1bx6o_85";
+const container$3 = "_container_ni4pj_14";
+const top$1 = "_top_ni4pj_21";
+const end = "_end_ni4pj_26";
+const bottom$1 = "_bottom_ni4pj_31";
+const start = "_start_ni4pj_36";
+const shrinkToLabel = "_shrinkToLabel_ni4pj_41";
+const inputLabel = "_inputLabel_ni4pj_44";
+const labelBreak = "_labelBreak_ni4pj_57";
+const required = "_required_ni4pj_62";
+const disabled$c = "_disabled_ni4pj_69";
+const requiredMark = "_requiredMark_ni4pj_73";
+const itemWithLabel = "_itemWithLabel_ni4pj_77";
+const wrapper$n = "_wrapper_ni4pj_82";
+const validationResultWrapper = "_validationResultWrapper_ni4pj_90";
+const helperTextContainer = "_helperTextContainer_ni4pj_93";
+const labelWrapper$1 = "_labelWrapper_ni4pj_96";
 const styles$1l = {
   themeVars: themeVars$13,
   container: container$3,
@@ -795,12 +802,15 @@ const styles$1l = {
   start,
   shrinkToLabel,
   inputLabel,
-  disabled: disabled$c,
   labelBreak,
   required,
+  disabled: disabled$c,
   requiredMark,
   itemWithLabel,
-  helperTextContainer
+  wrapper: wrapper$n,
+  validationResultWrapper,
+  helperTextContainer,
+  labelWrapper: labelWrapper$1
 };
 const themeVars$12 = `'{"size-Spinner": "var(--xmlui-size-Spinner)", "thickness-Spinner": "var(--xmlui-thickness-Spinner)", "borderColor-Spinner": "var(--xmlui-borderColor-Spinner)"}'`;
 const fullScreenSpinnerWrapper = "_fullScreenSpinnerWrapper_b1pgc_50";
@@ -908,69 +918,72 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
 }, ref) {
   const generatedId2 = useId();
   const inputId = id || generatedId2;
+  const inputRef = useRef(null);
+  const inputHeight = inputRef.current?.offsetHeight;
+  const labelWrapperHeight = labelPosition === "start" || labelPosition === "end" ? inputHeight : "auto";
   if (label2 === void 0 && !validationResult) {
-    return /* @__PURE__ */ jsx(Part, { partId: PART_LABELED_ITEM, children: /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ...rest,
-        style: style2,
-        className,
-        id: inputId,
-        ref,
-        children
-      }
-    ) });
+    return /* @__PURE__ */ jsx(Part, { partId: PART_LABELED_ITEM, children: /* @__PURE__ */ jsx(Slot, { ...rest, style: style2, className, id: inputId, ref, children }) });
   }
-  return /* @__PURE__ */ jsxs("div", { ...rest, ref, style: style2, className: classnames(className, styles$1l.itemWithLabel), children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classnames(styles$1l.container, {
-          [styles$1l.top]: labelPosition === "top",
-          [styles$1l.bottom]: labelPosition === "bottom",
-          [styles$1l.start]: labelPosition === "start",
-          [styles$1l.end]: labelPosition === "end",
-          [styles$1l.shrinkToLabel]: shrinkToLabel2
-        }),
-        children: [
-          label2 && /* @__PURE__ */ jsx(Part, { partId: PART_LABEL, children: /* @__PURE__ */ jsxs(
-            "label",
-            {
-              htmlFor: inputId,
-              onClick: onLabelClick || (() => document.getElementById(inputId)?.focus()),
-              style: {
-                ...labelStyle,
-                width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth,
-                flexShrink: labelWidth !== void 0 ? 0 : void 0
-              },
-              className: classnames(styles$1l.inputLabel, {
-                [styles$1l.required]: required2,
-                [styles$1l.disabled]: !enabled2,
-                [styles$1l.labelBreak]: labelBreak2
-              }),
-              children: [
-                label2,
-                " ",
-                required2 && /* @__PURE__ */ jsx("span", { className: styles$1l.requiredMark, children: "*" }),
-                validationInProgress && /* @__PURE__ */ jsx(
-                  Spinner,
-                  {
-                    style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" }
-                  }
-                )
-              ]
-            }
-          ) }),
+  return /* @__PURE__ */ jsx("div", { ...rest, ref, style: style2, className: classnames(className, styles$1l.itemWithLabel), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(styles$1l.container, {
+        [styles$1l.top]: labelPosition === "top",
+        [styles$1l.bottom]: labelPosition === "bottom",
+        [styles$1l.start]: labelPosition === "start",
+        [styles$1l.end]: labelPosition === "end",
+        [styles$1l.shrinkToLabel]: shrinkToLabel2
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles$1l.labelWrapper,
+            style: {
+              height: labelWrapperHeight
+            },
+            children: label2 && /* @__PURE__ */ jsx(Part, { partId: PART_LABEL, children: /* @__PURE__ */ jsxs(
+              "label",
+              {
+                htmlFor: inputId,
+                onClick: onLabelClick || (() => document.getElementById(inputId)?.focus()),
+                style: {
+                  ...labelStyle,
+                  width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth,
+                  flexShrink: labelWidth !== void 0 ? 0 : void 0
+                },
+                className: classnames(styles$1l.inputLabel, {
+                  [styles$1l.required]: required2,
+                  [styles$1l.disabled]: !enabled2,
+                  [styles$1l.labelBreak]: labelBreak2
+                }),
+                children: [
+                  label2,
+                  " ",
+                  required2 && /* @__PURE__ */ jsx("span", { className: styles$1l.requiredMark, children: "*" }),
+                  validationInProgress && /* @__PURE__ */ jsx(
+                    Spinner,
+                    {
+                      style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" }
+                    }
+                  )
+                ]
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles$1l.wrapper, children: [
           /* @__PURE__ */ jsx(Part, { partId: PART_LABELED_ITEM, children: cloneElement(children, {
             id: !isInputTemplateUsed ? inputId : void 0,
             style: void 0,
-            className: void 0
-          }) })
-        ]
-      }
-    ),
-    validationResult
-  ] });
+            className: void 0,
+            ref: inputRef
+          }) }),
+          validationResult && /* @__PURE__ */ jsx("div", { className: styles$1l.validationResultWrapper, children: validationResult })
+        ] })
+      ]
+    }
+  ) });
 });
 function createMetadata(metadata) {
   return metadata;
@@ -13646,6 +13659,7 @@ function useRowSelection({
   rowsSelectable,
   enableMultiRowSelection,
   rowDisabledPredicate,
+  rowUnselectablePredicate,
   onSelectionDidChange,
   initiallySelected = EMPTY_ARRAY,
   syncWithAppState
@@ -13901,7 +13915,7 @@ function useRowSelection({
       return;
     }
     setSelectedRowIds(
-      checked2 ? items.filter((item2) => rowDisabledPredicate ? !rowDisabledPredicate(item2) : true).map((item2) => item2[idKey]) : []
+      checked2 ? items.filter((item2) => !(rowDisabledPredicate?.(item2) || rowUnselectablePredicate?.(item2))).map((item2) => item2[idKey]) : []
     );
   });
   const selectedRowIdMap = useMemo(() => {
@@ -14354,6 +14368,9 @@ const CheckboxToleranceValues = ["none", "compact", "comfortable", "spacious"];
 function defaultIsRowDisabled(_) {
   return false;
 }
+function defaultIsRowUnselectable(_) {
+  return false;
+}
 const SELECT_COLUMN_WIDTH = 42;
 const DEFAULT_PAGE_SIZES = [10];
 const getCheckboxTolerancePixels = (tolerance) => {
@@ -14413,6 +14430,7 @@ const Table = forwardRef(
     pageSize = pageSizeOptions?.[0] || DEFAULT_PAGE_SIZES[0],
     currentPageIndex = 0,
     rowDisabledPredicate = defaultIsRowDisabled,
+    rowUnselectablePredicate = defaultIsRowUnselectable,
     sortBy: sortBy2,
     sortingDirection = defaultProps$$.sortingDirection,
     iconSortAsc,
@@ -14481,6 +14499,7 @@ const Table = forwardRef(
       rowsSelectable,
       enableMultiRowSelection,
       rowDisabledPredicate,
+      rowUnselectablePredicate,
       onSelectionDidChange,
       initiallySelected,
       syncWithAppState
@@ -14605,14 +14624,16 @@ const Table = forwardRef(
               indeterminate: table22.getIsSomeRowsSelected(),
               forceHover: headerCheckboxHovered,
               onDidChange: () => {
-                const allSelected2 = table22.getRowModel().rows.every((row2) => rowDisabledPredicate(row2.original) || row2.getIsSelected());
+                const allSelected2 = table22.getRowModel().rows.every(
+                  (row2) => rowDisabledPredicate(row2.original) || rowUnselectablePredicate(row2.original) || row2.getIsSelected()
+                );
                 checkAllRows(!allSelected2);
               }
             }
           }
         ) : null,
         cell: ({ row: row2 }) => {
-          return /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(Fragment, { children: row2.getCanSelect() && /* @__PURE__ */ jsx(
             Toggle,
             {
               ...{
@@ -14631,7 +14652,7 @@ const Table = forwardRef(
                 }
               }
             }
-          );
+          ) });
         }
       };
       return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
@@ -14643,6 +14664,7 @@ const Table = forwardRef(
       checkAllRows,
       toggleRow,
       rowDisabledPredicate,
+      rowUnselectablePredicate,
       hoveredRowId,
       headerCheckboxHovered
     ]);
@@ -14687,12 +14709,18 @@ const Table = forwardRef(
         right: right2
       };
     }, [columnsWithSelectColumn]);
+    const enableRowSelectionFn = useCallback(
+      (row2) => {
+        return rowsSelectable && !rowUnselectablePredicate(row2.original);
+      },
+      [rowUnselectablePredicate, rowsSelectable]
+    );
     const table2 = useReactTable({
       columns: columnsWithSelectColumn,
       data: sortedData,
       getCoreRowModel: getCoreRowModel(),
       getPaginationRowModel: isPaginated ? getPaginationRowModel() : void 0,
-      enableRowSelection: rowsSelectable,
+      enableRowSelection: enableRowSelectionFn,
       enableMultiRowSelection,
       columnResizeMode: "onChange",
       getRowId: useCallback(
@@ -14842,7 +14870,7 @@ const Table = forwardRef(
                           event.preventDefault();
                           event.stopPropagation();
                           const allSelected2 = table2.getRowModel().rows.every(
-                            (row2) => rowDisabledPredicate(row2.original) || row2.getIsSelected()
+                            (row2) => rowDisabledPredicate(row2.original) || rowUnselectablePredicate(row2.original) || row2.getIsSelected()
                           );
                           checkAllRows(!allSelected2);
                         }
@@ -14997,6 +15025,9 @@ const Table = forwardRef(
                       rowVirtualizer.measureElement(el);
                     },
                     onClick: (event) => {
+                      if (!row2.getCanSelect()) {
+                        return;
+                      }
                       if (event?.defaultPrevented) {
                         return;
                       }
@@ -15220,6 +15251,9 @@ const TableMd = createMetadata({
     rowDisabledPredicate: d(
       `This property defines a predicate function with a return value that determines if the row should be disabled. The function retrieves the item to display and should return a Boolean-like value.`
     ),
+    rowUnselectablePredicate: {
+      description: `This property defines a predicate function with a return value that determines if the row should be unselectable. The function retrieves the item to display and should return a Boolean-like value. This property only has an effect when the \`rowsSelectable\` property is set to \`true\`.`
+    },
     noDataTemplate: dComponent(
       `A property to customize what to display if the table does not contain any data.`
     ),
@@ -15441,6 +15475,7 @@ const TableWithColumns = memo(
             isPaginated: extractValue.asOptionalBoolean(node.props?.isPaginated),
             headerHeight: extractValue.asSize(node.props.headerHeight),
             rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate),
+            rowUnselectablePredicate: lookupSyncCallback(node.props.rowUnselectablePredicate),
             sortBy: extractValue(node.props?.sortBy),
             sortingDirection: extractValue(node.props?.sortDirection),
             iconSortAsc: extractValue.asOptionalString(node.props?.iconSortAsc),
@@ -21001,47 +21036,48 @@ function useLongPress(elementRef, action2, delay2 = 500) {
   }, [elementRef, action2, delay2]);
 }
 const themeVars$r = `'{"border-Select": "var(--xmlui-border-Select)", "borderHorizontal-Select": "var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select))", "borderVertical-Select": "var(--xmlui-borderVertical-Select, var(--xmlui-border-Select))", "borderLeft-Select": "var(--xmlui-borderLeft-Select, var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select)))", "borderRight-Select": "var(--xmlui-borderRight-Select, var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select)))", "borderTop-Select": "var(--xmlui-borderTop-Select, var(--xmlui-borderVertical-Select, var(--xmlui-border-Select)))", "borderBottom-Select": "var(--xmlui-borderBottom-Select, var(--xmlui-borderVertical-Select, var(--xmlui-border-Select)))", "borderWidth-Select": "var(--xmlui-borderWidth-Select)", "borderHorizontalWidth-Select": "var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select))", "borderLeftWidth-Select": "var(--xmlui-borderLeftWidth-Select, var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderRightWidth-Select": "var(--xmlui-borderRightWidth-Select, var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderVerticalWidth-Select": "var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select))", "borderTopWidth-Select": "var(--xmlui-borderTopWidth-Select, var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderBottomWidth-Select": "var(--xmlui-borderBottomWidth-Select, var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderStyle-Select": "var(--xmlui-borderStyle-Select)", "borderHorizontalStyle-Select": "var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select))", "borderLeftStyle-Select": "var(--xmlui-borderLeftStyle-Select, var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderRightStyle-Select": "var(--xmlui-borderRightStyle-Select, var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderVerticalStyle-Select": "var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select))", "borderTopStyle-Select": "var(--xmlui-borderTopStyle-Select, var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderBottomStyle-Select": "var(--xmlui-borderBottomStyle-Select, var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderColor-Select": "var(--xmlui-borderColor-Select)", "borderHorizontalColor-Select": "var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select))", "borderLeftColor-Select": "var(--xmlui-borderLeftColor-Select, var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select)))", "borderRightColor-Select": "var(--xmlui-borderRightColor-Select, var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select)))", "borderVerticalColor-Select": "var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select))", "borderTopColor-Select": "var(--xmlui-borderTopColor-Select, var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select)))", "borderBottomColor-Select": "var(--xmlui-borderBottomColor-Select, var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select)))", "borderStartStartRadius-Select": "var(--xmlui-borderStartStartRadius-Select, var(--xmlui-borderRadius-Select))", "borderStartEndRadius-Select": "var(--xmlui-borderStartEndRadius-Select, var(--xmlui-borderRadius-Select))", "borderEndStartRadius-Select": "var(--xmlui-borderEndStartRadius-Select, var(--xmlui-borderRadius-Select))", "borderEndEndRadius-Select": "var(--xmlui-borderEndEndRadius-Select, var(--xmlui-borderRadius-Select))", "padding-Select": "var(--xmlui-padding-Select)", "paddingHorizontal-Select": "var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select))", "paddingVertical-Select": "var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select))", "paddingLeft-Select": "var(--xmlui-paddingLeft-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingRight-Select": "var(--xmlui-paddingRight-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingTop-Select": "var(--xmlui-paddingTop-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "paddingBottom-Select": "var(--xmlui-paddingBottom-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "padding-item-Select": "var(--xmlui-padding-item-Select)", "paddingHorizontal-item-Select": "var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select))", "paddingVertical-item-Select": "var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select))", "paddingLeft-item-Select": "var(--xmlui-paddingLeft-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingRight-item-Select": "var(--xmlui-paddingRight-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingTop-item-Select": "var(--xmlui-paddingTop-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "paddingBottom-item-Select": "var(--xmlui-paddingBottom-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "Input:borderRadius-Select--default": "var(--xmlui-borderRadius-Select--default)", "Input:borderColor-Select--default": "var(--xmlui-borderColor-Select--default)", "Input:borderWidth-Select--default": "var(--xmlui-borderWidth-Select--default)", "Input:borderStyle-Select--default": "var(--xmlui-borderStyle-Select--default)", "Input:fontSize-Select--default": "var(--xmlui-fontSize-Select--default)", "Input:backgroundColor-Select--default": "var(--xmlui-backgroundColor-Select--default)", "Input:boxShadow-Select--default": "var(--xmlui-boxShadow-Select--default)", "Input:textColor-Select--default": "var(--xmlui-textColor-Select--default)", "Input:borderColor-Select--default--hover": "var(--xmlui-borderColor-Select--default--hover)", "Input:backgroundColor-Select--default--hover": "var(--xmlui-backgroundColor-Select--default--hover)", "Input:boxShadow-Select--default--hover": "var(--xmlui-boxShadow-Select--default--hover)", "Input:textColor-Select--default--hover": "var(--xmlui-textColor-Select--default--hover)", "Input:outlineWidth-Select--default--focus": "var(--xmlui-outlineWidth-Select--default--focus)", "Input:outlineColor-Select--default--focus": "var(--xmlui-outlineColor-Select--default--focus)", "Input:outlineStyle-Select--default--focus": "var(--xmlui-outlineStyle-Select--default--focus)", "Input:outlineOffset-Select--default--focus": "var(--xmlui-outlineOffset-Select--default--focus)", "Input:textColor-placeholder-Select--default": "var(--xmlui-textColor-placeholder-Select--default)", "Input:fontSize-placeholder-Select--default": "var(--xmlui-fontSize-placeholder-Select--default)", "Input:borderRadius-Select--error": "var(--xmlui-borderRadius-Select--error)", "Input:borderColor-Select--error": "var(--xmlui-borderColor-Select--error)", "Input:borderWidth-Select--error": "var(--xmlui-borderWidth-Select--error)", "Input:borderStyle-Select--error": "var(--xmlui-borderStyle-Select--error)", "Input:fontSize-Select--error": "var(--xmlui-fontSize-Select--error)", "Input:backgroundColor-Select--error": "var(--xmlui-backgroundColor-Select--error)", "Input:boxShadow-Select--error": "var(--xmlui-boxShadow-Select--error)", "Input:textColor-Select--error": "var(--xmlui-textColor-Select--error)", "Input:borderColor-Select--error--hover": "var(--xmlui-borderColor-Select--error--hover)", "Input:backgroundColor-Select--error--hover": "var(--xmlui-backgroundColor-Select--error--hover)", "Input:boxShadow-Select--error--hover": "var(--xmlui-boxShadow-Select--error--hover)", "Input:textColor-Select--error--hover": "var(--xmlui-textColor-Select--error--hover)", "Input:outlineWidth-Select--error--focus": "var(--xmlui-outlineWidth-Select--error--focus)", "Input:outlineColor-Select--error--focus": "var(--xmlui-outlineColor-Select--error--focus)", "Input:outlineStyle-Select--error--focus": "var(--xmlui-outlineStyle-Select--error--focus)", "Input:outlineOffset-Select--error--focus": "var(--xmlui-outlineOffset-Select--error--focus)", "Input:textColor-placeholder-Select--error": "var(--xmlui-textColor-placeholder-Select--error)", "Input:fontSize-placeholder-Select--error": "var(--xmlui-fontSize-placeholder-Select--error)", "Input:borderRadius-Select--warning": "var(--xmlui-borderRadius-Select--warning)", "Input:borderColor-Select--warning": "var(--xmlui-borderColor-Select--warning)", "Input:borderWidth-Select--warning": "var(--xmlui-borderWidth-Select--warning)", "Input:borderStyle-Select--warning": "var(--xmlui-borderStyle-Select--warning)", "Input:fontSize-Select--warning": "var(--xmlui-fontSize-Select--warning)", "Input:backgroundColor-Select--warning": "var(--xmlui-backgroundColor-Select--warning)", "Input:boxShadow-Select--warning": "var(--xmlui-boxShadow-Select--warning)", "Input:textColor-Select--warning": "var(--xmlui-textColor-Select--warning)", "Input:borderColor-Select--warning--hover": "var(--xmlui-borderColor-Select--warning--hover)", "Input:backgroundColor-Select--warning--hover": "var(--xmlui-backgroundColor-Select--warning--hover)", "Input:boxShadow-Select--warning--hover": "var(--xmlui-boxShadow-Select--warning--hover)", "Input:textColor-Select--warning--hover": "var(--xmlui-textColor-Select--warning--hover)", "Input:outlineWidth-Select--warning--focus": "var(--xmlui-outlineWidth-Select--warning--focus)", "Input:outlineColor-Select--warning--focus": "var(--xmlui-outlineColor-Select--warning--focus)", "Input:outlineStyle-Select--warning--focus": "var(--xmlui-outlineStyle-Select--warning--focus)", "Input:outlineOffset-Select--warning--focus": "var(--xmlui-outlineOffset-Select--warning--focus)", "Input:textColor-placeholder-Select--warning": "var(--xmlui-textColor-placeholder-Select--warning)", "Input:fontSize-placeholder-Select--warning": "var(--xmlui-fontSize-placeholder-Select--warning)", "Input:borderRadius-Select--success": "var(--xmlui-borderRadius-Select--success)", "Input:borderColor-Select--success": "var(--xmlui-borderColor-Select--success)", "Input:borderWidth-Select--success": "var(--xmlui-borderWidth-Select--success)", "Input:borderStyle-Select--success": "var(--xmlui-borderStyle-Select--success)", "Input:fontSize-Select--success": "var(--xmlui-fontSize-Select--success)", "Input:backgroundColor-Select--success": "var(--xmlui-backgroundColor-Select--success)", "Input:boxShadow-Select--success": "var(--xmlui-boxShadow-Select--success)", "Input:textColor-Select--success": "var(--xmlui-textColor-Select--success)", "Input:borderColor-Select--success--hover": "var(--xmlui-borderColor-Select--success--hover)", "Input:backgroundColor-Select--success--hover": "var(--xmlui-backgroundColor-Select--success--hover)", "Input:boxShadow-Select--success--hover": "var(--xmlui-boxShadow-Select--success--hover)", "Input:textColor-Select--success--hover": "var(--xmlui-textColor-Select--success--hover)", "Input:outlineWidth-Select--success--focus": "var(--xmlui-outlineWidth-Select--success--focus)", "Input:outlineColor-Select--success--focus": "var(--xmlui-outlineColor-Select--success--focus)", "Input:outlineStyle-Select--success--focus": "var(--xmlui-outlineStyle-Select--success--focus)", "Input:outlineOffset-Select--success--focus": "var(--xmlui-outlineOffset-Select--success--focus)", "Input:textColor-placeholder-Select--success": "var(--xmlui-textColor-placeholder-Select--success)", "Input:fontSize-placeholder-Select--success": "var(--xmlui-fontSize-placeholder-Select--success)", "Input:backgroundColor-Select--disabled": "var(--xmlui-backgroundColor-Select--disabled)", "Input:textColor-Select--disabled": "var(--xmlui-textColor-Select--disabled)", "Input:borderColor-Select--disabled": "var(--xmlui-borderColor-Select--disabled)", "Input:outlineWidth-Select--focus": "var(--xmlui-outlineWidth-Select--focus)", "Input:outlineColor-Select--focus": "var(--xmlui-outlineColor-Select--focus)", "Input:outlineStyle-Select--focus": "var(--xmlui-outlineStyle-Select--focus)", "Input:outlineOffset-Select--focus": "var(--xmlui-outlineOffset-Select--focus)", "Input:textColor-placeholder-Select": "var(--xmlui-textColor-placeholder-Select)", "paddingVertical-Select-badge": "var(--xmlui-paddingVertical-Select-badge)", "paddingHorizontal-Select-badge": "var(--xmlui-paddingHorizontal-Select-badge)", "borderRadius-Select-badge": "var(--xmlui-borderRadius-Select-badge)", "Input:fontSize-Select-badge": "var(--xmlui-fontSize-Select-badge)", "Input:backgroundColor-Select-badge": "var(--xmlui-backgroundColor-Select-badge)", "Input:textColor-Select-badge": "var(--xmlui-textColor-Select-badge)", "Input:backgroundColor-Select-badge--hover": "var(--xmlui-backgroundColor-Select-badge--hover)", "Input:textColor-Select-badge--hover": "var(--xmlui-textColor-Select-badge--hover)", "Input:backgroundColor-Select-badge--active": "var(--xmlui-backgroundColor-Select-badge--active)", "Input:textColor-Select-badge--active": "var(--xmlui-textColor-Select-badge--active)", "Input:backgroundColor-menu-Select": "var(--xmlui-backgroundColor-menu-Select)", "Input:borderRadius-menu-Select": "var(--xmlui-borderRadius-menu-Select)", "Input:boxShadow-menu-Select": "var(--xmlui-boxShadow-menu-Select)", "Input:borderWidth-menu-Select": "var(--xmlui-borderWidth-menu-Select)", "Input:borderColor-menu-Select": "var(--xmlui-borderColor-menu-Select)", "backgroundColor-item-Select": "var(--xmlui-backgroundColor-item-Select)", "backgroundColor-item-Select--active": "var(--xmlui-backgroundColor-item-Select--active)", "backgroundColor-item-Select--hover": "var(--xmlui-backgroundColor-item-Select--hover)", "textColor-item-Select--disabled": "var(--xmlui-textColor-item-Select--disabled)", "opacity-text-item-Select--disabled": "var(--xmlui-opacity-text-item-Select--disabled)", "textColor-indicator-Select": "var(--xmlui-textColor-indicator-Select)", "minHeight-Select": "var(--xmlui-minHeight-Select)", "minHeight-item-Select": "var(--xmlui-minHeight-item-Select)"}'`;
-const selectTrigger = "_selectTrigger_tlyg2_17";
-const error$9 = "_error_tlyg2_55";
-const warning$a = "_warning_tlyg2_81";
-const valid$9 = "_valid_tlyg2_107";
-const disabled$7 = "_disabled_tlyg2_133";
-const placeholder$1 = "_placeholder_tlyg2_146";
-const actions$1 = "_actions_tlyg2_163";
-const action$1 = "_action_tlyg2_163";
-const emptyList = "_emptyList_tlyg2_174";
-const badgeListContainer = "_badgeListContainer_tlyg2_186";
-const badgeList$1 = "_badgeList_tlyg2_186";
-const inputWrapper$1 = "_inputWrapper_tlyg2_199";
-const badge$1 = "_badge_tlyg2_186";
-const selectContent = "_selectContent_tlyg2_234";
-const command$1 = "_command_tlyg2_252";
-const commandInputContainer = "_commandInputContainer_tlyg2_257";
-const commandInput$1 = "_commandInput_tlyg2_257";
-const commandList$1 = "_commandList_tlyg2_276";
-const multiSelectOption = "_multiSelectOption_tlyg2_283";
-const multiSelectOptionContent = "_multiSelectOptionContent_tlyg2_298";
-const highlighted$1 = "_highlighted_tlyg2_307";
-const disabledOption$1 = "_disabledOption_tlyg2_313";
-const selectValue = "_selectValue_tlyg2_328";
-const selectDropdownContent = "_selectDropdownContent_tlyg2_338";
-const fadeIn = "_fadeIn_tlyg2_1";
-const zoomIn = "_zoomIn_tlyg2_1";
-const fadeOut = "_fadeOut_tlyg2_1";
-const zoomOut = "_zoomOut_tlyg2_1";
-const slideInFromTop = "_slideInFromTop_tlyg2_1";
-const slideInFromRight = "_slideInFromRight_tlyg2_1";
-const slideInFromLeft = "_slideInFromLeft_tlyg2_1";
-const slideInFromBottom = "_slideInFromBottom_tlyg2_1";
-const selectViewport = "_selectViewport_tlyg2_370";
-const selectScrollUpButton = "_selectScrollUpButton_tlyg2_374";
-const selectScrollDownButton = "_selectScrollDownButton_tlyg2_382";
-const selectEmpty = "_selectEmpty_tlyg2_390";
-const selectOption = "_selectOption_tlyg2_403";
-const selectOptionContent = "_selectOptionContent_tlyg2_427";
-const selectOptionIndicator = "_selectOptionIndicator_tlyg2_441";
-const loading = "_loading_tlyg2_451";
-const srOnly = "_srOnly_tlyg2_454";
+const selectTrigger = "_selectTrigger_1c0m5_17";
+const error$9 = "_error_1c0m5_55";
+const warning$a = "_warning_1c0m5_81";
+const valid$9 = "_valid_1c0m5_107";
+const disabled$7 = "_disabled_1c0m5_133";
+const placeholder$1 = "_placeholder_1c0m5_145";
+const actions$1 = "_actions_1c0m5_162";
+const action$1 = "_action_1c0m5_162";
+const emptyList = "_emptyList_1c0m5_176";
+const badgeListContainer = "_badgeListContainer_1c0m5_188";
+const badgeList$1 = "_badgeList_1c0m5_188";
+const inputWrapper$1 = "_inputWrapper_1c0m5_201";
+const badge$1 = "_badge_1c0m5_188";
+const selectContent = "_selectContent_1c0m5_236";
+const command$1 = "_command_1c0m5_254";
+const commandInputContainer = "_commandInputContainer_1c0m5_259";
+const commandInput$1 = "_commandInput_1c0m5_259";
+const commandList$1 = "_commandList_1c0m5_277";
+const groupHeader = "_groupHeader_1c0m5_284";
+const multiSelectOption = "_multiSelectOption_1c0m5_296";
+const multiSelectOptionContent = "_multiSelectOptionContent_1c0m5_311";
+const highlighted$1 = "_highlighted_1c0m5_320";
+const disabledOption$1 = "_disabledOption_1c0m5_326";
+const selectValue = "_selectValue_1c0m5_341";
+const selectDropdownContent = "_selectDropdownContent_1c0m5_351";
+const fadeIn = "_fadeIn_1c0m5_1";
+const zoomIn = "_zoomIn_1c0m5_1";
+const fadeOut = "_fadeOut_1c0m5_1";
+const zoomOut = "_zoomOut_1c0m5_1";
+const slideInFromTop = "_slideInFromTop_1c0m5_1";
+const slideInFromRight = "_slideInFromRight_1c0m5_1";
+const slideInFromLeft = "_slideInFromLeft_1c0m5_1";
+const slideInFromBottom = "_slideInFromBottom_1c0m5_1";
+const selectViewport = "_selectViewport_1c0m5_383";
+const selectScrollUpButton = "_selectScrollUpButton_1c0m5_387";
+const selectScrollDownButton = "_selectScrollDownButton_1c0m5_395";
+const selectEmpty = "_selectEmpty_1c0m5_403";
+const selectOption = "_selectOption_1c0m5_416";
+const selectOptionContent = "_selectOptionContent_1c0m5_440";
+const selectOptionIndicator = "_selectOptionIndicator_1c0m5_454";
+const loading = "_loading_1c0m5_464";
+const srOnly = "_srOnly_1c0m5_467";
 const styles$K = {
   themeVars: themeVars$r,
   selectTrigger,
@@ -21062,6 +21098,7 @@ const styles$K = {
   commandInputContainer,
   commandInput: commandInput$1,
   commandList: commandList$1,
+  groupHeader,
   multiSelectOption,
   multiSelectOptionContent,
   highlighted: highlighted$1,
@@ -21094,8 +21131,11 @@ const SelectContext = createContext({
   },
   setSelectedIndex: (index) => {
   },
-  options: /* @__PURE__ */ new Set(),
-  optionRenderer: void 0
+  optionRenderer: void 0,
+  onOptionAdd: () => {
+  },
+  onOptionRemove: () => {
+  }
 });
 function useSelect() {
   return useContext(SelectContext);
@@ -21120,22 +21160,235 @@ function useOption() {
   return useContext(OptionContext);
 }
 function HiddenOption(option) {
-  const { label: label2 } = option;
-  const { onOptionAdd } = useOption();
-  const [node, setNode] = useState(null);
-  const opt = useMemo(() => {
-    return {
+  const { onOptionAdd, onOptionRemove } = useOption();
+  const nodeRef = useRef(null);
+  useEffect(() => {
+    let textNode;
+    if (nodeRef.current) {
+      textNode = nodeRef.current.textContent;
+    }
+    const opt = {
       ...option,
-      label: label2 ?? node?.textContent ?? "",
-      keywords: option.keywords || [label2 ?? node?.textContent ?? ""]
-      // Store the rendered ReactNode for dropdown display
+      label: option.label || textNode || option.value
     };
-  }, [option, node, label2]);
-  useEffect(() => {
     onOptionAdd(opt);
-  }, [opt, onOptionAdd]);
-  return /* @__PURE__ */ jsx("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.children });
+    return () => {
+      onOptionRemove(opt);
+    };
+  }, [option, onOptionAdd, onOptionRemove]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: nodeRef,
+      style: { display: "none", visibility: "hidden", width: 0, height: 0, position: "absolute" },
+      children: option.children
+    }
+  );
 }
+const SelectOption = forwardRef(
+  function SelectOption2(option, ref) {
+    const visibleContentRef = useRef(null);
+    const { value, label: label2, enabled: enabled2 = true, children, className } = option;
+    const { value: selectedValue, optionRenderer } = useSelect();
+    return /* @__PURE__ */ jsx(
+      Item$1,
+      {
+        ref,
+        className: classnames(className, styles$K.selectOption),
+        value,
+        textValue: label2,
+        disabled: !enabled2,
+        onClick: (event) => {
+          event.stopPropagation();
+        },
+        "data-state": selectedValue === value && "checked",
+        children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$K.selectOptionContent, ref: visibleContentRef, children: [
+            /* @__PURE__ */ jsx("span", { style: { visibility: "hidden", position: "absolute", width: 0, height: 0 }, children: /* @__PURE__ */ jsx(ItemText, { children: label2 }) }),
+            children
+          ] }),
+          selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$K.selectOptionIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) })
+        ] }) : optionRenderer ? /* @__PURE__ */ jsxs("div", { className: styles$K.selectOptionContent, ref: visibleContentRef, children: [
+          /* @__PURE__ */ jsx("span", { style: { visibility: "hidden", position: "absolute", width: 0, height: 0 }, children: /* @__PURE__ */ jsx(ItemText, { children: label2 }) }),
+          optionRenderer(
+            {
+              label: label2,
+              value,
+              enabled: enabled2
+            },
+            selectedValue,
+            false
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: styles$K.selectOptionContent, ref: visibleContentRef, children: /* @__PURE__ */ jsx(ItemText, { children: label2 }) }),
+          selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$K.selectItemIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) })
+        ] })
+      }
+    );
+  }
+);
+const SimpleSelect = forwardRef(
+  function SimpleSelect2(props, forwardedRef) {
+    const { root: root2 } = useTheme();
+    const {
+      enabled: enabled2,
+      onBlur,
+      autoFocus,
+      onValueChange,
+      validationStatus,
+      value,
+      height,
+      style: style2,
+      placeholder: placeholder2,
+      id,
+      triggerRef,
+      onFocus,
+      width,
+      readOnly: readOnly2,
+      emptyListNode,
+      className,
+      modal,
+      groupBy: groupBy2,
+      groupHeaderRenderer,
+      ungroupedHeaderRenderer,
+      clearable,
+      onClear,
+      options: options2,
+      children,
+      ...rest
+    } = props;
+    const composedRef = forwardRef ? composeRefs(triggerRef, forwardedRef) : triggerRef;
+    const [open, setOpen] = useState(false);
+    const stringValue = useMemo(() => {
+      return value != void 0 ? String(value) : void 0;
+    }, [value]);
+    const handleValueChange = useCallback(
+      (val) => {
+        if (readOnly2) return;
+        onValueChange(val);
+      },
+      [onValueChange, readOnly2]
+    );
+    const selectedOption = useMemo(() => {
+      return options2.find((option) => `${option.value}` === `${value}`);
+    }, [options2, value]);
+    const groupedOptions = useMemo(() => {
+      if (!groupBy2) return null;
+      const groups = {};
+      options2.forEach((option) => {
+        const groupKey = option[groupBy2] || "Ungrouped";
+        if (!groups[groupKey]) {
+          groups[groupKey] = [];
+        }
+        groups[groupKey].push(option);
+      });
+      const sortedGroups = {};
+      if (groups["Ungrouped"]) {
+        sortedGroups["Ungrouped"] = groups["Ungrouped"];
+      }
+      Object.keys(groups).filter((key) => key !== "Ungrouped").sort().forEach((key) => {
+        sortedGroups[key] = groups[key];
+      });
+      return sortedGroups;
+    }, [groupBy2, options2]);
+    return /* @__PURE__ */ jsxs(
+      Root,
+      {
+        open,
+        value: stringValue,
+        onValueChange: handleValueChange,
+        onOpenChange: () => enabled2 && !readOnly2 && setOpen(!open),
+        children: [
+          /* @__PURE__ */ jsxs(
+            Trigger,
+            {
+              ...rest,
+              id,
+              ref: composedRef,
+              "aria-haspopup": "listbox",
+              style: style2,
+              onFocus,
+              onBlur,
+              disabled: !enabled2,
+              className: classnames(className, styles$K.selectTrigger, {
+                [styles$K.error]: validationStatus === "error",
+                [styles$K.warning]: validationStatus === "warning",
+                [styles$K.valid]: validationStatus === "valid"
+              }),
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              autoFocus,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classnames(styles$K.selectValue, {
+                      [styles$K.placeholder]: value === void 0
+                    }),
+                    children: selectedOption ? selectedOption.label : readOnly2 ? "" : placeholder2
+                  }
+                ),
+                clearable && value !== void 0 && value !== "" && !readOnly2 && enabled2 && /* @__PURE__ */ jsx(Part, { partId: "clearButton", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: styles$K.clearButton,
+                    onPointerDown: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onClear?.();
+                    },
+                    tabIndex: -1,
+                    children: /* @__PURE__ */ jsx(Icon, { name: "close" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: styles$K.action, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsxs(
+            Content,
+            {
+              collisionPadding: 0,
+              className: styles$K.selectDropdownContent,
+              position: "popper",
+              align: "start",
+              style: { maxHeight: height, width },
+              children: [
+                /* @__PURE__ */ jsx(ScrollUpButton, { className: styles$K.selectScrollUpButton, children: /* @__PURE__ */ jsx(Icon, { name: "chevronup" }) }),
+                /* @__PURE__ */ jsx(Part, { partId: "listWrapper", children: /* @__PURE__ */ jsx(Viewport, { className: styles$K.selectViewport, role: "listbox", children: groupBy2 && groupedOptions ? (
+                  // Render grouped options directly from options array
+                  /* @__PURE__ */ jsx(Fragment, { children: Object.keys(groupedOptions).length === 0 ? emptyListNode : Object.entries(groupedOptions).map(([groupName, groupOptions]) => /* @__PURE__ */ jsxs(Group, { children: [
+                    groupName === "Ungrouped" ? ungroupedHeaderRenderer && /* @__PURE__ */ jsx(Label, { className: styles$K.groupHeader, children: ungroupedHeaderRenderer() }) : /* @__PURE__ */ jsx(Label, { className: styles$K.groupHeader, children: groupHeaderRenderer ? groupHeaderRenderer(groupName) : groupName }),
+                    groupOptions.map((option) => /* @__PURE__ */ jsx(
+                      SelectOption,
+                      {
+                        value: option.value,
+                        label: option.label,
+                        enabled: option.enabled,
+                        className: styles$K.selectOption,
+                        children: option.children
+                      },
+                      option.value
+                    ))
+                  ] }, groupName)) })
+                ) : (
+                  // Render flat options
+                  /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(OptionTypeProvider, { Component: SelectOption, children }),
+                    options2.length === 0 && emptyListNode
+                  ] })
+                ) }) }),
+                /* @__PURE__ */ jsx(ScrollDownButton, { className: styles$K.selectScrollDownButton, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
 const PART_LIST_WRAPPER$1 = "listWrapper";
 const PART_CLEAR_BUTTON$1 = "clearButton";
 const defaultProps$H = {
@@ -21152,24 +21405,20 @@ const defaultProps$H = {
   clearable: false
 };
 const SelectTriggerValue = ({
-  value,
   placeholder: placeholder2,
   readOnly: readOnly2,
   multiSelect,
-  options: options2,
+  selectedOptions,
   valueRenderer,
   toggleOption
 }) => {
-  if (multiSelect) {
-    if (Array.isArray(value) && value.length > 0) {
-      return /* @__PURE__ */ jsx("div", { className: styles$K.badgeListContainer, children: /* @__PURE__ */ jsx("div", { className: styles$K.badgeList, children: value.map(
-        (v) => valueRenderer ? valueRenderer(
-          Array.from(options2).find((o) => o.value === `${v}`),
-          () => {
-            toggleOption(v);
-          }
-        ) : /* @__PURE__ */ jsxs("span", { className: styles$K.badge, children: [
-          Array.from(options2).find((o) => o.value === `${v}`)?.label,
+  if (selectedOptions.length) {
+    if (multiSelect) {
+      return /* @__PURE__ */ jsx("div", { className: styles$K.badgeListContainer, children: /* @__PURE__ */ jsx("div", { className: styles$K.badgeList, children: selectedOptions.map(
+        (option) => valueRenderer ? valueRenderer(option, () => {
+          if (!readOnly2) toggleOption(option.value);
+        }) : /* @__PURE__ */ jsxs("span", { className: styles$K.badge, children: [
+          option.label,
           /* @__PURE__ */ jsx(
             Icon,
             {
@@ -21177,20 +21426,17 @@ const SelectTriggerValue = ({
               size: "sm",
               onClick: (event) => {
                 event.stopPropagation();
-                toggleOption(v);
+                if (!readOnly2) toggleOption(option.value);
               }
             }
           )
-        ] }, v)
+        ] }, option.value)
       ) }) });
+    } else {
+      return /* @__PURE__ */ jsx("div", { className: styles$K.selectValue, children: selectedOptions[0]?.label });
     }
-    return /* @__PURE__ */ jsx("span", { placeholder: placeholder2, className: styles$K.placeholder, children: placeholder2 });
-  }
-  if (value !== void 0 && value !== null && value !== "") {
-    const selectedOption = Array.from(options2).find((o) => o.value === value);
-    return /* @__PURE__ */ jsx("div", { className: styles$K.selectValue, children: selectedOption?.label });
   }
-  return /* @__PURE__ */ jsx("div", { "aria-placeholder": placeholder2, className: styles$K.placeholder, children: readOnly2 ? "" : placeholder2 || "" });
+  return /* @__PURE__ */ jsx("span", { placeholder: placeholder2, className: styles$K.placeholder, children: placeholder2 });
 };
 const SelectTriggerActions = ({
   value,
@@ -21203,10 +21449,9 @@ const SelectTriggerActions = ({
 }) => {
   const hasValue = multiSelect ? Array.isArray(value) && value.length > 0 : value !== void 0 && value !== null && value !== "";
   return /* @__PURE__ */ jsxs("div", { className: styles$K.actions, children: [
-    hasValue && enabled2 && !readOnly2 && clearable && /* @__PURE__ */ jsx(
+    hasValue && enabled2 && !readOnly2 && clearable && /* @__PURE__ */ jsx(Part, { partId: PART_CLEAR_BUTTON$1, children: /* @__PURE__ */ jsx(
       "span",
       {
-        "data-part-id": PART_CLEAR_BUTTON$1,
         className: styles$K.action,
         onClick: (event) => {
           event.stopPropagation();
@@ -21214,8 +21459,15 @@ const SelectTriggerActions = ({
         },
         children: /* @__PURE__ */ jsx(Icon, { name: "close" })
       }
-    ),
-    showChevron && /* @__PURE__ */ jsx("span", { className: styles$K.action, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
+    ) }),
+    showChevron && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: classnames(styles$K.action, { [styles$K.disabled]: !enabled2 || readOnly2 }),
+        "aria-disabled": !enabled2 || readOnly2,
+        children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" })
+      }
+    )
   ] });
 };
 const Select = forwardRef(function Select2({
@@ -21248,6 +21500,10 @@ const Select = forwardRef(function Select2({
   // Progress state
   inProgress = defaultProps$H.inProgress,
   inProgressNotificationMessage = defaultProps$H.inProgressNotificationMessage,
+  // Grouping
+  groupBy: groupBy2,
+  groupHeaderRenderer,
+  ungroupedHeaderRenderer,
   // Internal
   updateState = noop$1,
   registerComponentApi,
@@ -21260,9 +21516,17 @@ const Select = forwardRef(function Select2({
   const [width, setWidth] = useState(0);
   const observer = useRef();
   const { root: root2 } = useTheme();
-  const [options2, setOptions] = useState(/* @__PURE__ */ new Set());
+  const [options2, setOptions] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(-1);
+  const selectedOptions = useMemo(() => {
+    if (!multiSelect) {
+      return options2.filter((option) => `${option.value}` === `${value}`);
+    } else {
+      return Array.isArray(value) ? options2.filter((option) => value.map((v) => String(v)).includes(String(option.value))) : [];
+    }
+  }, [multiSelect, options2, value]);
+  const currentValue = value !== void 0 ? value : initialValue;
   const filteredOptions = useMemo(() => {
     if (!searchTerm || searchTerm.trim() === "") {
       return Array.from(options2);
@@ -21273,6 +21537,34 @@ const Select = forwardRef(function Select2({
       return extendedValue.toLowerCase().includes(searchLower);
     });
   }, [options2, searchTerm]);
+  const groupedOptions = useMemo(() => {
+    if (!groupBy2) return null;
+    const optionsToGroup = searchTerm ? filteredOptions : Array.from(options2);
+    const groups = {};
+    optionsToGroup.forEach((option) => {
+      const groupKey = option[groupBy2] || "Ungrouped";
+      if (!groups[groupKey]) {
+        groups[groupKey] = [];
+      }
+      groups[groupKey].push(option);
+    });
+    const sortedGroups = {};
+    if (groups["Ungrouped"]) {
+      sortedGroups["Ungrouped"] = groups["Ungrouped"];
+    }
+    Object.keys(groups).filter((key) => key !== "Ungrouped").sort().forEach((key) => {
+      sortedGroups[key] = groups[key];
+    });
+    return sortedGroups;
+  }, [groupBy2, options2, filteredOptions, searchTerm]);
+  const flattenedGroupedOptions = useMemo(() => {
+    if (!groupedOptions) return null;
+    const flattened = [];
+    Object.entries(groupedOptions).forEach(([_, groupOptions]) => {
+      flattened.push(...groupOptions);
+    });
+    return flattened;
+  }, [groupedOptions]);
   useEffect(() => {
     if (!open) {
       setSelectedIndex(-1);
@@ -21286,25 +21578,30 @@ const Select = forwardRef(function Select2({
   }, [initialValue, updateState]);
   useEffect(() => {
     const current = referenceElement;
-    observer.current?.disconnect();
+    const currentObserver = observer.current;
+    currentObserver?.disconnect();
     if (current) {
-      observer.current = new ResizeObserver(() => setWidth(current.clientWidth));
-      observer.current.observe(current);
+      const newObserver = new ResizeObserver(() => setWidth(current.clientWidth));
+      observer.current = newObserver;
+      newObserver.observe(current);
+      return () => {
+        newObserver.disconnect();
+      };
     }
     return () => {
-      observer.current?.disconnect();
+      currentObserver?.disconnect();
     };
   }, [referenceElement]);
   const toggleOption = useCallback(
     (selectedValue) => {
-      const newSelectedValue = multiSelect ? Array.isArray(value) ? value.map((v) => String(v)).includes(String(selectedValue)) ? value.filter((v) => String(v) !== String(selectedValue)) : [...value, selectedValue] : [selectedValue] : String(selectedValue) === String(value) ? null : selectedValue;
+      const newSelectedValue = multiSelect ? Array.isArray(currentValue) ? currentValue.map((v) => String(v)).includes(String(selectedValue)) ? currentValue.filter((v) => String(v) !== String(selectedValue)) : [...currentValue, selectedValue] : [selectedValue] : String(selectedValue) === String(currentValue) ? null : selectedValue;
       updateState({ value: newSelectedValue });
       onDidChange(newSelectedValue);
       if (!multiSelect) {
         setOpen(false);
       }
     },
-    [multiSelect, value, updateState, onDidChange]
+    [multiSelect, currentValue, updateState, onDidChange]
   );
   const clearValue = useCallback(() => {
     const newValue = multiSelect ? [] : "";
@@ -21313,45 +21610,48 @@ const Select = forwardRef(function Select2({
   }, [multiSelect, updateState, onDidChange]);
   const findNextEnabledIndex = useCallback(
     (currentIndex) => {
-      if (filteredOptions.length === 0) return -1;
-      for (let i = currentIndex + 1; i < filteredOptions.length; i++) {
-        const item2 = filteredOptions[i];
+      const optionsList = flattenedGroupedOptions ? flattenedGroupedOptions : filteredOptions;
+      if (optionsList.length === 0) return -1;
+      for (let i = currentIndex + 1; i < optionsList.length; i++) {
+        const item2 = optionsList[i];
         if (item2 && item2.enabled !== false) {
           return i;
         }
       }
       for (let i = 0; i <= currentIndex; i++) {
-        const item2 = filteredOptions[i];
+        const item2 = optionsList[i];
         if (item2 && item2.enabled !== false) {
           return i;
         }
       }
       return -1;
     },
-    [filteredOptions]
+    [filteredOptions, flattenedGroupedOptions]
   );
   const findPreviousEnabledIndex = useCallback(
     (currentIndex) => {
-      if (filteredOptions.length === 0) return -1;
+      const optionsList = flattenedGroupedOptions ? flattenedGroupedOptions : filteredOptions;
+      if (optionsList.length === 0) return -1;
       for (let i = currentIndex - 1; i >= 0; i--) {
-        const item2 = filteredOptions[i];
+        const item2 = optionsList[i];
         if (item2 && item2.enabled !== false) {
           return i;
         }
       }
-      for (let i = filteredOptions.length - 1; i >= currentIndex; i--) {
-        const item2 = filteredOptions[i];
+      for (let i = optionsList.length - 1; i >= currentIndex; i--) {
+        const item2 = optionsList[i];
         if (item2 && item2.enabled !== false) {
           return i;
         }
       }
       return -1;
     },
-    [filteredOptions]
+    [filteredOptions, flattenedGroupedOptions]
   );
   const handleKeyDown = useCallback(
     (event) => {
       if (!open) return;
+      const optionsList = flattenedGroupedOptions ? flattenedGroupedOptions : filteredOptions;
       switch (event.key) {
         case "ArrowDown":
           event.preventDefault();
@@ -21369,8 +21669,8 @@ const Select = forwardRef(function Select2({
           break;
         case "Enter":
           event.preventDefault();
-          if (selectedIndex >= 0 && selectedIndex < filteredOptions.length) {
-            const selectedItem = filteredOptions[selectedIndex];
+          if (selectedIndex >= 0 && selectedIndex < optionsList.length) {
+            const selectedItem = optionsList[selectedIndex];
             if (selectedItem && selectedItem.enabled !== false) {
               toggleOption(selectedItem.value);
               if (!multiSelect) {
@@ -21389,6 +21689,7 @@ const Select = forwardRef(function Select2({
       open,
       selectedIndex,
       filteredOptions,
+      flattenedGroupedOptions,
       toggleOption,
       multiSelect,
       findNextEnabledIndex,
@@ -21424,249 +21725,225 @@ const Select = forwardRef(function Select2({
     [emptyListTemplate]
   );
   const onOptionAdd = useCallback((option) => {
-    setOptions((prev) => {
-      const exists = Array.from(prev).some((opt) => opt.value === option.value);
-      if (exists) {
-        return prev;
-      }
-      const newSet = new Set(prev);
-      newSet.add(option);
-      return newSet;
-    });
+    setOptions((prev) => [...prev, option]);
   }, []);
   const onOptionRemove = useCallback((option) => {
-    setOptions((prev) => {
-      const optionsSet = new Set(prev);
-      optionsSet.delete(option);
-      return optionsSet;
-    });
+    setOptions((prev) => prev.filter((opt) => opt.value !== option.value));
   }, []);
-  const optionContextValue = useMemo(
-    () => ({
-      onOptionAdd,
-      onOptionRemove
-    }),
-    [onOptionAdd, onOptionRemove]
-  );
   const selectContextValue = useMemo(
     () => ({
       multiSelect,
       readOnly: readOnly2,
-      value,
+      value: currentValue,
       onChange: toggleOption,
       setOpen,
       setSelectedIndex,
-      options: options2,
       highlightedValue: selectedIndex >= 0 && selectedIndex < filteredOptions.length && filteredOptions[selectedIndex] ? filteredOptions[selectedIndex].value : void 0,
       optionRenderer
     }),
     [
       multiSelect,
       readOnly2,
-      value,
+      currentValue,
       toggleOption,
-      options2,
       selectedIndex,
       filteredOptions,
       optionRenderer
     ]
   );
+  const optionContextValue = useMemo(
+    () => ({
+      onOptionAdd,
+      onOptionRemove
+    }),
+    [onOptionAdd, onOptionRemove]
+  );
+  const useSimpleSelect = !searchable && !multiSelect;
   return /* @__PURE__ */ jsx(SelectContext.Provider, { value: selectContextValue, children: /* @__PURE__ */ jsxs(OptionContext.Provider, { value: optionContextValue, children: [
-    /* @__PURE__ */ jsx(OptionTypeProvider, { Component: VisibleSelectOption, children: /* @__PURE__ */ jsxs(
-      Popover,
-      {
-        open,
-        onOpenChange: (isOpen) => {
-          if (!enabled2) return;
-          setOpen(isOpen);
-          setSelectedIndex(-1);
-        },
-        modal,
-        children: [
-          /* @__PURE__ */ jsxs(
-            PopoverTrigger,
-            {
-              ...rest,
-              ref: composeRefs(setReferenceElement, forwardedRef),
-              id,
-              "aria-haspopup": "listbox",
-              style: style2,
-              onFocus,
-              onBlur,
-              disabled: !enabled2,
-              "aria-expanded": open,
-              "data-part-id": PART_LIST_WRAPPER$1,
-              className: classnames(className, styles$K.selectTrigger, styles$K[validationStatus], {
-                [styles$K.disabled]: !enabled2,
-                [styles$K.multi]: multiSelect
-              }),
-              role: "combobox",
-              onClick: (event) => {
-                if (!enabled2) return;
-                event.stopPropagation();
-                setOpen((prev) => !prev);
-              },
-              onKeyDown: (event) => {
-                if (!enabled2 || readOnly2) return;
-                if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === " " || event.key === "Enter")) {
-                  event.preventDefault();
-                  setOpen(true);
-                  if (filteredOptions.length > 0) {
-                    const firstEnabledIndex = findNextEnabledIndex(-1);
-                    setSelectedIndex(firstEnabledIndex !== -1 ? firstEnabledIndex : 0);
-                  }
-                  return;
-                }
-                if (open) {
-                  handleKeyDown(event);
-                }
-              },
-              autoFocus,
-              children: [
-                /* @__PURE__ */ jsx(
-                  SelectTriggerValue,
-                  {
-                    value,
-                    placeholder: placeholder2,
-                    readOnly: readOnly2,
-                    multiSelect,
-                    options: options2,
-                    valueRenderer,
-                    toggleOption
+    useSimpleSelect ? (
+      // SimpleSelect mode (Radix UI Select)
+      /* @__PURE__ */ jsx(
+        SimpleSelect,
+        {
+          value: currentValue,
+          onValueChange: (val) => toggleOption(val),
+          id,
+          options: options2,
+          style: style2,
+          className,
+          onFocus,
+          onBlur,
+          enabled: enabled2,
+          validationStatus,
+          triggerRef: setReferenceElement,
+          autoFocus,
+          placeholder: placeholder2,
+          height: dropdownHeight,
+          width,
+          readOnly: readOnly2,
+          emptyListNode,
+          modal,
+          groupBy: groupBy2,
+          groupHeaderRenderer,
+          ungroupedHeaderRenderer,
+          clearable,
+          onClear: clearValue,
+          ...rest,
+          children
+        }
+      )
+    ) : (
+      // Popover mode (searchable or multi-select)
+      /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+        Popover,
+        {
+          open,
+          onOpenChange: (isOpen) => {
+            if (!enabled2 || readOnly2) return;
+            setOpen(isOpen);
+          },
+          modal,
+          children: [
+            /* @__PURE__ */ jsx(Part, { partId: PART_LIST_WRAPPER$1, children: /* @__PURE__ */ jsxs(
+              PopoverTrigger,
+              {
+                ...rest,
+                ref: composeRefs(setReferenceElement, forwardedRef),
+                id,
+                "aria-haspopup": "listbox",
+                style: style2,
+                onFocus,
+                onBlur,
+                disabled: !enabled2,
+                "aria-expanded": open,
+                className: classnames(className, styles$K.selectTrigger, styles$K[validationStatus], {
+                  [styles$K.disabled]: !enabled2,
+                  [styles$K.multi]: multiSelect
+                }),
+                role: "combobox",
+                onClick: (event) => {
+                  if (!enabled2 || readOnly2) return;
+                  event.stopPropagation();
+                  setOpen((prev) => !prev);
+                },
+                onKeyDown: (event) => {
+                  if (!enabled2 || readOnly2) return;
+                  if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === " " || event.key === "Enter")) {
+                    event.preventDefault();
+                    setOpen(true);
+                    if (filteredOptions.length > 0) {
+                      const firstEnabledIndex = findNextEnabledIndex(-1);
+                      setSelectedIndex(firstEnabledIndex !== -1 ? firstEnabledIndex : 0);
+                    }
+                    return;
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  SelectTriggerActions,
-                  {
-                    value,
-                    multiSelect,
-                    enabled: enabled2,
-                    readOnly: readOnly2,
-                    clearable,
-                    clearValue
+                  if (open) {
+                    handleKeyDown(event);
                   }
-                )
-              ]
-            }
-          ),
-          open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
-            PopoverContent,
-            {
-              style: { minWidth: width, height: dropdownHeight },
-              className: classnames(styles$K.selectContent, styles$K[validationStatus]),
-              onKeyDown: handleKeyDown,
-              children: /* @__PURE__ */ jsxs("div", { className: styles$K.command, children: [
-                searchable ? /* @__PURE__ */ jsxs("div", { className: styles$K.commandInputContainer, children: [
-                  /* @__PURE__ */ jsx(Icon, { name: "search" }),
+                },
+                autoFocus,
+                children: [
                   /* @__PURE__ */ jsx(
-                    "input",
+                    SelectTriggerValue,
                     {
-                      role: "searchbox",
-                      className: classnames(styles$K.commandInput),
-                      placeholder: "Search...",
-                      value: searchTerm,
-                      onChange: (e) => setSearchTerm(e.target.value)
+                      readOnly: readOnly2,
+                      placeholder: placeholder2,
+                      multiSelect,
+                      selectedOptions,
+                      valueRenderer,
+                      toggleOption
                     }
-                  )
-                ] }) : /* @__PURE__ */ jsx("button", { "aria-hidden": "true", className: styles$K.srOnly }),
-                /* @__PURE__ */ jsx("div", { role: "listbox", className: styles$K.commandList, children: inProgress ? /* @__PURE__ */ jsx("div", { className: styles$K.loading, children: inProgressNotificationMessage }) : searchable && searchTerm ? (
-                  // When searching, show only filtered options
-                  filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { children: emptyListNode }) : filteredOptions.map(({ value: value2, label: label2, enabled: enabled22, keywords }, index) => /* @__PURE__ */ jsx(
-                    SelectOptionItem,
+                  ),
+                  /* @__PURE__ */ jsx(
+                    SelectTriggerActions,
                     {
+                      value: currentValue,
+                      multiSelect,
+                      enabled: enabled2,
                       readOnly: readOnly2,
-                      value: value2,
-                      label: label2,
-                      enabled: enabled22,
-                      keywords,
-                      isHighlighted: selectedIndex === index,
-                      itemIndex: index
-                    },
-                    value2
-                  ))
-                ) : (
-                  // When not searching, show all children (includes Options and other components like Button)
-                  /* @__PURE__ */ jsxs(Fragment, { children: [
-                    children,
-                    options2.size === 0 && /* @__PURE__ */ jsx("div", { children: emptyListNode })
+                      clearable,
+                      clearValue
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Portal$1, { container: root2, children: /* @__PURE__ */ jsx(
+              PopoverContent,
+              {
+                style: { minWidth: width, height: dropdownHeight },
+                className: classnames(styles$K.selectContent, styles$K[validationStatus]),
+                onKeyDown: handleKeyDown,
+                children: /* @__PURE__ */ jsxs("div", { className: styles$K.command, children: [
+                  searchable ? /* @__PURE__ */ jsxs("div", { className: styles$K.commandInputContainer, children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "search" }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        role: "searchbox",
+                        className: classnames(styles$K.commandInput),
+                        placeholder: "Search...",
+                        value: searchTerm,
+                        onChange: (e) => setSearchTerm(e.target.value)
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsx("button", { "aria-hidden": "true", className: styles$K.srOnly }),
+                  /* @__PURE__ */ jsxs("div", { role: "listbox", className: styles$K.commandList, children: [
+                    inProgress ? /* @__PURE__ */ jsx("div", { className: styles$K.loading, children: inProgressNotificationMessage }) : (
+                      // When searching, show filtered options (with or without grouping)
+                      groupBy2 && groupedOptions ? (
+                        // Render grouped filtered options
+                        Object.entries(groupedOptions).map(([groupName, groupOptions]) => /* @__PURE__ */ jsxs("div", { children: [
+                          groupName === "Ungrouped" ? ungroupedHeaderRenderer && /* @__PURE__ */ jsx("div", { className: styles$K.groupHeader, children: ungroupedHeaderRenderer() }) : groupHeaderRenderer ? /* @__PURE__ */ jsx("div", { className: styles$K.groupHeader, children: groupHeaderRenderer(groupName) }) : /* @__PURE__ */ jsx("div", { className: styles$K.groupHeader, children: groupName }),
+                          groupOptions.map(({ value: value2, label: label2, enabled: enabled22, keywords }, groupIndex) => {
+                            const optionsList = flattenedGroupedOptions || filteredOptions;
+                            const globalIndex = optionsList.findIndex(
+                              (opt) => opt.value === value2
+                            );
+                            return /* @__PURE__ */ jsx(
+                              SelectOptionItem,
+                              {
+                                readOnly: readOnly2,
+                                value: value2,
+                                label: label2,
+                                enabled: enabled22,
+                                keywords,
+                                isHighlighted: selectedIndex === globalIndex,
+                                itemIndex: globalIndex
+                              },
+                              value2
+                            );
+                          })
+                        ] }, groupName))
+                      ) : (
+                        // Render flat filtered options
+                        filteredOptions.map(({ value: value2, label: label2, enabled: enabled22, keywords }, index) => /* @__PURE__ */ jsx(
+                          SelectOptionItem,
+                          {
+                            readOnly: readOnly2,
+                            value: value2,
+                            label: label2,
+                            enabled: enabled22,
+                            keywords,
+                            isHighlighted: selectedIndex === index,
+                            itemIndex: index
+                          },
+                          value2
+                        ))
+                      )
+                    ),
+                    filteredOptions.length === 0 && emptyListNode
                   ] })
-                ) })
-              ] })
-            }
-          ) })
-        ]
-      }
-    ) }),
-    !open && /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx(OptionTypeProvider, { Component: HiddenOption, children }) })
+                ] })
+              }
+            ) })
+          ]
+        }
+      ) })
+    ),
+    /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx(OptionTypeProvider, { Component: HiddenOption, children }) })
   ] }) });
 });
-function VisibleSelectOption(option) {
-  const { value, label: label2, enabled: enabled2 = true, children } = option;
-  const { onOptionAdd } = useOption();
-  const {
-    value: selectedValue,
-    onChange,
-    multiSelect,
-    readOnly: readOnly2,
-    setOpen,
-    highlightedValue,
-    optionRenderer
-  } = useSelect();
-  const optionRef = useRef(null);
-  const opt = useMemo(() => {
-    return {
-      ...option,
-      label: label2 ?? "",
-      keywords: option.keywords || [label2 ?? ""]
-    };
-  }, [option, label2]);
-  useEffect(() => {
-    onOptionAdd(opt);
-  }, [opt, onOptionAdd]);
-  const selected2 = useMemo(() => {
-    return Array.isArray(selectedValue) && multiSelect ? selectedValue.map((v) => String(v)).includes(value) : String(selectedValue) === String(value);
-  }, [selectedValue, value, multiSelect]);
-  const isHighlighted = useMemo(() => {
-    return highlightedValue !== void 0 && String(highlightedValue) === String(value);
-  }, [highlightedValue, value]);
-  useEffect(() => {
-    if (isHighlighted && optionRef.current) {
-      optionRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    }
-  }, [isHighlighted]);
-  const handleClick = () => {
-    if (readOnly2) {
-      setOpen(false);
-      return;
-    }
-    if (enabled2) {
-      onChange(value);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: optionRef,
-      role: "option",
-      "aria-disabled": !enabled2,
-      "aria-selected": selected2,
-      className: classnames(styles$K.multiSelectOption, {
-        [styles$K.disabledOption]: !enabled2,
-        [styles$K.highlighted]: isHighlighted
-      }),
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onClick: handleClick,
-      "data-state": selected2 ? "checked" : void 0,
-      children: /* @__PURE__ */ jsx("div", { className: styles$K.multiSelectOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2 }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        children || label2,
-        selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
-      ] }) })
-    }
-  );
-}
 function SelectOptionItem(option) {
   const {
     value,
@@ -21732,19 +22009,19 @@ function SelectOptionItem(option) {
     }
   );
 }
-const themeVars$q = `'{"gap-RadioGroupOption": "var(--xmlui-gap-RadioGroupOption)", "borderWidth-RadioGroupOption": "var(--xmlui-borderWidth-RadioGroupOption)", "borderWidth-RadioGroupOption-validation": "var(--xmlui-borderWidth-RadioGroupOption-validation)", "Input:borderColor-RadioGroupOption--default": "var(--xmlui-borderColor-RadioGroupOption--default)", "Input:borderColor-checked-RadioGroupOption": "var(--xmlui-borderColor-checked-RadioGroupOption)", "Input:borderColor-RadioGroupOption--default--hover": "var(--xmlui-borderColor-RadioGroupOption--default--hover)", "Input:borderColor-RadioGroupOption--default--active": "var(--xmlui-borderColor-RadioGroupOption--default--active)", "Input:borderColor-RadioGroupOption--disabled": "var(--xmlui-borderColor-RadioGroupOption--disabled)", "Input:borderColor-RadioGroupOption--error": "var(--xmlui-borderColor-RadioGroupOption--error)", "Input:borderColor-RadioGroupOption--warning": "var(--xmlui-borderColor-RadioGroupOption--warning)", "Input:borderColor-RadioGroupOption--success": "var(--xmlui-borderColor-RadioGroupOption--success)", "Input:backgroundColor-RadioGroupOption--default": "var(--xmlui-backgroundColor-RadioGroupOption--default)", "Input:backgroundColor-checked-RadioGroupOption": "var(--xmlui-backgroundColor-checked-RadioGroupOption)", "Input:backgroundColor-checked-RadioGroupOption--disabled": "var(--xmlui-backgroundColor-checked-RadioGroupOption--disabled)", "Input:color-RadioGroupOption--disabled": "var(--xmlui-color-RadioGroupOption--disabled)", "Input:fontSize-RadioGroupOption": "var(--xmlui-fontSize-RadioGroupOption)", "Input:fontWeight-RadioGroupOption": "var(--xmlui-fontWeight-RadioGroupOption)", "Input:textColor-RadioGroupOption--default": "var(--xmlui-textColor-RadioGroupOption--default)", "Input:textColor-RadioGroupOption--error": "var(--xmlui-textColor-RadioGroupOption--error)", "Input:textColor-RadioGroupOption--warning": "var(--xmlui-textColor-RadioGroupOption--warning)", "Input:textColor-RadioGroupOption--success": "var(--xmlui-textColor-RadioGroupOption--success)", "Input:outlineWidth-RadioGroupOption--focus": "var(--xmlui-outlineWidth-RadioGroupOption--focus)", "Input:outlineColor-RadioGroupOption--focus": "var(--xmlui-outlineColor-RadioGroupOption--focus)", "Input:outlineStyle-RadioGroupOption--focus": "var(--xmlui-outlineStyle-RadioGroupOption--focus)", "Input:outlineOffset-RadioGroupOption--focus": "var(--xmlui-outlineOffset-RadioGroupOption--focus)"}'`;
-const radioGroupContainer = "_radioGroupContainer_drdje_14";
-const radioOptionContainer = "_radioOptionContainer_drdje_20";
-const radioOption = "_radioOption_drdje_20";
-const checked = "_checked_drdje_54";
-const error$8 = "_error_drdje_54";
-const warning$9 = "_warning_drdje_54";
-const valid$8 = "_valid_drdje_54";
-const indicator$3 = "_indicator_drdje_69";
-const disabled$6 = "_disabled_drdje_77";
-const itemContainer$1 = "_itemContainer_drdje_80";
-const optionLabel = "_optionLabel_drdje_87";
-const label = "_label_drdje_91";
+const themeVars$q = `'{"gap-RadioGroupOption": "var(--xmlui-gap-RadioGroupOption)", "borderWidth-RadioGroupOption": "var(--xmlui-borderWidth-RadioGroupOption)", "borderWidth-RadioGroupOption-validation": "var(--xmlui-borderWidth-RadioGroupOption-validation)", "Input:borderColor-RadioGroupOption--default": "var(--xmlui-borderColor-RadioGroupOption--default)", "Input:borderColor-checked-RadioGroupOption": "var(--xmlui-borderColor-checked-RadioGroupOption)", "Input:borderColor-RadioGroupOption--default--hover": "var(--xmlui-borderColor-RadioGroupOption--default--hover)", "Input:borderColor-RadioGroupOption--default--active": "var(--xmlui-borderColor-RadioGroupOption--default--active)", "Input:borderColor-RadioGroupOption--disabled": "var(--xmlui-borderColor-RadioGroupOption--disabled)", "Input:borderColor-RadioGroupOption--error": "var(--xmlui-borderColor-RadioGroupOption--error)", "Input:borderColor-RadioGroupOption--warning": "var(--xmlui-borderColor-RadioGroupOption--warning)", "Input:borderColor-RadioGroupOption--success": "var(--xmlui-borderColor-RadioGroupOption--success)", "Input:backgroundColor-RadioGroupOption--default": "var(--xmlui-backgroundColor-RadioGroupOption--default)", "Input:backgroundColor-checked-RadioGroupOption": "var(--xmlui-backgroundColor-checked-RadioGroupOption)", "Input:backgroundColor-checked-RadioGroupOption--disabled": "var(--xmlui-backgroundColor-checked-RadioGroupOption--disabled)", "Input:textColor-RadioGroupOption--disabled": "var(--xmlui-textColor-RadioGroupOption--disabled)", "Input:fontSize-RadioGroupOption": "var(--xmlui-fontSize-RadioGroupOption)", "Input:fontWeight-RadioGroupOption": "var(--xmlui-fontWeight-RadioGroupOption)", "Input:textColor-RadioGroupOption--default": "var(--xmlui-textColor-RadioGroupOption--default)", "Input:textColor-RadioGroupOption--error": "var(--xmlui-textColor-RadioGroupOption--error)", "Input:textColor-RadioGroupOption--warning": "var(--xmlui-textColor-RadioGroupOption--warning)", "Input:textColor-RadioGroupOption--success": "var(--xmlui-textColor-RadioGroupOption--success)", "Input:outlineWidth-RadioGroupOption--focus": "var(--xmlui-outlineWidth-RadioGroupOption--focus)", "Input:outlineColor-RadioGroupOption--focus": "var(--xmlui-outlineColor-RadioGroupOption--focus)", "Input:outlineStyle-RadioGroupOption--focus": "var(--xmlui-outlineStyle-RadioGroupOption--focus)", "Input:outlineOffset-RadioGroupOption--focus": "var(--xmlui-outlineOffset-RadioGroupOption--focus)"}'`;
+const radioGroupContainer = "_radioGroupContainer_1iwha_14";
+const radioOptionContainer = "_radioOptionContainer_1iwha_20";
+const radioOption = "_radioOption_1iwha_20";
+const checked = "_checked_1iwha_54";
+const error$8 = "_error_1iwha_54";
+const warning$9 = "_warning_1iwha_54";
+const valid$8 = "_valid_1iwha_54";
+const indicator$3 = "_indicator_1iwha_69";
+const disabled$6 = "_disabled_1iwha_77";
+const itemContainer$1 = "_itemContainer_1iwha_80";
+const optionLabel = "_optionLabel_1iwha_87";
+const label = "_label_1iwha_91";
 const styles$J = {
   themeVars: themeVars$q,
   radioGroupContainer,
@@ -21867,7 +22144,9 @@ const RadioGroup = forwardRef(function RadioGroup2({
   }, [autofocus]);
   useCallback(() => {
     if (radioGroupRef.current) {
-      const selectedRadio = radioGroupRef.current.querySelector('[role="radio"][aria-checked="true"]');
+      const selectedRadio = radioGroupRef.current.querySelector(
+        '[role="radio"][aria-checked="true"]'
+      );
       if (selectedRadio) {
         selectedRadio.focus();
         return;
@@ -21963,8 +22242,20 @@ const RadioGroupOption = ({
     }),
     [enabled2, radioGroupContext, value]
   );
-  const item2 = useMemo(
-    () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  const item2 = useMemo(() => {
+    if (optionRenderer) {
+      return /* @__PURE__ */ jsx(
+        UnwrappedRadioItem,
+        {
+          id,
+          value,
+          checked: value === radioGroupContext.value,
+          disabled: !enabled2,
+          statusStyles
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         UnwrappedRadioItem,
         {
@@ -21976,16 +22267,15 @@ const RadioGroupOption = ({
         }
       ),
       /* @__PURE__ */ jsx("label", { htmlFor: id, className: classnames(styles$J.label, statusStyles), children: label2 ?? value })
-    ] }),
-    [enabled2, id, label2, statusStyles, value, radioGroupContext]
-  );
+    ] });
+  }, [enabled2, id, label2, optionRenderer, statusStyles, value, radioGroupContext]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: classnames(styles$J.radioOptionContainer, className),
       style: style2,
       "data-radio-item": true,
-      children: !!optionRenderer ? /* @__PURE__ */ jsxs("label", { className: styles$J.optionLabel, children: [
+      children: !!optionRenderer ? /* @__PURE__ */ jsxs("label", { htmlFor: id, className: styles$J.optionLabel, children: [
         /* @__PURE__ */ jsx("div", { className: styles$J.itemContainer, children: item2 }),
         optionRenderer({
           $checked: value === radioGroupContext.value,
@@ -23146,24 +23436,24 @@ const FormWithContextVar = forwardRef(function({
 });
 FormWithContextVar.displayName = "FormWithContextVar";
 const themeVars$n = `'{"border-AutoComplete": "var(--xmlui-border-AutoComplete)", "borderHorizontal-AutoComplete": "var(--xmlui-borderHorizontal-AutoComplete, var(--xmlui-border-AutoComplete))", "borderVertical-AutoComplete": "var(--xmlui-borderVertical-AutoComplete, var(--xmlui-border-AutoComplete))", "borderLeft-AutoComplete": "var(--xmlui-borderLeft-AutoComplete, var(--xmlui-borderHorizontal-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderRight-AutoComplete": "var(--xmlui-borderRight-AutoComplete, var(--xmlui-borderHorizontal-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderTop-AutoComplete": "var(--xmlui-borderTop-AutoComplete, var(--xmlui-borderVertical-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderBottom-AutoComplete": "var(--xmlui-borderBottom-AutoComplete, var(--xmlui-borderVertical-AutoComplete, var(--xmlui-border-AutoComplete)))", "borderWidth-AutoComplete": "var(--xmlui-borderWidth-AutoComplete)", "borderHorizontalWidth-AutoComplete": "var(--xmlui-borderHorizontalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete))", "borderLeftWidth-AutoComplete": "var(--xmlui-borderLeftWidth-AutoComplete, var(--xmlui-borderHorizontalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderRightWidth-AutoComplete": "var(--xmlui-borderRightWidth-AutoComplete, var(--xmlui-borderHorizontalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderVerticalWidth-AutoComplete": "var(--xmlui-borderVerticalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete))", "borderTopWidth-AutoComplete": "var(--xmlui-borderTopWidth-AutoComplete, var(--xmlui-borderVerticalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderBottomWidth-AutoComplete": "var(--xmlui-borderBottomWidth-AutoComplete, var(--xmlui-borderVerticalWidth-AutoComplete, var(--xmlui-borderWidth-AutoComplete)))", "borderStyle-AutoComplete": "var(--xmlui-borderStyle-AutoComplete)", "borderHorizontalStyle-AutoComplete": "var(--xmlui-borderHorizontalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete))", "borderLeftStyle-AutoComplete": "var(--xmlui-borderLeftStyle-AutoComplete, var(--xmlui-borderHorizontalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderRightStyle-AutoComplete": "var(--xmlui-borderRightStyle-AutoComplete, var(--xmlui-borderHorizontalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderVerticalStyle-AutoComplete": "var(--xmlui-borderVerticalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete))", "borderTopStyle-AutoComplete": "var(--xmlui-borderTopStyle-AutoComplete, var(--xmlui-borderVerticalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderBottomStyle-AutoComplete": "var(--xmlui-borderBottomStyle-AutoComplete, var(--xmlui-borderVerticalStyle-AutoComplete, var(--xmlui-borderStyle-AutoComplete)))", "borderColor-AutoComplete": "var(--xmlui-borderColor-AutoComplete)", "borderHorizontalColor-AutoComplete": "var(--xmlui-borderHorizontalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete))", "borderLeftColor-AutoComplete": "var(--xmlui-borderLeftColor-AutoComplete, var(--xmlui-borderHorizontalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderRightColor-AutoComplete": "var(--xmlui-borderRightColor-AutoComplete, var(--xmlui-borderHorizontalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderVerticalColor-AutoComplete": "var(--xmlui-borderVerticalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete))", "borderTopColor-AutoComplete": "var(--xmlui-borderTopColor-AutoComplete, var(--xmlui-borderVerticalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderBottomColor-AutoComplete": "var(--xmlui-borderBottomColor-AutoComplete, var(--xmlui-borderVerticalColor-AutoComplete, var(--xmlui-borderColor-AutoComplete)))", "borderStartStartRadius-AutoComplete": "var(--xmlui-borderStartStartRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "borderStartEndRadius-AutoComplete": "var(--xmlui-borderStartEndRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "borderEndStartRadius-AutoComplete": "var(--xmlui-borderEndStartRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "borderEndEndRadius-AutoComplete": "var(--xmlui-borderEndEndRadius-AutoComplete, var(--xmlui-borderRadius-AutoComplete))", "padding-AutoComplete": "var(--xmlui-padding-AutoComplete)", "paddingHorizontal-AutoComplete": "var(--xmlui-paddingHorizontal-AutoComplete, var(--xmlui-padding-AutoComplete))", "paddingVertical-AutoComplete": "var(--xmlui-paddingVertical-AutoComplete, var(--xmlui-padding-AutoComplete))", "paddingLeft-AutoComplete": "var(--xmlui-paddingLeft-AutoComplete, var(--xmlui-paddingHorizontal-AutoComplete, var(--xmlui-padding-AutoComplete)))", "paddingRight-AutoComplete": "var(--xmlui-paddingRight-AutoComplete, var(--xmlui-paddingHorizontal-AutoComplete, var(--xmlui-padding-AutoComplete)))", "paddingTop-AutoComplete": "var(--xmlui-paddingTop-AutoComplete, var(--xmlui-paddingVertical-AutoComplete, var(--xmlui-padding-AutoComplete)))", "paddingBottom-AutoComplete": "var(--xmlui-paddingBottom-AutoComplete, var(--xmlui-paddingVertical-AutoComplete, var(--xmlui-padding-AutoComplete)))", "padding-item-AutoComplete": "var(--xmlui-padding-item-AutoComplete)", "paddingHorizontal-item-AutoComplete": "var(--xmlui-paddingHorizontal-item-AutoComplete, var(--xmlui-padding-item-AutoComplete))", "paddingVertical-item-AutoComplete": "var(--xmlui-paddingVertical-item-AutoComplete, var(--xmlui-padding-item-AutoComplete))", "paddingLeft-item-AutoComplete": "var(--xmlui-paddingLeft-item-AutoComplete, var(--xmlui-paddingHorizontal-item-AutoComplete, var(--xmlui-padding-item-AutoComplete)))", "paddingRight-item-AutoComplete": "var(--xmlui-paddingRight-item-AutoComplete, var(--xmlui-paddingHorizontal-item-AutoComplete, var(--xmlui-padding-item-AutoComplete)))", "paddingTop-item-AutoComplete": "var(--xmlui-paddingTop-item-AutoComplete, var(--xmlui-paddingVertical-item-AutoComplete, var(--xmlui-padding-item-AutoComplete)))", "paddingBottom-item-AutoComplete": "var(--xmlui-paddingBottom-item-AutoComplete, var(--xmlui-paddingVertical-item-AutoComplete, var(--xmlui-padding-item-AutoComplete)))", "Input:borderRadius-AutoComplete--default": "var(--xmlui-borderRadius-AutoComplete--default)", "Input:borderColor-AutoComplete--default": "var(--xmlui-borderColor-AutoComplete--default)", "Input:borderWidth-AutoComplete--default": "var(--xmlui-borderWidth-AutoComplete--default)", "Input:borderStyle-AutoComplete--default": "var(--xmlui-borderStyle-AutoComplete--default)", "Input:fontSize-AutoComplete--default": "var(--xmlui-fontSize-AutoComplete--default)", "Input:backgroundColor-AutoComplete--default": "var(--xmlui-backgroundColor-AutoComplete--default)", "Input:boxShadow-AutoComplete--default": "var(--xmlui-boxShadow-AutoComplete--default)", "Input:textColor-AutoComplete--default": "var(--xmlui-textColor-AutoComplete--default)", "Input:borderColor-AutoComplete--default--hover": "var(--xmlui-borderColor-AutoComplete--default--hover)", "Input:backgroundColor-AutoComplete--default--hover": "var(--xmlui-backgroundColor-AutoComplete--default--hover)", "Input:boxShadow-AutoComplete--default--hover": "var(--xmlui-boxShadow-AutoComplete--default--hover)", "Input:textColor-AutoComplete--default--hover": "var(--xmlui-textColor-AutoComplete--default--hover)", "Input:textColor-placeholder-AutoComplete--default": "var(--xmlui-textColor-placeholder-AutoComplete--default)", "Input:fontSize-placeholder-AutoComplete--default": "var(--xmlui-fontSize-placeholder-AutoComplete--default)", "Input:borderRadius-AutoComplete--error": "var(--xmlui-borderRadius-AutoComplete--error)", "Input:borderColor-AutoComplete--error": "var(--xmlui-borderColor-AutoComplete--error)", "Input:borderWidth-AutoComplete--error": "var(--xmlui-borderWidth-AutoComplete--error)", "Input:borderStyle-AutoComplete--error": "var(--xmlui-borderStyle-AutoComplete--error)", "Input:fontSize-AutoComplete--error": "var(--xmlui-fontSize-AutoComplete--error)", "Input:backgroundColor-AutoComplete--error": "var(--xmlui-backgroundColor-AutoComplete--error)", "Input:boxShadow-AutoComplete--error": "var(--xmlui-boxShadow-AutoComplete--error)", "Input:textColor-AutoComplete--error": "var(--xmlui-textColor-AutoComplete--error)", "Input:borderColor-AutoComplete--error--hover": "var(--xmlui-borderColor-AutoComplete--error--hover)", "Input:backgroundColor-AutoComplete--error--hover": "var(--xmlui-backgroundColor-AutoComplete--error--hover)", "Input:boxShadow-AutoComplete--error--hover": "var(--xmlui-boxShadow-AutoComplete--error--hover)", "Input:textColor-AutoComplete--error--hover": "var(--xmlui-textColor-AutoComplete--error--hover)", "Input:textColor-placeholder-AutoComplete--error": "var(--xmlui-textColor-placeholder-AutoComplete--error)", "Input:fontSize-placeholder-AutoComplete--error": "var(--xmlui-fontSize-placeholder-AutoComplete--error)", "Input:borderRadius-AutoComplete--warning": "var(--xmlui-borderRadius-AutoComplete--warning)", "Input:borderColor-AutoComplete--warning": "var(--xmlui-borderColor-AutoComplete--warning)", "Input:borderWidth-AutoComplete--warning": "var(--xmlui-borderWidth-AutoComplete--warning)", "Input:borderStyle-AutoComplete--warning": "var(--xmlui-borderStyle-AutoComplete--warning)", "Input:fontSize-AutoComplete--warning": "var(--xmlui-fontSize-AutoComplete--warning)", "Input:backgroundColor-AutoComplete--warning": "var(--xmlui-backgroundColor-AutoComplete--warning)", "Input:boxShadow-AutoComplete--warning": "var(--xmlui-boxShadow-AutoComplete--warning)", "Input:textColor-AutoComplete--warning": "var(--xmlui-textColor-AutoComplete--warning)", "Input:borderColor-AutoComplete--warning--hover": "var(--xmlui-borderColor-AutoComplete--warning--hover)", "Input:backgroundColor-AutoComplete--warning--hover": "var(--xmlui-backgroundColor-AutoComplete--warning--hover)", "Input:boxShadow-AutoComplete--warning--hover": "var(--xmlui-boxShadow-AutoComplete--warning--hover)", "Input:textColor-AutoComplete--warning--hover": "var(--xmlui-textColor-AutoComplete--warning--hover)", "Input:textColor-placeholder-AutoComplete--warning": "var(--xmlui-textColor-placeholder-AutoComplete--warning)", "Input:fontSize-placeholder-AutoComplete--warning": "var(--xmlui-fontSize-placeholder-AutoComplete--warning)", "Input:borderRadius-AutoComplete--success": "var(--xmlui-borderRadius-AutoComplete--success)", "Input:borderColor-AutoComplete--success": "var(--xmlui-borderColor-AutoComplete--success)", "Input:borderWidth-AutoComplete--success": "var(--xmlui-borderWidth-AutoComplete--success)", "Input:borderStyle-AutoComplete--success": "var(--xmlui-borderStyle-AutoComplete--success)", "Input:fontSize-AutoComplete--success": "var(--xmlui-fontSize-AutoComplete--success)", "Input:backgroundColor-AutoComplete--success": "var(--xmlui-backgroundColor-AutoComplete--success)", "Input:boxShadow-AutoComplete--success": "var(--xmlui-boxShadow-AutoComplete--success)", "Input:textColor-AutoComplete--success": "var(--xmlui-textColor-AutoComplete--success)", "Input:borderColor-AutoComplete--success--hover": "var(--xmlui-borderColor-AutoComplete--success--hover)", "Input:backgroundColor-AutoComplete--success--hover": "var(--xmlui-backgroundColor-AutoComplete--success--hover)", "Input:boxShadow-AutoComplete--success--hover": "var(--xmlui-boxShadow-AutoComplete--success--hover)", "Input:textColor-AutoComplete--success--hover": "var(--xmlui-textColor-AutoComplete--success--hover)", "Input:textColor-placeholder-AutoComplete--success": "var(--xmlui-textColor-placeholder-AutoComplete--success)", "Input:fontSize-placeholder-AutoComplete--success": "var(--xmlui-fontSize-placeholder-AutoComplete--success)", "Input:gap-adornment-AutoComplete": "var(--xmlui-gap-adornment-AutoComplete)", "Input:backgroundColor-AutoComplete--disabled": "var(--xmlui-backgroundColor-AutoComplete--disabled)", "Input:textColor-AutoComplete--disabled": "var(--xmlui-textColor-AutoComplete--disabled)", "Input:borderColor-AutoComplete--disabled": "var(--xmlui-borderColor-AutoComplete--disabled)", "Input:outlineWidth-AutoComplete--focus": "var(--xmlui-outlineWidth-AutoComplete--focus)", "Input:outlineColor-AutoComplete--focus": "var(--xmlui-outlineColor-AutoComplete--focus)", "Input:outlineStyle-AutoComplete--focus": "var(--xmlui-outlineStyle-AutoComplete--focus)", "Input:outlineOffset-AutoComplete--focus": "var(--xmlui-outlineOffset-AutoComplete--focus)", "paddingVertical-AutoComplete-badge": "var(--xmlui-paddingVertical-AutoComplete-badge)", "paddingHorizontal-AutoComplete-badge": "var(--xmlui-paddingHorizontal-AutoComplete-badge)", "borderRadius-AutoComplete-badge": "var(--xmlui-borderRadius-AutoComplete-badge)", "Input:fontSize-AutoComplete-badge": "var(--xmlui-fontSize-AutoComplete-badge)", "Input:backgroundColor-AutoComplete-badge": "var(--xmlui-backgroundColor-AutoComplete-badge)", "Input:textColor-AutoComplete-badge": "var(--xmlui-textColor-AutoComplete-badge)", "Input:backgroundColor-AutoComplete-badge--hover": "var(--xmlui-backgroundColor-AutoComplete-badge--hover)", "Input:textColor-AutoComplete-badge--hover": "var(--xmlui-textColor-AutoComplete-badge--hover)", "Input:backgroundColor-AutoComplete-badge--active": "var(--xmlui-backgroundColor-AutoComplete-badge--active)", "Input:textColor-AutoComplete-badge--active": "var(--xmlui-textColor-AutoComplete-badge--active)", "Input:textColor-placeholder-AutoComplete": "var(--xmlui-textColor-placeholder-AutoComplete)", "Input:borderRadius-menu-AutoComplete": "var(--xmlui-borderRadius-menu-AutoComplete)", "Input:borderWidth-menu-AutoComplete": "var(--xmlui-borderWidth-menu-AutoComplete)", "Input:borderColor-menu-AutoComplete": "var(--xmlui-borderColor-menu-AutoComplete)", "Input:backgroundColor-menu-AutoComplete": "var(--xmlui-backgroundColor-menu-AutoComplete)", "Input:boxShadow-menu-AutoComplete": "var(--xmlui-boxShadow-menu-AutoComplete)", "backgroundColor-item-AutoComplete": "var(--xmlui-backgroundColor-item-AutoComplete)", "backgroundColor-item-AutoComplete--active": "var(--xmlui-backgroundColor-item-AutoComplete--active)", "backgroundColor-item-AutoComplete--hover": "var(--xmlui-backgroundColor-item-AutoComplete--hover)", "textColor-item-AutoComplete--disabled": "var(--xmlui-textColor-item-AutoComplete--disabled)"}'`;
-const command = "_command_qbjl0_14";
-const badgeListWrapper = "_badgeListWrapper_qbjl0_20";
-const error$5 = "_error_qbjl0_51";
-const warning$6 = "_warning_qbjl0_71";
-const valid$5 = "_valid_qbjl0_91";
-const disabled$4 = "_disabled_qbjl0_111";
-const focused = "_focused_qbjl0_118";
-const badgeList = "_badgeList_qbjl0_20";
-const inputWrapper = "_inputWrapper_qbjl0_131";
-const badge = "_badge_qbjl0_20";
-const commandInput = "_commandInput_qbjl0_163";
-const actions = "_actions_qbjl0_178";
-const action = "_action_qbjl0_178";
-const autoCompleteEmpty = "_autoCompleteEmpty_qbjl0_186";
-const commandList = "_commandList_qbjl0_195";
-const autoCompleteOption = "_autoCompleteOption_qbjl0_207";
-const highlighted = "_highlighted_qbjl0_224";
-const disabledOption = "_disabledOption_qbjl0_227";
+const command = "_command_57zg7_14";
+const badgeListWrapper = "_badgeListWrapper_57zg7_20";
+const error$5 = "_error_57zg7_51";
+const warning$6 = "_warning_57zg7_71";
+const valid$5 = "_valid_57zg7_91";
+const disabled$4 = "_disabled_57zg7_111";
+const focused = "_focused_57zg7_117";
+const badgeList = "_badgeList_57zg7_20";
+const inputWrapper = "_inputWrapper_57zg7_130";
+const badge = "_badge_57zg7_20";
+const commandInput = "_commandInput_57zg7_162";
+const actions = "_actions_57zg7_176";
+const action = "_action_57zg7_176";
+const autoCompleteEmpty = "_autoCompleteEmpty_57zg7_187";
+const commandList = "_commandList_57zg7_196";
+const autoCompleteOption = "_autoCompleteOption_57zg7_208";
+const highlighted = "_highlighted_57zg7_225";
+const disabledOption = "_disabledOption_57zg7_228";
 const styles$F = {
   themeVars: themeVars$n,
   command,
@@ -23181,7 +23471,7 @@ const styles$F = {
   action,
   autoCompleteEmpty,
   commandList,
-  "fade-in": "_fade-in_qbjl0_1",
+  "fade-in": "_fade-in_57zg7_1",
   autoCompleteOption,
   highlighted,
   disabledOption
@@ -23192,7 +23482,7 @@ const AutoCompleteContext = createContext({
   },
   inputValue: "",
   searchTerm: "",
-  options: /* @__PURE__ */ new Set(),
+  options: [],
   open: false,
   setOpen: (open) => {
   },
@@ -23207,7 +23497,7 @@ function useAutoComplete() {
 const PART_LIST_WRAPPER = "listWrapper";
 function isOptionsExist(options2, newOptions) {
   return newOptions.some(
-    (option) => Array.from(options2).some((o) => o.value === option.value || o.label === option.label)
+    (option) => options2.some((o) => o.value === option.value || o.label === option.label)
   );
 }
 const defaultProps$A = {
@@ -23256,7 +23546,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
   const [referenceElement, setReferenceElement] = useState(null);
   const inputRef = useRef(null);
   const [open, setOpen] = useState(initiallyOpen);
-  const [options2, setOptions] = useState(/* @__PURE__ */ new Set());
+  const [options2, setOptions] = useState([]);
   const [inputValue, setInputValue] = useState("");
   const { root: root2 } = useTheme();
   const [width, setWidth] = useState(0);
@@ -23266,17 +23556,17 @@ const AutoComplete = forwardRef(function AutoComplete2({
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const filteredOptions = useMemo(() => {
     if (!searchTerm || searchTerm.trim() === "") {
-      return Array.from(options2);
+      return options2;
     }
     const searchLower = searchTerm.toLowerCase();
-    return Array.from(options2).filter((option) => {
+    return options2.filter((option) => {
       const extendedValue = option.value + " " + option.label + " " + (option.keywords || []).join(" ");
       return extendedValue.toLowerCase().includes(searchLower);
     });
   }, [options2, searchTerm]);
   const shouldShowCreatable = useMemo(() => {
     if (!creatable || !searchTerm || searchTerm.trim() === "") return false;
-    const searchTermExists = Array.from(options2).some(
+    const searchTermExists = options2.some(
       (option) => option.value === searchTerm || option.label === searchTerm
     );
     if (searchTermExists) return false;
@@ -23301,17 +23591,16 @@ const AutoComplete = forwardRef(function AutoComplete2({
     };
   }, [referenceElement]);
   const selectedValue = useMemo(() => {
-    const optionsArray = Array.from(options2);
     if (Array.isArray(value)) {
       if (value.length === 0) return [];
-      return optionsArray.filter((o) => value.includes(`${o.value}`));
+      return options2.filter((o) => value.includes(`${o.value}`));
     }
-    return optionsArray.find((o) => `${o.value}` === `${value}`);
+    return options2.find((o) => `${o.value}` === `${value}`);
   }, [value, options2]);
   const toggleOption = useCallback(
     (selectedItem) => {
       if (selectedItem === "") return;
-      const option = Array.from(options2).find((opt) => opt.value === selectedItem);
+      const option = options2.find((opt) => opt.value === selectedItem);
       if (option && option.enabled === false) return;
       const newSelectedValue = multi ? Array.isArray(value) ? value.includes(selectedItem) ? value.filter((v) => v !== selectedItem) : [...value, selectedItem] : [selectedItem] : selectedItem === value ? null : selectedItem;
       updateState({ value: newSelectedValue });
@@ -23332,7 +23621,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
       setInputValue(selectedValue?.label || "");
       setSearchTerm("");
     }
-  }, [multi, selectedValue]);
+  }, [selectedValue]);
   const clearValue = useCallback(() => {
     const newValue = multi ? [] : "";
     setInputValue("");
@@ -23340,22 +23629,10 @@ const AutoComplete = forwardRef(function AutoComplete2({
     onDidChange(newValue);
   }, [multi, updateState, onDidChange]);
   const onOptionAdd = useCallback((option) => {
-    setOptions((prev) => {
-      const newSet = new Set(prev);
-      const existing = Array.from(prev).find((opt) => opt.value === option.value);
-      if (existing) {
-        newSet.delete(existing);
-      }
-      newSet.add(option);
-      return newSet;
-    });
+    setOptions((prev) => [...prev, option]);
   }, []);
   const onOptionRemove = useCallback((option) => {
-    setOptions((prev) => {
-      const optionsSet = new Set(prev);
-      optionsSet.delete(option);
-      return optionsSet;
-    });
+    setOptions((prev) => prev.filter((opt) => opt.value !== option.value));
   }, []);
   const allItems = useMemo(() => {
     const items = [];
@@ -23540,7 +23817,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
       {
         open,
         onOpenChange: (isOpen) => {
-          if (readOnly2) return;
+          if (readOnly2 || !enabled2) return;
           setOpen(isOpen);
           if (!isOpen) {
             setSelectedIndex(-1);
@@ -23564,7 +23841,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
               ),
               "aria-expanded": open,
               onClick: (event) => {
-                if (readOnly2) return;
+                if (readOnly2 || !enabled2) return;
                 if (multi && open) {
                   return;
                 }
@@ -23652,9 +23929,10 @@ const AutoComplete = forwardRef(function AutoComplete2({
                     /* @__PURE__ */ jsx(
                       "span",
                       {
-                        className: styles$F.action,
+                        className: classnames(styles$F.action, { [styles$F.disabled]: !enabled2 || readOnly2 }),
+                        "aria-disabled": !enabled2 || readOnly2,
                         onClick: () => {
-                          if (readOnly2) return;
+                          if (readOnly2 || !enabled2) return;
                           setOpen(!open);
                           inputRef.current?.focus();
                         },
@@ -23666,62 +23944,45 @@ const AutoComplete = forwardRef(function AutoComplete2({
               ]
             }
           ) }) }),
-          open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Portal$1, { container: root2, children: /* @__PURE__ */ jsx(
             PopoverContent,
             {
               style: { width, height: dropdownHeight },
               className: styles$F.popoverContent,
               align: "start",
               onOpenAutoFocus: (e) => e.preventDefault(),
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  role: "listbox",
-                  className: styles$F.commandList,
-                  style: { height: dropdownHeight },
-                  children: searchTerm ? (
-                    // When searching, show only filtered options
-                    /* @__PURE__ */ jsxs(Fragment, { children: [
-                      filteredOptions.length === 0 && !shouldShowCreatable && /* @__PURE__ */ jsx("div", { children: emptyListNode }),
-                      shouldShowCreatable && /* @__PURE__ */ jsx(
-                        CreatableItem,
-                        {
-                          onNewItem: onItemCreated,
-                          isHighlighted: selectedIndex === 0
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("div", { children: filteredOptions.map(({ value: value2, label: label2, enabled: enabled22, keywords }, index) => {
-                        const itemIndex = shouldShowCreatable ? index + 1 : index;
-                        return /* @__PURE__ */ jsx(
-                          AutoCompleteOption,
-                          {
-                            value: value2,
-                            label: label2,
-                            enabled: enabled22,
-                            keywords,
-                            readOnly: readOnly2,
-                            isHighlighted: selectedIndex === itemIndex,
-                            itemIndex
-                          },
-                          value2
-                        );
-                      }) })
-                    ] })
-                  ) : (
-                    // When not searching, show all children directly (includes Options and other components like Button)
-                    /* @__PURE__ */ jsx(OptionTypeProvider, { Component: VisibleAutoCompleteOption, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-                      children,
-                      options2.size === 0 && /* @__PURE__ */ jsx("div", { children: emptyListNode })
-                    ] }) })
-                  )
-                }
-              )
+              children: /* @__PURE__ */ jsx("div", { role: "listbox", className: styles$F.commandList, style: { height: dropdownHeight }, children: searchTerm ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                filteredOptions.map(({ value: value2, label: label2, enabled: enabled22, keywords }, index) => {
+                  const itemIndex = shouldShowCreatable ? index + 1 : index;
+                  return /* @__PURE__ */ jsx(
+                    AutoCompleteOption,
+                    {
+                      value: value2,
+                      label: label2,
+                      enabled: enabled22,
+                      keywords,
+                      readOnly: readOnly2,
+                      isHighlighted: selectedIndex === itemIndex,
+                      itemIndex
+                    },
+                    value2
+                  );
+                }),
+                shouldShowCreatable && /* @__PURE__ */ jsx(
+                  CreatableItem,
+                  {
+                    onNewItem: onItemCreated,
+                    isHighlighted: selectedIndex === 0
+                  }
+                ),
+                filteredOptions.length === 0 && !shouldShowCreatable && /* @__PURE__ */ jsx("div", { children: emptyListNode })
+              ] }) : /* @__PURE__ */ jsx(OptionTypeProvider, { Component: AutoCompleteOption, children }) })
             }
           ) })
         ]
       }
     ),
-    !open && /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx(OptionTypeProvider, { Component: HiddenOption, children }) })
+    /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx(OptionTypeProvider, { Component: HiddenOption, children }) })
   ] }) });
 });
 function CreatableItem({ onNewItem, isHighlighted = false }) {
@@ -23765,65 +24026,6 @@ function CreatableItem({ onNewItem, isHighlighted = false }) {
   }
   return /* @__PURE__ */ jsx("span", { style: { display: "none" } });
 }
-function VisibleAutoCompleteOption(option) {
-  const { value, label: label2, enabled: enabled2 = true, children } = option;
-  const { onOptionAdd } = useOption();
-  const {
-    value: selectedValue,
-    onChange,
-    multi,
-    setOpen,
-    readOnly: readOnly2,
-    // Use readOnly from AutoComplete context value
-    optionRenderer
-  } = useAutoComplete();
-  const opt = useMemo(() => {
-    return {
-      ...option,
-      label: label2 ?? "",
-      keywords: option.keywords || [label2 ?? ""]
-    };
-  }, [option, label2]);
-  useEffect(() => {
-    onOptionAdd(opt);
-  }, [opt, onOptionAdd]);
-  const selected2 = multi ? selectedValue?.includes(value) : selectedValue === value;
-  const handleClick = () => {
-    if (readOnly2) {
-      setOpen(false);
-      return;
-    }
-    if (enabled2) {
-      onChange(value);
-      if (!multi) {
-        setOpen(false);
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "option",
-      "aria-disabled": !enabled2,
-      "aria-selected": selected2,
-      className: classnames(styles$F.autoCompleteOption, {
-        [styles$F.disabledOption]: !enabled2
-      }),
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onClick: handleClick,
-      children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: styles$F.autoCompleteOptionContent, children }),
-        selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
-      ] }) : optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2 }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: styles$F.autoCompleteOptionContent, children: label2 }),
-        selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
-      ] })
-    }
-  );
-}
 function AutoCompleteOption(option) {
   const {
     value,
@@ -24713,7 +24915,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-DoewYSkg.js");
+      const { initMock } = await import("./initMock-CP3zGYe3.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -24730,7 +24932,7 @@ function ApiInterceptorProvider({
           if (process.env.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-dwrAyq6l.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-DoewYSkg.js")
+              import("./initMock-CP3zGYe3.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -24767,7 +24969,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-dwrAyq6l.js"),
-            import("./initMock-DoewYSkg.js")
+            import("./initMock-CP3zGYe3.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -26765,7 +26967,7 @@ const Slider = forwardRef(
       thumbsRef.current = thumbsRef.current.slice(0, displayValue.length);
     }, [displayValue.length]);
     return /* @__PURE__ */ jsx("div", { ...rest, ref, style: style2, className: classnames(styles$E.sliderContainer, className), "data-slider-container": true, children: /* @__PURE__ */ jsxs(
-      Root,
+      Root$1,
       {
         ref: inputRef,
         minStepsBetweenThumbs,
@@ -26843,11 +27045,11 @@ const Slider = forwardRef(
   }
 );
 Slider.displayName = "Slider";
-const themeVars$g = `'{"Input:borderRadius-ColorPicker--default": "var(--xmlui-borderRadius-ColorPicker--default)", "Input:borderColor-ColorPicker--default": "var(--xmlui-borderColor-ColorPicker--default)", "Input:borderWidth-ColorPicker--default": "var(--xmlui-borderWidth-ColorPicker--default)", "Input:borderStyle-ColorPicker--default": "var(--xmlui-borderStyle-ColorPicker--default)", "Input:boxShadow-ColorPicker--default": "var(--xmlui-boxShadow-ColorPicker--default)", "Input:borderColor-ColorPicker--default--hover": "var(--xmlui-borderColor-ColorPicker--default--hover)", "Input:boxShadow-ColorPicker--default--hover": "var(--xmlui-boxShadow-ColorPicker--default--hover)", "Input:borderColor-ColorPicker--default--focus": "var(--xmlui-borderColor-ColorPicker--default--focus)", "Input:boxShadow-ColorPicker--default--focus": "var(--xmlui-boxShadow-ColorPicker--default--focus)", "Input:borderRadius-ColorPicker--error": "var(--xmlui-borderRadius-ColorPicker--error)", "Input:borderColor-ColorPicker--error": "var(--xmlui-borderColor-ColorPicker--error)", "Input:borderWidth-ColorPicker--error": "var(--xmlui-borderWidth-ColorPicker--error)", "Input:borderStyle-ColorPicker--error": "var(--xmlui-borderStyle-ColorPicker--error)", "Input:boxShadow-ColorPicker--error": "var(--xmlui-boxShadow-ColorPicker--error)", "Input:borderColor-ColorPicker--error--hover": "var(--xmlui-borderColor-ColorPicker--error--hover)", "Input:boxShadow-ColorPicker--error--hover": "var(--xmlui-boxShadow-ColorPicker--error--hover)", "Input:borderColor-ColorPicker--error--focus": "var(--xmlui-borderColor-ColorPicker--error--focus)", "Input:boxShadow-ColorPicker--error--focus": "var(--xmlui-boxShadow-ColorPicker--error--focus)", "Input:borderRadius-ColorPicker--warning": "var(--xmlui-borderRadius-ColorPicker--warning)", "Input:borderColor-ColorPicker--warning": "var(--xmlui-borderColor-ColorPicker--warning)", "Input:borderWidth-ColorPicker--warning": "var(--xmlui-borderWidth-ColorPicker--warning)", "Input:borderStyle-ColorPicker--warning": "var(--xmlui-borderStyle-ColorPicker--warning)", "Input:boxShadow-ColorPicker--warning": "var(--xmlui-boxShadow-ColorPicker--warning)", "Input:borderColor-ColorPicker--warning--hover": "var(--xmlui-borderColor-ColorPicker--warning--hover)", "Input:boxShadow-ColorPicker--warning--hover": "var(--xmlui-boxShadow-ColorPicker--warning--hover)", "Input:borderColor-ColorPicker--warning--focus": "var(--xmlui-borderColor-ColorPicker--warning--focus)", "Input:boxShadow-ColorPicker--warning--focus": "var(--xmlui-boxShadow-ColorPicker--warning--focus)", "Input:borderRadius-ColorPicker--success": "var(--xmlui-borderRadius-ColorPicker--success)", "Input:borderColor-ColorPicker--success": "var(--xmlui-borderColor-ColorPicker--success)", "Input:borderWidth-ColorPicker--success": "var(--xmlui-borderWidth-ColorPicker--success)", "Input:borderStyle-ColorPicker--success": "var(--xmlui-borderStyle-ColorPicker--success)", "Input:boxShadow-ColorPicker--success": "var(--xmlui-boxShadow-ColorPicker--success)", "Input:borderColor-ColorPicker--success--hover": "var(--xmlui-borderColor-ColorPicker--success--hover)", "Input:boxShadow-ColorPicker--success--hover": "var(--xmlui-boxShadow-ColorPicker--success--hover)", "Input:borderColor-ColorPicker--success--focus": "var(--xmlui-borderColor-ColorPicker--success--focus)", "Input:boxShadow-ColorPicker--success--focus": "var(--xmlui-boxShadow-ColorPicker--success--focus)", "Input:backgroundColor-ColorPicker": "var(--xmlui-backgroundColor-ColorPicker)"}'`;
-const colorInput = "_colorInput_1apm8_14";
-const error$3 = "_error_1apm8_48";
-const warning$3 = "_warning_1apm8_63";
-const valid$3 = "_valid_1apm8_78";
+const themeVars$g = `'{"Input:borderRadius-ColorPicker--default": "var(--xmlui-borderRadius-ColorPicker--default)", "Input:borderColor-ColorPicker--default": "var(--xmlui-borderColor-ColorPicker--default)", "Input:borderWidth-ColorPicker--default": "var(--xmlui-borderWidth-ColorPicker--default)", "Input:borderStyle-ColorPicker--default": "var(--xmlui-borderStyle-ColorPicker--default)", "Input:boxShadow-ColorPicker--default": "var(--xmlui-boxShadow-ColorPicker--default)", "Input:borderColor-ColorPicker--default--hover": "var(--xmlui-borderColor-ColorPicker--default--hover)", "Input:boxShadow-ColorPicker--default--hover": "var(--xmlui-boxShadow-ColorPicker--default--hover)", "Input:borderColor-ColorPicker--default--focus": "var(--xmlui-borderColor-ColorPicker--default--focus)", "Input:boxShadow-ColorPicker--default--focus": "var(--xmlui-boxShadow-ColorPicker--default--focus)", "Input:borderRadius-ColorPicker--error": "var(--xmlui-borderRadius-ColorPicker--error)", "Input:borderColor-ColorPicker--error": "var(--xmlui-borderColor-ColorPicker--error)", "Input:borderWidth-ColorPicker--error": "var(--xmlui-borderWidth-ColorPicker--error)", "Input:borderStyle-ColorPicker--error": "var(--xmlui-borderStyle-ColorPicker--error)", "Input:boxShadow-ColorPicker--error": "var(--xmlui-boxShadow-ColorPicker--error)", "Input:borderColor-ColorPicker--error--hover": "var(--xmlui-borderColor-ColorPicker--error--hover)", "Input:boxShadow-ColorPicker--error--hover": "var(--xmlui-boxShadow-ColorPicker--error--hover)", "Input:borderColor-ColorPicker--error--focus": "var(--xmlui-borderColor-ColorPicker--error--focus)", "Input:boxShadow-ColorPicker--error--focus": "var(--xmlui-boxShadow-ColorPicker--error--focus)", "Input:borderRadius-ColorPicker--warning": "var(--xmlui-borderRadius-ColorPicker--warning)", "Input:borderColor-ColorPicker--warning": "var(--xmlui-borderColor-ColorPicker--warning)", "Input:borderWidth-ColorPicker--warning": "var(--xmlui-borderWidth-ColorPicker--warning)", "Input:borderStyle-ColorPicker--warning": "var(--xmlui-borderStyle-ColorPicker--warning)", "Input:boxShadow-ColorPicker--warning": "var(--xmlui-boxShadow-ColorPicker--warning)", "Input:borderColor-ColorPicker--warning--hover": "var(--xmlui-borderColor-ColorPicker--warning--hover)", "Input:boxShadow-ColorPicker--warning--hover": "var(--xmlui-boxShadow-ColorPicker--warning--hover)", "Input:borderColor-ColorPicker--warning--focus": "var(--xmlui-borderColor-ColorPicker--warning--focus)", "Input:boxShadow-ColorPicker--warning--focus": "var(--xmlui-boxShadow-ColorPicker--warning--focus)", "Input:borderRadius-ColorPicker--success": "var(--xmlui-borderRadius-ColorPicker--success)", "Input:borderColor-ColorPicker--success": "var(--xmlui-borderColor-ColorPicker--success)", "Input:borderWidth-ColorPicker--success": "var(--xmlui-borderWidth-ColorPicker--success)", "Input:borderStyle-ColorPicker--success": "var(--xmlui-borderStyle-ColorPicker--success)", "Input:boxShadow-ColorPicker--success": "var(--xmlui-boxShadow-ColorPicker--success)", "Input:borderColor-ColorPicker--success--hover": "var(--xmlui-borderColor-ColorPicker--success--hover)", "Input:boxShadow-ColorPicker--success--hover": "var(--xmlui-boxShadow-ColorPicker--success--hover)", "Input:borderColor-ColorPicker--success--focus": "var(--xmlui-borderColor-ColorPicker--success--focus)", "Input:boxShadow-ColorPicker--success--focus": "var(--xmlui-boxShadow-ColorPicker--success--focus)", "Input:backgroundColor-ColorPicker": "var(--xmlui-backgroundColor-ColorPicker)", "Input:width-ColorPicker": "var(--xmlui-width-ColorPicker)"}'`;
+const colorInput = "_colorInput_724av_14";
+const error$3 = "_error_724av_48";
+const warning$3 = "_warning_724av_63";
+const valid$3 = "_valid_724av_78";
 const styles$v = {
   themeVars: themeVars$g,
   colorInput,
@@ -26936,7 +27138,6 @@ const ColorPicker = forwardRef(
         ...rest,
         id,
         className: classnames(className, styles$v.colorInput, {
-          [styles$v.disabled]: !enabled2,
           [styles$v.error]: validationStatus === "error",
           [styles$v.warning]: validationStatus === "warning",
           [styles$v.valid]: validationStatus === "valid"
@@ -28297,7 +28498,6 @@ class RestApiProxy {
         body: requestBody
       };
       if (onUploadProgress) {
-        console.log("Falling back to axios. Reason: onUploadProgress specified");
         const axios = (await import("axios")).default;
         try {
           const response = await axios.request({
@@ -30950,7 +31150,8 @@ const RadioGroupMd = createMetadata({
     [`backgroundColor-checked-${RGOption}`]: "$color-primary-500",
     [`backgroundColor-checked-${RGOption}--disabled`]: `$textColor--disabled`,
     [`fontSize-${RGOption}`]: "$fontSize-sm",
-    [`fontWeight-${RGOption}`]: "$fontWeight-bold"
+    [`fontWeight-${RGOption}`]: "$fontWeight-bold",
+    [`textColor-${RGOption}--disabled`]: "$textColor--disabled"
   }
 });
 const radioGroupRenderer = createComponentRenderer(
@@ -31281,6 +31482,18 @@ const SelectMd = createMetadata({
       isInternal: true,
       description: "internal radix modal prop",
       valueType: "boolean"
+    },
+    groupBy: {
+      description: "This property sets which attribute should be used to group the available options. No grouping is done if omitted. Use it with the `category` attribute on `Options` to define groups. If no options belong to a group, that group will not be shown.",
+      valueType: "string"
+    },
+    groupHeaderTemplate: {
+      description: `Enables the customization of how option groups are displayed in the dropdown. You can use the \`$group\` context variable to access the group name.`,
+      valueType: "ComponentDef"
+    },
+    ungroupedHeaderTemplate: {
+      description: `Enables the customization of how the ungrouped options header is displayed in the dropdown. If not provided, ungrouped options will not have a header.`,
+      valueType: "ComponentDef"
     }
   },
   events: {
@@ -31311,7 +31524,8 @@ const SelectMd = createMetadata({
   },
   contextVars: {
     $item: d("Represents the current option's data (label and value properties)"),
-    $itemContext: d("Provides utility methods like `removeItem()` for multi-select scenarios")
+    $itemContext: d("Provides utility methods like `removeItem()` for multi-select scenarios"),
+    $group: d("Group name when using `groupBy` (available in group header templates)")
   },
   themeVars: parseScssVar(styles$K.themeVars),
   defaultThemeVars: {
@@ -31329,17 +31543,15 @@ const SelectMd = createMetadata({
     [`paddingVertical-item-${COMP$J}`]: "$space-2",
     [`paddingHorizontal-${COMP$J}`]: "$space-2",
     [`paddingVertical-${COMP$J}`]: "$space-2",
-    [`opacity-text-item-${COMP$J}--disabled`]: "0.5",
-    [`opacity-${COMP$J}--disabled`]: "0.5",
     [`backgroundColor-${COMP$J}-badge--hover`]: "$color-primary-400",
     [`backgroundColor-${COMP$J}-badge--active`]: "$color-primary-500",
-    [`textColor-item-${COMP$J}--disabled`]: "$color-surface-200",
+    [`textColor-item-${COMP$J}--disabled`]: "$color-surface-300",
     [`textColor-${COMP$J}-badge`]: "$const-color-surface-50",
     [`backgroundColor-item-${COMP$J}`]: "$backgroundColor-dropdown-item",
     [`backgroundColor-item-${COMP$J}--hover`]: "$backgroundColor-dropdown-item--hover",
     [`backgroundColor-item-${COMP$J}--active`]: "$backgroundColor-dropdown-item--active",
-    // Default borderColor-Input--disabled is too light so the disabled component is barely visible
-    [`borderColor-${COMP$J}--disabled`]: "initial",
+    [`borderColor-${COMP$J}--disabled`]: "$borderColor--disabled",
+    [`textColor-${COMP$J}--disabled`]: "$textColor--disabled",
     [`minHeight-${COMP$J}`]: "$space-7",
     [`minHeight-item-${COMP$J}`]: "$space-7"
   }
@@ -31355,7 +31567,8 @@ const selectComponentRenderer = createComponentRenderer(
     renderChild: renderChild2,
     lookupEventHandler,
     className,
-    registerComponentApi
+    registerComponentApi,
+    ...rest
   }) => {
     const multiSelect = extractValue.asOptionalBoolean(node.props.multiSelect);
     const searchable = extractValue.asOptionalBoolean(node.props.searchable);
@@ -31388,6 +31601,29 @@ const selectComponentRenderer = createComponentRenderer(
         dropdownHeight: extractValue(node.props.dropdownHeight),
         required: extractValue.asOptionalBoolean(node.props.required),
         modal: extractValue.asOptionalBoolean(node.props.modal),
+        groupBy: extractValue(node.props.groupBy),
+        groupHeaderRenderer: node.props.groupHeaderTemplate ? (groupName) => {
+          return /* @__PURE__ */ jsx(
+            MemoizedItem,
+            {
+              contextVars: {
+                $group: groupName
+              },
+              node: node.props.groupHeaderTemplate,
+              renderChild: renderChild2
+            }
+          );
+        } : void 0,
+        ungroupedHeaderRenderer: node.props.ungroupedHeaderTemplate ? () => {
+          return /* @__PURE__ */ jsx(
+            MemoizedItem,
+            {
+              contextVars: {},
+              node: node.props.ungroupedHeaderTemplate,
+              renderChild: renderChild2
+            }
+          );
+        } : void 0,
         valueRenderer: node.props.valueTemplate ? (item2, removeItem) => {
           return /* @__PURE__ */ jsx(
             MemoizedItem,
@@ -32440,7 +32676,7 @@ const RootThemeDefinition = {
     "backgroundColor-tree-row--selected--before": $colorPrimary50,
     // --- Border colors
     borderColor: "rgb(from $color-surface-900 r g b / 0.1)",
-    "borderColor--disabled": $colorSurface100,
+    "borderColor--disabled": $colorSurface200,
     // --- Text colors
     "textColor-secondary": $colorSurface600,
     // --- Input is an abstract component, so we define its default theme variables here
@@ -34500,7 +34736,7 @@ async function callApi({ state, appContext, lookupAction, getCurrentState, apiIn
     });
     const result = await onErrorFn?.(e, stateContext["$param"]);
     const errorMessage = extractParam(
-      { ...stateContext, $error: e },
+      { ...stateContext, $error: createContextVariableError(e) },
       errorNotificationMessage,
       appContext
     );
@@ -35947,7 +36183,7 @@ function DataLoader({
     async (error22) => {
       loaderError2(error22);
       if (onError) {
-        const result = await onError(error22);
+        const result = await onError(createContextVariableError(error22));
         if (result === false) {
           if (loadingToastIdRef.current) {
             toast.dismiss(loadingToastIdRef.current);
@@ -35958,7 +36194,7 @@ function DataLoader({
       const errorMessage = extractParam(
         {
           ...stateRef.current.state,
-          $error: error22?.toString()
+          $error: createContextVariableError(error22)
         },
         loader.props.errorNotificationMessage,
         stateRef.current.appContext
@@ -39081,7 +39317,7 @@ const Tabs = forwardRef(function Tabs2({
         className: classnames(className, styles$l.tabs, styles$l.accordionView),
         style: style2,
         children: /* @__PURE__ */ jsx(
-          Root$1,
+          Root$2,
           {
             value: `${currentTab}`,
             onValueChange: (tab) => {
@@ -39097,7 +39333,7 @@ const Tabs = forwardRef(function Tabs2({
             className: styles$l.accordionRoot,
             children: /* @__PURE__ */ jsxs("div", { className: styles$l.accordionInterleaved, children: [
               /* @__PURE__ */ jsx(List, { className: styles$l.accordionList, children: tabItems.map((tab, index) => /* @__PURE__ */ jsx(
-                Trigger,
+                Trigger$1,
                 {
                   value: tab.innerId,
                   asChild: true,
@@ -39132,7 +39368,7 @@ const Tabs = forwardRef(function Tabs2({
     ) });
   }
   return /* @__PURE__ */ jsx(TabContext.Provider, { value: tabContextValue, children: /* @__PURE__ */ jsxs(
-    Root$1,
+    Root$2,
     {
       ...rest,
       id: tabsId,
@@ -39164,7 +39400,7 @@ const Tabs = forwardRef(function Tabs2({
             children: [
               !distributeEvenly2 && !headerRenderer && tabAlignment === "end" && /* @__PURE__ */ jsx("div", { className: styles$l.filler, "data-orientation": orientation }),
               !distributeEvenly2 && !headerRenderer && tabAlignment === "center" && /* @__PURE__ */ jsx("div", { className: styles$l.filler, "data-orientation": orientation }),
-              tabItems.map((tab, index) => /* @__PURE__ */ jsx(Trigger, { value: tab.innerId, asChild: true, children: /* @__PURE__ */ jsx(
+              tabItems.map((tab, index) => /* @__PURE__ */ jsx(Trigger$1, { value: tab.innerId, asChild: true, children: /* @__PURE__ */ jsx(
                 "div",
                 {
                   role: "tab",
@@ -39977,7 +40213,7 @@ const TabItemComponent = forwardRef(function TabItemComponent2({ children, label
   const tabIndex = tabItems?.findIndex((item2) => item2.innerId === innerId) ?? 0;
   const contentOrder = tabIndex * 2 + 1;
   return /* @__PURE__ */ createElement(
-    Content,
+    Content$1,
     {
       ...rest,
       key: innerId,
@@ -41120,7 +41356,7 @@ const APICallMd = createMetadata({
       valueType: "string"
     },
     errorNotificationMessage: {
-      description: "This property defines the message to display automatically when the operation results in an error. You can use the `$error` context value in an expression to refer to the original error message.",
+      description: "",
       valueType: "string"
     },
     completedNotificationMessage: {
@@ -41209,6 +41445,13 @@ const optionComponentRenderer = createComponentRenderer(
     }
     const hasTextNodeChild = node.children?.length === 1 && (node.children[0].type === "TextNode" || node.children[0].type === "TextNodeCData");
     const textNodeChild = hasTextNodeChild ? renderChild2(node.children) : void 0;
+    const extraProps = {};
+    const knownProps = /* @__PURE__ */ new Set(["label", "value", "enabled", "keywords"]);
+    Object.keys(node.props).forEach((key) => {
+      if (!knownProps.has(key)) {
+        extraProps[key] = extractValue(node.props[key]);
+      }
+    });
     return /* @__PURE__ */ jsx(
       OptionNative,
       {
@@ -41226,6 +41469,7 @@ const optionComponentRenderer = createComponentRenderer(
             layoutContext
           }
         ) : void 0 : void 0,
+        ...extraProps,
         children: !hasTextNodeChild && renderChild2(node.children)
       }
     );
@@ -41334,17 +41578,15 @@ const AutoCompleteMd = createMetadata({
     [`paddingVertical-item-${COMP$i}`]: "$space-2",
     [`paddingHorizontal-${COMP$i}`]: "$space-2",
     [`paddingVertical-${COMP$i}`]: "$space-2",
-    [`opacity-text-item-${COMP$i}--disabled`]: "0.5",
-    [`opacity-${COMP$i}--disabled`]: "0.5",
     [`backgroundColor-${COMP$i}-badge--hover`]: "$color-primary-400",
     [`backgroundColor-${COMP$i}-badge--active`]: "$color-primary-500",
-    [`textColor-item-${COMP$i}--disabled`]: "$color-surface-200",
+    [`textColor-item-${COMP$i}--disabled`]: "$color-surface-300",
     [`textColor-${COMP$i}-badge`]: "$const-color-surface-50",
     [`backgroundColor-item-${COMP$i}`]: "$backgroundColor-dropdown-item",
     [`backgroundColor-item-${COMP$i}--hover`]: "$backgroundColor-dropdown-item--hover",
     [`backgroundColor-item-${COMP$i}--active`]: "$backgroundColor-dropdown-item--active",
-    // Default borderColor-Input--disabled is too light so the disabled component is barely visible
-    [`borderColor-${COMP$i}--disabled`]: "initial"
+    [`borderColor-${COMP$i}--disabled`]: "$borderColor--disabled",
+    [`textColor-${COMP$i}--disabled`]: "$textColor--disabled"
   }
 });
 const autoCompleteComponentRenderer = createComponentRenderer(
@@ -43478,7 +43720,10 @@ const ColorPickerMd = createMetadata({
       }
     }
   },
-  themeVars: parseScssVar(styles$v.themeVars)
+  themeVars: parseScssVar(styles$v.themeVars),
+  defaultThemeVars: {
+    [`width-${COMP$g}`]: "48px"
+  }
 });
 const colorPickerComponentRenderer = createComponentRenderer(
   "ColorPicker",
@@ -47886,7 +48131,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.11.20";
+const version = "0.11.21";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -52810,7 +53055,7 @@ const DataSourceMd = createMetadata({
       valueType: "string"
     },
     errorNotificationMessage: {
-      description: "Set the message to display when the there is an error. You can use the `$error` context value in an expression to refer to the original error message.",
+      description: "",
       valueType: "string"
     },
     resultSelector: {