xmlui 0.11.19 → 0.11.21

package/dist/metadata/{collectedComponentMetadata-_5XPZQ5U.js → collectedComponentMetadata-DTO7KlLw.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { forwardRef, useState, useEffect, useId, cloneElement, useRef, useInsertionEffect, useCallback, useContext, useLayoutEffect, useMemo, createContext, useTransition, memo, useDeferredValue, createElement, useReducer, isValidElement, Fragment as Fragment$1, Children, startTransition } from "react";
+import React__default, { forwardRef, useState, useEffect, useId, useRef, cloneElement, useInsertionEffect, useCallback, useContext, useLayoutEffect, useMemo, createContext, useTransition, memo, useDeferredValue, createElement, useReducer, isValidElement, Fragment as Fragment$1, Children, startTransition } from "react";
 import { throttle, get, isEmpty, cloneDeep, omit, omitBy, isUndefined, isString, isPlainObject, noop as noop$2, isEqual, isArray, isNumber, set, isNil, union, uniq, orderBy as orderBy$1, isObject, groupBy, sortBy, merge, defaultTo, capitalize, unset, setWith, keyBy, pick, isNaN as isNaN$1 } from "lodash-es";
 import { formatDistanceToNow, parse, format, parseISO, isValid, isToday, isYesterday, isTomorrow, isThisWeek, formatRelative, isThisYear, isSameDay, differenceInMinutes } from "date-fns";
 import classnames from "classnames";
@@ -12,18 +12,20 @@ import Color from "color";
 import toast, { Toaster, ToastBar } from "react-hot-toast";
 import { useLocation, NavLink as NavLink$1, useNavigate, Link, Routes, Route, Navigate, useParams, useSearchParams } from "@remix-run/react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { DropdownMenu as DropdownMenu$1, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuSub, DropdownMenuSubTrigger as DropdownMenuSubTrigger$1, DropdownMenuSubContent as DropdownMenuSubContent$1 } from "@radix-ui/react-dropdown-menu";
 import { createContext as createContext$1, useContextSelector } from "use-context-selector";
 import { parseRegExpLiteral } from "@eslint-community/regexpp";
 import memoizeOne from "memoize-one";
 import { DayPicker } from "react-day-picker";
-import { Popover, PopoverTrigger, PopoverPortal, PopoverContent, Portal } from "@radix-ui/react-popover";
+import { Popover, PopoverTrigger, PopoverPortal, PopoverContent, Portal as Portal$1 } from "@radix-ui/react-popover";
 import EmojiPicker, { EmojiStyle } from "emoji-picker-react";
 import * as dropzone from "react-dropzone";
 import produce, { createDraft, finishDraft, enableMapSet } from "immer";
+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 TextareaAutosize from "react-textarea-autosize";
-import { Root as Root$1, Track, Range, Thumb } from "@radix-ui/react-slider";
+import { Root as Root$2, 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";
@@ -38,7 +40,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, List, Trigger, Content } from "@radix-ui/react-tabs";
+import { Root as Root$1, 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";
@@ -464,19 +466,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,
@@ -486,12 +491,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";
@@ -605,69 +613,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;
@@ -3238,20 +3249,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);
   }
@@ -3291,6 +3298,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 useContentAlignment(orientation, horizontal2, vertical2) {
   return useMemo(() => {
     return orientation === "horizontal" ? {
@@ -3966,7 +3980,7 @@ const defaultCompResult = {
   cssProps: {},
   issues: /* @__PURE__ */ new Set()
 };
-function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
+function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext, disableInlineStyle) {
   const result = {
     cssProps: {},
     issues: /* @__PURE__ */ new Set()
@@ -3974,128 +3988,128 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
   if (!!getOrientation(layoutContext)) {
     result.cssProps.flexShrink = 0;
   }
-  collectCss("width");
+  collectCss("width", false);
   const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
   if (horizontalStarSize !== null) {
     result.cssProps.flex = horizontalStarSize;
     result.cssProps.flexShrink = 1;
   }
-  collectCss("minWidth");
-  collectCss("maxWidth");
-  collectCss("height");
+  collectCss("minWidth", false);
+  collectCss("maxWidth", false);
+  collectCss("height", false);
   const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
   if (verticalStarSize !== null) {
     result.cssProps.flex = verticalStarSize;
     result.cssProps.flexShrink = 1;
   }
-  collectCss("minHeight");
-  collectCss("maxHeight");
-  collectCss("top");
-  collectCss("right");
-  collectCss("bottom");
-  collectCss("left");
-  collectCss("gap");
-  collectCss("padding");
+  collectCss("minHeight", false);
+  collectCss("maxHeight", false);
+  collectCss("top", disableInlineStyle);
+  collectCss("right", disableInlineStyle);
+  collectCss("bottom", disableInlineStyle);
+  collectCss("left", disableInlineStyle);
+  collectCss("gap", disableInlineStyle);
+  collectCss("padding", disableInlineStyle);
   const paddingHorizontal = transformLayoutValue("paddingHorizontal");
   if (paddingHorizontal) {
     result.cssProps.paddingLeft = paddingHorizontal;
     result.cssProps.paddingRight = paddingHorizontal;
   }
-  collectCss("paddingRight");
-  collectCss("paddingLeft");
+  collectCss("paddingRight", disableInlineStyle);
+  collectCss("paddingLeft", disableInlineStyle);
   const paddingVertical = transformLayoutValue("paddingVertical");
   if (paddingVertical) {
     result.cssProps.paddingTop = paddingVertical;
     result.cssProps.paddingBottom = paddingVertical;
   }
-  collectCss("paddingTop");
-  collectCss("paddingBottom");
-  collectCss("margin");
+  collectCss("paddingTop", disableInlineStyle);
+  collectCss("paddingBottom", disableInlineStyle);
+  collectCss("margin", disableInlineStyle);
   const marginHorizontal = transformLayoutValue("marginHorizontal");
   if (marginHorizontal) {
     result.cssProps.marginLeft = marginHorizontal;
     result.cssProps.marginRight = marginHorizontal;
   }
-  collectCss("marginRight");
-  collectCss("marginLeft");
+  collectCss("marginRight", disableInlineStyle);
+  collectCss("marginLeft", disableInlineStyle);
   const marginVertical = transformLayoutValue("marginVertical");
   if (marginVertical) {
     result.cssProps.marginTop = marginVertical;
     result.cssProps.marginBottom = marginVertical;
   }
-  collectCss("marginTop");
-  collectCss("marginBottom");
-  collectCss("border");
+  collectCss("marginTop", disableInlineStyle);
+  collectCss("marginBottom", disableInlineStyle);
+  collectCss("border", disableInlineStyle);
   const horizontalBorder = transformLayoutValue("borderHorizontal");
   if (horizontalBorder) {
     result.cssProps.borderLeft = horizontalBorder;
     result.cssProps.borderRight = horizontalBorder;
   }
-  collectCss("borderRight");
-  collectCss("borderLeft");
+  collectCss("borderRight", disableInlineStyle);
+  collectCss("borderLeft", disableInlineStyle);
   const verticalBorder = transformLayoutValue("borderVertical");
   if (verticalBorder) {
     result.cssProps.borderTop = verticalBorder;
     result.cssProps.borderBottom = verticalBorder;
   }
-  collectCss("borderTop");
-  collectCss("borderBottom");
-  collectCss("borderColor");
-  collectCss("borderStyle");
-  collectCss("borderWidth");
-  collectCss("borderRadius");
-  collectCss("radiusTopLeft", "borderTopLeftRadius");
-  collectCss("radiusTopRight", "borderTopRightRadius");
-  collectCss("radiusBottomLeft", "borderBottomLeftRadius");
-  collectCss("radiusBottomRight", "borderBottomRightRadius");
-  collectCss("color");
-  collectCss("fontFamily");
-  collectCss("fontSize");
-  collectCss("fontWeight");
-  collectCss("fontStyle");
-  collectCss("fontVariant");
-  collectCss("lineBreak");
-  collectCss("textDecoration");
-  collectCss("textDecorationLine");
-  collectCss("textDecorationColor");
-  collectCss("textDecorationStyle");
-  collectCss("textDecorationThickness");
-  collectCss("textIndent");
-  collectCss("textShadow");
-  collectCss("textUnderlineOffset");
-  collectCss("userSelect");
-  collectCss("letterSpacing");
-  collectCss("textTransform");
-  collectCss("lineHeight");
-  collectCss("textAlign");
-  collectCss("textAlignLast");
-  collectCss("textWrap");
-  collectCss("wordBreak");
-  collectCss("wordSpacing");
-  collectCss("wordWrap");
-  collectCss("writingMode");
-  collectCss("backgroundColor");
-  collectCss("background");
-  collectCss("boxShadow");
-  collectCss("direction");
-  collectCss("overflowX");
-  collectCss("overflowY");
-  collectCss("zIndex");
-  collectCss("opacity");
-  collectCss("zoom");
-  collectCss("cursor");
-  collectCss("whiteSpace");
-  collectCss("transform");
-  collectCss("outline");
-  collectCss("outlineWidth");
-  collectCss("outlineColor");
-  collectCss("outlineStyle");
-  collectCss("outlineOffset");
+  collectCss("borderTop", disableInlineStyle);
+  collectCss("borderBottom", disableInlineStyle);
+  collectCss("borderColor", disableInlineStyle);
+  collectCss("borderStyle", disableInlineStyle);
+  collectCss("borderWidth", disableInlineStyle);
+  collectCss("borderRadius", disableInlineStyle);
+  collectCss("radiusTopLeft", disableInlineStyle, "borderTopLeftRadius");
+  collectCss("radiusTopRight", disableInlineStyle, "borderTopRightRadius");
+  collectCss("radiusBottomLeft", disableInlineStyle, "borderBottomLeftRadius");
+  collectCss("radiusBottomRight", disableInlineStyle, "borderBottomRightRadius");
+  collectCss("color", disableInlineStyle);
+  collectCss("fontFamily", disableInlineStyle);
+  collectCss("fontSize", disableInlineStyle);
+  collectCss("fontWeight", disableInlineStyle);
+  collectCss("fontStyle", disableInlineStyle);
+  collectCss("fontVariant", disableInlineStyle);
+  collectCss("lineBreak", disableInlineStyle);
+  collectCss("textDecoration", disableInlineStyle);
+  collectCss("textDecorationLine", disableInlineStyle);
+  collectCss("textDecorationColor", disableInlineStyle);
+  collectCss("textDecorationStyle", disableInlineStyle);
+  collectCss("textDecorationThickness", disableInlineStyle);
+  collectCss("textIndent", disableInlineStyle);
+  collectCss("textShadow", disableInlineStyle);
+  collectCss("textUnderlineOffset", disableInlineStyle);
+  collectCss("userSelect", disableInlineStyle);
+  collectCss("letterSpacing", disableInlineStyle);
+  collectCss("textTransform", disableInlineStyle);
+  collectCss("lineHeight", disableInlineStyle);
+  collectCss("textAlign", disableInlineStyle);
+  collectCss("textAlignLast", disableInlineStyle);
+  collectCss("textWrap", disableInlineStyle);
+  collectCss("wordBreak", disableInlineStyle);
+  collectCss("wordSpacing", disableInlineStyle);
+  collectCss("wordWrap", disableInlineStyle);
+  collectCss("writingMode", disableInlineStyle);
+  collectCss("backgroundColor", disableInlineStyle);
+  collectCss("background", disableInlineStyle);
+  collectCss("boxShadow", disableInlineStyle);
+  collectCss("direction", disableInlineStyle);
+  collectCss("overflowX", disableInlineStyle);
+  collectCss("overflowY", disableInlineStyle);
+  collectCss("zIndex", disableInlineStyle);
+  collectCss("opacity", disableInlineStyle);
+  collectCss("zoom", disableInlineStyle);
+  collectCss("cursor", disableInlineStyle);
+  collectCss("whiteSpace", disableInlineStyle);
+  collectCss("transform", disableInlineStyle);
+  collectCss("outline", disableInlineStyle);
+  collectCss("outlineWidth", disableInlineStyle);
+  collectCss("outlineColor", disableInlineStyle);
+  collectCss("outlineStyle", disableInlineStyle);
+  collectCss("outlineOffset", disableInlineStyle);
   const wrapContent = transformLayoutValue("wrapContent");
   if (wrapContent) {
     result.cssProps.flexWrap = wrapContent === "true" ? "wrap" : "nowrap";
   }
-  collectCss("canShrink", "flexShrink");
+  collectCss("canShrink", disableInlineStyle, "flexShrink");
   const canShrink = transformLayoutValue("canShrink");
   if (canShrink) {
     result.cssProps.flexShrink = canShrink === "true" ? 1 : 0;
@@ -4169,7 +4183,8 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
       return value;
     }
   }
-  function collectCss(prop, propCssName = "") {
+  function collectCss(prop, disableInlineStyle2 = false, propCssName = "") {
+    if (disableInlineStyle2) return;
     const value = transformLayoutValue(prop);
     if (value) {
       result.cssProps[propCssName || prop] = value;
@@ -5890,7 +5905,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
@@ -7277,6 +7292,7 @@ function Theme({
   id,
   isRoot = defaultProps$1d.isRoot,
   applyIf,
+  disableInlineStyle,
   renderChild: renderChild2,
   node,
   tone,
@@ -7373,7 +7389,8 @@ function Theme({
       themeStyles: themeCssVars,
       themeVars: allThemeVarsWithResolvedHierarchicalVars,
       getResourceUrl,
-      getThemeVar
+      getThemeVar,
+      disableInlineStyle
     };
     return themeVal;
   }, [
@@ -7384,7 +7401,8 @@ function Theme({
     getResourceUrl,
     getThemeVar,
     themeCssVars,
-    themeTone
+    themeTone,
+    disableInlineStyle
   ]);
   const { indexing } = useIndexerContext();
   const rootClasses = useMemo(() => {
@@ -7479,6 +7497,11 @@ const ThemeMd = createMetadata({
       void 0,
       "boolean",
       true
+    ),
+    disableInlineStyle: d(
+      `This property controls whether inline styles are disabled for components within this theme. When undefined, uses the appGlobals.disableInlineStyle setting.`,
+      void 0,
+      "boolean"
     )
   },
   opaque: true
@@ -7499,6 +7522,7 @@ const themeComponentRenderer = createComponentRenderer(
         id: extractValue.asOptionalString(node.props.themeId),
         isRoot: extractValue.asOptionalBoolean(node.props.root),
         applyIf: extractValue.asOptionalBoolean(node.props.applyIf),
+        disableInlineStyle: extractValue.asOptionalBoolean(node.props.disableInlineStyle),
         layoutContext,
         renderChild: renderChild2,
         tone: themeTone,
@@ -17508,37 +17532,20 @@ const Toggle = forwardRef(function Toggle2({
 const MemoizedItem = memo(
   ({
     node,
-    item: item2,
-    context,
     renderChild: renderChild2,
     layoutContext,
-    contextVars = EMPTY_OBJECT,
-    itemKey = "$item",
-    contextKey = "$context"
+    contextVars = EMPTY_OBJECT
   }) => {
     const shallowMemoedContextVars = useShallowCompareMemoize(contextVars);
-    const nodeWithItem = useMemo(() => {
-      if (itemKey === contextKey) {
-        return {
-          type: "Container",
-          contextVars: {
-            [itemKey]: { ...item2, ...context },
-            ...shallowMemoedContextVars
-          },
-          children: Array.isArray(node) ? node : [node]
-        };
-      }
-      return {
+    const nodeWithContextVars = useMemo(
+      () => ({
         type: "Container",
-        contextVars: {
-          [itemKey]: item2,
-          [contextKey]: context,
-          ...shallowMemoedContextVars
-        },
+        contextVars: shallowMemoedContextVars,
         children: Array.isArray(node) ? node : [node]
-      };
-    }, [context, item2, node, shallowMemoedContextVars, itemKey, contextKey]);
-    return /* @__PURE__ */ jsx(Fragment, { children: renderChild2(nodeWithItem, layoutContext) });
+      }),
+      [node, shallowMemoedContextVars]
+    );
+    return /* @__PURE__ */ jsx(Fragment, { children: renderChild2(nodeWithContextVars, layoutContext) });
   }
 );
 MemoizedItem.displayName = "MemoizedItem";
@@ -18492,36 +18499,8 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
     setOpen(false);
   }, []);
   const contentRef = useRef(null);
-  const handleKeyDown = useCallback((event) => {
-    if (event.key === "Escape") {
-      setOpen(false);
-      return;
-    }
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-      const content2 = contentRef.current;
-      if (!content2) return;
-      const menuItems = Array.from(
-        content2.querySelectorAll('[role="menuitem"]:not([class*="disabled"])')
-      );
-      if (menuItems.length === 0) return;
-      const currentIndex = menuItems.findIndex((item2) => item2 === document.activeElement);
-      let nextIndex;
-      if (currentIndex === -1) {
-        nextIndex = event.key === "ArrowDown" ? 0 : menuItems.length - 1;
-      } else if (event.key === "ArrowDown") {
-        nextIndex = currentIndex < menuItems.length - 1 ? currentIndex + 1 : 0;
-      } else {
-        nextIndex = currentIndex > 0 ? currentIndex - 1 : menuItems.length - 1;
-      }
-      menuItems[nextIndex]?.focus();
-    }
-    if (event.key === "Enter" || event.key === " ") {
-      return;
-    }
-  }, []);
   return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: { closeMenu }, children: /* @__PURE__ */ jsxs(
-    Popover,
+    DropdownMenuPrimitive.Root,
     {
       open,
       onOpenChange: async (isOpen) => {
@@ -18545,31 +18524,20 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
       },
       modal,
       children: [
-        /* @__PURE__ */ jsx(
-          PopoverTrigger,
+        /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ...rest, asChild: true, disabled: disabled2, ref, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx(
+          Button,
           {
-            ...rest,
-            asChild: true,
+            icon: /* @__PURE__ */ jsx(Icon$l, { name: triggerButtonIcon, fallback: "chevrondown" }),
+            iconPosition: triggerButtonIconPosition,
+            type: "button",
+            variant: triggerButtonVariant,
+            themeColor: triggerButtonThemeColor,
             disabled: disabled2,
-            ref,
-            "aria-haspopup": "menu",
-            "aria-expanded": open,
-            children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx(
-              Button,
-              {
-                icon: /* @__PURE__ */ jsx(Icon$l, { name: triggerButtonIcon, fallback: "chevrondown" }),
-                iconPosition: triggerButtonIconPosition,
-                type: "button",
-                variant: triggerButtonVariant,
-                themeColor: triggerButtonThemeColor,
-                disabled: disabled2,
-                children: label2
-              }
-            )
+            children: label2
           }
-        ),
-        /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
-          PopoverContent,
+        ) }),
+        /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: root2, children: /* @__PURE__ */ jsx(
+          DropdownMenuPrimitive.Content,
           {
             ref: contentRef,
             align: alignment,
@@ -18577,13 +18545,8 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
             className: classnames(styles$_.DropdownMenuContent, className, {
               [styles$_.compact]: compact2
             }),
-            onOpenAutoFocus: (e) => {
-              e.preventDefault();
-              contentRef.current?.focus();
-            },
-            onKeyDownCapture: handleKeyDown,
-            role: "menu",
             tabIndex: -1,
+            loop: true,
             children
           }
         ) })
@@ -18617,25 +18580,8 @@ const MenuItem = forwardRef(function MenuItem2({
     },
     [enabled2, onClick, context]
   );
-  const handleKeyDown = useCallback(
-    (event) => {
-      if (!enabled2) return;
-      if (event.key === "Enter") {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-        context?.closeMenu();
-      } else if (event.key === " ") {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-        context?.closeMenu();
-      }
-    },
-    [enabled2, onClick, context]
-  );
   return /* @__PURE__ */ jsxs(
-    "div",
+    DropdownMenuPrimitive.Item,
     {
       style: style2,
       className: classnames(className, styles$_.DropdownMenuItem, {
@@ -18645,7 +18591,6 @@ const MenuItem = forwardRef(function MenuItem2({
       }),
       ref,
       onClick: handleClick,
-      onKeyDown: handleKeyDown,
       role: "menuitem",
       tabIndex: enabled2 ? 0 : -1,
       children: [
@@ -18659,28 +18604,14 @@ const MenuItem = forwardRef(function MenuItem2({
 const SubMenuItem = forwardRef(function SubMenuItem2({ children, label: label2, triggerTemplate }, ref) {
   const { root: root2 } = useTheme();
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: styles$_.DropdownMenuSubTrigger,
-        role: "menuitem",
-        tabIndex: 0,
-        ref,
-        onMouseEnter: () => setOpen(true),
-        onMouseLeave: () => setOpen(false),
-        children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx("div", { children: label2 })
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
-      PopoverContent,
+  return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Sub, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubTrigger, { ref, className: styles$_.DropdownMenuSubTrigger, asChild: true, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx("div", { children: label2 }) }),
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: root2, children: /* @__PURE__ */ jsx(
+      DropdownMenuPrimitive.SubContent,
       {
         className: styles$_.DropdownMenuSubContent,
-        side: "right",
-        align: "start",
-        onMouseEnter: () => setOpen(true),
-        onMouseLeave: () => setOpen(false),
-        onOpenAutoFocus: (e) => e.preventDefault(),
+        sideOffset: 2,
+        loop: true,
         children
       }
     ) })
@@ -19484,7 +19415,7 @@ const FlowLayoutContext = createContext({
 const FlowItemBreak = ({ force }) => /* @__PURE__ */ jsx("div", { className: classnames(styles$X.break, { [styles$X.forceBreak]: force }) });
 const FlowItemWrapper = forwardRef(function FlowItemWrapper2({ children, forceBreak: forceBreak2, ...restProps }, ref) {
   const { rowGap, columnGap, setNumberOfChildren } = useContext(FlowLayoutContext);
-  const { mediaSize } = useAppContext();
+  const { mediaSize, appGlobals } = useAppContext();
   useIsomorphicLayoutEffect(() => {
     setNumberOfChildren((prev) => prev + 1);
     return () => {
@@ -19508,10 +19439,11 @@ const FlowItemWrapper = forwardRef(function FlowItemWrapper2({ children, forceBr
         {
           type: "Stack",
           orientation: "horizontal"
-        }
+        },
+        appGlobals?.disableInlineStyle
       ).cssProps || {}
     );
-  }, [_maxWidth, _minWidth, _width]);
+  }, [_maxWidth, _minWidth, _width, appGlobals]);
   const resolvedWidth = useMemo(() => {
     if (width && typeof width === "string" && width.startsWith("var(")) {
       if (!resolvedCssVars[width]) {
@@ -21451,18 +21383,26 @@ const Form = forwardRef(function({
       children: cancelLabel
     },
     "cancel"
-  ) });
+  ) }, PART_CANCEL_BUTTON);
   const submitButton = useMemo(
-    () => /* @__PURE__ */ jsx(Part, { partId: PART_SUBMIT_BUTTON, children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !isEnabled2 || !enableSubmit, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit") }),
+    () => /* @__PURE__ */ jsx(Part, { partId: PART_SUBMIT_BUTTON, children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !isEnabled2 || !enableSubmit, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit") }, PART_SUBMIT_BUTTON),
     [isEnabled2, enableSubmit, formState.submitInProgress, saveInProgressLabel, saveLabel]
   );
+  const getData = useCallback(() => {
+    return cloneDeep(cleanUpSubject(formState.subject, formState.noSubmitFields));
+  }, [formState.subject, formState.noSubmitFields]);
+  const getIsDirtyFlag = useCallback(() => {
+    return isDirty;
+  }, [isDirty]);
   useEffect(() => {
     registerComponentApi?.({
       reset: doReset,
       update: updateData,
-      validate: doValidate
+      validate: doValidate,
+      getData,
+      isDirty: getIsDirtyFlag
     });
-  }, [doReset, updateData, doValidate, registerComponentApi]);
+  }, [doReset, updateData, doValidate, getData, registerComponentApi, getIsDirtyFlag]);
   let safeButtonRow = /* @__PURE__ */ jsx(Fragment, { children: buttonRow2 || /* @__PURE__ */ jsxs("div", { className: styles$V.buttonRow, children: [
     swapCancelAndSave && [submitButton, cancelButton],
     !swapCancelAndSave && [cancelButton, submitButton]
@@ -21524,7 +21464,8 @@ const FormWithContextVar = forwardRef(function({
   style: style2,
   className,
   lookupEventHandler,
-  registerComponentApi
+  registerComponentApi,
+  appContext
 }, ref) {
   const [formState, dispatch] = useReducer(formReducer, initialState);
   const $data = useMemo(() => {
@@ -21560,7 +21501,7 @@ const FormWithContextVar = forwardRef(function({
   const errorNotificationMessage = extractValue.asOptionalString(node.props.errorNotificationMessage) || "";
   const submitUrl = extractValue.asOptionalString(node.props.submitUrl) || extractValue.asOptionalString(node.props._data_url);
   const itemLabelWidth = extractValue.asOptionalString(node.props.itemLabelWidth);
-  const { cssProps: itemLabelWidthCssProps } = resolveLayoutProps({ width: itemLabelWidth });
+  const { cssProps: itemLabelWidthCssProps } = resolveLayoutProps({ width: itemLabelWidth }, void 0, appContext?.appGlobals?.disableInlineStyle);
   return /* @__PURE__ */ jsx(Slot, { ref, style: style2, children: /* @__PURE__ */ jsx(
     Form,
     {
@@ -21731,6 +21672,11 @@ const FormMd = createMetadata({
       description: "This method triggers validation on all form fields without submitting the form. It displays validation errors and returns the validation result along with the cleaned form data. This is useful for implementing custom submit buttons or performing operations that require validated data without actually submitting the form.",
       signature: "validate(): Promise<{ isValid: boolean, data: Record<string, any>, errors: ValidationResult[], warnings: ValidationResult[], validationResults: Record<string, ValidationResult> }>",
       returns: "A promise that resolves to an object containing validation status, cleaned data, and detailed validation results."
+    },
+    getData: {
+      description: "This method returns a deep clone of the current form data object. Changes to the returned object do not affect the form's internal state.",
+      signature: "getData(): Record<string, any>",
+      returns: "A deep clone of the current form data object."
     }
   },
   themeVars: parseScssVar(styles$V.themeVars),
@@ -21755,7 +21701,7 @@ const FormMd = createMetadata({
 const formComponentRenderer = createComponentRenderer(
   COMP$1f,
   FormMd,
-  ({ node, renderChild: renderChild2, extractValue, className, lookupEventHandler, registerComponentApi }) => {
+  ({ node, renderChild: renderChild2, extractValue, className, lookupEventHandler, registerComponentApi, appContext }) => {
     return /* @__PURE__ */ jsx(
       FormWithContextVar,
       {
@@ -21764,7 +21710,8 @@ const formComponentRenderer = createComponentRenderer(
         extractValue,
         lookupEventHandler,
         className,
-        registerComponentApi
+        registerComponentApi,
+        appContext
       }
     );
   }
@@ -22364,47 +22311,48 @@ function useLongPress(elementRef, action2, delay2 = 500) {
   }, [elementRef, action2, delay2]);
 }
 const themeVars$B = `'{"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$8 = "_error_tlyg2_55";
-const warning$9 = "_warning_tlyg2_81";
-const valid$8 = "_valid_tlyg2_107";
-const disabled$7 = "_disabled_tlyg2_133";
-const placeholder = "_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$8 = "_error_1c0m5_55";
+const warning$9 = "_warning_1c0m5_81";
+const valid$8 = "_valid_1c0m5_107";
+const disabled$7 = "_disabled_1c0m5_133";
+const placeholder = "_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$Q = {
   themeVars: themeVars$B,
   selectTrigger,
@@ -22425,6 +22373,7 @@ const styles$Q = {
   commandInputContainer,
   commandInput: commandInput$1,
   commandList: commandList$1,
+  groupHeader,
   multiSelectOption,
   multiSelectOptionContent,
   highlighted: highlighted$1,
@@ -22457,8 +22406,11 @@ const SelectContext = createContext({
   },
   setSelectedIndex: (index) => {
   },
-  options: /* @__PURE__ */ new Set(),
-  optionRenderer: void 0
+  optionRenderer: void 0,
+  onOptionAdd: () => {
+  },
+  onOptionRemove: () => {
+  }
 });
 function useSelect() {
   return useContext(SelectContext);
@@ -22483,22 +22435,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$Q.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$Q.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$Q.selectOptionIndicator, children: /* @__PURE__ */ jsx(Icon$l, { name: "checkmark" }) })
+        ] }) : optionRenderer ? /* @__PURE__ */ jsxs("div", { className: styles$Q.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$Q.selectOptionContent, ref: visibleContentRef, children: /* @__PURE__ */ jsx(ItemText, { children: label2 }) }),
+          selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$Q.selectItemIndicator, children: /* @__PURE__ */ jsx(Icon$l, { 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$Q.selectTrigger, {
+                [styles$Q.error]: validationStatus === "error",
+                [styles$Q.warning]: validationStatus === "warning",
+                [styles$Q.valid]: validationStatus === "valid"
+              }),
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              autoFocus,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classnames(styles$Q.selectValue, {
+                      [styles$Q.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$Q.clearButton,
+                    onPointerDown: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onClear?.();
+                    },
+                    tabIndex: -1,
+                    children: /* @__PURE__ */ jsx(Icon$l, { name: "close" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: styles$Q.action, children: /* @__PURE__ */ jsx(Icon$l, { name: "chevrondown" }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsxs(
+            Content,
+            {
+              collisionPadding: 0,
+              className: styles$Q.selectDropdownContent,
+              position: "popper",
+              align: "start",
+              style: { maxHeight: height, width },
+              children: [
+                /* @__PURE__ */ jsx(ScrollUpButton, { className: styles$Q.selectScrollUpButton, children: /* @__PURE__ */ jsx(Icon$l, { name: "chevronup" }) }),
+                /* @__PURE__ */ jsx(Part, { partId: "listWrapper", children: /* @__PURE__ */ jsx(Viewport, { className: styles$Q.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$Q.groupHeader, children: ungroupedHeaderRenderer() }) : /* @__PURE__ */ jsx(Label, { className: styles$Q.groupHeader, children: groupHeaderRenderer ? groupHeaderRenderer(groupName) : groupName }),
+                    groupOptions.map((option) => /* @__PURE__ */ jsx(
+                      SelectOption,
+                      {
+                        value: option.value,
+                        label: option.label,
+                        enabled: option.enabled,
+                        className: styles$Q.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$Q.selectScrollDownButton, children: /* @__PURE__ */ jsx(Icon$l, { name: "chevrondown" }) })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
 const PART_LIST_WRAPPER$1 = "listWrapper";
 const PART_CLEAR_BUTTON$1 = "clearButton";
 const defaultProps$M = {
@@ -22515,24 +22680,20 @@ const defaultProps$M = {
   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$Q.badgeListContainer, children: /* @__PURE__ */ jsx("div", { className: styles$Q.badgeList, children: value.map(
-        (v) => valueRenderer ? valueRenderer(
-          Array.from(options2).find((o) => o.value === `${v}`),
-          () => {
-            toggleOption(v);
-          }
-        ) : /* @__PURE__ */ jsxs("span", { className: styles$Q.badge, children: [
-          Array.from(options2).find((o) => o.value === `${v}`)?.label,
+  if (selectedOptions.length) {
+    if (multiSelect) {
+      return /* @__PURE__ */ jsx("div", { className: styles$Q.badgeListContainer, children: /* @__PURE__ */ jsx("div", { className: styles$Q.badgeList, children: selectedOptions.map(
+        (option) => valueRenderer ? valueRenderer(option, () => {
+          if (!readOnly2) toggleOption(option.value);
+        }) : /* @__PURE__ */ jsxs("span", { className: styles$Q.badge, children: [
+          option.label,
           /* @__PURE__ */ jsx(
             Icon$l,
             {
@@ -22540,20 +22701,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$Q.selectValue, children: selectedOptions[0]?.label });
     }
-    return /* @__PURE__ */ jsx("span", { placeholder: placeholder2, className: styles$Q.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$Q.selectValue, children: selectedOption?.label });
-  }
-  return /* @__PURE__ */ jsx("div", { "aria-placeholder": placeholder2, className: styles$Q.placeholder, children: readOnly2 ? "" : placeholder2 || "" });
+  return /* @__PURE__ */ jsx("span", { placeholder: placeholder2, className: styles$Q.placeholder, children: placeholder2 });
 };
 const SelectTriggerActions = ({
   value,
@@ -22577,7 +22735,14 @@ const SelectTriggerActions = ({
         children: /* @__PURE__ */ jsx(Icon$l, { name: "close" })
       }
     ) }),
-    showChevron && /* @__PURE__ */ jsx("span", { className: styles$Q.action, children: /* @__PURE__ */ jsx(Icon$l, { name: "chevrondown" }) })
+    showChevron && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: classnames(styles$Q.action, { [styles$Q.disabled]: !enabled2 || readOnly2 }),
+        "aria-disabled": !enabled2 || readOnly2,
+        children: /* @__PURE__ */ jsx(Icon$l, { name: "chevrondown" })
+      }
+    )
   ] });
 };
 const Select = forwardRef(function Select2({
@@ -22610,6 +22775,10 @@ const Select = forwardRef(function Select2({
   // Progress state
   inProgress = defaultProps$M.inProgress,
   inProgressNotificationMessage = defaultProps$M.inProgressNotificationMessage,
+  // Grouping
+  groupBy: groupBy2,
+  groupHeaderRenderer,
+  ungroupedHeaderRenderer,
   // Internal
   updateState = noop$1,
   registerComponentApi,
@@ -22622,9 +22791,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);
@@ -22635,6 +22812,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);
@@ -22648,25 +22853,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 ? [] : "";
@@ -22675,45 +22885,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();
@@ -22731,8 +22944,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) {
@@ -22751,6 +22964,7 @@ const Select = forwardRef(function Select2({
       open,
       selectedIndex,
       filteredOptions,
+      flattenedGroupedOptions,
       toggleOption,
       multiSelect,
       findNextEnabledIndex,
@@ -22786,248 +23000,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__ */ 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$Q.selectTrigger, styles$Q[validationStatus], {
-                [styles$Q.disabled]: !enabled2,
-                [styles$Q.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$Q.selectTrigger, styles$Q[validationStatus], {
+                  [styles$Q.disabled]: !enabled2,
+                  [styles$Q.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$Q.selectContent, styles$Q[validationStatus]),
-              onKeyDown: handleKeyDown,
-              children: /* @__PURE__ */ jsxs("div", { className: styles$Q.command, children: [
-                searchable ? /* @__PURE__ */ jsxs("div", { className: styles$Q.commandInputContainer, children: [
-                  /* @__PURE__ */ jsx(Icon$l, { name: "search" }),
+                },
+                autoFocus,
+                children: [
                   /* @__PURE__ */ jsx(
-                    "input",
+                    SelectTriggerValue,
                     {
-                      role: "searchbox",
-                      className: classnames(styles$Q.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$Q.srOnly }),
-                /* @__PURE__ */ jsx("div", { role: "listbox", className: styles$Q.commandList, children: inProgress ? /* @__PURE__ */ jsx("div", { className: styles$Q.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$Q.selectContent, styles$Q[validationStatus]),
+                onKeyDown: handleKeyDown,
+                children: /* @__PURE__ */ jsxs("div", { className: styles$Q.command, children: [
+                  searchable ? /* @__PURE__ */ jsxs("div", { className: styles$Q.commandInputContainer, children: [
+                    /* @__PURE__ */ jsx(Icon$l, { name: "search" }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        role: "searchbox",
+                        className: classnames(styles$Q.commandInput),
+                        placeholder: "Search...",
+                        value: searchTerm,
+                        onChange: (e) => setSearchTerm(e.target.value)
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsx("button", { "aria-hidden": "true", className: styles$Q.srOnly }),
+                  /* @__PURE__ */ jsxs("div", { role: "listbox", className: styles$Q.commandList, children: [
+                    inProgress ? /* @__PURE__ */ jsx("div", { className: styles$Q.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$Q.groupHeader, children: ungroupedHeaderRenderer() }) : groupHeaderRenderer ? /* @__PURE__ */ jsx("div", { className: styles$Q.groupHeader, children: groupHeaderRenderer(groupName) }) : /* @__PURE__ */ jsx("div", { className: styles$Q.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$Q.multiSelectOption, {
-        [styles$Q.disabledOption]: !enabled2,
-        [styles$Q.highlighted]: isHighlighted
-      }),
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onClick: handleClick,
-      "data-state": selected2 ? "checked" : void 0,
-      children: /* @__PURE__ */ jsx("div", { className: styles$Q.multiSelectOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2 }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        children || label2,
-        selected2 && /* @__PURE__ */ jsx(Icon$l, { name: "checkmark" })
-      ] }) })
-    }
-  );
-}
 function SelectOptionItem(option) {
   const {
     value,
@@ -23093,19 +23284,19 @@ function SelectOptionItem(option) {
     }
   );
 }
-const themeVars$A = `'{"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$7 = "_error_drdje_54";
-const warning$8 = "_warning_drdje_54";
-const valid$7 = "_valid_drdje_54";
-const indicator$2 = "_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$A = `'{"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$7 = "_error_1iwha_54";
+const warning$8 = "_warning_1iwha_54";
+const valid$7 = "_valid_1iwha_54";
+const indicator$2 = "_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$P = {
   themeVars: themeVars$A,
   radioGroupContainer,
@@ -23228,7 +23419,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;
@@ -23324,8 +23517,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,
         {
@@ -23337,16 +23542,15 @@ const RadioGroupOption = ({
         }
       ),
       /* @__PURE__ */ jsx("label", { htmlFor: id, className: classnames(styles$P.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$P.radioOptionContainer, className),
       style: style2,
       "data-radio-item": true,
-      children: !!optionRenderer ? /* @__PURE__ */ jsxs("label", { className: styles$P.optionLabel, children: [
+      children: !!optionRenderer ? /* @__PURE__ */ jsxs("label", { htmlFor: id, className: styles$P.optionLabel, children: [
         /* @__PURE__ */ jsx("div", { className: styles$P.itemContainer, children: item2 }),
         optionRenderer({
           $checked: value === radioGroupContext.value,
@@ -23631,24 +23835,24 @@ const TextArea = forwardRef(function TextArea2({
   return /* @__PURE__ */ jsx(Part, { partId: PART_INPUT, children: /* @__PURE__ */ jsx("textarea", { ...textareaProps, rows, className: classnames(classes) }) });
 });
 const themeVars$y = `'{"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$5 = "_disabled_qbjl0_111";
-const focused$2 = "_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$5 = "_disabled_57zg7_111";
+const focused$2 = "_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$N = {
   themeVars: themeVars$y,
   command,
@@ -23666,7 +23870,7 @@ const styles$N = {
   action,
   autoCompleteEmpty,
   commandList,
-  "fade-in": "_fade-in_qbjl0_1",
+  "fade-in": "_fade-in_57zg7_1",
   autoCompleteOption,
   highlighted,
   disabledOption
@@ -23677,7 +23881,7 @@ const AutoCompleteContext = createContext({
   },
   inputValue: "",
   searchTerm: "",
-  options: /* @__PURE__ */ new Set(),
+  options: [],
   open: false,
   setOpen: (open) => {
   },
@@ -23692,7 +23896,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$H = {
@@ -23741,7 +23945,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);
@@ -23751,17 +23955,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;
@@ -23786,17 +23990,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 });
@@ -23817,7 +24020,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
       setInputValue(selectedValue?.label || "");
       setSearchTerm("");
     }
-  }, [multi, selectedValue]);
+  }, [selectedValue]);
   const clearValue = useCallback(() => {
     const newValue = multi ? [] : "";
     setInputValue("");
@@ -23825,22 +24028,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 = [];
@@ -24025,7 +24216,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
       {
         open,
         onOpenChange: (isOpen) => {
-          if (readOnly2) return;
+          if (readOnly2 || !enabled2) return;
           setOpen(isOpen);
           if (!isOpen) {
             setSelectedIndex(-1);
@@ -24049,7 +24240,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
               ),
               "aria-expanded": open,
               onClick: (event) => {
-                if (readOnly2) return;
+                if (readOnly2 || !enabled2) return;
                 if (multi && open) {
                   return;
                 }
@@ -24137,9 +24328,10 @@ const AutoComplete = forwardRef(function AutoComplete2({
                     /* @__PURE__ */ jsx(
                       "span",
                       {
-                        className: styles$N.action,
+                        className: classnames(styles$N.action, { [styles$N.disabled]: !enabled2 || readOnly2 }),
+                        "aria-disabled": !enabled2 || readOnly2,
                         onClick: () => {
-                          if (readOnly2) return;
+                          if (readOnly2 || !enabled2) return;
                           setOpen(!open);
                           inputRef.current?.focus();
                         },
@@ -24151,62 +24343,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$N.popoverContent,
               align: "start",
               onOpenAutoFocus: (e) => e.preventDefault(),
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  role: "listbox",
-                  className: styles$N.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$N.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 }) {
@@ -24250,65 +24425,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$N.autoCompleteOption, {
-        [styles$N.disabledOption]: !enabled2
-      }),
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onClick: handleClick,
-      children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: styles$N.autoCompleteOptionContent, children }),
-        selected2 && /* @__PURE__ */ jsx(Icon$l, { name: "checkmark" })
-      ] }) : optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2 }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: styles$N.autoCompleteOptionContent, children: label2 }),
-        selected2 && /* @__PURE__ */ jsx(Icon$l, { name: "checkmark" })
-      ] })
-    }
-  );
-}
 function AutoCompleteOption(option) {
   const {
     value,
@@ -27903,7 +28019,7 @@ const treeComponentRenderer = createComponentRenderer(
             // - All original source data properties (custom fields)
             ...flatTreeNode
           };
-          return node.props.itemTemplate ? /* @__PURE__ */ jsx(MemoizedItem, { node: node.props.itemTemplate, item: itemContext, renderChild: renderChild2 }) : /* @__PURE__ */ jsx(MemoizedItem, { node: defaultItemTemplate, item: itemContext, renderChild: renderChild2 });
+          return node.props.itemTemplate ? /* @__PURE__ */ jsx(MemoizedItem, { node: node.props.itemTemplate, contextVars: { $item: itemContext }, renderChild: renderChild2 }) : /* @__PURE__ */ jsx(MemoizedItem, { node: defaultItemTemplate, contextVars: { $item: itemContext }, renderChild: renderChild2 });
         }
       }
     );
@@ -28570,33 +28686,36 @@ const fragmentComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$p = `'{"textColor-pagination-Table": "var(--xmlui-textColor-pagination-Table)", "backgroundColor-Table": "var(--xmlui-backgroundColor-Table)", "textColor-Table": "var(--xmlui-textColor-Table)", "backgroundColor-row-Table": "var(--xmlui-backgroundColor-row-Table)", "backgroundColor-row-Table--hover": "var(--xmlui-backgroundColor-row-Table--hover)", "backgroundColor-selected-Table": "var(--xmlui-backgroundColor-selected-Table)", "backgroundColor-selected-Table--hover": "var(--xmlui-backgroundColor-selected-Table--hover)", "backgroundColor-heading-Table": "var(--xmlui-backgroundColor-heading-Table)", "backgroundColor-heading-Table--hover": "var(--xmlui-backgroundColor-heading-Table--hover)", "backgroundColor-heading-Table--active": "var(--xmlui-backgroundColor-heading-Table--active)", "padding-heading-Table": "var(--xmlui-padding-heading-Table)", "paddingHorizontal-heading-Table": "var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table))", "paddingVertical-heading-Table": "var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table))", "paddingLeft-heading-Table": "var(--xmlui-paddingLeft-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingRight-heading-Table": "var(--xmlui-paddingRight-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingTop-heading-Table": "var(--xmlui-paddingTop-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingBottom-heading-Table": "var(--xmlui-paddingBottom-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "padding-cell-Table": "var(--xmlui-padding-cell-Table)", "paddingHorizontal-cell-Table": "var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table))", "paddingVertical-cell-Table": "var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table))", "paddingLeft-cell-Table": "var(--xmlui-paddingLeft-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingRight-cell-Table": "var(--xmlui-paddingRight-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingTop-cell-Table": "var(--xmlui-paddingTop-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingBottom-cell-Table": "var(--xmlui-paddingBottom-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingHorizontal-cell-first-Table": "var(--xmlui-paddingHorizontal-cell-first-Table)", "paddingHorizontal-cell-last-Table": "var(--xmlui-paddingHorizontal-cell-last-Table)", "border-cell-Table": "var(--xmlui-border-cell-Table)", "borderHorizontal-cell-Table": "var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table))", "borderVertical-cell-Table": "var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table))", "borderLeft-cell-Table": "var(--xmlui-borderLeft-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderRight-cell-Table": "var(--xmlui-borderRight-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderTop-cell-Table": "var(--xmlui-borderTop-cell-Table, var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table)))", "borderBottom-cell-Table": "var(--xmlui-borderBottom-cell-Table)", "borderWidth-cell-Table": "var(--xmlui-borderWidth-cell-Table)", "borderHorizontalWidth-cell-Table": "var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderLeftWidth-cell-Table": "var(--xmlui-borderLeftWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderRightWidth-cell-Table": "var(--xmlui-borderRightWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderVerticalWidth-cell-Table": "var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderTopWidth-cell-Table": "var(--xmlui-borderTopWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderBottomWidth-cell-Table": "var(--xmlui-borderBottomWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderStyle-cell-Table": "var(--xmlui-borderStyle-cell-Table)", "borderHorizontalStyle-cell-Table": "var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderLeftStyle-cell-Table": "var(--xmlui-borderLeftStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderRightStyle-cell-Table": "var(--xmlui-borderRightStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderVerticalStyle-cell-Table": "var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderTopStyle-cell-Table": "var(--xmlui-borderTopStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderBottomStyle-cell-Table": "var(--xmlui-borderBottomStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderColor-cell-Table": "var(--xmlui-borderColor-cell-Table)", "borderHorizontalColor-cell-Table": "var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderLeftColor-cell-Table": "var(--xmlui-borderLeftColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderRightColor-cell-Table": "var(--xmlui-borderRightColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderVerticalColor-cell-Table": "var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderTopColor-cell-Table": "var(--xmlui-borderTopColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderBottomColor-cell-Table": "var(--xmlui-borderBottomColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderStartStartRadius-cell-Table": "var(--xmlui-borderStartStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderStartEndRadius-cell-Table": "var(--xmlui-borderStartEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndStartRadius-cell-Table": "var(--xmlui-borderEndStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndEndRadius-cell-Table": "var(--xmlui-borderEndEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "border-Table": "var(--xmlui-border-Table)", "borderHorizontal-Table": "var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table))", "borderVertical-Table": "var(--xmlui-borderVertical-Table, var(--xmlui-border-Table))", "borderLeft-Table": "var(--xmlui-borderLeft-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderRight-Table": "var(--xmlui-borderRight-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderTop-Table": "var(--xmlui-borderTop-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderBottom-Table": "var(--xmlui-borderBottom-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderWidth-Table": "var(--xmlui-borderWidth-Table)", "borderHorizontalWidth-Table": "var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table))", "borderLeftWidth-Table": "var(--xmlui-borderLeftWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderRightWidth-Table": "var(--xmlui-borderRightWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderVerticalWidth-Table": "var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table))", "borderTopWidth-Table": "var(--xmlui-borderTopWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderBottomWidth-Table": "var(--xmlui-borderBottomWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderStyle-Table": "var(--xmlui-borderStyle-Table)", "borderHorizontalStyle-Table": "var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table))", "borderLeftStyle-Table": "var(--xmlui-borderLeftStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderRightStyle-Table": "var(--xmlui-borderRightStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderVerticalStyle-Table": "var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table))", "borderTopStyle-Table": "var(--xmlui-borderTopStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderBottomStyle-Table": "var(--xmlui-borderBottomStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderColor-Table": "var(--xmlui-borderColor-Table)", "borderHorizontalColor-Table": "var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table))", "borderLeftColor-Table": "var(--xmlui-borderLeftColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderRightColor-Table": "var(--xmlui-borderRightColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderVerticalColor-Table": "var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table))", "borderTopColor-Table": "var(--xmlui-borderTopColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderBottomColor-Table": "var(--xmlui-borderBottomColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderStartStartRadius-Table": "var(--xmlui-borderStartStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderStartEndRadius-Table": "var(--xmlui-borderStartEndRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndStartRadius-Table": "var(--xmlui-borderEndStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndEndRadius-Table": "var(--xmlui-borderEndEndRadius-Table, var(--xmlui-borderRadius-Table))", "backgroundColor-pagination-Table": "var(--xmlui-backgroundColor-pagination-Table)", "textColor-heading-Table": "var(--xmlui-textColor-heading-Table)", "fontWeight-row-Table": "var(--xmlui-fontWeight-row-Table)", "fontSize-row-Table": "var(--xmlui-fontSize-row-Table)", "fontWeight-heading-Table": "var(--xmlui-fontWeight-heading-Table)", "fontSize-heading-Table": "var(--xmlui-fontSize-heading-Table)", "textTransform-heading-Table": "var(--xmlui-textTransform-heading-Table)", "borderRadius-Table": "var(--xmlui-borderRadius-Table)", "outlineWidth-heading-Table--focus": "var(--xmlui-outlineWidth-heading-Table--focus)", "outlineColor-heading-Table--focus": "var(--xmlui-outlineColor-heading-Table--focus)", "outlineStyle-heading-Table--focus": "var(--xmlui-outlineStyle-heading-Table--focus)", "outlineOffset-heading-Table--focus": "var(--xmlui-outlineOffset-heading-Table--focus)", "borderBottom-last-row-Table": "var(--xmlui-borderBottom-last-row-Table)"}'`;
-const wrapper$c = "_wrapper_fw2wb_14";
-const noScroll = "_noScroll_fw2wb_42";
-const headerWrapper$1 = "_headerWrapper_fw2wb_45";
-const tableBody = "_tableBody_fw2wb_46";
-const clickableHeader = "_clickableHeader_fw2wb_51";
-const headerContent = "_headerContent_fw2wb_65";
-const headerRow = "_headerRow_fw2wb_97";
-const columnCell = "_columnCell_fw2wb_101";
-const cell = "_cell_fw2wb_102";
-const alignTop = "_alignTop_fw2wb_110";
-const alignCenter$1 = "_alignCenter_fw2wb_114";
-const alignBottom = "_alignBottom_fw2wb_118";
-const table = "_table_fw2wb_46";
-const row$1 = "_row_fw2wb_126";
-const checkBoxWrapper = "_checkBoxWrapper_fw2wb_133";
-const showInHeader = "_showInHeader_fw2wb_138";
-const selected = "_selected_fw2wb_142";
-const allSelected = "_allSelected_fw2wb_142";
-const cellContent = "_cellContent_fw2wb_173";
-const focused = "_focused_fw2wb_200";
-const disabled$2 = "_disabled_fw2wb_212";
-const noBottomBorder = "_noBottomBorder_fw2wb_219";
-const noRows$1 = "_noRows_fw2wb_244";
-const loadingWrapper$1 = "_loadingWrapper_fw2wb_283";
-const forceHoverWrapper = "_forceHoverWrapper_fw2wb_296";
-const resizer$1 = "_resizer_fw2wb_299";
-const isResizing = "_isResizing_fw2wb_320";
+const wrapper$c = "_wrapper_17ovr_14";
+const noScroll = "_noScroll_17ovr_42";
+const headerWrapper$1 = "_headerWrapper_17ovr_45";
+const tableBody = "_tableBody_17ovr_46";
+const clickableHeader = "_clickableHeader_17ovr_51";
+const headerContent = "_headerContent_17ovr_65";
+const orderingIndicator = "_orderingIndicator_17ovr_68";
+const activeOrdering = "_activeOrdering_17ovr_73";
+const alwaysShow = "_alwaysShow_17ovr_73";
+const headerRow = "_headerRow_17ovr_111";
+const columnCell = "_columnCell_17ovr_115";
+const cell = "_cell_17ovr_116";
+const alignTop = "_alignTop_17ovr_124";
+const alignCenter$1 = "_alignCenter_17ovr_128";
+const alignBottom = "_alignBottom_17ovr_132";
+const table = "_table_17ovr_46";
+const row$1 = "_row_17ovr_140";
+const checkBoxWrapper = "_checkBoxWrapper_17ovr_147";
+const showInHeader = "_showInHeader_17ovr_152";
+const selected = "_selected_17ovr_156";
+const allSelected = "_allSelected_17ovr_156";
+const cellContent = "_cellContent_17ovr_187";
+const focused = "_focused_17ovr_214";
+const disabled$2 = "_disabled_17ovr_226";
+const noBottomBorder = "_noBottomBorder_17ovr_233";
+const noRows$1 = "_noRows_17ovr_258";
+const loadingWrapper$1 = "_loadingWrapper_17ovr_297";
+const forceHoverWrapper = "_forceHoverWrapper_17ovr_310";
+const resizer$1 = "_resizer_17ovr_313";
+const isResizing = "_isResizing_17ovr_334";
 const styles$E = {
   themeVars: themeVars$p,
   wrapper: wrapper$c,
@@ -28605,6 +28724,9 @@ const styles$E = {
   tableBody,
   clickableHeader,
   headerContent,
+  orderingIndicator,
+  activeOrdering,
+  alwaysShow,
   headerRow,
   columnCell,
   cell,
@@ -28709,6 +28831,7 @@ function useRowSelection({
   rowsSelectable,
   enableMultiRowSelection,
   rowDisabledPredicate,
+  rowUnselectablePredicate,
   onSelectionDidChange,
   initiallySelected = EMPTY_ARRAY,
   syncWithAppState
@@ -28964,7 +29087,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(() => {
@@ -29417,6 +29540,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) => {
@@ -29476,6 +29602,7 @@ const Table = forwardRef(
     pageSize = pageSizeOptions?.[0] || DEFAULT_PAGE_SIZES[0],
     currentPageIndex = 0,
     rowDisabledPredicate = defaultIsRowDisabled,
+    rowUnselectablePredicate = defaultIsRowUnselectable,
     sortBy: sortBy2,
     sortingDirection = defaultProps$C.sortingDirection,
     iconSortAsc,
@@ -29490,6 +29617,7 @@ const Table = forwardRef(
     hideHeader = defaultProps$C.hideHeader,
     hideNoDataView = defaultProps$C.hideNoDataView,
     alwaysShowSelectionHeader = defaultProps$C.alwaysShowSelectionHeader,
+    alwaysShowSortingIndicator = defaultProps$C.alwaysShowSortingIndicator,
     registerComponentApi,
     onSelectionDidChange,
     noBottomBorder: noBottomBorder2 = defaultProps$C.noBottomBorder,
@@ -29543,6 +29671,7 @@ const Table = forwardRef(
       rowsSelectable,
       enableMultiRowSelection,
       rowDisabledPredicate,
+      rowUnselectablePredicate,
       onSelectionDidChange,
       initiallySelected,
       syncWithAppState
@@ -29667,14 +29796,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,
             {
               ...{
@@ -29693,7 +29824,7 @@ const Table = forwardRef(
                 }
               }
             }
-          );
+          ) });
         }
       };
       return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
@@ -29705,6 +29836,7 @@ const Table = forwardRef(
       checkAllRows,
       toggleRow,
       rowDisabledPredicate,
+      rowUnselectablePredicate,
       hoveredRowId,
       headerCheckboxHovered
     ]);
@@ -29749,12 +29881,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(
@@ -29904,7 +30042,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);
                         }
@@ -29982,13 +30120,22 @@ const Table = forwardRef(
                                 header2.column.columnDef.header,
                                 header2.getContext()
                               ),
-                              header2.column.columnDef.enableSorting && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", maxWidth: 16 }, children: /* @__PURE__ */ jsx(
-                                ColumnOrderingIndicator,
+                              header2.column.columnDef.enableSorting && /* @__PURE__ */ jsx(Part, { partId: "orderIndicator", children: /* @__PURE__ */ jsx(
+                                "span",
                                 {
-                                  iconSortAsc,
-                                  iconSortDesc,
-                                  iconNoSort,
-                                  direction: header2.column.columnDef.meta?.accessorKey === _sortBy ? _sortingDirection : void 0
+                                  className: classnames(styles$E.orderingIndicator, {
+                                    [styles$E.activeOrdering]: header2.column.columnDef.meta?.accessorKey === _sortBy,
+                                    [styles$E.alwaysShow]: alwaysShowSortingIndicator
+                                  }),
+                                  children: /* @__PURE__ */ jsx(
+                                    ColumnOrderingIndicator,
+                                    {
+                                      iconSortAsc,
+                                      iconSortDesc,
+                                      iconNoSort,
+                                      direction: header2.column.columnDef.meta?.accessorKey === _sortBy ? _sortingDirection : void 0
+                                    }
+                                  )
                                 }
                               ) })
                             ] })
@@ -30050,6 +30197,9 @@ const Table = forwardRef(
                       rowVirtualizer.measureElement(el);
                     },
                     onClick: (event) => {
+                      if (!row2.getCanSelect()) {
+                        return;
+                      }
                       if (event?.defaultPrevented) {
                         return;
                       }
@@ -30175,6 +30325,7 @@ const defaultProps$C = {
   hideHeader: false,
   hideNoDataView: false,
   alwaysShowSelectionHeader: false,
+  alwaysShowSortingIndicator: false,
   noBottomBorder: false,
   paginationControlsLocation: "bottom",
   cellVerticalAlign: "center",
@@ -30272,6 +30423,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.`
     ),
@@ -30304,12 +30458,17 @@ const TableMd = createMetadata({
     alwaysShowSelectionHeader: {
       description: "This property indicates when the row selection header is displayed. When the value is `true,` the selection header is always visible. Otherwise, it is displayed only when hovered.",
       valueType: "boolean",
-      defaultValue: false
+      defaultValue: defaultProps$C.alwaysShowSelectionHeader
+    },
+    alwaysShowSortingIndicator: {
+      description: `This property indicates whether the sorting indicator is always visible in the column headers. When set to \`true\`, the sorting indicator is always visible. Otherwise, it is visible only when the user hovers over/focuses the column header or the column is sorted.`,
+      valueType: "boolean",
+      defaultValue: defaultProps$C.alwaysShowSortingIndicator
     },
     noBottomBorder: {
       description: `This property indicates whether the table should have a bottom border. When set to \`true\`, the table does not have a bottom border. Otherwise, it has a bottom border.`,
       valueType: "boolean",
-      defaultValue: false
+      defaultValue: defaultProps$C.noBottomBorder
     },
     paginationControlsLocation: {
       description: `This property determines the location of the pagination controls. It can be set to \`top\`, \`bottom\`, or \`both\`.`,
@@ -30321,7 +30480,7 @@ const TableMd = createMetadata({
       description: `This property controls the vertical alignment of cell content. It can be set to \`top\`, \`center\`, or \`bottom\`.`,
       valueType: "string",
       availableValues: ["top", "center", "bottom"],
-      defaultValue: "center"
+      defaultValue: defaultProps$C.cellVerticalAlign
     },
     checkboxTolerance: {
       description: `This property controls the tolerance area around checkboxes for easier interaction. This property only has an effect when the rowsSelectable property is set to \`true\`. \`none\` provides no tolerance (0px), \`compact\` provides minimal tolerance (8px), \`comfortable\` provides medium tolerance (12px), and \`spacious\` provides generous tolerance (16px) for improved accessibility.`,
@@ -30376,6 +30535,7 @@ const TableMd = createMetadata({
     [`outlineWidth-heading-${COMP$14}--focus`]: "$outlineWidth--focus",
     [`outlineStyle-heading-${COMP$14}--focus`]: "$outlineStyle--focus",
     [`outlineOffset-heading-${COMP$14}--focus`]: "$outlineOffset--focus",
+    [`outlineColor-heading-${COMP$14}--focus`]: "$outlineColor--focus",
     [`fontSize-heading-${COMP$14}`]: "$fontSize-tiny",
     [`fontWeight-heading-${COMP$14}`]: "$fontWeight-bold",
     [`textTransform-heading-${COMP$14}`]: "uppercase",
@@ -30384,7 +30544,6 @@ const TableMd = createMetadata({
     // [`backgroundColor-row-${COMP}`]: "inherit",
     [`backgroundColor-selected-${COMP$14}--hover`]: `$backgroundColor-row-${COMP$14}--hover`,
     [`backgroundColor-pagination-${COMP$14}`]: `$backgroundColor-${COMP$14}`,
-    [`outlineColor-heading-${COMP$14}--focus`]: "$outlineColor--focus",
     [`textColor-pagination-${COMP$14}`]: "$color-secondary",
     [`backgroundColor-row-${COMP$14}--hover`]: "$color-primary-50",
     [`backgroundColor-selected-${COMP$14}`]: "$color-primary-100",
@@ -30488,6 +30647,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),
@@ -30505,6 +30665,9 @@ const TableWithColumns = memo(
             alwaysShowSelectionHeader: extractValue.asOptionalBoolean(
               node.props.alwaysShowSelectionHeader
             ),
+            alwaysShowSortingIndicator: extractValue.asOptionalBoolean(
+              node.props.alwaysShowSortingIndicator
+            ),
             noBottomBorder: extractValue.asOptionalBoolean(node.props.noBottomBorder),
             paginationControlsLocation: extractValue.asOptionalString(
               node.props.paginationControlsLocation
@@ -32689,11 +32852,8 @@ function MemoizedSection({
     {
       node,
       renderChild: renderChild2,
-      item: item2,
-      context: sectionContext,
-      itemKey: "$group",
-      contextKey: "$group",
       contextVars: {
+        $group: { ...item2, ...sectionContext },
         ...contextVars,
         $isFirst: item2.index === 0,
         $isLast: item2.index === item2.count - 1
@@ -32846,10 +33006,10 @@ const dynamicHeightListComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: itemTemplate,
-              item: item2,
               renderChild: renderChild2,
               layoutContext,
               contextVars: {
+                $item: item2,
                 $itemIndex: rowIndex,
                 $isFirst: rowIndex === 0,
                 $isLast: rowIndex === count - 1
@@ -32871,10 +33031,10 @@ const dynamicHeightListComponentRenderer = createComponentRenderer(
           MemoizedItem,
           {
             node: node.props.groupFooterTemplate ?? { type: "Fragment" },
-            item: item2,
             renderChild: renderChild2,
-            itemKey: "$group",
-            contextKey: "$group"
+            contextVars: {
+              $group: item2
+            }
           },
           key
         ) : null : void 0
@@ -33271,7 +33431,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({
@@ -35059,7 +35218,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(
@@ -35261,6 +35421,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: {
@@ -35291,7 +35463,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$Q.themeVars),
   defaultThemeVars: {
@@ -35309,17 +35482,15 @@ const SelectMd = createMetadata({
     [`paddingVertical-item-${COMP$F}`]: "$space-2",
     [`paddingHorizontal-${COMP$F}`]: "$space-2",
     [`paddingVertical-${COMP$F}`]: "$space-2",
-    [`opacity-text-item-${COMP$F}--disabled`]: "0.5",
-    [`opacity-${COMP$F}--disabled`]: "0.5",
     [`backgroundColor-${COMP$F}-badge--hover`]: "$color-primary-400",
     [`backgroundColor-${COMP$F}-badge--active`]: "$color-primary-500",
-    [`textColor-item-${COMP$F}--disabled`]: "$color-surface-200",
+    [`textColor-item-${COMP$F}--disabled`]: "$color-surface-300",
     [`textColor-${COMP$F}-badge`]: "$const-color-surface-50",
     [`backgroundColor-item-${COMP$F}`]: "$backgroundColor-dropdown-item",
     [`backgroundColor-item-${COMP$F}--hover`]: "$backgroundColor-dropdown-item--hover",
     [`backgroundColor-item-${COMP$F}--active`]: "$backgroundColor-dropdown-item--active",
-    // Default borderColor-Input--disabled is too light so the disabled component is barely visible
-    [`borderColor-${COMP$F}--disabled`]: "initial",
+    [`borderColor-${COMP$F}--disabled`]: "$borderColor--disabled",
+    [`textColor-${COMP$F}--disabled`]: "$textColor--disabled",
     [`minHeight-${COMP$F}`]: "$space-7",
     [`minHeight-item-${COMP$F}`]: "$space-7"
   }
@@ -35335,7 +35506,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);
@@ -35368,15 +35540,38 @@ 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,
             {
               contextVars: {
+                $item: item2,
                 $itemContext: { removeItem }
               },
               node: node.props.valueTemplate,
-              item: item2,
               renderChild: renderChild2
             }
           );
@@ -35386,8 +35581,8 @@ const selectComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.optionTemplate,
-              item: item2,
               contextVars: {
+                $item: item2,
                 $selectedValue: val,
                 $inTrigger: inTrigger
               },
@@ -35772,8 +35967,8 @@ function Column({ nodeChildren, renderChild: renderChild2, ...columnMetadata })
         MemoizedItem,
         {
           node: nodeChildren,
-          item: row2,
           contextVars: {
+            $item: row2,
             $rowIndex: rowIndex,
             $colIndex: colIndex,
             $row: row2,
@@ -36254,7 +36449,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
     );
@@ -37705,7 +37900,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);
@@ -37716,7 +37911,7 @@ function DataLoader({
       const errorMessage = extractParam(
         {
           ...stateRef.current.state,
-          $error: error22?.toString()
+          $error: createContextVariableError(error22)
         },
         loader.props.errorNotificationMessage,
         stateRef.current.appContext
@@ -40675,7 +40870,7 @@ const Tabs = forwardRef(function Tabs2({
         className: classnames(className, styles$p.tabs, styles$p.accordionView),
         style: style2,
         children: /* @__PURE__ */ jsx(
-          Root,
+          Root$1,
           {
             value: `${currentTab}`,
             onValueChange: (tab) => {
@@ -40691,7 +40886,7 @@ const Tabs = forwardRef(function Tabs2({
             className: styles$p.accordionRoot,
             children: /* @__PURE__ */ jsxs("div", { className: styles$p.accordionInterleaved, children: [
               /* @__PURE__ */ jsx(List, { className: styles$p.accordionList, children: tabItems.map((tab, index) => /* @__PURE__ */ jsx(
-                Trigger,
+                Trigger$1,
                 {
                   value: tab.innerId,
                   asChild: true,
@@ -40726,7 +40921,7 @@ const Tabs = forwardRef(function Tabs2({
     ) });
   }
   return /* @__PURE__ */ jsx(TabContext.Provider, { value: tabContextValue, children: /* @__PURE__ */ jsxs(
-    Root,
+    Root$1,
     {
       ...rest,
       id: tabsId,
@@ -40758,7 +40953,7 @@ const Tabs = forwardRef(function Tabs2({
             children: [
               !distributeEvenly2 && !headerRenderer && tabAlignment === "end" && /* @__PURE__ */ jsx("div", { className: styles$p.filler, "data-orientation": orientation }),
               !distributeEvenly2 && !headerRenderer && tabAlignment === "center" && /* @__PURE__ */ jsx("div", { className: styles$p.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",
@@ -40865,7 +41060,6 @@ const tabsComponentRenderer = createComponentRenderer(
           MemoizedItem,
           {
             node: node.props.headerTemplate,
-            itemKey: "$header",
             contextVars: {
               $header: item2
             },
@@ -41353,7 +41547,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,
@@ -41401,7 +41595,6 @@ const tabItemComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.headerTemplate,
-              itemKey: "$header",
               contextVars: {
                 $header: {
                   id: item2.id,
@@ -41548,7 +41741,9 @@ const accordionItemComponentRenderer = createComponentRenderer(
           MemoizedItem,
           {
             node: node.props.headerTemplate ?? { type: "Fragment" },
-            item: item2,
+            contextVars: {
+              $item: item2
+            },
             renderChild: renderChild2
           }
         ) : void 0,
@@ -42186,12 +42381,51 @@ const carouselItemComponentRenderer = createComponentRenderer(
     return /* @__PURE__ */ jsx(CarouselItemComponent, { children: renderChild2(node.children) });
   }
 );
-const breakout = "_breakout_puy20_2";
+const breakout = "_breakout_z3cnt_2";
 const styles$l = {
   breakout
 };
 const Breakout = ({ children, style: style2, ...rest }) => {
-  return /* @__PURE__ */ jsx("div", { ...rest, style: style2, className: styles$l.breakout, children });
+  const ref = useRef(null);
+  const [breakoutStyle, setBreakoutStyle] = useState({});
+  const calculatedRef = useRef(false);
+  useLayoutEffect(() => {
+    const updateBreakoutStyle = () => {
+      if (!ref.current) return;
+      const currentMarginLeft = ref.current.style.marginLeft;
+      const currentMarginRight = ref.current.style.marginRight;
+      const currentWidth = ref.current.style.width;
+      ref.current.style.marginLeft = "0px";
+      ref.current.style.marginRight = "0px";
+      ref.current.style.width = "auto";
+      const rect = ref.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      ref.current.style.marginLeft = currentMarginLeft;
+      ref.current.style.marginRight = currentMarginRight;
+      ref.current.style.width = currentWidth;
+      const offsetLeft = rect.left;
+      const offsetRight = viewportWidth - rect.right;
+      const newStyle = {
+        marginLeft: `-${offsetLeft}px`,
+        marginRight: `-${offsetRight}px`,
+        width: `${viewportWidth}px`
+      };
+      setBreakoutStyle(newStyle);
+      calculatedRef.current = true;
+    };
+    if (!calculatedRef.current) {
+      updateBreakoutStyle();
+    }
+    const handleResize = () => {
+      calculatedRef.current = false;
+      updateBreakoutStyle();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ...rest, ref, style: { ...breakoutStyle, ...style2 }, className: styles$l.breakout, children });
 };
 const COMP$p = "Breakout";
 const BreakoutMd = createMetadata({
@@ -42456,7 +42690,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: {
@@ -42545,6 +42779,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,
       {
@@ -42562,6 +42803,7 @@ const optionComponentRenderer = createComponentRenderer(
             layoutContext
           }
         ) : void 0 : void 0,
+        ...extraProps,
         children: !hasTextNodeChild && renderChild2(node.children)
       }
     );
@@ -42670,17 +42912,15 @@ const AutoCompleteMd = createMetadata({
     [`paddingVertical-item-${COMP$k}`]: "$space-2",
     [`paddingHorizontal-${COMP$k}`]: "$space-2",
     [`paddingVertical-${COMP$k}`]: "$space-2",
-    [`opacity-text-item-${COMP$k}--disabled`]: "0.5",
-    [`opacity-${COMP$k}--disabled`]: "0.5",
     [`backgroundColor-${COMP$k}-badge--hover`]: "$color-primary-400",
     [`backgroundColor-${COMP$k}-badge--active`]: "$color-primary-500",
-    [`textColor-item-${COMP$k}--disabled`]: "$color-surface-200",
+    [`textColor-item-${COMP$k}--disabled`]: "$color-surface-300",
     [`textColor-${COMP$k}-badge`]: "$const-color-surface-50",
     [`backgroundColor-item-${COMP$k}`]: "$backgroundColor-dropdown-item",
     [`backgroundColor-item-${COMP$k}--hover`]: "$backgroundColor-dropdown-item--hover",
     [`backgroundColor-item-${COMP$k}--active`]: "$backgroundColor-dropdown-item--active",
-    // Default borderColor-Input--disabled is too light so the disabled component is barely visible
-    [`borderColor-${COMP$k}--disabled`]: "initial"
+    [`borderColor-${COMP$k}--disabled`]: "$borderColor--disabled",
+    [`textColor-${COMP$k}--disabled`]: "$textColor--disabled"
   }
 });
 const autoCompleteComponentRenderer = createComponentRenderer(
@@ -42724,8 +42964,8 @@ const autoCompleteComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.optionTemplate,
-              item: item2,
-              context: {
+              contextVars: {
+                $item: item2,
                 $selectedValue: val,
                 $inTrigger: inTrigger
               },
@@ -44780,11 +45020,11 @@ const htmlWbrTagRenderer = createComponentRenderer(
     return /* @__PURE__ */ jsx("wbr", { className, ...props, children: renderChild2(node.children) });
   }
 );
-const themeVars$5 = `'{"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$1 = "_error_1apm8_48";
-const warning$1 = "_warning_1apm8_63";
-const valid$1 = "_valid_1apm8_78";
+const themeVars$5 = `'{"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$1 = "_error_724av_48";
+const warning$1 = "_warning_724av_63";
+const valid$1 = "_valid_724av_78";
 const styles$h = {
   themeVars: themeVars$5,
   colorInput,
@@ -44873,7 +45113,6 @@ const ColorPicker = forwardRef(
         ...rest,
         id,
         className: classnames(className, styles$h.colorInput, {
-          [styles$h.disabled]: !enabled2,
           [styles$h.error]: validationStatus === "error",
           [styles$h.warning]: validationStatus === "warning",
           [styles$h.valid]: validationStatus === "valid"
@@ -44930,7 +45169,10 @@ const ColorPickerMd = createMetadata({
       }
     }
   },
-  themeVars: parseScssVar(styles$h.themeVars)
+  themeVars: parseScssVar(styles$h.themeVars),
+  defaultThemeVars: {
+    [`width-${COMP$i}`]: "48px"
+  }
 });
 const colorPickerComponentRenderer = createComponentRenderer(
   "ColorPicker",
@@ -45986,7 +46228,6 @@ const areaChartComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.tooltipTemplate,
-              item: tooltipData,
               contextVars: {
                 $tooltip: tooltipData
               },
@@ -46455,7 +46696,6 @@ const barChartComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.tooltipTemplate,
-              item: tooltipData,
               contextVars: {
                 $tooltip: tooltipData
               },
@@ -47236,7 +47476,6 @@ const lineChartComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.tooltipTemplate,
-              item: tooltipData,
               contextVars: {
                 $tooltip: tooltipData
               },
@@ -47537,7 +47776,6 @@ const radarChartComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.tooltipTemplate,
-              item: tooltipData,
               contextVars: {
                 $tooltip: tooltipData
               },
@@ -47924,8 +48162,6 @@ const toastComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: template || node.children,
-              itemKey: "$_TEMP",
-              contextKey: "$_TEMP",
               contextVars: {
                 $param: context
               },
@@ -49501,7 +49737,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.11.19";
+const version = "0.11.21";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -52940,7 +53176,7 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
     memoedLookupEventHandler,
     descriptor?.nonVisual || isApiBound || isCompoundComponent
   );
-  const { getResourceUrl } = useTheme();
+  const { getResourceUrl, disableInlineStyle: themeDisableInlineStyle } = useTheme();
   const extractResourceUrl = useCallback(
     (url) => {
       const extractedUrl = valueExtractor(url);
@@ -52958,10 +53194,14 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
         resolvedLayoutProps[key] = valueExtractor(safeNode.props[key], true);
       }
     });
-    return resolveLayoutProps(resolvedLayoutProps, {
-      ...layoutContextRef?.current,
-      mediaSize: appContext.mediaSize
-    });
+    return resolveLayoutProps(
+      resolvedLayoutProps,
+      {
+        ...layoutContextRef?.current,
+        mediaSize: appContext.mediaSize
+      },
+      themeDisableInlineStyle ?? appContext.appGlobals?.disableInlineStyle
+    );
   }, [appContext.mediaSize, layoutContextRef, safeNode.props, valueExtractor]);
   const stableLayoutCss = useShallowCompareMemoize(cssProps);
   const className = useComponentStyle(stableLayoutCss);
@@ -57141,7 +57381,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-DhLoHW95.js");
+      const { initMock } = await import("./initMock-D78LB-9A.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -57158,7 +57398,7 @@ function ApiInterceptorProvider({
           if (define_process_env_default.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-Wgm2_zjg.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-DhLoHW95.js")
+              import("./initMock-D78LB-9A.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -57195,7 +57435,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-Wgm2_zjg.js"),
-            import("./initMock-DhLoHW95.js")
+            import("./initMock-D78LB-9A.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -58994,7 +59234,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$M.sliderContainer, className), "data-slider-container": true, children: /* @__PURE__ */ jsxs(
-      Root$1,
+      Root$2,
       {
         ref: inputRef,
         minStepsBetweenThumbs,
@@ -59233,7 +59473,7 @@ const FormItem = memo(function FormItem2({
   const initialValueFromSubject = useFormContextPart(
     (value2) => getByPath(value2?.originalSubject, formItemId)
   );
-  const initialValue = initialValueFromSubject === void 0 ? initialValueFromProps : initialValueFromSubject;
+  const initialValue = initialValueFromSubject === void 0 || initialValueFromSubject === null ? initialValueFromProps : initialValueFromSubject;
   const value = useFormContextPart((value2) => getByPath(value2?.subject, formItemId));
   const validationResult = useFormContextPart((value2) => value2?.validationResults[formItemId]);
   const dispatch = useFormContextPart((value2) => value2?.dispatch);
@@ -59890,7 +60130,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: {