xmlui 0.10.19 → 0.10.21

package/dist/lib/{index-cuh97e2e.mjs → index-BiS4wEuu.mjs}

@@ -2,14 +2,14 @@ var _a;
 import "./index.css";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useRef, useInsertionEffect, useCallback, forwardRef, useState, useEffect, useId, cloneElement, useMemo, useContext, useLayoutEffect, createContext, memo, Fragment as Fragment$1, useImperativeHandle, useReducer, isValidElement, useDeferredValue, createElement, startTransition, useTransition, Children } from "react";
+import React__default, { useRef, useInsertionEffect, useCallback, forwardRef, useState, useEffect, useId, cloneElement, useMemo, useContext, useLayoutEffect, createContext, memo, Fragment as Fragment$1, useReducer, isValidElement, useDeferredValue, createElement, startTransition, useTransition, Children } from "react";
 import require$$0, { flushSync, createPortal } from "react-dom";
 import yaml from "js-yaml";
 import { useQuery, useInfiniteQuery, QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import produce, { createDraft, finishDraft, enableMapSet } from "immer";
-import { throttle, get, isNil, omitBy, isUndefined, noop as noop$2, isPlainObject, isEqual, isEmpty, union, uniq, orderBy as orderBy$1, isObject, isArray, groupBy, sortBy, omit, isNumber, isString as isString$1, set, isNaN as isNaN$1, cloneDeep, merge, defaultTo, capitalize, unset, setWith, keyBy, pick } from "lodash-es";
+import { throttle, get, isNil, omitBy, isUndefined, noop as noop$2, isPlainObject, isEmpty, isEqual, union, uniq, orderBy as orderBy$1, isObject, isArray, groupBy, sortBy, omit, isNumber, isString as isString$1, set, isNaN as isNaN$1, cloneDeep, merge, defaultTo, capitalize, unset, setWith, keyBy, pick } from "lodash-es";
 import { formatDistanceToNow, parse, format, parseISO, isValid, isToday, isYesterday, isTomorrow, isThisWeek, formatRelative, isThisYear, isSameDay, differenceInMinutes } from "date-fns";
-import { l as labelPositionMd, o as orientationOptionMd, v as validationStatusMd, b as alignmentOptionValues, i as isSizeType, L as LinkTargetMd, c as alignmentOptionMd, d as iconPositionMd, e as buttonTypesMd, s as sizeMd, f as buttonThemeMd, g as buttonVariantMd, h as layoutOptionKeys, T as TextVariantElement, V as VariantPropsKeys, j as variantOptionsMd, k as scrollAnchoringValues, m as buttonThemeNames, n as iconPositionNames, p as buttonVariantNames, t as triggerPositionNames, q as httpMethodNames, r as orientationOptionValues, u as viewportSizeNames, M as MetadataProvider } from "./metadata-utils-CtY0QcvH.mjs";
+import { l as labelPositionMd, o as orientationOptionMd, v as validationStatusMd, b as alignmentOptionValues, i as isSizeType, L as LinkTargetMd, c as alignmentOptionMd, d as iconPositionMd, e as buttonTypesMd, s as sizeMd, f as buttonThemeMd, g as buttonVariantMd, h as layoutOptionKeys, T as TextVariantElement, V as VariantPropsKeys, j as variantOptionsMd, k as scrollAnchoringValues, m as buttonThemeNames, n as iconPositionNames, p as buttonVariantNames, t as triggerPositionNames, q as httpMethodNames, r as orientationOptionValues, u as viewportSizeNames, M as MetadataProvider } from "./metadata-utils-BTIt1_wE.mjs";
 import classnames from "classnames";
 import Color from "color";
 import * as ReactDropdownMenu from "@radix-ui/react-dropdown-menu";
@@ -21,20 +21,17 @@ import { useLocation, NavLink as NavLink$1, Link, useNavigate, Routes, Route, Na
 import { Helmet, HelmetProvider } from "react-helmet-async";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { useContextSelector, createContext as createContext$1 } from "use-context-selector";
-import { FixedSizeList } from "react-window";
-import AutoSizer from "react-virtualized-auto-sizer";
-import { F as Parser, G as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, H as T_MEMBER_ACCESS_EXPRESSION, I as T_IDENTIFIER, J as T_PREFIX_OP_EXPRESSION, K as T_FUNCTION_DECLARATION, L as T_ARROW_EXPRESSION, M as createXmlUiTreeNodeId, O as T_EMPTY_STATEMENT, Q as T_SWITCH_STATEMENT, R as T_TRY_STATEMENT, V as T_THROW_STATEMENT, W as T_FOR_OF_STATEMENT, X as T_FOR_IN_STATEMENT, Y as T_FOR_STATEMENT, Z as T_EXPRESSION_STATEMENT, _ as T_BREAK_STATEMENT, $ as T_CONTINUE_STATEMENT, a0 as T_DO_WHILE_STATEMENT, a1 as T_WHILE_STATEMENT, a2 as T_RETURN_STATEMENT, a3 as T_IF_STATEMENT, a4 as T_CONST_STATEMENT, a5 as T_LET_STATEMENT, a6 as T_ARROW_EXPRESSION_STATEMENT, a7 as T_BLOCK_STATEMENT, a8 as T_VAR_STATEMENT, a9 as T_ASSIGNMENT_EXPRESSION, aa as T_LITERAL, ab as T_SPREAD_EXPRESSION, ac as T_FUNCTION_INVOCATION_EXPRESSION, ad as T_POSTFIX_OP_EXPRESSION, ae as T_CONDITIONAL_EXPRESSION, af as T_BINARY_EXPRESSION, ag as T_UNARY_EXPRESSION, ah as T_OBJECT_LITERAL, ai as T_ARRAY_LITERAL, aj as T_SEQUENCE_EXPRESSION, ak as T_TEMPLATE_LITERAL_EXPRESSION, al as T_VAR_DECLARATION, am as T_DESTRUCTURE, h as createXmlUiParser, w as nodeToComponentDef, D as DiagnosticCategory, E as ErrCodes, S as SyntaxKind, an as PARSED_MARK_PROP, ao as collectCodeBehindFromSource, ap as removeCodeBehindTokensFromTree } from "./transform-bHBjkKSL.mjs";
+import { Virtualizer } from "virtua";
+import { F as Parser, G as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, H as T_MEMBER_ACCESS_EXPRESSION, I as T_IDENTIFIER, J as T_PREFIX_OP_EXPRESSION, K as T_FUNCTION_DECLARATION, L as T_ARROW_EXPRESSION, M as createXmlUiTreeNodeId, O as T_EMPTY_STATEMENT, Q as T_SWITCH_STATEMENT, R as T_TRY_STATEMENT, V as T_THROW_STATEMENT, W as T_FOR_OF_STATEMENT, X as T_FOR_IN_STATEMENT, Y as T_FOR_STATEMENT, Z as T_EXPRESSION_STATEMENT, _ as T_BREAK_STATEMENT, $ as T_CONTINUE_STATEMENT, a0 as T_DO_WHILE_STATEMENT, a1 as T_WHILE_STATEMENT, a2 as T_RETURN_STATEMENT, a3 as T_IF_STATEMENT, a4 as T_CONST_STATEMENT, a5 as T_LET_STATEMENT, a6 as T_ARROW_EXPRESSION_STATEMENT, a7 as T_BLOCK_STATEMENT, a8 as T_VAR_STATEMENT, a9 as T_ASSIGNMENT_EXPRESSION, aa as T_LITERAL, ab as T_SPREAD_EXPRESSION, ac as T_FUNCTION_INVOCATION_EXPRESSION, ad as T_POSTFIX_OP_EXPRESSION, ae as T_CONDITIONAL_EXPRESSION, af as T_BINARY_EXPRESSION, ag as T_UNARY_EXPRESSION, ah as T_OBJECT_LITERAL, ai as T_ARRAY_LITERAL, aj as T_SEQUENCE_EXPRESSION, ak as T_TEMPLATE_LITERAL_EXPRESSION, al as T_VAR_DECLARATION, am as T_DESTRUCTURE, h as createXmlUiParser, w as nodeToComponentDef, D as DiagnosticCategory, E as ErrCodes, S as SyntaxKind, an as PARSED_MARK_PROP, ao as collectCodeBehindFromSource, ap as removeCodeBehindTokensFromTree } from "./transform-Tooy42EB.mjs";
 import { useReactTable, getPaginationRowModel, getCoreRowModel, flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { RenderPropSticky } from "react-sticky-el";
 import * as dropzone from "react-dropzone";
 import toast, { Toaster, ToastBar } from "react-hot-toast";
-import { Virtualizer } from "virtua";
 import memoizeOne from "memoize-one";
-import { Item as Item$1, ItemText, ItemIndicator, Root, Trigger, Icon as Icon$1, Portal as Portal$1, Content, ScrollUpButton, SelectViewport, ScrollDownButton, SelectItemText } from "@radix-ui/react-select";
-import { Popover, PopoverTrigger, Portal, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
-import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "cmdk";
+import { Popover, PopoverTrigger, Portal as Portal$1, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
 import { FocusScope } from "@radix-ui/react-focus-scope";
+import { Item as Item$1, ItemText, ItemIndicator, Root, Trigger, Portal, Content, ScrollUpButton, Viewport, ScrollDownButton, SelectItemText } from "@radix-ui/react-select";
 import * as InnerRadioGroup from "@radix-ui/react-radio-group";
 import { DayPicker } from "react-day-picker";
 import { Root as Root$1, Track, Range, Thumb } from "@radix-ui/react-slider";
@@ -57,7 +54,7 @@ import { Area, ResponsiveContainer, AreaChart as AreaChart$1, XAxis, YAxis, Cart
 import { MemoryRouter, HashRouter, BrowserRouter } from "react-router-dom";
 import { useSpring, useInView, animated } from "@react-spring/web";
 import { AnimatePresence, motion } from "framer-motion";
-import { c as componentFileExtension, a as codeBehindFileExtension, g as getLintSeverity, L as LintSeverity, l as lintApp, p as printComponentLints, d as lintErrorsComponent } from "./xmlui-serializer-DB6BLiXK.mjs";
+import { c as componentFileExtension, a as codeBehindFileExtension, g as getLintSeverity, L as LintSeverity, l as lintApp, p as printComponentLints, d as lintErrorsComponent } from "./xmlui-serializer-uCYa8_tZ.mjs";
 var client = {};
 var m = require$$0;
 if (process.env.NODE_ENV === "production") {
@@ -300,10 +297,13 @@ const useEvent = (callback) => {
   useInsertionEffect(() => {
     callbackRef.current = callback;
   }, [callback]);
-  return useCallback((...args) => {
-    const latestFn = callbackRef.current;
-    return latestFn == null ? void 0 : latestFn(...args);
-  }, [callbackRef]);
+  return useCallback(
+    (...args) => {
+      const latestFn = callbackRef.current;
+      return latestFn == null ? void 0 : latestFn(...args);
+    },
+    [callbackRef]
+  );
 };
 function humanFileSize(bytes, si = false, dp = 1) {
   const thresh = si ? 1e3 : 1024;
@@ -592,7 +592,7 @@ function distinct(arr) {
 function asyncThrottle(func, wait, options2) {
   const throttled = throttle(
     (resolve, reject, args) => {
-      func(...args).then(resolve).catch(reject);
+      void func(...args).then(resolve).catch(reject);
     },
     wait,
     options2
@@ -751,18 +751,18 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 const themeVars$10 = `'{"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_1tt0f_14";
-const top$1 = "_top_1tt0f_21";
-const end = "_end_1tt0f_26";
-const bottom$1 = "_bottom_1tt0f_32";
-const start = "_start_1tt0f_37";
-const shrinkToLabel = "_shrinkToLabel_1tt0f_43";
-const inputLabel = "_inputLabel_1tt0f_46";
-const disabled$b = "_disabled_1tt0f_59";
-const labelBreak = "_labelBreak_1tt0f_63";
-const required = "_required_1tt0f_68";
-const requiredMark = "_requiredMark_1tt0f_75";
-const itemWithLabel = "_itemWithLabel_1tt0f_79";
+const container$3 = "_container_1pi4w_14";
+const top$1 = "_top_1pi4w_21";
+const end = "_end_1pi4w_26";
+const bottom$1 = "_bottom_1pi4w_32";
+const start = "_start_1pi4w_37";
+const shrinkToLabel = "_shrinkToLabel_1pi4w_43";
+const inputLabel = "_inputLabel_1pi4w_46";
+const disabled$c = "_disabled_1pi4w_59";
+const labelBreak = "_labelBreak_1pi4w_63";
+const required = "_required_1pi4w_68";
+const requiredMark = "_requiredMark_1pi4w_75";
+const itemWithLabel = "_itemWithLabel_1pi4w_79";
 const styles$1k = {
   themeVars: themeVars$10,
   container: container$3,
@@ -772,7 +772,7 @@ const styles$1k = {
   start,
   shrinkToLabel,
   inputLabel,
-  disabled: disabled$b,
+  disabled: disabled$c,
   labelBreak,
   required,
   requiredMark,
@@ -1392,10 +1392,7 @@ const useRealBackground = (element) => {
   useEffect(() => {
     return setCounter((prev) => prev + 1);
   }, [activeThemeTone, activeThemeId]);
-  return useMemo(
-    () => element ? realBackgroundColor(element) : "transparent",
-    [element, counter]
-  );
+  return useMemo(() => element ? realBackgroundColor(element) : "transparent", [element]);
 };
 const useStartMargin = (hasOutsideScroll2, parentRef, scrollRef) => {
   const [startMargin, setStartMargin] = useState(0);
@@ -1719,7 +1716,7 @@ const DropdownMenuSubContent = "_DropdownMenuSubContent_iu9k6_19";
 const DropdownMenuItem = "_DropdownMenuItem_iu9k6_29";
 const DropdownMenuSubTrigger = "_DropdownMenuSubTrigger_iu9k6_30";
 const active$3 = "_active_iu9k6_53";
-const disabled$a = "_disabled_iu9k6_63";
+const disabled$b = "_disabled_iu9k6_63";
 const wrapper$m = "_wrapper_iu9k6_74";
 const DropdownMenuSeparator = "_DropdownMenuSeparator_iu9k6_78";
 const styles$1h = {
@@ -1729,7 +1726,7 @@ const styles$1h = {
   DropdownMenuItem,
   DropdownMenuSubTrigger,
   active: active$3,
-  disabled: disabled$a,
+  disabled: disabled$b,
   wrapper: wrapper$m,
   DropdownMenuSeparator
 };
@@ -2132,7 +2129,7 @@ function useCustomSvgIconRenderer(resourceUrl) {
     if (!resourceUrl) {
       return;
     }
-    ensureCustomSvgIcon(resourceUrl);
+    void ensureCustomSvgIcon(resourceUrl);
   }, [ensureCustomSvgIcon, resourceUrl]);
   const customSvg = resourceUrl ? customSvgs[resourceUrl] : null;
   const iconRenderer = useCallback(
@@ -2324,7 +2321,6 @@ class StyleLexer {
    * Fetches the next token from the input stream
    */
   fetch() {
-    const lexer = this;
     const input2 = this.input;
     const startPos = this._prefetchedPos || input2.position;
     this._lastFetchPosition = this.input.position;
@@ -2334,6 +2330,19 @@ class StyleLexer {
     let ch = null;
     let useResolver = false;
     let stringWrapper = "";
+    const appendTokenChar = () => {
+      text2 += ch;
+      this._prefetched = null;
+      this._prefetchedPos = null;
+      lastEndPos = input2.position;
+    };
+    const fetchNextChar = () => {
+      if (!this._prefetched) {
+        this._prefetchedPos = input2.position;
+        this._prefetched = input2.get();
+      }
+      return this._prefetched;
+    };
     let phase = 0;
     while (true) {
       ch = fetchNextChar();
@@ -2450,19 +2459,6 @@ class StyleLexer {
       }
       appendTokenChar();
     }
-    function appendTokenChar() {
-      text2 += ch;
-      lexer._prefetched = null;
-      lexer._prefetchedPos = null;
-      lastEndPos = input2.position;
-    }
-    function fetchNextChar() {
-      if (!lexer._prefetched) {
-        lexer._prefetchedPos = input2.position;
-        lexer._prefetched = input2.get();
-      }
-      return lexer._prefetched;
-    }
     function makeToken() {
       if (useResolver) {
         tokenType = styleKeywords[text2] ?? (isIdStart(text2[0]) ? StyleTokenType.Identifier : StyleTokenType.Unknown);
@@ -2913,7 +2909,78 @@ class StyleParser {
     const startToken = this._lexer.peek();
     const themeIdNode = this.tryThemeId();
     if (themeIdNode) return themeIdNode;
-    const parser = this;
+    const parseColorParameters = (pars) => {
+      this._lexer.get();
+      this.expectToken(StyleTokenType.LParent, "S007");
+      for (let i = 0; i < pars.length; i++) {
+        const value = this.getNumber();
+        if (value === null) return false;
+        const unit = this._lexer.peek(true);
+        switch (pars[i]) {
+          case "V%":
+            if (unit.type === StyleTokenType.Percentage) {
+              if (value < 0 || value > 100) {
+                this.reportError("S008");
+                return false;
+              }
+              this._lexer.get();
+            } else {
+              if (value < 0 || value > 255) {
+                this.reportError("S009");
+                return false;
+              }
+            }
+            break;
+          case "%":
+            if (unit.type !== StyleTokenType.Percentage || value < 0 || value > 100) {
+              this.reportError("S008");
+              return false;
+            }
+            this._lexer.get();
+            break;
+          case "angle":
+            if (unit.type === StyleTokenType.Angle) {
+              this._lexer.get();
+            }
+            break;
+          case "alpha":
+            if (unit.type === StyleTokenType.Percentage) {
+              if (value < 0 || value > 100) {
+                this.reportError("S008");
+                return false;
+              }
+              this._lexer.get();
+            } else {
+              if (value < 0 || value > 1) {
+                this.reportError("S011");
+                return false;
+              }
+            }
+            break;
+        }
+        if (i === pars.length - 1) continue;
+        let sepToken = this._lexer.peek(true);
+        if (sepToken.type === StyleTokenType.Ws) {
+          this._lexer.get();
+          sepToken = this._lexer.peek(true);
+          if (sepToken.type === StyleTokenType.Comma) {
+            this._lexer.get();
+          }
+        } else {
+          this.expectToken(StyleTokenType.Comma);
+        }
+        sepToken = this._lexer.peek();
+        if (sepToken.type === StyleTokenType.Ws) {
+          this._lexer.get();
+        }
+      }
+      let aSepToken = this._lexer.peek();
+      if (aSepToken.type === StyleTokenType.Ws) {
+        this._lexer.get();
+      }
+      this.expectToken(StyleTokenType.RParent, "S010");
+      return true;
+    };
     switch (startToken.type) {
       case StyleTokenType.ColorName:
         this._lexer.get();
@@ -2965,78 +3032,6 @@ class StyleParser {
         this.reportError("S005", startToken);
         return null;
     }
-    function parseColorParameters(pars) {
-      parser._lexer.get();
-      parser.expectToken(StyleTokenType.LParent, "S007");
-      for (let i = 0; i < pars.length; i++) {
-        const value = parser.getNumber();
-        if (value === null) return false;
-        const unit = parser._lexer.peek(true);
-        switch (pars[i]) {
-          case "V%":
-            if (unit.type === StyleTokenType.Percentage) {
-              if (value < 0 || value > 100) {
-                parser.reportError("S008");
-                return false;
-              }
-              parser._lexer.get();
-            } else {
-              if (value < 0 || value > 255) {
-                parser.reportError("S009");
-                return false;
-              }
-            }
-            break;
-          case "%":
-            if (unit.type !== StyleTokenType.Percentage || value < 0 || value > 100) {
-              parser.reportError("S008");
-              return false;
-            }
-            parser._lexer.get();
-            break;
-          case "angle":
-            if (unit.type === StyleTokenType.Angle) {
-              parser._lexer.get();
-            }
-            break;
-          case "alpha":
-            if (unit.type === StyleTokenType.Percentage) {
-              if (value < 0 || value > 100) {
-                parser.reportError("S008");
-                return false;
-              }
-              parser._lexer.get();
-            } else {
-              if (value < 0 || value > 1) {
-                parser.reportError("S011");
-                return false;
-              }
-            }
-            break;
-        }
-        if (i === pars.length - 1) continue;
-        let sepToken = parser._lexer.peek(true);
-        if (sepToken.type === StyleTokenType.Ws) {
-          parser._lexer.get();
-          sepToken = parser._lexer.peek(true);
-          if (sepToken.type === StyleTokenType.Comma) {
-            parser._lexer.get();
-          }
-        } else {
-          parser.expectToken(StyleTokenType.Comma);
-        }
-        sepToken = parser._lexer.peek();
-        if (sepToken.type === StyleTokenType.Ws) {
-          parser._lexer.get();
-        }
-      }
-      let aSepToken = parser._lexer.peek();
-      if (aSepToken.type === StyleTokenType.Ws) {
-        parser._lexer.get();
-      }
-      parser.expectToken(StyleTokenType.RParent, "S010");
-      return true;
-    }
   }
   getNumber() {
     const token = this._lexer.get();
@@ -4277,7 +4272,7 @@ const icon$4 = "_icon_8uiju_65";
 const includeHoverIndicator = "_includeHoverIndicator_8uiju_71";
 const displayActive = "_displayActive_8uiju_106";
 const navItemActive = "_navItemActive_8uiju_118";
-const disabled$9 = "_disabled_8uiju_153";
+const disabled$a = "_disabled_8uiju_153";
 const vertical$6 = "_vertical_8uiju_157";
 const innerContent$1 = "_innerContent_8uiju_170";
 const navLinkStyles = {
@@ -4288,7 +4283,7 @@ const navLinkStyles = {
   includeHoverIndicator,
   displayActive,
   navItemActive,
-  disabled: disabled$9,
+  disabled: disabled$a,
   vertical: vertical$6,
   innerContent: innerContent$1
 };
@@ -4853,6 +4848,7 @@ function App({
   name,
   className,
   applyDefaultContentPadding,
+  registerComponentApi,
   ...rest
 }) {
   const { getThemeVar } = useTheme();
@@ -5851,13 +5847,13 @@ const navLinkComponentRenderer = createComponentRenderer(
 const themeVars$N = `'{"padding-Link": "var(--xmlui-padding-Link)", "paddingHorizontal-Link": "var(--xmlui-paddingHorizontal-Link, var(--xmlui-padding-Link))", "paddingVertical-Link": "var(--xmlui-paddingVertical-Link, var(--xmlui-padding-Link))", "paddingLeft-Link": "var(--xmlui-paddingLeft-Link, var(--xmlui-paddingHorizontal-Link, var(--xmlui-padding-Link)))", "paddingRight-Link": "var(--xmlui-paddingRight-Link, var(--xmlui-paddingHorizontal-Link, var(--xmlui-padding-Link)))", "paddingTop-Link": "var(--xmlui-paddingTop-Link, var(--xmlui-paddingVertical-Link, var(--xmlui-padding-Link)))", "paddingBottom-Link": "var(--xmlui-paddingBottom-Link, var(--xmlui-paddingVertical-Link, var(--xmlui-padding-Link)))", "padding-icon-Link": "var(--xmlui-padding-icon-Link)", "paddingHorizontal-icon-Link": "var(--xmlui-paddingHorizontal-icon-Link, var(--xmlui-padding-icon-Link))", "paddingVertical-icon-Link": "var(--xmlui-paddingVertical-icon-Link, var(--xmlui-padding-icon-Link))", "paddingLeft-icon-Link": "var(--xmlui-paddingLeft-icon-Link, var(--xmlui-paddingHorizontal-icon-Link, var(--xmlui-padding-icon-Link)))", "paddingRight-icon-Link": "var(--xmlui-paddingRight-icon-Link, var(--xmlui-paddingHorizontal-icon-Link, var(--xmlui-padding-icon-Link)))", "paddingTop-icon-Link": "var(--xmlui-paddingTop-icon-Link, var(--xmlui-paddingVertical-icon-Link, var(--xmlui-padding-icon-Link)))", "paddingBottom-icon-Link": "var(--xmlui-paddingBottom-icon-Link, var(--xmlui-paddingVertical-icon-Link, var(--xmlui-padding-icon-Link)))", "border-Link": "var(--xmlui-border-Link)", "borderHorizontal-Link": "var(--xmlui-borderHorizontal-Link, var(--xmlui-border-Link))", "borderVertical-Link": "var(--xmlui-borderVertical-Link, var(--xmlui-border-Link))", "borderLeft-Link": "var(--xmlui-borderLeft-Link, var(--xmlui-borderHorizontal-Link, var(--xmlui-border-Link)))", "borderRight-Link": "var(--xmlui-borderRight-Link, var(--xmlui-borderHorizontal-Link, var(--xmlui-border-Link)))", "borderTop-Link": "var(--xmlui-borderTop-Link, var(--xmlui-borderVertical-Link, var(--xmlui-border-Link)))", "borderBottom-Link": "var(--xmlui-borderBottom-Link, var(--xmlui-borderVertical-Link, var(--xmlui-border-Link)))", "borderWidth-Link": "var(--xmlui-borderWidth-Link)", "borderHorizontalWidth-Link": "var(--xmlui-borderHorizontalWidth-Link, var(--xmlui-borderWidth-Link))", "borderLeftWidth-Link": "var(--xmlui-borderLeftWidth-Link, var(--xmlui-borderHorizontalWidth-Link, var(--xmlui-borderWidth-Link)))", "borderRightWidth-Link": "var(--xmlui-borderRightWidth-Link, var(--xmlui-borderHorizontalWidth-Link, var(--xmlui-borderWidth-Link)))", "borderVerticalWidth-Link": "var(--xmlui-borderVerticalWidth-Link, var(--xmlui-borderWidth-Link))", "borderTopWidth-Link": "var(--xmlui-borderTopWidth-Link, var(--xmlui-borderVerticalWidth-Link, var(--xmlui-borderWidth-Link)))", "borderBottomWidth-Link": "var(--xmlui-borderBottomWidth-Link, var(--xmlui-borderVerticalWidth-Link, var(--xmlui-borderWidth-Link)))", "borderStyle-Link": "var(--xmlui-borderStyle-Link)", "borderHorizontalStyle-Link": "var(--xmlui-borderHorizontalStyle-Link, var(--xmlui-borderStyle-Link))", "borderLeftStyle-Link": "var(--xmlui-borderLeftStyle-Link, var(--xmlui-borderHorizontalStyle-Link, var(--xmlui-borderStyle-Link)))", "borderRightStyle-Link": "var(--xmlui-borderRightStyle-Link, var(--xmlui-borderHorizontalStyle-Link, var(--xmlui-borderStyle-Link)))", "borderVerticalStyle-Link": "var(--xmlui-borderVerticalStyle-Link, var(--xmlui-borderStyle-Link))", "borderTopStyle-Link": "var(--xmlui-borderTopStyle-Link, var(--xmlui-borderVerticalStyle-Link, var(--xmlui-borderStyle-Link)))", "borderBottomStyle-Link": "var(--xmlui-borderBottomStyle-Link, var(--xmlui-borderVerticalStyle-Link, var(--xmlui-borderStyle-Link)))", "borderColor-Link": "var(--xmlui-borderColor-Link)", "borderHorizontalColor-Link": "var(--xmlui-borderHorizontalColor-Link, var(--xmlui-borderColor-Link))", "borderLeftColor-Link": "var(--xmlui-borderLeftColor-Link, var(--xmlui-borderHorizontalColor-Link, var(--xmlui-borderColor-Link)))", "borderRightColor-Link": "var(--xmlui-borderRightColor-Link, var(--xmlui-borderHorizontalColor-Link, var(--xmlui-borderColor-Link)))", "borderVerticalColor-Link": "var(--xmlui-borderVerticalColor-Link, var(--xmlui-borderColor-Link))", "borderTopColor-Link": "var(--xmlui-borderTopColor-Link, var(--xmlui-borderVerticalColor-Link, var(--xmlui-borderColor-Link)))", "borderBottomColor-Link": "var(--xmlui-borderBottomColor-Link, var(--xmlui-borderVerticalColor-Link, var(--xmlui-borderColor-Link)))", "borderStartStartRadius-Link": "var(--xmlui-borderStartStartRadius-Link, var(--xmlui-borderRadius-Link))", "borderStartEndRadius-Link": "var(--xmlui-borderStartEndRadius-Link, var(--xmlui-borderRadius-Link))", "borderEndStartRadius-Link": "var(--xmlui-borderEndStartRadius-Link, var(--xmlui-borderRadius-Link))", "borderEndEndRadius-Link": "var(--xmlui-borderEndEndRadius-Link, var(--xmlui-borderRadius-Link))", "textColor-Link": "var(--xmlui-textColor-Link)", "fontFamily-Link": "var(--xmlui-fontFamily-Link)", "fontSize-Link": "var(--xmlui-fontSize-Link)", "fontStyle-Link": "var(--xmlui-fontStyle-Link)", "fontVariant-Link": "var(--xmlui-fontVariant-Link)", "fontWeight-Link": "var(--xmlui-fontWeight-Link)", "fontStretch-Link": "var(--xmlui-fontStretch-Link)", "textDecorationLine-Link": "var(--xmlui-textDecorationLine-Link)", "textDecorationColor-Link": "var(--xmlui-textDecorationColor-Link)", "textDecorationStyle-Link": "var(--xmlui-textDecorationStyle-Link)", "textDecorationThickness-Link": "var(--xmlui-textDecorationThickness-Link)", "textUnderlineOffset-Link": "var(--xmlui-textUnderlineOffset-Link)", "lineHeight-Link": "var(--xmlui-lineHeight-Link)", "backgroundColor-Link": "var(--xmlui-backgroundColor-Link)", "textTransform-Link": "var(--xmlui-textTransform-Link)", "letterSpacing-Link": "var(--xmlui-letterSpacing-Link)", "wordSpacing-Link": "var(--xmlui-wordSpacing-Link)", "textShadow-Link": "var(--xmlui-textShadow-Link)", "textIndent-Link": "var(--xmlui-textIndent-Link)", "textAlign-Link": "var(--xmlui-textAlign-Link)", "textAlignLast-Link": "var(--xmlui-textAlignLast-Link)", "wordBreak-Link": "var(--xmlui-wordBreak-Link)", "wordWrap-Link": "var(--xmlui-wordWrap-Link)", "direction-Link": "var(--xmlui-direction-Link)", "writingMode-Link": "var(--xmlui-writingMode-Link)", "lineBreak-Link": "var(--xmlui-lineBreak-Link)", "textColor-Link--active": "var(--xmlui-textColor-Link--active)", "textColor-Link--hover": "var(--xmlui-textColor-Link--hover)", "textColor-Link--hover--active": "var(--xmlui-textColor-Link--hover--active)", "fontWeight-Link--active": "var(--xmlui-fontWeight-Link--active)", "gap-icon-Link": "var(--xmlui-gap-icon-Link)", "textDecorationColor-Link--hover": "var(--xmlui-textDecorationColor-Link--hover)", "textDecorationColor-Link--active": "var(--xmlui-textDecorationColor-Link--active)", "outlineWidth-Link--focus": "var(--xmlui-outlineWidth-Link--focus)", "outlineColor-Link--focus": "var(--xmlui-outlineColor-Link--focus)", "outlineStyle-Link--focus": "var(--xmlui-outlineStyle-Link--focus)", "outlineOffset-Link--focus": "var(--xmlui-outlineOffset-Link--focus)"}'`;
 const container$2 = "_container_1iujp_14";
 const active$2 = "_active_1iujp_75";
-const disabled$8 = "_disabled_1iujp_79";
+const disabled$9 = "_disabled_1iujp_79";
 const iconWrapper = "_iconWrapper_1iujp_94";
 const styles$17 = {
   themeVars: themeVars$N,
   container: container$2,
   active: active$2,
-  disabled: disabled$8,
+  disabled: disabled$9,
   iconWrapper
 };
 const defaultProps$15 = {
@@ -6032,7 +6028,7 @@ const themeVars$M = `'{"backgroundColor-Tree-row--selected": "var(--xmlui-backgr
 const wrapper$j = "_wrapper_eyur1_14";
 const rowWrapper = "_rowWrapper_eyur1_22";
 const selected$2 = "_selected_eyur1_39";
-const focused$2 = "_focused_eyur1_46";
+const focused$3 = "_focused_eyur1_46";
 const gutter = "_gutter_eyur1_56";
 const toggleWrapper = "_toggleWrapper_eyur1_63";
 const hidden$2 = "_hidden_eyur1_72";
@@ -6044,7 +6040,7 @@ const styles$16 = {
   wrapper: wrapper$j,
   rowWrapper,
   selected: selected$2,
-  focused: focused$2,
+  focused: focused$3,
   gutter,
   toggleWrapper,
   hidden: hidden$2,
@@ -6252,7 +6248,7 @@ function hierarchyToNative(hierarchyData, fieldConfig) {
     treeItemsById
   };
 }
-const TreeRow = memo(({ index, style: style2, data }) => {
+const TreeRow = memo(({ index, data }) => {
   const {
     nodes,
     toggleNode,
@@ -6309,7 +6305,7 @@ const TreeRow = memo(({ index, style: style2, data }) => {
   );
   const nodeWithState = treeItem;
   const isLoading = nodeWithState.loadingState === "loading";
-  return /* @__PURE__ */ jsx("div", { style: { ...style2, width: "auto", minWidth: "100%", display: "flex" }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", display: "flex" }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: classnames(styles$16.rowWrapper, {
@@ -6810,7 +6806,7 @@ const TreeComponent = memo((props) => {
           if (currentIndex >= 0) {
             const currentNode = flatTreeData[currentIndex];
             if (currentNode.hasChildren && !currentNode.isExpanded) {
-              toggleNode(currentNode);
+              void toggleNode(currentNode);
             } else if (currentNode.hasChildren && currentNode.isExpanded && currentIndex + 1 < flatTreeData.length) {
               newIndex = currentIndex + 1;
             }
@@ -6822,7 +6818,7 @@ const TreeComponent = memo((props) => {
           if (currentIndex >= 0) {
             const currentNode = flatTreeData[currentIndex];
             if (currentNode.hasChildren && currentNode.isExpanded) {
-              toggleNode(currentNode);
+              void toggleNode(currentNode);
             } else if (currentNode.depth > 0) {
               for (let i = currentIndex - 1; i >= 0; i--) {
                 if (flatTreeData[i].depth < currentNode.depth) {
@@ -6854,7 +6850,7 @@ const TreeComponent = memo((props) => {
               newIndex = currentIndex;
             }
             if (e.key === "Enter" && currentNode.hasChildren) {
-              toggleNode(currentNode);
+              void toggleNode(currentNode);
             }
           }
           handled = true;
@@ -6900,10 +6896,6 @@ const TreeComponent = memo((props) => {
     animateExpand,
     expandRotation
   ]);
-  const getItemKey = useCallback((index, data2) => {
-    const node = data2.nodes[index];
-    return (node == null ? void 0 : node.key) || (node == null ? void 0 : node.id) || `fallback-${index}`;
-  }, []);
   const treeApiMethods = useMemo(() => {
     return {
       // Expansion methods
@@ -7079,14 +7071,14 @@ const TreeComponent = memo((props) => {
             (item2) => String(item2.key) === String(nodeId)
           );
           if (nodeIndex >= 0 && listRef.current) {
-            listRef.current.scrollToItem(nodeIndex, "center");
+            listRef.current.scrollToIndex(nodeIndex, { align: "center" });
           }
         }, 0);
       },
       scrollToItem: (nodeId) => {
         const nodeIndex = findNodeIndexById(nodeId);
         if (nodeIndex >= 0 && listRef.current) {
-          listRef.current.scrollToItem(nodeIndex, "center");
+          listRef.current.scrollToIndex(nodeIndex, { align: "center" });
         }
       },
       appendNode: (parentNodeId, nodeData) => {
@@ -7403,19 +7395,8 @@ const TreeComponent = memo((props) => {
       onFocus: handleTreeFocus,
       onBlur: handleTreeBlur,
       onKeyDown: handleKeyDown,
-      children: /* @__PURE__ */ jsx(AutoSizer, { children: ({ width, height }) => /* @__PURE__ */ jsx(
-        FixedSizeList,
-        {
-          ref: listRef,
-          height,
-          itemCount: itemData.nodes.length,
-          itemData,
-          itemSize: itemHeight,
-          itemKey: getItemKey,
-          width,
-          children: TreeRow
-        }
-      ) })
+      style: { height: "100%", overflow: "auto" },
+      children: /* @__PURE__ */ jsx(Virtualizer, { ref: listRef, children: flatTreeData.map((node, index) => /* @__PURE__ */ jsx(TreeRow, { index, data: itemData }, node.key)) })
     }
   );
 });
@@ -9168,7 +9149,7 @@ function processStatementQueue(statements, evalContext, thread) {
     thread.breakLabelValue = queue.length > 0 ? queue.peek().label : -1;
     let outcome;
     try {
-      (_a2 = evalContext == null ? void 0 : evalContext.onStatementStarted) == null ? void 0 : _a2.call(evalContext, evalContext, queueItem.statement);
+      void ((_a2 = evalContext == null ? void 0 : evalContext.onStatementStarted) == null ? void 0 : _a2.call(evalContext, evalContext, queueItem.statement));
       outcome = processStatement(
         queueItem.statement,
         queueItem.execInfo ?? {},
@@ -9208,7 +9189,7 @@ function processStatementQueue(statements, evalContext, thread) {
         diagInfo.clearToLabels++;
       }
     }
-    (_b = evalContext == null ? void 0 : evalContext.onStatementCompleted) == null ? void 0 : _b.call(evalContext, evalContext, queueItem.statement);
+    void ((_b = evalContext == null ? void 0 : evalContext.onStatementCompleted) == null ? void 0 : _b.call(evalContext, evalContext, queueItem.statement));
     if (queue.length > diagInfo.maxQueueLength) {
       diagInfo.maxQueueLength = queue.length;
     }
@@ -9925,7 +9906,7 @@ function evalAssignment(evaluator, thisStack, expr, evalContext, thread) {
   const rootScope = getRootIdScope(leftValue, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "assignment");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "assignment");
   }
   evaluator(thisStack, leftValue, evalContext, thread);
   thisStack.pop();
@@ -9933,7 +9914,7 @@ function evalAssignment(evaluator, thisStack, expr, evalContext, thread) {
   thisStack.pop();
   const value = evalAssignmentCore(thisStack, expr, evalContext, thread);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "assignment");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "assignment");
   }
   return value;
 }
@@ -9941,13 +9922,13 @@ function evalPreOrPost(evaluator, thisStack, expr, evalContext, thread) {
   const rootScope = getRootIdScope(expr.expr, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "pre-post");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "pre-post");
   }
   evaluator(thisStack, expr.expr, evalContext, thread);
   thisStack.pop();
   const value = evalPreOrPostCore(thisStack, expr, evalContext, thread);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "pre-post");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "pre-post");
   }
   return value;
 }
@@ -10026,11 +10007,11 @@ function evalFunctionInvocation(evaluator, thisStack, expr, evalContext, thread)
   const rootScope = getRootIdScope(expr.obj, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "function-call");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "function-call");
   }
   const value = ((_b = evalContext.options) == null ? void 0 : _b.defaultToOptionalMemberAccess) ? functionObj == null ? void 0 : functionObj.call(currentContext, ...functionArgs) : functionObj.call(currentContext, ...functionArgs);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "function-call");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "function-call");
   }
   setExprValue(expr, { value }, thread);
   thisStack.push(value);
@@ -10801,6 +10782,576 @@ const styles$13 = {
   breakKeep,
   breakHyphenate
 };
+function hashString(str) {
+  let hash = 5381;
+  let i = str.length;
+  while (i) {
+    hash = hash * 33 ^ str.charCodeAt(--i);
+  }
+  let s = (hash >>> 0).toString(36);
+  return s;
+}
+function toKebabCase(str) {
+  if (str.startsWith("--")) {
+    return str;
+  }
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+function stableJSONStringify(obj) {
+  return JSON.stringify(obj);
+}
+class StyleRegistry {
+  constructor() {
+    this.cache = /* @__PURE__ */ new Map();
+    this.rootClasses = /* @__PURE__ */ new Set();
+    this.injected = /* @__PURE__ */ new Set();
+    this.refCounts = /* @__PURE__ */ new Map();
+    this.ssrHashes = /* @__PURE__ */ new Set();
+  }
+  register(styles2) {
+    const key = stableJSONStringify(styles2);
+    const styleHash = hashString(key);
+    const cachedEntry = this.cache.get(styleHash);
+    if (cachedEntry) {
+      return cachedEntry;
+    }
+    const className = `css-${styleHash}`;
+    const css = this._generateCss(`.${className}`, styles2);
+    const entry = { className, styleHash, css };
+    this.cache.set(styleHash, entry);
+    return entry;
+  }
+  /**
+   * [PRIVATE] Recursively generates CSS rules from a style object.
+   * This is the new, more powerful engine.
+   * @param selector - The CSS selector for the current context (e.g., '.css-123' or '&:hover').
+   * @param styles - The style object to process.
+   * @returns A string of CSS rules.
+   */
+  _generateCss(selector, styles2) {
+    const directProps = [];
+    const nestedRules = [];
+    for (const key in styles2) {
+      const value = styles2[key];
+      if (typeof value === "object" && value !== null) {
+        nestedRules.push(this._processNestedRule(selector, key, value));
+      } else {
+        directProps.push(`${toKebabCase(key)}:${value};`);
+      }
+    }
+    let finalCss = "";
+    if (directProps.length > 0) {
+      finalCss += `${selector} {${directProps.join("")}}`;
+    }
+    finalCss += nestedRules.join("");
+    return finalCss;
+  }
+  _processNestedRule(parentSelector, nestedKey, nestedStyles) {
+    if (nestedKey.startsWith("@")) {
+      return `${nestedKey}{${this._generateCss(parentSelector, nestedStyles)}}`;
+    }
+    const newSelector = nestedKey.replace(/&/g, parentSelector);
+    return this._generateCss(newSelector, nestedStyles);
+  }
+  getSsrStyles() {
+    const allCss = Array.from(this.cache.values()).map((entry) => entry.css).join("");
+    return `@layer dynamic {${allCss}}`;
+  }
+  /**
+   * Adds a class name to be applied to the <html> tag.
+   */
+  addRootClasses(classNames) {
+    classNames.forEach((className) => {
+      this.rootClasses.add(className);
+    });
+  }
+  /**
+   * Returns a space-separated string of all collected html classes.
+   */
+  getRootClasses() {
+    return Array.from(this.rootClasses).join(" ");
+  }
+  // NEW: A helper to safely get the current reference count.
+  getRefCount(styleHash) {
+    return this.refCounts.get(styleHash) || 0;
+  }
+  /**
+   * Increments the reference count for a given style hash.
+   */
+  incrementRef(styleHash) {
+    const newCount = (this.refCounts.get(styleHash) || 0) + 1;
+    this.refCounts.set(styleHash, newCount);
+  }
+  /**
+   * Decrements the reference count for a given style hash.
+   * @returns {number} The new reference count.
+   */
+  decrementRef(styleHash) {
+    const currentCount = this.refCounts.get(styleHash) || 0;
+    const newCount = Math.max(0, currentCount - 1);
+    if (newCount > 0) {
+      this.refCounts.set(styleHash, newCount);
+    } else {
+      this.refCounts.delete(styleHash);
+    }
+    return newCount;
+  }
+}
+const IndexerContext = React__default.createContext({
+  indexing: false
+});
+function useIndexerContext() {
+  return useContext(IndexerContext);
+}
+const StyleContext = createContext(null);
+function StyleProvider({
+  children,
+  styleRegistry = new StyleRegistry(),
+  forceNew = false
+  // Optional prop to force a new registry
+}) {
+  const parentRegistry = useContext(StyleContext);
+  const [registry] = useState(() => {
+    const newRegistry = styleRegistry;
+    if (typeof window !== "undefined") {
+      const ssrTag = document.querySelector('style[data-style-registry="true"]');
+      const ssrHashes = ssrTag == null ? void 0 : ssrTag.getAttribute("data-ssr-hashes");
+      if (ssrHashes) {
+        let hashes = ssrHashes.split(",");
+        newRegistry.ssrHashes = new Set(hashes);
+        newRegistry.injected = new Set(hashes);
+      }
+    }
+    return newRegistry;
+  });
+  if (parentRegistry && !forceNew) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(StyleContext.Provider, { value: registry, children });
+}
+function useStyleRegistry() {
+  const registry = useContext(StyleContext);
+  if (registry === null) {
+    throw new Error("Component must be used within a StyleProvider");
+  }
+  return registry;
+}
+function useComponentStyle(styles2) {
+  const rootStyle = useMemo(() => {
+    return !styles2 || Object.keys(styles2).length === 0 ? EMPTY_OBJECT : {
+      "&": styles2
+      // "@container style(--screenSize: 1) or @container style(--screenSize: 2) ... etc": responsiveSizes,
+    };
+  }, [styles2]);
+  return useStyles(rootStyle);
+}
+const StyleInjectionTargetContext = createContext(null);
+function useDomRoot() {
+  const domRoot = useContext(StyleInjectionTargetContext);
+  return domRoot;
+}
+function useStyles(styles2, { prepend } = EMPTY_OBJECT) {
+  const { indexing } = useIndexerContext();
+  const domRoot = useDomRoot();
+  const injectionTarget = typeof document === "undefined" ? null : domRoot instanceof ShadowRoot ? domRoot : document.head;
+  const registry = useStyleRegistry();
+  const { className, styleHash } = useMemo(() => {
+    if (indexing || !styles2 || styles2 === EMPTY_OBJECT || Object.keys(styles2).length === 0) {
+      return { className: void 0, styleHash: void 0 };
+    }
+    return registry.register(styles2);
+  }, [indexing, registry, styles2]);
+  useInsertionEffect(() => {
+    if (!styleHash || registry.injected.has(styleHash)) {
+      return;
+    }
+    const { css } = registry.cache.get(styleHash) || {};
+    if (css) {
+      const styleElement = document.createElement("style");
+      styleElement.setAttribute("data-style-hash", styleHash);
+      styleElement.innerHTML = `@layer dynamic {
+${css}
+}`;
+      if (prepend) {
+        injectionTarget.insertBefore(styleElement, injectionTarget.firstChild.nextSibling);
+      } else {
+        injectionTarget.appendChild(styleElement);
+      }
+      registry.injected.add(styleHash);
+    }
+  }, [registry, styleHash, injectionTarget]);
+  useEffect(() => {
+    if (!styleHash) {
+      return;
+    }
+    registry.incrementRef(styleHash);
+    return () => {
+      registry.decrementRef(styleHash);
+      setTimeout(() => {
+        var _a2;
+        if (registry.getRefCount(styleHash) === 0 && !registry.ssrHashes.has(styleHash)) {
+          registry.injected.delete(styleHash);
+          (_a2 = injectionTarget.querySelector(`style[data-style-hash="${styleHash}"]`)) == null ? void 0 : _a2.remove();
+        }
+      }, 0);
+    };
+  }, [injectionTarget, registry, styleHash]);
+  return className;
+}
+const THEME_VAR_PREFIX = "xmlui";
+const themeVarCapturesRegex = /(\$[a-zA-Z][a-zA-Z0-9-_]*)/g;
+const booleanRegex = /^(true|false)$/;
+const starSizeRegex = /^\d*\*$/;
+const defaultCompResult = {
+  cssProps: {},
+  issues: /* @__PURE__ */ new Set()
+};
+function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
+  const result = {
+    cssProps: {},
+    issues: /* @__PURE__ */ new Set()
+  };
+  if (!!getOrientation(layoutContext)) {
+    result.cssProps.flexShrink = 0;
+  }
+  collectCss("width");
+  const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
+  if (horizontalStarSize !== null) {
+    result.cssProps.flex = horizontalStarSize;
+    result.cssProps.flexShrink = 1;
+  }
+  collectCss("minWidth");
+  collectCss("maxWidth");
+  collectCss("height");
+  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");
+  const paddingHorizontal = transformLayoutValue("paddingHorizontal");
+  if (paddingHorizontal) {
+    result.cssProps.paddingLeft = paddingHorizontal;
+    result.cssProps.paddingRight = paddingHorizontal;
+  }
+  collectCss("paddingRight");
+  collectCss("paddingLeft");
+  const paddingVertical = transformLayoutValue("paddingVertical");
+  if (paddingVertical) {
+    result.cssProps.paddingTop = paddingVertical;
+    result.cssProps.paddingBottom = paddingVertical;
+  }
+  collectCss("paddingTop");
+  collectCss("paddingBottom");
+  collectCss("margin");
+  const marginHorizontal = transformLayoutValue("marginHorizontal");
+  if (marginHorizontal) {
+    result.cssProps.marginLeft = marginHorizontal;
+    result.cssProps.marginRight = marginHorizontal;
+  }
+  collectCss("marginRight");
+  collectCss("marginLeft");
+  const marginVertical = transformLayoutValue("marginVertical");
+  if (marginVertical) {
+    result.cssProps.marginTop = marginVertical;
+    result.cssProps.marginBottom = marginVertical;
+  }
+  collectCss("marginTop");
+  collectCss("marginBottom");
+  collectCss("border");
+  const horizontalBorder = transformLayoutValue("borderHorizontal");
+  if (horizontalBorder) {
+    result.cssProps.borderLeft = horizontalBorder;
+    result.cssProps.borderRight = horizontalBorder;
+  }
+  collectCss("borderRight");
+  collectCss("borderLeft");
+  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");
+  const wrapContent = transformLayoutValue("wrapContent");
+  if (wrapContent) {
+    result.cssProps.flexWrap = wrapContent === "true" ? "wrap" : "nowrap";
+  }
+  collectCss("canShrink", "flexShrink");
+  const canShrink = transformLayoutValue("canShrink");
+  if (canShrink) {
+    result.cssProps.flexShrink = canShrink === "true" ? 1 : 0;
+  }
+  if (isEmpty(result.cssProps) && isEmpty(result.issues)) {
+    return defaultCompResult;
+  }
+  return result;
+  function transformLayoutValue(prop) {
+    var _a2, _b;
+    const defValue = resolveSingleValue();
+    if (((_a2 = layoutContext == null ? void 0 : layoutContext.mediaSize) == null ? void 0 : _a2.sizeIndex) !== void 0) {
+      const sizeIndex = (_b = layoutContext.mediaSize) == null ? void 0 : _b.sizeIndex;
+      const xsValue = resolveSingleValue("xs");
+      const smValue = resolveSingleValue("sm");
+      const mdValue = resolveSingleValue("md");
+      const lgValue = resolveSingleValue("lg");
+      const xlValue = resolveSingleValue("xl");
+      const xxlValue = resolveSingleValue("xxl");
+      let mergedValue;
+      switch (sizeIndex) {
+        case 0:
+          mergedValue = xsValue ?? smValue ?? mdValue;
+          break;
+        case 1:
+          mergedValue = smValue ?? mdValue;
+          break;
+        case 2:
+          mergedValue = mdValue;
+          break;
+        case 3:
+          mergedValue = lgValue;
+          break;
+        case 4:
+          mergedValue = xlValue ?? lgValue;
+          break;
+        case 5:
+          mergedValue = xxlValue ?? xlValue ?? lgValue;
+          break;
+      }
+      return mergedValue ?? defValue;
+    }
+    return defValue;
+    function resolveSingleValue(sizeTag = "") {
+      const fullProp = sizeTag ? `${prop}-${sizeTag}` : prop;
+      let singleInput = layoutProps[fullProp];
+      if (singleInput == void 0) {
+        return;
+      }
+      if (typeof singleInput === "string") {
+        singleInput = singleInput.trim();
+      } else {
+        singleInput = singleInput.toString();
+      }
+      const value = singleInput ? singleInput.replace(
+        themeVarCapturesRegex,
+        (match) => toCssVar(match.trim())
+      ) : void 0;
+      if (singleInput !== value) {
+        return value;
+      }
+      const propPatterns = layoutPatterns[prop];
+      if (!propPatterns || propPatterns.length === 0) {
+        return value;
+      }
+      for (const pattern of propPatterns) {
+        if (pattern.test(value)) {
+          return value;
+        }
+      }
+      result.issues.add(fullProp);
+      return value;
+    }
+  }
+  function collectCss(prop, propCssName = "") {
+    const value = transformLayoutValue(prop);
+    if (value) {
+      result.cssProps[propCssName || prop] = value;
+    }
+  }
+  function getHorizontalStarSize(size, layoutContext2) {
+    if (!size) return null;
+    const orientation = getOrientation(layoutContext2);
+    return orientation === "horizontal" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
+  }
+  function getVerticalStarSize(size, layoutContext2) {
+    if (!size) return null;
+    const orientation = getOrientation(layoutContext2);
+    return orientation === "vertical" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
+  }
+  function getStarSizeNumber(input2) {
+    if (starSizeRegex.test(input2)) {
+      const numberPart = input2.slice(0, -1);
+      return numberPart === "" ? 1 : parseInt(numberPart, 10);
+    }
+    return null;
+  }
+  function getOrientation(layoutContext2) {
+    if (!layoutContext2) return;
+    let orientation = (layoutContext2 == null ? void 0 : layoutContext2.type) === "Stack" && (layoutContext2 == null ? void 0 : layoutContext2.orientation);
+    return orientation == null ? void 0 : orientation.toString();
+  }
+}
+function toCssVar(c) {
+  return `var(--${THEME_VAR_PREFIX}-${c.substring(1)})`;
+}
+const layoutPatterns = {
+  // --- Dimensions
+  width: [],
+  minWidth: [],
+  maxWidth: [],
+  height: [],
+  minHeight: [],
+  maxHeight: [],
+  gap: [],
+  // --- Positions
+  top: [],
+  right: [],
+  bottom: [],
+  left: [],
+  // --- Border
+  border: [],
+  borderTop: [],
+  borderRight: [],
+  borderBottom: [],
+  borderLeft: [],
+  borderColor: [],
+  borderStyle: [],
+  borderWidth: [],
+  borderHorizontal: [],
+  borderVertical: [],
+  // --- Border radius
+  borderRadius: [],
+  radiusTopLeft: [],
+  radiusTopRight: [],
+  radiusBottomLeft: [],
+  radiusBottomRight: [],
+  // --- Padding
+  padding: [],
+  paddingHorizontal: [],
+  paddingVertical: [],
+  paddingTop: [],
+  paddingRight: [],
+  paddingBottom: [],
+  paddingLeft: [],
+  // --- Margin
+  margin: [],
+  marginHorizontal: [],
+  marginVertical: [],
+  marginTop: [],
+  marginRight: [],
+  marginBottom: [],
+  marginLeft: [],
+  // --- Other
+  backgroundColor: [],
+  background: [],
+  boxShadow: [],
+  direction: [],
+  overflowX: [],
+  overflowY: [],
+  zIndex: [],
+  opacity: [],
+  // --- Typography
+  color: [],
+  fontFamily: [],
+  fontSize: [],
+  fontWeight: [],
+  fontStyle: [booleanRegex],
+  fontVariant: [],
+  lineBreak: [],
+  textDecoration: [],
+  userSelect: [],
+  letterSpacing: [],
+  textTransform: [],
+  lineHeight: [],
+  textAlign: [],
+  textWrap: [],
+  textAlignLast: [],
+  textIndent: [],
+  textShadow: [],
+  wordBreak: [],
+  wordSpacing: [],
+  wordWrap: [],
+  writingMode: [],
+  // --- Content rendering
+  wrapContent: [],
+  canShrink: [],
+  // --- Other
+  cursor: [],
+  zoom: [],
+  whiteSpace: [],
+  textDecorationLine: [],
+  textDecorationColor: [],
+  textDecorationStyle: [],
+  textDecorationThickness: [],
+  textUnderlineOffset: [],
+  transform: [],
+  // --- Outline
+  outline: [],
+  outlineWidth: [],
+  outlineColor: [],
+  outlineStyle: [],
+  outlineOffset: [],
+  // --- Animation
+  transition: []
+};
+const customVariantCache = /* @__PURE__ */ new Map();
+function setCustomVariantCache(variant, entry) {
+  customVariantCache.set(variant, {
+    ...entry,
+    createdAt: Date.now()
+  });
+}
+function hasCustomVariantCache(variant) {
+  return customVariantCache.has(variant);
+}
 const defaultProps$11 = {
   maxLines: 0,
   preserveLinebreaks: false,
@@ -10841,6 +11392,56 @@ const Text = forwardRef(function Text2({
     if (!variant || !TextVariantElement[variant]) return "div";
     return TextVariantElement[variant];
   }, [variant]);
+  const isCustomVariant = useMemo(() => {
+    return variant && !TextVariantElement[variant];
+  }, [variant]);
+  const variantSpec = useMemo(
+    () => {
+      if (!isCustomVariant) return EMPTY_OBJECT;
+      const subject = `-Text-${variant}`;
+      const cssInput = {
+        color: toCssVar(`$textColor${subject}`),
+        "font-family": toCssVar(`$fontFamily${subject}`),
+        "font-size": toCssVar(`$fontSize${subject}`),
+        "font-style": toCssVar(`$fontStyle${subject}`),
+        "font-weight": toCssVar(`$fontWeight${subject}`),
+        "font-stretch": toCssVar(`$fontStretch${subject}`),
+        "text-decoration-line": toCssVar(`$textDecorationLine${subject}`),
+        "text-decoration-color": toCssVar(`$textDecorationColor${subject}`),
+        "text-decoration-style": toCssVar(`$textDecorationStyle${subject}`),
+        "text-decoration-thickness": toCssVar(`$textDecorationThickness${subject}`),
+        "text-underline-offset": toCssVar(`$textUnderlineOffset${subject}`),
+        "line-height": toCssVar(`$lineHeight${subject}`),
+        "background-color": toCssVar(`$backgroundColor${subject}`),
+        "text-transform": toCssVar(`$textTransform${subject}`),
+        "letter-spacing": toCssVar(`$letterSpacing${subject}`),
+        "word-spacing": toCssVar(`$wordSpacing${subject}`),
+        "text-shadow": toCssVar(`$textShadow${subject}`),
+        "text-indent": toCssVar(`$textIndent${subject}`),
+        "text-align": toCssVar(`$textAlign${subject}`),
+        "text-align-last": toCssVar(`$textAlignLast${subject}`),
+        "word-break": toCssVar(`$wordBreak${subject}`),
+        "word-wrap": toCssVar(`$wordWrap${subject}`),
+        direction: toCssVar(`$direction${subject}`),
+        "writing-mode": toCssVar(`$writingMode${subject}`),
+        "line-break": toCssVar(`$lineBreak${subject}`)
+      };
+      return cssInput;
+    },
+    [isCustomVariant, variant]
+  );
+  const customVariantClassName = useComponentStyle(variantSpec);
+  useEffect(() => {
+    if (isCustomVariant && variant && customVariantClassName) {
+      if (!hasCustomVariantCache(variant)) {
+        setCustomVariantCache(variant, {
+          className: customVariantClassName,
+          cssText: ""
+          // Will be populated when CSS generation is implemented
+        });
+      }
+    }
+  }, [isCustomVariant, variant, customVariantClassName]);
   const overflowClasses = useMemo(() => {
     const classes = {};
     if (!overflowMode) {
@@ -10896,7 +11497,8 @@ const Text = forwardRef(function Text2({
       className: classnames(
         syntaxHighlightClasses,
         styles$13.text,
-        styles$13[variant || "default"],
+        // Use custom variant className if it's a custom variant, otherwise use predefined variant style
+        isCustomVariant ? customVariantClassName : styles$13[variant || "default"],
         {
           [styles$13.preserveLinebreaks]: preserveLinebreaks2,
           ...overflowClasses,
@@ -10923,7 +11525,7 @@ const TextMd = createMetadata({
       `The text to be displayed. This value can also be set via nesting the text into the \`${COMP$1n}\` component.`
     ),
     variant: {
-      description: "An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context.",
+      description: "An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context. In addition to predefined variants, you can specify custom variant names and style them using theme variables with the pattern `{cssProperty}-Text-{variantName}` (e.g., `textColor-Text-brandTitle`, `fontSize-Text-highlight`). See the documentation for a complete list of supported CSS properties.",
       availableValues: variantOptionsMd
     },
     maxLines: d(
@@ -11125,8 +11727,8 @@ const showInHeader = "_showInHeader_1ylgd_138";
 const selected$1 = "_selected_1ylgd_142";
 const allSelected = "_allSelected_1ylgd_142";
 const cellContent = "_cellContent_1ylgd_173";
-const focused$1 = "_focused_1ylgd_200";
-const disabled$7 = "_disabled_1ylgd_212";
+const focused$2 = "_focused_1ylgd_200";
+const disabled$8 = "_disabled_1ylgd_212";
 const noBottomBorder = "_noBottomBorder_1ylgd_219";
 const noRows$1 = "_noRows_1ylgd_244";
 const loadingWrapper$1 = "_loadingWrapper_1ylgd_283";
@@ -11154,8 +11756,8 @@ const styles$12 = {
   selected: selected$1,
   allSelected,
   cellContent,
-  focused: focused$1,
-  disabled: disabled$7,
+  focused: focused$2,
+  disabled: disabled$8,
   noBottomBorder,
   noRows: noRows$1,
   loadingWrapper: loadingWrapper$1,
@@ -11334,350 +11936,6 @@ function matchThemeVar(themeVar, availableThemeVars = []) {
     from
   };
 }
-const THEME_VAR_PREFIX = "xmlui";
-const themeVarCapturesRegex = /(\$[a-zA-Z][a-zA-Z0-9-_]*)/g;
-const booleanRegex = /^(true|false)$/;
-const starSizeRegex = /^\d*\*$/;
-const defaultCompResult = {
-  cssProps: {},
-  issues: /* @__PURE__ */ new Set()
-};
-function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
-  const result = {
-    cssProps: {},
-    issues: /* @__PURE__ */ new Set()
-  };
-  if (!!getOrientation(layoutContext)) {
-    result.cssProps.flexShrink = 0;
-  }
-  collectCss("width");
-  const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
-  if (horizontalStarSize !== null) {
-    result.cssProps.flex = horizontalStarSize;
-    result.cssProps.flexShrink = 1;
-  }
-  collectCss("minWidth");
-  collectCss("maxWidth");
-  collectCss("height");
-  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");
-  const paddingHorizontal = transformLayoutValue("paddingHorizontal");
-  if (paddingHorizontal) {
-    result.cssProps.paddingLeft = paddingHorizontal;
-    result.cssProps.paddingRight = paddingHorizontal;
-  }
-  collectCss("paddingRight");
-  collectCss("paddingLeft");
-  const paddingVertical = transformLayoutValue("paddingVertical");
-  if (paddingVertical) {
-    result.cssProps.paddingTop = paddingVertical;
-    result.cssProps.paddingBottom = paddingVertical;
-  }
-  collectCss("paddingTop");
-  collectCss("paddingBottom");
-  collectCss("margin");
-  const marginHorizontal = transformLayoutValue("marginHorizontal");
-  if (marginHorizontal) {
-    result.cssProps.marginLeft = marginHorizontal;
-    result.cssProps.marginRight = marginHorizontal;
-  }
-  collectCss("marginRight");
-  collectCss("marginLeft");
-  const marginVertical = transformLayoutValue("marginVertical");
-  if (marginVertical) {
-    result.cssProps.marginTop = marginVertical;
-    result.cssProps.marginBottom = marginVertical;
-  }
-  collectCss("marginTop");
-  collectCss("marginBottom");
-  collectCss("border");
-  const horizontalBorder = transformLayoutValue("borderHorizontal");
-  if (horizontalBorder) {
-    result.cssProps.borderLeft = horizontalBorder;
-    result.cssProps.borderRight = horizontalBorder;
-  }
-  collectCss("borderRight");
-  collectCss("borderLeft");
-  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");
-  const wrapContent = transformLayoutValue("wrapContent");
-  if (wrapContent) {
-    result.cssProps.flexWrap = wrapContent === "true" ? "wrap" : "nowrap";
-  }
-  collectCss("canShrink", "flexShrink");
-  const canShrink = transformLayoutValue("canShrink");
-  if (canShrink) {
-    result.cssProps.flexShrink = canShrink === "true" ? 1 : 0;
-  }
-  if (isEmpty(result.cssProps) && isEmpty(result.issues)) {
-    return defaultCompResult;
-  }
-  return result;
-  function transformLayoutValue(prop) {
-    var _a2, _b;
-    const defValue = resolveSingleValue();
-    if (((_a2 = layoutContext == null ? void 0 : layoutContext.mediaSize) == null ? void 0 : _a2.sizeIndex) !== void 0) {
-      const sizeIndex = (_b = layoutContext.mediaSize) == null ? void 0 : _b.sizeIndex;
-      const xsValue = resolveSingleValue("xs");
-      const smValue = resolveSingleValue("sm");
-      const mdValue = resolveSingleValue("md");
-      const lgValue = resolveSingleValue("lg");
-      const xlValue = resolveSingleValue("xl");
-      const xxlValue = resolveSingleValue("xxl");
-      let mergedValue;
-      switch (sizeIndex) {
-        case 0:
-          mergedValue = xsValue ?? smValue ?? mdValue;
-          break;
-        case 1:
-          mergedValue = smValue ?? mdValue;
-          break;
-        case 2:
-          mergedValue = mdValue;
-          break;
-        case 3:
-          mergedValue = lgValue;
-          break;
-        case 4:
-          mergedValue = xlValue ?? lgValue;
-          break;
-        case 5:
-          mergedValue = xxlValue ?? xlValue ?? lgValue;
-          break;
-      }
-      return mergedValue ?? defValue;
-    }
-    return defValue;
-    function resolveSingleValue(sizeTag = "") {
-      const fullProp = sizeTag ? `${prop}-${sizeTag}` : prop;
-      let singleInput = layoutProps[fullProp];
-      if (singleInput == void 0) {
-        return;
-      }
-      if (typeof singleInput === "string") {
-        singleInput = singleInput.trim();
-      } else {
-        singleInput = singleInput.toString();
-      }
-      const value = singleInput ? singleInput.replace(
-        themeVarCapturesRegex,
-        (match) => toCssVar(match.trim())
-      ) : void 0;
-      if (singleInput !== value) {
-        return value;
-      }
-      const propPatterns = layoutPatterns[prop];
-      if (!propPatterns || propPatterns.length === 0) {
-        return value;
-      }
-      for (const pattern of propPatterns) {
-        if (pattern.test(value)) {
-          return value;
-        }
-      }
-      result.issues.add(fullProp);
-      return value;
-    }
-  }
-  function collectCss(prop, propCssName = "") {
-    const value = transformLayoutValue(prop);
-    if (value) {
-      result.cssProps[propCssName || prop] = value;
-    }
-  }
-  function getHorizontalStarSize(size, layoutContext2) {
-    if (!size) return null;
-    const orientation = getOrientation(layoutContext2);
-    return orientation === "horizontal" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
-  }
-  function getVerticalStarSize(size, layoutContext2) {
-    if (!size) return null;
-    const orientation = getOrientation(layoutContext2);
-    return orientation === "vertical" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
-  }
-  function getStarSizeNumber(input2) {
-    if (starSizeRegex.test(input2)) {
-      const numberPart = input2.slice(0, -1);
-      return numberPart === "" ? 1 : parseInt(numberPart, 10);
-    }
-    return null;
-  }
-  function getOrientation(layoutContext2) {
-    if (!layoutContext2) return;
-    let orientation = (layoutContext2 == null ? void 0 : layoutContext2.type) === "Stack" && (layoutContext2 == null ? void 0 : layoutContext2.orientation);
-    return orientation == null ? void 0 : orientation.toString();
-  }
-}
-function toCssVar(c) {
-  return `var(--${THEME_VAR_PREFIX}-${c.substring(1)})`;
-}
-const layoutPatterns = {
-  // --- Dimensions
-  width: [],
-  minWidth: [],
-  maxWidth: [],
-  height: [],
-  minHeight: [],
-  maxHeight: [],
-  gap: [],
-  // --- Positions
-  top: [],
-  right: [],
-  bottom: [],
-  left: [],
-  // --- Border
-  border: [],
-  borderTop: [],
-  borderRight: [],
-  borderBottom: [],
-  borderLeft: [],
-  borderColor: [],
-  borderStyle: [],
-  borderWidth: [],
-  borderHorizontal: [],
-  borderVertical: [],
-  // --- Border radius
-  borderRadius: [],
-  radiusTopLeft: [],
-  radiusTopRight: [],
-  radiusBottomLeft: [],
-  radiusBottomRight: [],
-  // --- Padding
-  padding: [],
-  paddingHorizontal: [],
-  paddingVertical: [],
-  paddingTop: [],
-  paddingRight: [],
-  paddingBottom: [],
-  paddingLeft: [],
-  // --- Margin
-  margin: [],
-  marginHorizontal: [],
-  marginVertical: [],
-  marginTop: [],
-  marginRight: [],
-  marginBottom: [],
-  marginLeft: [],
-  // --- Other
-  backgroundColor: [],
-  background: [],
-  boxShadow: [],
-  direction: [],
-  overflowX: [],
-  overflowY: [],
-  zIndex: [],
-  opacity: [],
-  // --- Typography
-  color: [],
-  fontFamily: [],
-  fontSize: [],
-  fontWeight: [],
-  fontStyle: [booleanRegex],
-  fontVariant: [],
-  lineBreak: [],
-  textDecoration: [],
-  userSelect: [],
-  letterSpacing: [],
-  textTransform: [],
-  lineHeight: [],
-  textAlign: [],
-  textWrap: [],
-  textAlignLast: [],
-  textIndent: [],
-  textShadow: [],
-  wordBreak: [],
-  wordSpacing: [],
-  wordWrap: [],
-  writingMode: [],
-  // --- Content rendering
-  wrapContent: [],
-  canShrink: [],
-  // --- Other
-  cursor: [],
-  zoom: [],
-  whiteSpace: [],
-  textDecorationLine: [],
-  textDecorationColor: [],
-  textDecorationStyle: [],
-  textDecorationThickness: [],
-  textUnderlineOffset: [],
-  transform: [],
-  // --- Outline
-  outline: [],
-  outlineWidth: [],
-  outlineColor: [],
-  outlineStyle: [],
-  outlineOffset: [],
-  // --- Animation
-  transition: []
-};
 function isThemeVarName(varName) {
   return typeof varName === "string" && (varName == null ? void 0 : varName.startsWith("$"));
 }
@@ -12621,14 +12879,7 @@ function useRowSelection({
       lastUpdateSourceRef.current = "table";
       (_a3 = syncWithAppState.update) == null ? void 0 : _a3.call(syncWithAppState, { selectedIds: currentSelectionIds });
     }
-  }, [
-    selectedItems,
-    syncWithAppState,
-    appStateSelection,
-    idKey,
-    rowsSelectable,
-    syncState
-  ]);
+  }, [selectedItems, syncWithAppState, appStateSelection, idKey, rowsSelectable, syncState]);
   useEffect(() => {
     if (syncState !== "idle") {
       const resetTimer = requestAnimationFrame(() => {
@@ -12807,7 +13058,7 @@ function useRowSelection({
     }
   });
   useEffect(() => {
-    onSelectionDidChange == null ? void 0 : onSelectionDidChange(selectedItems);
+    void (onSelectionDidChange == null ? void 0 : onSelectionDidChange(selectedItems));
   }, [selectedItems, onSelectionDidChange]);
   const checkAllRows = useEvent((checked) => {
     if (!rowsSelectable) {
@@ -13212,7 +13463,6 @@ const PaginationNative = forwardRef(function PaginationNative2({
           style: style2,
           className,
           labelPosition: orientation === "vertical" ? "top" : "start",
-          isInputTemplateUsed: true,
           children: /* @__PURE__ */ jsx(
             "select",
             {
@@ -14696,10 +14946,10 @@ const avatarComponentRenderer = createComponentRenderer(
     );
   }
 );
-const themeVars$C = `'{"backgroundColor-ContentSeparator": "var(--xmlui-backgroundColor-ContentSeparator)", "size-ContentSeparator": "var(--xmlui-size-ContentSeparator)"}'`;
-const separator = "_separator_k49rs_14";
-const horizontal$3 = "_horizontal_k49rs_17";
-const vertical$3 = "_vertical_k49rs_21";
+const themeVars$C = `'{"backgroundColor-ContentSeparator": "var(--xmlui-backgroundColor-ContentSeparator)", "size-ContentSeparator": "var(--xmlui-size-ContentSeparator)", "marginTop-ContentSeparator": "var(--xmlui-marginTop-ContentSeparator)", "marginBottom-ContentSeparator": "var(--xmlui-marginBottom-ContentSeparator)", "marginVertical-ContentSeparator": "var(--xmlui-marginVertical-ContentSeparator)", "marginLeft-ContentSeparator": "var(--xmlui-marginLeft-ContentSeparator)", "marginRight-ContentSeparator": "var(--xmlui-marginRight-ContentSeparator)", "marginHorizontal-ContentSeparator": "var(--xmlui-marginHorizontal-ContentSeparator)"}'`;
+const separator = "_separator_13z1k_14";
+const horizontal$3 = "_horizontal_13z1k_21";
+const vertical$3 = "_vertical_13z1k_25";
 const styles$Y = {
   themeVars: themeVars$C,
   separator,
@@ -14753,6 +15003,8 @@ const ContentSeparatorMd = createMetadata({
   defaultThemeVars: {
     [`backgroundColor-${COMP$1h}`]: "$color-surface-200",
     [`size-${COMP$1h}`]: "1px",
+    [`marginVertical-${COMP$1h}`]: "0",
+    [`marginHorizontal-${COMP$1h}`]: "0",
     light: {
       // --- No light-specific theme vars
     },
@@ -15129,14 +15381,15 @@ const flowLayoutComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$z = `'{"padding-ModalDialog": "var(--xmlui-padding-ModalDialog)", "paddingHorizontal-ModalDialog": "var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog))", "paddingVertical-ModalDialog": "var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog))", "paddingLeft-ModalDialog": "var(--xmlui-paddingLeft-ModalDialog, var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingRight-ModalDialog": "var(--xmlui-paddingRight-ModalDialog, var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingTop-ModalDialog": "var(--xmlui-paddingTop-ModalDialog, var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingBottom-ModalDialog": "var(--xmlui-paddingBottom-ModalDialog, var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog)))", "padding-overlay-ModalDialog": "var(--xmlui-padding-overlay-ModalDialog)", "paddingHorizontal-overlay-ModalDialog": "var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog))", "paddingVertical-overlay-ModalDialog": "var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog))", "paddingLeft-overlay-ModalDialog": "var(--xmlui-paddingLeft-overlay-ModalDialog, var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingRight-overlay-ModalDialog": "var(--xmlui-paddingRight-overlay-ModalDialog, var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingTop-overlay-ModalDialog": "var(--xmlui-paddingTop-overlay-ModalDialog, var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingBottom-overlay-ModalDialog": "var(--xmlui-paddingBottom-overlay-ModalDialog, var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "Dialog:backgroundColor-ModalDialog": "var(--xmlui-backgroundColor-ModalDialog)", "Dialog:backgroundColor-overlay-ModalDialog": "var(--xmlui-backgroundColor-overlay-ModalDialog)", "Dialog:borderRadius-ModalDialog": "var(--xmlui-borderRadius-ModalDialog)", "Dialog:fontFamily-ModalDialog": "var(--xmlui-fontFamily-ModalDialog)", "Dialog:textColor-ModalDialog": "var(--xmlui-textColor-ModalDialog)", "Dialog:minWidth-ModalDialog": "var(--xmlui-minWidth-ModalDialog)", "Dialog:maxWidth-ModalDialog": "var(--xmlui-maxWidth-ModalDialog)", "Dialog:marginBottom-title-ModalDialog": "var(--xmlui-marginBottom-title-ModalDialog)"}'`;
-const overlay$2 = "_overlay_r7ppn_14";
-const fullScreen = "_fullScreen_r7ppn_22";
-const content$5 = "_content_r7ppn_28";
-const overlayBg$1 = "_overlayBg_r7ppn_37";
-const nested = "_nested_r7ppn_43";
-const dialogTitle = "_dialogTitle_r7ppn_78";
-const innerContent = "_innerContent_r7ppn_83";
-const closeButton = "_closeButton_r7ppn_108";
+const overlay$2 = "_overlay_do4x4_14";
+const fullScreen = "_fullScreen_do4x4_22";
+const content$5 = "_content_do4x4_28";
+const overlayBg$1 = "_overlayBg_do4x4_37";
+const nested = "_nested_do4x4_43";
+const contentAnimation = "_contentAnimation_do4x4_74";
+const dialogTitle = "_dialogTitle_do4x4_80";
+const innerContent = "_innerContent_do4x4_85";
+const closeButton = "_closeButton_do4x4_110";
 const styles$V = {
   themeVars: themeVars$z,
   overlay: overlay$2,
@@ -15144,6 +15397,7 @@ const styles$V = {
   content: content$5,
   overlayBg: overlayBg$1,
   nested,
+  contentAnimation,
   dialogTitle,
   innerContent,
   closeButton
@@ -15253,6 +15507,7 @@ const ModalDialog = React__default.forwardRef(
     className,
     onOpen,
     onClose,
+    externalAnimation = true,
     ...rest
   }, ref) => {
     const { root: root2 } = useTheme();
@@ -15301,7 +15556,13 @@ const ModalDialog = React__default.forwardRef(
       {
         ...rest,
         "data-part-id": PART_CONTENT,
-        className: classnames(styles$V.content, className),
+        className: classnames(
+          {
+            [styles$V.contentAnimation]: !externalAnimation
+          },
+          styles$V.content,
+          className
+        ),
         onPointerDownOutside: (event) => {
           if (event.target instanceof Element && (event.target.closest("._debug-inspect-button") !== null || event.target.localName === "com-1password-button")) {
             event.preventDefault();
@@ -15462,6 +15723,7 @@ const modalViewComponentRenderer = createComponentRenderer(
         fullScreen: extractValue.asOptionalBoolean((_a2 = node.props) == null ? void 0 : _a2.fullScreen),
         title: extractValue((_b = node.props) == null ? void 0 : _b.title),
         closeButtonVisible: extractValue.asOptionalBoolean(node.props.closeButtonVisible),
+        externalAnimation: extractValue.asOptionalBoolean(node.props.externalAnimation),
         children: renderChild2(node.children, { type: "Stack" })
       }
     );
@@ -15580,7 +15842,7 @@ const FileUploadDropZone = forwardRef(function FileUploadDropZone2({
 }, forwardedRef) {
   const accept = acceptedFileTypes ? acceptedFileTypes.split(",").reduce((acc, type) => ({ ...acc, [type.trim()]: [] }), {}) : void 0;
   const onDrop = useCallback(
-    async (acceptedFiles) => {
+    (acceptedFiles) => {
       if (!acceptedFiles.length) {
         return;
       }
@@ -15780,7 +16042,6 @@ const IFrame = memo(forwardRef(function IFrame2({
   ...rest
 }, ref) {
   const iframeRef = useRef(null);
-  useImperativeHandle(ref, () => iframeRef.current, []);
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
       postMessage: (message, targetOrigin = "*") => {
@@ -16823,7 +17084,7 @@ function Queue({
       return;
     }
     let queueItem = queue[0];
-    (async () => {
+    void (async () => {
       await doSingle(queueItem);
     })();
   }, [doComplete, doSingle, prevQueue, queue]);
@@ -17323,26 +17584,26 @@ const ListNative = forwardRef(function DynamicHeightList({
   const tryToFetchPrevPage = useCallback(() => {
     if (virtualizerRef.current && virtualizerRef.current.findStartIndex() < 10 && pageInfo && pageInfo.hasPrevPage && !pageInfo.isFetchingPrevPage && !isFetchingPrevPage.current) {
       isFetchingPrevPage.current = true;
-      (async function doFetch() {
+      void async function doFetch() {
         try {
           await requestFetchPrevPage();
         } finally {
           isFetchingPrevPage.current = false;
         }
-      })();
+      }();
     }
   }, [pageInfo, requestFetchPrevPage]);
   const isFetchingNextPage = useRef(false);
   const tryToFetchNextPage = useCallback(() => {
     if (virtualizerRef.current && virtualizerRef.current.findEndIndex() + 10 > rows.length && pageInfo && pageInfo.hasNextPage && !pageInfo.isFetchingNextPage && !isFetchingNextPage.current) {
       isFetchingNextPage.current = true;
-      (async function doFetch() {
+      void async function doFetch() {
         try {
           await requestFetchNextPage();
         } finally {
           isFetchingNextPage.current = false;
         }
-      })();
+      }();
     }
   }, [rows.length, pageInfo, requestFetchNextPage]);
   const initiallyFetchedExtraPages = useRef(false);
@@ -18247,7 +18508,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
       if (!ignore) {
         dispatch(fieldValidated(bindTo, partialResult));
         if (partialResult.partial) {
-          (async () => {
+          void (async () => {
             const result = await throttledAsyncValidate(validations, onValidate, deferredValue);
             if (!ignore) {
               dispatch(fieldValidated(bindTo, result));
@@ -18263,7 +18524,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
   );
 }
 function useValidationDisplay(bindTo, value, validationResult, validationMode = defaultValidationMode) {
-  const interactionFlags = useFormContextPart((value2) => value2.interactionFlags[bindTo]) || EMPTY_OBJECT;
+  const interactionFlags = useFormContextPart((value2) => value2 == null ? void 0 : value2.interactionFlags[bindTo]) || EMPTY_OBJECT;
   const forceShowValidationResult = interactionFlags.forceShowValidationResult;
   const focused2 = interactionFlags.focused;
   const afterFirstDirtyBlur = interactionFlags.afterFirstDirtyBlur;
@@ -20249,62 +20510,99 @@ function useLongPress(elementRef, action2, delay2 = 500) {
     };
   }, [elementRef, action2, delay2]);
 }
-const themeVars$o = `'{"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)))", "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)))", "Input:fontSize-Select-default": "var(--xmlui-fontSize-Select-default)", "Input:textColor-placeholder-Select-default": "var(--xmlui-textColor-placeholder-Select-default)", "Input:textColor-Select-default": "var(--xmlui-textColor-Select-default)", "Input:fontSize-Select-error": "var(--xmlui-fontSize-Select-error)", "Input:textColor-placeholder-Select-error": "var(--xmlui-textColor-placeholder-Select-error)", "Input:textColor-Select-error": "var(--xmlui-textColor-Select-error)", "Input:fontSize-Select-warning": "var(--xmlui-fontSize-Select-warning)", "Input:textColor-placeholder-Select-warning": "var(--xmlui-textColor-placeholder-Select-warning)", "Input:textColor-Select-warning": "var(--xmlui-textColor-Select-warning)", "Input:fontSize-Select-success": "var(--xmlui-fontSize-Select-success)", "Input:textColor-placeholder-Select-success": "var(--xmlui-textColor-placeholder-Select-success)", "Input:textColor-Select-success": "var(--xmlui-textColor-Select-success)", "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:backgroundColor-Select-default": "var(--xmlui-backgroundColor-Select-default)", "Input:boxShadow-Select-default": "var(--xmlui-boxShadow-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: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:backgroundColor-Select-error": "var(--xmlui-backgroundColor-Select-error)", "Input:boxShadow-Select-error": "var(--xmlui-boxShadow-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: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:backgroundColor-Select-warning": "var(--xmlui-backgroundColor-Select-warning)", "Input:boxShadow-Select-warning": "var(--xmlui-boxShadow-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: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:backgroundColor-Select-success": "var(--xmlui-backgroundColor-Select-success)", "Input:boxShadow-Select-success": "var(--xmlui-boxShadow-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:fontSize-placeholder-Select-success": "var(--xmlui-fontSize-placeholder-Select-success)", "opacity-Select--disabled": "var(--xmlui-opacity-Select--disabled)", "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)", "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:textColor-placeholder-Select": "var(--xmlui-textColor-placeholder-Select)", "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--hover": "var(--xmlui-backgroundColor-item-Select--hover)", "opacity-text-item-Select--disabled": "var(--xmlui-opacity-text-item-Select--disabled)", "fontSize-Select": "var(--xmlui-fontSize-Select)", "backgroundColor-item-Select--active": "var(--xmlui-backgroundColor-item-Select--active)", "textColor-indicator-Select": "var(--xmlui-textColor-indicator-Select)"}'`;
-const selectValue = "_selectValue_11axh_14";
-const error$9 = "_error_11axh_22";
-const warning$a = "_warning_11axh_30";
-const valid$9 = "_valid_11axh_38";
-const selectTrigger = "_selectTrigger_11axh_46";
-const badgeListContainer = "_badgeListContainer_11axh_175";
-const badgeList$1 = "_badgeList_11axh_175";
-const badge$1 = "_badge_11axh_175";
-const actions$1 = "_actions_11axh_212";
-const placeholder$1 = "_placeholder_11axh_217";
-const emptyList = "_emptyList_11axh_221";
-const selectScrollUpButton = "_selectScrollUpButton_11axh_230";
-const selectScrollDownButton = "_selectScrollDownButton_11axh_238";
-const command$1 = "_command_11axh_246";
-const commandInputContainer = "_commandInputContainer_11axh_255";
-const commandInput$1 = "_commandInput_11axh_255";
-const commandList$1 = "_commandList_11axh_278";
-const selectContent = "_selectContent_11axh_282";
-const fadeIn = "_fadeIn_11axh_1";
-const zoomIn = "_zoomIn_11axh_1";
-const fadeOut = "_fadeOut_11axh_1";
-const zoomOut = "_zoomOut_11axh_1";
-const slideInFromTop = "_slideInFromTop_11axh_1";
-const slideInFromRight = "_slideInFromRight_11axh_1";
-const slideInFromLeft = "_slideInFromLeft_11axh_1";
-const slideInFromBottom = "_slideInFromBottom_11axh_1";
-const multiComboboxOption = "_multiComboboxOption_11axh_323";
-const multiComboboxOptionContent = "_multiComboboxOptionContent_11axh_323";
-const selectItem = "_selectItem_11axh_347";
-const selectItemContent = "_selectItemContent_11axh_362";
-const selectItemIndicator = "_selectItemIndicator_11axh_381";
-const selectViewport = "_selectViewport_11axh_391";
-const selectEmpty = "_selectEmpty_11axh_396";
-const loading = "_loading_11axh_406";
-const srOnly = "_srOnly_11axh_409";
+const SelectContext = createContext({
+  value: null,
+  onChange: (selectedValue) => {
+  },
+  setOpen: (open) => {
+  },
+  setSelectedIndex: (index) => {
+  },
+  options: /* @__PURE__ */ new Set(),
+  optionRenderer: void 0
+});
+function useSelect() {
+  return useContext(SelectContext);
+}
+const OptionContext = createContext({
+  onOptionAdd: () => {
+  },
+  onOptionRemove: () => {
+  }
+});
+function useOption() {
+  return useContext(OptionContext);
+}
+const themeVars$o = `'{"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)"}'`;
+const selectTrigger = "_selectTrigger_1v71t_17";
+const error$9 = "_error_1v71t_54";
+const warning$a = "_warning_1v71t_80";
+const valid$9 = "_valid_1v71t_106";
+const disabled$7 = "_disabled_1v71t_132";
+const focused$1 = "_focused_1v71t_139";
+const placeholder$1 = "_placeholder_1v71t_145";
+const actions$1 = "_actions_1v71t_162";
+const action$1 = "_action_1v71t_162";
+const emptyList = "_emptyList_1v71t_173";
+const badgeListContainer = "_badgeListContainer_1v71t_185";
+const badgeList$1 = "_badgeList_1v71t_185";
+const inputWrapper$1 = "_inputWrapper_1v71t_198";
+const badge$1 = "_badge_1v71t_185";
+const selectContent = "_selectContent_1v71t_233";
+const command$1 = "_command_1v71t_241";
+const commandInputContainer = "_commandInputContainer_1v71t_246";
+const commandInput$1 = "_commandInput_1v71t_246";
+const commandList$1 = "_commandList_1v71t_265";
+const multiSelectOption = "_multiSelectOption_1v71t_272";
+const multiSelectOptionContent = "_multiSelectOptionContent_1v71t_286";
+const highlighted$1 = "_highlighted_1v71t_295";
+const disabledOption$1 = "_disabledOption_1v71t_301";
+const selectValue = "_selectValue_1v71t_316";
+const selectDropdownContent = "_selectDropdownContent_1v71t_331";
+const fadeIn = "_fadeIn_1v71t_1";
+const zoomIn = "_zoomIn_1v71t_1";
+const fadeOut = "_fadeOut_1v71t_1";
+const zoomOut = "_zoomOut_1v71t_1";
+const slideInFromTop = "_slideInFromTop_1v71t_1";
+const slideInFromRight = "_slideInFromRight_1v71t_1";
+const slideInFromLeft = "_slideInFromLeft_1v71t_1";
+const slideInFromBottom = "_slideInFromBottom_1v71t_1";
+const selectViewport = "_selectViewport_1v71t_364";
+const selectScrollUpButton = "_selectScrollUpButton_1v71t_368";
+const selectScrollDownButton = "_selectScrollDownButton_1v71t_376";
+const selectEmpty = "_selectEmpty_1v71t_384";
+const selectOption = "_selectOption_1v71t_397";
+const selectOptionContent = "_selectOptionContent_1v71t_420";
+const selectOptionIndicator = "_selectOptionIndicator_1v71t_434";
+const loading = "_loading_1v71t_444";
+const srOnly = "_srOnly_1v71t_447";
 const styles$J = {
   themeVars: themeVars$o,
-  selectValue,
+  selectTrigger,
   error: error$9,
   warning: warning$a,
   valid: valid$9,
-  selectTrigger,
+  disabled: disabled$7,
+  focused: focused$1,
+  placeholder: placeholder$1,
+  actions: actions$1,
+  action: action$1,
+  emptyList,
   badgeListContainer,
   badgeList: badgeList$1,
+  inputWrapper: inputWrapper$1,
   badge: badge$1,
-  actions: actions$1,
-  placeholder: placeholder$1,
-  emptyList,
-  selectScrollUpButton,
-  selectScrollDownButton,
+  selectContent,
   command: command$1,
   commandInputContainer,
   commandInput: commandInput$1,
   commandList: commandList$1,
-  selectContent,
+  multiSelectOption,
+  multiSelectOptionContent,
+  highlighted: highlighted$1,
+  disabledOption: disabledOption$1,
+  selectValue,
+  selectDropdownContent,
   fadeIn,
   zoomIn,
   fadeOut,
@@ -20313,20 +20611,67 @@ const styles$J = {
   slideInFromRight,
   slideInFromLeft,
   slideInFromBottom,
-  multiComboboxOption,
-  multiComboboxOptionContent,
-  selectItem,
-  selectItemContent,
-  selectItemIndicator,
   selectViewport,
+  selectScrollUpButton,
+  selectScrollDownButton,
   selectEmpty,
+  selectOption,
+  selectOptionContent,
+  selectOptionIndicator,
   loading,
   srOnly
 };
-const SelectContext = createContext(null);
-function useSelect() {
-  return useContext(SelectContext);
-}
+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();
+    const { onOptionRemove, onOptionAdd } = useOption();
+    const opt = useMemo(() => {
+      return {
+        ...option,
+        label: label2 ?? "",
+        keywords: [label2 ?? ""]
+      };
+    }, [option, label2]);
+    useEffect(() => {
+      onOptionAdd(opt);
+      return () => onOptionRemove(opt);
+    }, [opt, onOptionAdd, onOptionRemove]);
+    return /* @__PURE__ */ jsxs(
+      Item$1,
+      {
+        ref,
+        className: classnames(className, styles$J.selectOption),
+        value,
+        textValue: label2,
+        disabled: !enabled2,
+        onClick: (event) => {
+          event.stopPropagation();
+        },
+        "data-state": selectedValue === value && "checked",
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { display: "none" }, children: /* @__PURE__ */ jsx(ItemText, { children: label2 }) }),
+          children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: styles$J.selectOptionContent, ref: visibleContentRef, children }),
+            selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$J.selectOptionIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) })
+          ] }) : optionRenderer ? /* @__PURE__ */ jsx("div", { className: styles$J.selectOptionContent, ref: visibleContentRef, children: optionRenderer(
+            {
+              label: label2,
+              value,
+              enabled: enabled2
+            },
+            selectedValue,
+            false
+          ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: styles$J.selectOptionContent, ref: visibleContentRef, children: label2 }),
+            selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$J.selectItemIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
 const OptionTypeContext = React__default.createContext(null);
 function useOptionType() {
   return React__default.useContext(OptionTypeContext);
@@ -20337,15 +20682,6 @@ function OptionTypeProvider({
 }) {
   return /* @__PURE__ */ jsx(OptionTypeContext.Provider, { value: Component, children });
 }
-const OptionContext = createContext({
-  onOptionAdd: () => {
-  },
-  onOptionRemove: () => {
-  }
-});
-function useOption() {
-  return useContext(OptionContext);
-}
 function HiddenOption(option) {
   const { label: label2 } = option;
   const { onOptionRemove, onOptionAdd } = useOption();
@@ -20364,18 +20700,6 @@ function HiddenOption(option) {
   }, [opt, onOptionAdd, onOptionRemove]);
   return /* @__PURE__ */ jsx("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.children });
 }
-const defaultProps$F = {
-  enabled: true,
-  placeholder: "",
-  autoFocus: false,
-  searchable: false,
-  multiSelect: false,
-  required: false,
-  inProgress: false,
-  inProgressNotificationMessage: "",
-  readOnly: false,
-  validationStatus: "none"
-};
 const SimpleSelect = forwardRef(
   function SimpleSelect2(props, forwardedRef) {
     const { root: root2 } = useTheme();
@@ -20441,25 +20765,24 @@ const SimpleSelect = forwardRef(
               "div",
               {
                 className: classnames(styles$J.selectValue, {
-                  [styles$J.selectValue]: value !== void 0,
                   [styles$J.placeholder]: value === void 0
                 }),
                 children: selectedOption ? selectedOption.label : readOnly2 ? "" : placeholder2
               }
             ),
-            /* @__PURE__ */ jsx(Icon$1, { asChild: true, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
+            /* @__PURE__ */ jsx("span", { className: styles$J.action, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
           ]
         }
       ),
-      /* @__PURE__ */ jsx(Portal$1, { container: root2, children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsxs(
         Content,
         {
-          className: styles$J.selectContent,
+          className: styles$J.selectDropdownContent,
           position: "popper",
           style: { maxHeight: height, minWidth: width },
           children: [
             /* @__PURE__ */ jsx(ScrollUpButton, { className: styles$J.selectScrollUpButton, children: /* @__PURE__ */ jsx(Icon, { name: "chevronup" }) }),
-            /* @__PURE__ */ jsxs(SelectViewport, { className: styles$J.selectViewport, role: "listbox", children: [
+            /* @__PURE__ */ jsxs(Viewport, { className: styles$J.selectViewport, role: "listbox", children: [
               children,
               optionsArray.length === 0 && emptyListNode
             ] }),
@@ -20470,6 +20793,148 @@ const SimpleSelect = forwardRef(
     ] });
   }
 );
+const MultiSelectOption = forwardRef(function MultiSelectOption2(option, forwardedRef) {
+  const id = useId();
+  const {
+    label: label2,
+    value,
+    enabled: enabled2 = true,
+    keywords,
+    readOnly: readOnly2,
+    children,
+    isHighlighted = false,
+    itemIndex
+  } = option;
+  const {
+    value: selectedValue,
+    onChange,
+    multiSelect,
+    setOpen,
+    setSelectedIndex,
+    optionRenderer
+  } = useSelect();
+  const selected2 = useMemo(() => {
+    return Array.isArray(selectedValue) && multiSelect ? selectedValue.map((v) => String(v)).includes(value) : String(selectedValue) === String(value);
+  }, [selectedValue, value, multiSelect]);
+  const handleClick = () => {
+    if (readOnly2) {
+      setOpen(false);
+      return;
+    }
+    if (enabled2) {
+      onChange(value);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      ref: forwardedRef,
+      role: "option",
+      "aria-disabled": !enabled2,
+      "aria-selected": selected2,
+      className: classnames(styles$J.multiSelectOption, {
+        [styles$J.disabledOption]: !enabled2,
+        [styles$J.highlighted]: isHighlighted
+      }),
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onMouseEnter: () => {
+        if (itemIndex !== void 0 && setSelectedIndex && enabled2) {
+          setSelectedIndex(itemIndex);
+        }
+      },
+      onClick: handleClick,
+      "data-state": selected2 ? "checked" : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: styles$J.multiSelectOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children || label2,
+        selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
+      ] }) })
+    }
+  );
+});
+const defaultProps$F = {
+  enabled: true,
+  placeholder: "",
+  autoFocus: false,
+  searchable: false,
+  multiSelect: false,
+  required: false,
+  inProgress: false,
+  inProgressNotificationMessage: "",
+  readOnly: false,
+  validationStatus: "none"
+};
+const SelectTriggerValue = ({
+  value,
+  placeholder: placeholder2,
+  readOnly: readOnly2,
+  multiSelect,
+  options: options2,
+  valueRenderer,
+  toggleOption
+}) => {
+  if (multiSelect) {
+    if (Array.isArray(value) && value.length > 0) {
+      return /* @__PURE__ */ jsx("div", { className: styles$J.badgeListContainer, children: /* @__PURE__ */ jsx("div", { className: styles$J.badgeList, children: value.map(
+        (v) => {
+          var _a2;
+          return valueRenderer ? valueRenderer(
+            Array.from(options2).find((o) => o.value === `${v}`),
+            () => {
+              toggleOption(v);
+            }
+          ) : /* @__PURE__ */ jsxs("span", { className: styles$J.badge, children: [
+            (_a2 = Array.from(options2).find((o) => o.value === `${v}`)) == null ? void 0 : _a2.label,
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "close",
+                size: "sm",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  toggleOption(v);
+                }
+              }
+            )
+          ] }, v);
+        }
+      ) }) });
+    }
+    return /* @__PURE__ */ jsx("span", { placeholder: placeholder2, className: styles$J.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$J.selectValue, children: selectedOption == null ? void 0 : selectedOption.label });
+  }
+  return /* @__PURE__ */ jsx("div", { "aria-placeholder": placeholder2, className: styles$J.placeholder, children: readOnly2 ? "" : placeholder2 || "" });
+};
+const SelectTriggerActions = ({
+  value,
+  multiSelect,
+  enabled: enabled2,
+  readOnly: readOnly2,
+  clearValue,
+  showChevron = true
+}) => {
+  const hasValue = multiSelect ? Array.isArray(value) && value.length > 0 : value !== void 0 && value !== null && value !== "";
+  return /* @__PURE__ */ jsxs("div", { className: styles$J.actions, children: [
+    hasValue && enabled2 && !readOnly2 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles$J.action,
+        onClick: (event) => {
+          event.stopPropagation();
+          clearValue();
+        },
+        children: /* @__PURE__ */ jsx(Icon, { name: "close" })
+      }
+    ),
+    showChevron && /* @__PURE__ */ jsx("span", { className: styles$J.action, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
+  ] });
+};
 const Select = forwardRef(function Select2({
   // Basic props
   id,
@@ -20505,7 +20970,6 @@ const Select = forwardRef(function Select2({
   children,
   ...rest
 }, forwardedRef) {
-  var _a2;
   const [referenceElement, setReferenceElement] = useState(null);
   const [open, setOpen] = useState(false);
   const [width, setWidth] = useState(0);
@@ -20513,22 +20977,40 @@ const Select = forwardRef(function Select2({
   const { root: root2 } = useTheme();
   const [options2, setOptions] = useState(/* @__PURE__ */ new Set());
   const isInForm = useIsInsideForm();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const filteredOptions = useMemo(() => {
+    if (!searchTerm || searchTerm.trim() === "") {
+      return Array.from(options2);
+    }
+    const searchLower = searchTerm.toLowerCase();
+    return Array.from(options2).filter((option) => {
+      const extendedValue = option.value + " " + option.label + " " + (option.keywords || []).join(" ");
+      return extendedValue.toLowerCase().includes(searchLower);
+    });
+  }, [options2, searchTerm]);
+  useEffect(() => {
+    if (!open) {
+      setSelectedIndex(-1);
+      setSearchTerm("");
+    }
+  }, [open]);
   useEffect(() => {
     if (initialValue !== void 0) {
       updateState({ value: initialValue }, { initial: true });
     }
   }, [initialValue, updateState]);
   useEffect(() => {
-    var _a3;
+    var _a2;
     const current = referenceElement;
-    (_a3 = observer.current) == null ? void 0 : _a3.disconnect();
+    (_a2 = observer.current) == null ? void 0 : _a2.disconnect();
     if (current) {
       observer.current = new ResizeObserver(() => setWidth(current.clientWidth));
       observer.current.observe(current);
     }
     return () => {
-      var _a4;
-      (_a4 = observer.current) == null ? void 0 : _a4.disconnect();
+      var _a3;
+      (_a3 = observer.current) == null ? void 0 : _a3.disconnect();
     };
   }, [referenceElement]);
   const toggleOption = useCallback(
@@ -20547,6 +21029,84 @@ const Select = forwardRef(function Select2({
     updateState({ value: newValue });
     onDidChange(newValue);
   }, [multiSelect, updateState, onDidChange]);
+  const findNextEnabledIndex = useCallback(
+    (currentIndex) => {
+      for (let i = currentIndex + 1; i < filteredOptions.length; i++) {
+        const item2 = filteredOptions[i];
+        if (item2.enabled !== false) {
+          return i;
+        }
+      }
+      for (let i = 0; i <= currentIndex; i++) {
+        const item2 = filteredOptions[i];
+        if (item2.enabled !== false) {
+          return i;
+        }
+      }
+      return -1;
+    },
+    [filteredOptions]
+  );
+  const findPreviousEnabledIndex = useCallback(
+    (currentIndex) => {
+      for (let i = currentIndex - 1; i >= 0; i--) {
+        const item2 = filteredOptions[i];
+        if (item2.enabled !== false) {
+          return i;
+        }
+      }
+      for (let i = filteredOptions.length - 1; i >= currentIndex; i--) {
+        const item2 = filteredOptions[i];
+        if (item2.enabled !== false) {
+          return i;
+        }
+      }
+      return -1;
+    },
+    [filteredOptions]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!open) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setSelectedIndex((prev) => {
+            const nextIndex = findNextEnabledIndex(prev);
+            return nextIndex !== -1 ? nextIndex : prev;
+          });
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setSelectedIndex((prev) => {
+            const prevIndex = findPreviousEnabledIndex(prev);
+            return prevIndex !== -1 ? prevIndex : prev;
+          });
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (selectedIndex >= 0 && selectedIndex < filteredOptions.length) {
+            const selectedItem = filteredOptions[selectedIndex];
+            if (selectedItem.enabled !== false) {
+              toggleOption(selectedItem.value);
+            }
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          setOpen(false);
+          break;
+      }
+    },
+    [
+      open,
+      selectedIndex,
+      filteredOptions,
+      toggleOption,
+      findNextEnabledIndex,
+      findPreviousEnabledIndex
+    ]
+  );
   const focus = useCallback(() => {
     referenceElement == null ? void 0 : referenceElement.focus();
   }, [referenceElement]);
@@ -20598,14 +21158,15 @@ const Select = forwardRef(function Select2({
       value,
       onChange: toggleOption,
       setOpen,
+      setSelectedIndex,
       options: options2,
       optionRenderer
     }),
-    [multiSelect, toggleOption, value, options2]
+    [multiSelect, toggleOption, value, options2, optionRenderer]
   );
   return /* @__PURE__ */ jsx(SelectContext.Provider, { value: selectContextValue, children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? /* @__PURE__ */ jsxs(OptionTypeProvider, { Component: HiddenOption, children: [
     /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         PopoverTrigger,
         {
           ...rest,
@@ -20631,96 +21192,71 @@ const Select = forwardRef(function Select2({
             className
           ),
           autoFocus,
-          children: /* @__PURE__ */ jsxs(Fragment, { children: [
-            multiSelect ? Array.isArray(value) && value.length > 0 ? /* @__PURE__ */ jsx("div", { className: styles$J.badgeListContainer, children: /* @__PURE__ */ jsx("div", { className: styles$J.badgeList, children: value.map(
-              (v) => {
-                var _a3;
-                return valueRenderer ? valueRenderer(
-                  Array.from(options2).find((o) => o.value === `${v}`),
-                  () => {
-                    toggleOption(v);
-                  }
-                ) : /* @__PURE__ */ jsxs("span", { className: styles$J.badge, children: [
-                  (_a3 = Array.from(options2).find((o) => o.value === `${v}`)) == null ? void 0 : _a3.label,
-                  /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      name: "close",
-                      size: "sm",
-                      onClick: (event) => {
-                        event.stopPropagation();
-                        toggleOption(v);
-                      }
-                    }
-                  )
-                ] }, v);
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTriggerValue,
+              {
+                value,
+                placeholder: placeholder2,
+                readOnly: readOnly2,
+                multiSelect,
+                options: options2,
+                valueRenderer,
+                toggleOption
               }
-            ) }) }) : /* @__PURE__ */ jsx("span", { placeholder: placeholder2, className: styles$J.placeholder, children: placeholder2 }) : value !== void 0 && value !== null ? /* @__PURE__ */ jsx("div", { children: (_a2 = Array.from(options2).find((o) => o.value === value)) == null ? void 0 : _a2.label }) : /* @__PURE__ */ jsx("span", { "aria-placeholder": placeholder2, className: styles$J.placeholder, children: placeholder2 || "" }),
-            /* @__PURE__ */ jsxs("div", { className: styles$J.actions, children: [
-              multiSelect && Array.isArray(value) && value.length > 0 && /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  name: "close",
-                  onClick: (event) => {
-                    event.stopPropagation();
-                    clearValue();
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(Icon, { name: "chevrondown" })
-            ] })
-          ] })
+            ),
+            /* @__PURE__ */ jsx(
+              SelectTriggerActions,
+              {
+                value,
+                multiSelect,
+                enabled: enabled2,
+                readOnly: readOnly2,
+                clearValue
+              }
+            )
+          ]
         }
       ),
-      open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, loop: true, trapped: true, children: /* @__PURE__ */ jsx(
+      open && /* @__PURE__ */ jsx(Portal$1, { container: root2, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, loop: true, trapped: true, children: /* @__PURE__ */ jsx(
         PopoverContent,
         {
           style: { minWidth: width, height: dropdownHeight },
           className: styles$J.selectContent,
-          children: /* @__PURE__ */ jsxs(
-            Command,
-            {
-              className: styles$J.command,
-              shouldFilter: searchable,
-              filter: (_, search, keywords) => {
-                const lowSearch = search.toLowerCase();
-                for (const kw of keywords) {
-                  if (kw.toLowerCase().includes(lowSearch)) return 1;
+          onKeyDown: handleKeyDown,
+          children: /* @__PURE__ */ jsxs("div", { className: styles$J.command, children: [
+            searchable ? /* @__PURE__ */ jsxs("div", { className: styles$J.commandInputContainer, children: [
+              /* @__PURE__ */ jsx(Icon, { name: "search" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  role: "combobox",
+                  className: classnames(styles$J.commandInput),
+                  placeholder: "Search...",
+                  value: searchTerm,
+                  onChange: (e) => setSearchTerm(e.target.value),
+                  autoFocus: true
                 }
-                return 0;
-              },
-              children: [
-                searchable ? /* @__PURE__ */ jsxs("div", { className: styles$J.commandInputContainer, children: [
-                  /* @__PURE__ */ jsx(Icon, { name: "search" }),
-                  /* @__PURE__ */ jsx(
-                    CommandInput,
-                    {
-                      className: classnames(styles$J.commandInput),
-                      placeholder: "Search..."
-                    }
-                  )
-                ] }) : (
-                  // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                  /* @__PURE__ */ jsx("button", { autoFocus: true, "aria-hidden": "true", className: styles$J.srOnly })
-                ),
-                /* @__PURE__ */ jsxs(CommandList, { className: styles$J.commandList, children: [
-                  inProgress && /* @__PURE__ */ jsx("div", { className: styles$J.loading, children: inProgressNotificationMessage }),
-                  Array.from(options2).map(({ value: value2, label: label2, enabled: enabled22, keywords }) => /* @__PURE__ */ jsx(
-                    ComboboxOption,
-                    {
-                      readOnly: readOnly2,
-                      value: value2,
-                      label: label2,
-                      enabled: enabled22,
-                      keywords
-                    },
-                    value2
-                  )),
-                  !inProgress && /* @__PURE__ */ jsx(CommandEmpty, { children: emptyListNode })
-                ] })
-              ]
-            }
-          )
+              )
+            ] }) : /* @__PURE__ */ jsx("button", { autoFocus: true, "aria-hidden": "true", className: styles$J.srOnly }),
+            /* @__PURE__ */ jsxs("div", { role: "listbox", className: styles$J.commandList, children: [
+              inProgress && /* @__PURE__ */ jsx("div", { className: styles$J.loading, children: inProgressNotificationMessage }),
+              filteredOptions.map(({ value: value2, label: label2, enabled: enabled22, keywords }, index) => /* @__PURE__ */ jsx(
+                MultiSelectOption,
+                {
+                  readOnly: readOnly2,
+                  value: value2,
+                  label: label2,
+                  enabled: enabled22,
+                  keywords,
+                  isHighlighted: selectedIndex === index,
+                  itemIndex: index
+                },
+                value2
+              )),
+              !inProgress && filteredOptions.length === 0 && /* @__PURE__ */ jsx("div", { children: emptyListNode })
+            ] })
+          ] })
         }
       ) }) })
     ] }),
@@ -20751,104 +21287,6 @@ const Select = forwardRef(function Select2({
     children
   ) }) }) });
 });
-const ComboboxOption = forwardRef(function Combobox(option, forwardedRef) {
-  const id = useId();
-  const { label: label2, value, enabled: enabled2 = true, keywords, readOnly: readOnly2, children } = option;
-  const { value: selectedValue, onChange, multiSelect, setOpen, optionRenderer } = useSelect();
-  const selected2 = useMemo(() => {
-    return Array.isArray(selectedValue) && multiSelect ? selectedValue.map((v) => String(v)).includes(value) : String(selectedValue) === String(value);
-  }, [selectedValue, value, multiSelect]);
-  return /* @__PURE__ */ jsx(
-    CommandItem,
-    {
-      id,
-      ref: forwardedRef,
-      disabled: !enabled2,
-      value,
-      className: styles$J.multiComboboxOption,
-      onSelect: () => {
-        if (readOnly2) {
-          setOpen(false);
-          return;
-        }
-        onChange(value);
-      },
-      onClick: (event) => {
-        event.stopPropagation();
-      },
-      "data-state": selected2 ? "checked" : void 0,
-      keywords: [...keywords, label2],
-      children: /* @__PURE__ */ jsx("div", { className: styles$J.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        children || label2,
-        selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
-      ] }) })
-    },
-    id
-  );
-});
-const SelectOption = React__default.forwardRef(
-  (option, ref) => {
-    var _a2;
-    const visibleContentRef = useRef(null);
-    const { value, label: label2, enabled: enabled2 = true, children, className } = option;
-    const { value: selectedValue, optionRenderer } = useSelect();
-    const { onOptionRemove, onOptionAdd } = useOption();
-    const opt = useMemo(() => {
-      var _a3, _b;
-      return {
-        ...option,
-        label: label2 ?? ((_a3 = visibleContentRef.current) == null ? void 0 : _a3.textContent) ?? "",
-        keywords: [label2 ?? ((_b = visibleContentRef.current) == null ? void 0 : _b.textContent) ?? ""]
-        // Store the rendered ReactNode for dropdown display
-      };
-    }, [option, label2, visibleContentRef.current]);
-    useEffect(() => {
-      onOptionAdd(opt);
-      return () => onOptionRemove(opt);
-    }, [opt, onOptionAdd, onOptionRemove]);
-    return /* @__PURE__ */ jsxs(
-      Item$1,
-      {
-        ref,
-        className: classnames(styles$J.selectItem, className),
-        value,
-        textValue: label2 || ((_a2 = visibleContentRef.current) == null ? void 0 : _a2.textContent),
-        disabled: !enabled2,
-        onClick: (event) => {
-          event.stopPropagation();
-        },
-        onMouseEnter: (event) => {
-          const target2 = event.currentTarget;
-          target2.setAttribute("data-highlighted", "");
-        },
-        onMouseLeave: (event) => {
-          const target2 = event.currentTarget;
-          target2.removeAttribute("data-highlighted");
-        },
-        "data-state": selectedValue === value && "checked",
-        children: [
-          /* @__PURE__ */ jsx("span", { style: { display: "none" }, children: /* @__PURE__ */ jsx(ItemText, { children: label2 }) }),
-          children ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: styles$J.selectItemContent, ref: visibleContentRef, children }),
-            selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$J.selectItemIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) })
-          ] }) : optionRenderer ? /* @__PURE__ */ jsx("div", { className: styles$J.selectItemContent, ref: visibleContentRef, children: optionRenderer(
-            {
-              label: label2,
-              value,
-              enabled: enabled2
-            },
-            selectedValue,
-            false
-          ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: styles$J.selectItemContent, ref: visibleContentRef, children: label2 }),
-            selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$J.selectItemIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) })
-          ] })
-        ]
-      }
-    );
-  }
-);
-SelectOption.displayName = "SelectOption";
 const themeVars$n = `'{"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_fn2iu_14";
 const radioOptionContainer = "_radioOptionContainer_fn2iu_20";
@@ -21929,7 +22367,6 @@ const Form = forwardRef(function({
   ...rest
 }, ref) {
   const formRef = useRef(null);
-  useImperativeHandle(ref, () => formRef.current);
   const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = useState(false);
   const requestModalFormClose = useModalFormClose();
   const isEnabled2 = enabled2 && !formState.submitInProgress;
@@ -21966,7 +22403,7 @@ const Form = forwardRef(function({
   ]);
   const doCancel = useEvent(() => {
     onCancel == null ? void 0 : onCancel();
-    requestModalFormClose();
+    void requestModalFormClose();
   });
   const doSubmit = useEvent(async (event) => {
     var _a2;
@@ -21996,7 +22433,7 @@ const Form = forwardRef(function({
       dispatch(formSubmitted());
       await (onSuccess == null ? void 0 : onSuccess(result));
       if (!keepModalOpenOnSubmit) {
-        requestModalFormClose();
+        void requestModalFormClose();
       }
       if (initialValue === EMPTY_OBJECT) {
         flushSync(() => {
@@ -22176,13 +22613,15 @@ const FormWithContextVar = forwardRef(function({
   const completedNotificationMessage = extractValue.asOptionalString(node.props.completedNotificationMessage) || "";
   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 });
   return /* @__PURE__ */ jsx(Slot, { ref, style: style2, children: /* @__PURE__ */ jsx(
     Form,
     {
       keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit),
       itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition),
       itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak),
-      itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth),
+      itemLabelWidth: itemLabelWidthCssProps.width,
       hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty),
       formState,
       dispatch,
@@ -22222,24 +22661,25 @@ const FormWithContextVar = forwardRef(function({
   ) });
 });
 FormWithContextVar.displayName = "FormWithContextVar";
-const themeVars$k = `'{"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)))", "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: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:backgroundColor-menu-AutoComplete": "var(--xmlui-backgroundColor-menu-AutoComplete)", "Input:borderRadius-menu-AutoComplete": "var(--xmlui-borderRadius-menu-AutoComplete)", "Input:boxShadow-menu-AutoComplete": "var(--xmlui-boxShadow-menu-AutoComplete)", "backgroundColor-item-AutoComplete": "var(--xmlui-backgroundColor-item-AutoComplete)", "backgroundColor-item-AutoComplete--hover": "var(--xmlui-backgroundColor-item-AutoComplete--hover)", "textColor-item-AutoComplete--disabled": "var(--xmlui-textColor-item-AutoComplete--disabled)"}'`;
-const command = "_command_eqfil_14";
-const badgeListWrapper = "_badgeListWrapper_eqfil_20";
-const error$5 = "_error_eqfil_53";
-const warning$6 = "_warning_eqfil_73";
-const valid$5 = "_valid_eqfil_93";
-const disabled$4 = "_disabled_eqfil_113";
-const focused = "_focused_eqfil_120";
-const badgeList = "_badgeList_eqfil_20";
-const inputWrapper = "_inputWrapper_eqfil_133";
-const badge = "_badge_eqfil_20";
-const commandInput = "_commandInput_eqfil_165";
-const actions = "_actions_eqfil_180";
-const action = "_action_eqfil_180";
-const autoCompleteEmpty = "_autoCompleteEmpty_eqfil_188";
-const commandList = "_commandList_eqfil_197";
-const autoCompleteOption = "_autoCompleteOption_eqfil_210";
-const disabledOption = "_disabledOption_eqfil_223";
+const themeVars$k = `'{"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: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_1gtkp_14";
+const badgeListWrapper = "_badgeListWrapper_1gtkp_20";
+const error$5 = "_error_1gtkp_51";
+const warning$6 = "_warning_1gtkp_71";
+const valid$5 = "_valid_1gtkp_91";
+const disabled$4 = "_disabled_1gtkp_111";
+const focused = "_focused_1gtkp_118";
+const badgeList = "_badgeList_1gtkp_20";
+const inputWrapper = "_inputWrapper_1gtkp_131";
+const badge = "_badge_1gtkp_20";
+const commandInput = "_commandInput_1gtkp_163";
+const actions = "_actions_1gtkp_178";
+const action = "_action_1gtkp_178";
+const autoCompleteEmpty = "_autoCompleteEmpty_1gtkp_186";
+const commandList = "_commandList_1gtkp_195";
+const autoCompleteOption = "_autoCompleteOption_1gtkp_208";
+const highlighted = "_highlighted_1gtkp_225";
+const disabledOption = "_disabledOption_1gtkp_228";
 const styles$E = {
   themeVars: themeVars$k,
   command,
@@ -22257,8 +22697,9 @@ const styles$E = {
   action,
   autoCompleteEmpty,
   commandList,
-  "fade-in": "_fade-in_eqfil_1",
+  "fade-in": "_fade-in_1gtkp_1",
   autoCompleteOption,
+  highlighted,
   disabledOption
 };
 const AutoCompleteContext = createContext({
@@ -22619,12 +23060,18 @@ const AutoComplete = forwardRef(function AutoComplete2({
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, ref: setReferenceElement, children: /* @__PURE__ */ jsxs(
             "div",
             {
+              ref: forwardedRef,
               style: style2,
               "data-part-id": PART_LIST_WRAPPER,
-              className: classnames(className, styles$E.badgeListWrapper, styles$E[validationStatus], {
-                [styles$E.disabled]: !enabled2,
-                [styles$E.focused]: isFocused
-              }),
+              className: classnames(
+                className,
+                styles$E.badgeListWrapper,
+                styles$E[validationStatus],
+                {
+                  [styles$E.disabled]: !enabled2,
+                  [styles$E.focused]: isFocused
+                }
+              ),
               "aria-expanded": open,
               children: [
                 Array.isArray(selectedValue) && selectedValue.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$E.badgeList, children: selectedValue.map((v, index) => /* @__PURE__ */ jsxs("span", { className: styles$E.badge, children: [
@@ -22723,7 +23170,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
               ]
             }
           ) }),
-          open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
+          open && /* @__PURE__ */ jsx(Portal$1, { container: root2, children: /* @__PURE__ */ jsx(
             PopoverContent,
             {
               style: { width, height: dropdownHeight },
@@ -22802,7 +23249,7 @@ function CreatableItem({ onNewItem, isHighlighted = false }) {
       },
       onClick: handleClick,
       role: "option",
-      "aria-selected": isHighlighted,
+      "aria-selected": false,
       children: `Create "${searchTerm}"`
     }
   );
@@ -22816,7 +23263,6 @@ function AutoCompleteOption(option) {
     value,
     label: label2,
     enabled: enabled2 = true,
-    keywords,
     readOnly: readOnly2,
     children,
     isHighlighted = false,
@@ -22844,7 +23290,7 @@ function AutoCompleteOption(option) {
       id,
       role: "option",
       "aria-disabled": !enabled2,
-      "aria-selected": isHighlighted,
+      "aria-selected": selected2,
       className: classnames(styles$E.autoCompleteOption, {
         [styles$E.disabledOption]: !enabled2,
         [styles$E.highlighted]: isHighlighted
@@ -23266,7 +23712,7 @@ function CodeBlock({
           icon: /* @__PURE__ */ jsx(Icon, { name: "copy", "aria-hidden": true }),
           onClick: () => {
             if (!textToCopy) return;
-            navigator.clipboard.writeText(textToCopy);
+            void navigator.clipboard.writeText(textToCopy);
             toast.success("Code copied!");
           }
         }
@@ -23518,13 +23964,7 @@ function xmlUiMarkupToComponent(source, fileId = 0) {
   const { parse: parse2, getText } = createXmlUiParser(source);
   const { node, errors } = parse2();
   if (errors.length > 0) {
-    const newlinePositions = [];
-    for (let i = 0; i < source.length; ++i) {
-      if (source[i] === "\n") {
-        newlinePositions.push(i);
-      }
-    }
-    const errorsForDisplay = addDisplayFieldsToErrors(errors, source, newlinePositions);
+    const errorsForDisplay = addDisplayFieldsToErrors(errors, source);
     const erroneousCompoundComponentName = getCompoundCompName(node, getText);
     return { component: null, errors: errorsForDisplay, erroneousCompoundComponentName };
   }
@@ -23953,21 +24393,6 @@ function errReportModuleErrors(errors, fileName) {
   comp.component = createModuleErrorsComponent(errors, fileName);
   return comp;
 }
-function offsetToPosition(offset, newlinePositions) {
-  let left2 = 0;
-  let right2 = newlinePositions.length;
-  while (left2 < right2) {
-    const mid = Math.floor((left2 + right2) / 2);
-    if (newlinePositions[mid] < offset) {
-      left2 = mid + 1;
-    } else {
-      right2 = mid;
-    }
-  }
-  let line2 = left2 + 1;
-  let col = left2 === 0 ? offset + 1 : offset - newlinePositions[left2 - 1];
-  return { line: line2, col };
-}
 function getCompoundCompName(node, getText) {
   var _a2, _b, _c, _d, _e, _f;
   const rootTag = (_a2 = node == null ? void 0 : node.children) == null ? void 0 : _a2[0];
@@ -23989,10 +24414,11 @@ function getCompoundCompName(node, getText) {
   }
   return void 0;
 }
-function addDisplayFieldsToErrors(errors, source, newlinePositions) {
+function addDisplayFieldsToErrors(errors, source) {
+  const { offsetToPosForDisplay } = createDocumentCursor(source);
   return errors.map((err) => {
-    const { line: errPosLine, col: errPosCol } = offsetToPosition(err.pos, newlinePositions);
-    const { line: contextStartLine } = offsetToPosition(err.contextPos, newlinePositions);
+    const { line: errPosLine, character: errPosCol } = offsetToPosForDisplay(err.pos);
+    const { line: contextStartLine } = offsetToPosForDisplay(err.contextPos);
     return {
       ...err,
       errPosLine,
@@ -24002,6 +24428,38 @@ function addDisplayFieldsToErrors(errors, source, newlinePositions) {
     };
   });
 }
+function createDocumentCursor(text2) {
+  const newlinePositions = [];
+  for (let i = 0; i < text2.length; ++i) {
+    if (text2[i] === "\n") {
+      newlinePositions.push(i);
+    }
+  }
+  return {
+    offsetToPos,
+    offsetToPosForDisplay
+  };
+  function offsetToPos(offset) {
+    let left2 = 0;
+    let right2 = newlinePositions.length;
+    while (left2 < right2) {
+      const mid = Math.floor((left2 + right2) / 2);
+      if (newlinePositions[mid] < offset) {
+        left2 = mid + 1;
+      } else {
+        right2 = mid;
+      }
+    }
+    let col = left2 === 0 ? offset : offset - newlinePositions[left2 - 1] - 1;
+    return { line: left2, character: col };
+  }
+  function offsetToPosForDisplay(offset) {
+    let pos = offsetToPos(offset);
+    pos.line += 1;
+    pos.character += 1;
+    return pos;
+  }
+}
 const ApiInterceptorContext = createContext(null);
 function useApiInterceptorContext() {
   return useContext(ApiInterceptorContext);
@@ -24027,8 +24485,8 @@ function ApiInterceptorProvider({
     if (!interceptor) {
       return;
     }
-    (async () => {
-      const { initMock } = await import("./initMock-BMxsanHc.mjs");
+    void (async () => {
+      const { initMock } = await import("./initMock-CB_cMi6U.mjs");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -24041,11 +24499,11 @@ function ApiInterceptorProvider({
     if (!hasParentInterceptorContext) {
       if (interceptor || forceInitialize) {
         let interceptorWorker2;
-        (async () => {
+        void (async () => {
           if (process.env.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
-              useWorker ? import("./apiInterceptorWorker-DPgtUtdA.mjs") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-BMxsanHc.mjs")
+              useWorker ? import("./apiInterceptorWorker-QiltRtq1.mjs") : Promise.resolve({ createApiInterceptorWorker: () => null }),
+              import("./initMock-CB_cMi6U.mjs")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -24079,10 +24537,10 @@ function ApiInterceptorProvider({
         return;
       }
       if (parentInterceptorWorker) {
-        (async () => {
+        void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
-            import("./apiInterceptorWorker-DPgtUtdA.mjs"),
-            import("./initMock-BMxsanHc.mjs")
+            import("./apiInterceptorWorker-QiltRtq1.mjs"),
+            import("./initMock-CB_cMi6U.mjs")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -24140,8 +24598,8 @@ class ErrorBoundary extends React__default.Component {
    * This method implements the Error Boundaries for the React application.
    * It is invoked if errors occur during the rendering phase of any lifecycle
    * methods or children components.
-   * 
-   * DO NOT DELETE this method! Though it is not referenced directly from the code, 
+   *
+   * DO NOT DELETE this method! Though it is not referenced directly from the code,
    * it is a required part of the React component lifecycle.
    */
   static getDerivedStateFromError(error2) {
@@ -24174,7 +24632,7 @@ class ErrorBoundary extends React__default.Component {
    */
   render() {
     var _a2;
-    return this.state.hasError ? /* @__PURE__ */ jsxs("div", { className: styles$x.errorOverlay, children: [
+    return this.state.hasError ? /* @__PURE__ */ jsxs("div", { "data-error-boundary": true, className: styles$x.errorOverlay, children: [
       /* @__PURE__ */ jsx("div", { className: styles$x.title, children: "There was an error!" }),
       /* @__PURE__ */ jsx("div", { className: styles$x.errorItem, children: (_a2 = this.state.error) == null ? void 0 : _a2.message })
     ] }) : this.props.children;
@@ -24184,12 +24642,6 @@ const ComponentRegistryContext = React__default.createContext(null);
 function useComponentRegistry() {
   return useContext(ComponentRegistryContext);
 }
-const IndexerContext = React__default.createContext({
-  indexing: false
-});
-function useIndexerContext() {
-  return useContext(IndexerContext);
-}
 const themeVars$e = `'{"padding-NestedApp": "var(--xmlui-padding-NestedApp)", "paddingHorizontal-NestedApp": "var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp))", "paddingVertical-NestedApp": "var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp))", "paddingLeft-NestedApp": "var(--xmlui-paddingLeft-NestedApp, var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingRight-NestedApp": "var(--xmlui-paddingRight-NestedApp, var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingTop-NestedApp": "var(--xmlui-paddingTop-NestedApp, var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingBottom-NestedApp": "var(--xmlui-paddingBottom-NestedApp, var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp)))", "border-NestedApp": "var(--xmlui-border-NestedApp)", "borderHorizontal-NestedApp": "var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp))", "borderVertical-NestedApp": "var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp))", "borderLeft-NestedApp": "var(--xmlui-borderLeft-NestedApp, var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp)))", "borderRight-NestedApp": "var(--xmlui-borderRight-NestedApp, var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp)))", "borderTop-NestedApp": "var(--xmlui-borderTop-NestedApp, var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp)))", "borderBottom-NestedApp": "var(--xmlui-borderBottom-NestedApp, var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp)))", "borderWidth-NestedApp": "var(--xmlui-borderWidth-NestedApp)", "borderHorizontalWidth-NestedApp": "var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp))", "borderLeftWidth-NestedApp": "var(--xmlui-borderLeftWidth-NestedApp, var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderRightWidth-NestedApp": "var(--xmlui-borderRightWidth-NestedApp, var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderVerticalWidth-NestedApp": "var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp))", "borderTopWidth-NestedApp": "var(--xmlui-borderTopWidth-NestedApp, var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderBottomWidth-NestedApp": "var(--xmlui-borderBottomWidth-NestedApp, var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderStyle-NestedApp": "var(--xmlui-borderStyle-NestedApp)", "borderHorizontalStyle-NestedApp": "var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp))", "borderLeftStyle-NestedApp": "var(--xmlui-borderLeftStyle-NestedApp, var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderRightStyle-NestedApp": "var(--xmlui-borderRightStyle-NestedApp, var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderVerticalStyle-NestedApp": "var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp))", "borderTopStyle-NestedApp": "var(--xmlui-borderTopStyle-NestedApp, var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderBottomStyle-NestedApp": "var(--xmlui-borderBottomStyle-NestedApp, var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderColor-NestedApp": "var(--xmlui-borderColor-NestedApp)", "borderHorizontalColor-NestedApp": "var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp))", "borderLeftColor-NestedApp": "var(--xmlui-borderLeftColor-NestedApp, var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderRightColor-NestedApp": "var(--xmlui-borderRightColor-NestedApp, var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderVerticalColor-NestedApp": "var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp))", "borderTopColor-NestedApp": "var(--xmlui-borderTopColor-NestedApp, var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderBottomColor-NestedApp": "var(--xmlui-borderBottomColor-NestedApp, var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderStartStartRadius-NestedApp": "var(--xmlui-borderStartStartRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderStartEndRadius-NestedApp": "var(--xmlui-borderStartEndRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderEndStartRadius-NestedApp": "var(--xmlui-borderEndStartRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderEndEndRadius-NestedApp": "var(--xmlui-borderEndEndRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "textColor-header-NestedApp": "var(--xmlui-textColor-header-NestedApp)", "fontFamily-header-NestedApp": "var(--xmlui-fontFamily-header-NestedApp)", "fontSize-header-NestedApp": "var(--xmlui-fontSize-header-NestedApp)", "fontStyle-header-NestedApp": "var(--xmlui-fontStyle-header-NestedApp)", "fontVariant-header-NestedApp": "var(--xmlui-fontVariant-header-NestedApp)", "fontWeight-header-NestedApp": "var(--xmlui-fontWeight-header-NestedApp)", "fontStretch-header-NestedApp": "var(--xmlui-fontStretch-header-NestedApp)", "textDecorationLine-header-NestedApp": "var(--xmlui-textDecorationLine-header-NestedApp)", "textDecorationColor-header-NestedApp": "var(--xmlui-textDecorationColor-header-NestedApp)", "textDecorationStyle-header-NestedApp": "var(--xmlui-textDecorationStyle-header-NestedApp)", "textDecorationThickness-header-NestedApp": "var(--xmlui-textDecorationThickness-header-NestedApp)", "textUnderlineOffset-header-NestedApp": "var(--xmlui-textUnderlineOffset-header-NestedApp)", "lineHeight-header-NestedApp": "var(--xmlui-lineHeight-header-NestedApp)", "backgroundColor-header-NestedApp": "var(--xmlui-backgroundColor-header-NestedApp)", "textTransform-header-NestedApp": "var(--xmlui-textTransform-header-NestedApp)", "letterSpacing-header-NestedApp": "var(--xmlui-letterSpacing-header-NestedApp)", "wordSpacing-header-NestedApp": "var(--xmlui-wordSpacing-header-NestedApp)", "textShadow-header-NestedApp": "var(--xmlui-textShadow-header-NestedApp)", "textIndent-header-NestedApp": "var(--xmlui-textIndent-header-NestedApp)", "textAlign-header-NestedApp": "var(--xmlui-textAlign-header-NestedApp)", "textAlignLast-header-NestedApp": "var(--xmlui-textAlignLast-header-NestedApp)", "wordBreak-header-NestedApp": "var(--xmlui-wordBreak-header-NestedApp)", "wordWrap-header-NestedApp": "var(--xmlui-wordWrap-header-NestedApp)", "direction-header-NestedApp": "var(--xmlui-direction-header-NestedApp)", "writingMode-header-NestedApp": "var(--xmlui-writingMode-header-NestedApp)", "lineBreak-header-NestedApp": "var(--xmlui-lineBreak-header-NestedApp)", "backgroundColor-frame-NestedApp": "var(--xmlui-backgroundColor-frame-NestedApp)", "gap-frame-NestedApp": "var(--xmlui-gap-frame-NestedApp)", "marginTop-NestedApp": "var(--xmlui-marginTop-NestedApp)", "marginBottom-NestedApp": "var(--xmlui-marginBottom-NestedApp)", "boxShadow-NestedApp": "var(--xmlui-boxShadow-NestedApp)", "backgroundColor-viewControls-NestedApp": "var(--xmlui-backgroundColor-viewControls-NestedApp)", "borderRadius-viewControls-NestedApp": "var(--xmlui-borderRadius-viewControls-NestedApp)", "padding-viewControls-NestedApp": "var(--xmlui-padding-viewControls-NestedApp)", "paddingVertical-viewControls-button-NestedApp": "var(--xmlui-paddingVertical-viewControls-button-NestedApp)", "paddingHorizontal-viewControls-button-NestedApp": "var(--xmlui-paddingHorizontal-viewControls-button-NestedApp)", "borderRadius-NestedApp": "var(--xmlui-borderRadius-NestedApp)", "borderBottom-header-NestedApp": "var(--xmlui-borderBottom-header-NestedApp)", "height-logo-splitView-NestedApp": "var(--xmlui-height-logo-splitView-NestedApp)", "width-logo-splitView-NestedApp": "var(--xmlui-width-logo-splitView-NestedApp)", "width-controls-NestedApp": "var(--xmlui-width-controls-NestedApp)", "padding-button-splitView-NestedApp": "var(--xmlui-padding-button-splitView-NestedApp)", "width-button-splitView-NestedApp": "var(--xmlui-width-button-splitView-NestedApp)", "height-button-splitView-NestedApp": "var(--xmlui-height-button-splitView-NestedApp)", "backgroundColor-code-splitView-NestedApp": "var(--xmlui-backgroundColor-code-splitView-NestedApp)", "backgroundColor-button-splitView-NestedApp--active": "var(--xmlui-backgroundColor-button-splitView-NestedApp--active)", "color-button-splitView-NestedApp": "var(--xmlui-color-button-splitView-NestedApp)", "color-button-splitView-NestedApp--active": "var(--xmlui-color-button-splitView-NestedApp--active)", "borderRadius-button-splitView-NestedApp": "var(--xmlui-borderRadius-button-splitView-NestedApp)", "borderColor-button-splitView-NestedApp": "var(--xmlui-borderColor-button-splitView-NestedApp)", "color-loadingText-NestedApp": "var(--xmlui-color-loadingText-NestedApp)"}'`;
 const nestedAppPlaceholder = "_nestedAppPlaceholder_2bz33_14";
 const loadingContainer = "_loadingContainer_2bz33_21";
@@ -24240,216 +24692,6 @@ const styles$w = {
   shadowRoot,
   content: content$2
 };
-function hashString(str) {
-  let hash = 5381;
-  let i = str.length;
-  while (i) {
-    hash = hash * 33 ^ str.charCodeAt(--i);
-  }
-  let s = (hash >>> 0).toString(36);
-  return s;
-}
-function toKebabCase(str) {
-  if (str.startsWith("--")) {
-    return str;
-  }
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
-function stableJSONStringify(obj) {
-  return JSON.stringify(obj);
-}
-class StyleRegistry {
-  constructor() {
-    this.cache = /* @__PURE__ */ new Map();
-    this.rootClasses = /* @__PURE__ */ new Set();
-    this.injected = /* @__PURE__ */ new Set();
-    this.refCounts = /* @__PURE__ */ new Map();
-    this.ssrHashes = /* @__PURE__ */ new Set();
-  }
-  register(styles2) {
-    const key = stableJSONStringify(styles2);
-    const styleHash = hashString(key);
-    const cachedEntry = this.cache.get(styleHash);
-    if (cachedEntry) {
-      return cachedEntry;
-    }
-    const className = `css-${styleHash}`;
-    const css = this._generateCss(`.${className}`, styles2);
-    const entry = { className, styleHash, css };
-    this.cache.set(styleHash, entry);
-    return entry;
-  }
-  /**
-   * [PRIVATE] Recursively generates CSS rules from a style object.
-   * This is the new, more powerful engine.
-   * @param selector - The CSS selector for the current context (e.g., '.css-123' or '&:hover').
-   * @param styles - The style object to process.
-   * @returns A string of CSS rules.
-   */
-  _generateCss(selector, styles2) {
-    const directProps = [];
-    const nestedRules = [];
-    for (const key in styles2) {
-      const value = styles2[key];
-      if (typeof value === "object" && value !== null) {
-        nestedRules.push(this._processNestedRule(selector, key, value));
-      } else {
-        directProps.push(`${toKebabCase(key)}:${value};`);
-      }
-    }
-    let finalCss = "";
-    if (directProps.length > 0) {
-      finalCss += `${selector} {${directProps.join("")}}`;
-    }
-    finalCss += nestedRules.join("");
-    return finalCss;
-  }
-  _processNestedRule(parentSelector, nestedKey, nestedStyles) {
-    if (nestedKey.startsWith("@")) {
-      return `${nestedKey}{${this._generateCss(parentSelector, nestedStyles)}}`;
-    }
-    const newSelector = nestedKey.replace(/&/g, parentSelector);
-    return this._generateCss(newSelector, nestedStyles);
-  }
-  getSsrStyles() {
-    const allCss = Array.from(this.cache.values()).map((entry) => entry.css).join("");
-    return `@layer dynamic {${allCss}}`;
-  }
-  /**
-   * Adds a class name to be applied to the <html> tag.
-   */
-  addRootClasses(classNames) {
-    classNames.forEach((className) => {
-      this.rootClasses.add(className);
-    });
-  }
-  /**
-   * Returns a space-separated string of all collected html classes.
-   */
-  getRootClasses() {
-    return Array.from(this.rootClasses).join(" ");
-  }
-  // NEW: A helper to safely get the current reference count.
-  getRefCount(styleHash) {
-    return this.refCounts.get(styleHash) || 0;
-  }
-  /**
-   * Increments the reference count for a given style hash.
-   */
-  incrementRef(styleHash) {
-    const newCount = (this.refCounts.get(styleHash) || 0) + 1;
-    this.refCounts.set(styleHash, newCount);
-  }
-  /**
-   * Decrements the reference count for a given style hash.
-   * @returns {number} The new reference count.
-   */
-  decrementRef(styleHash) {
-    const currentCount = this.refCounts.get(styleHash) || 0;
-    const newCount = Math.max(0, currentCount - 1);
-    if (newCount > 0) {
-      this.refCounts.set(styleHash, newCount);
-    } else {
-      this.refCounts.delete(styleHash);
-    }
-    return newCount;
-  }
-}
-const StyleContext = createContext(null);
-function StyleProvider({
-  children,
-  styleRegistry = new StyleRegistry(),
-  forceNew = false
-  // Optional prop to force a new registry
-}) {
-  const parentRegistry = useContext(StyleContext);
-  const [registry] = useState(() => {
-    const newRegistry = styleRegistry;
-    if (typeof window !== "undefined") {
-      const ssrTag = document.querySelector('style[data-style-registry="true"]');
-      const ssrHashes = ssrTag == null ? void 0 : ssrTag.getAttribute("data-ssr-hashes");
-      if (ssrHashes) {
-        let hashes = ssrHashes.split(",");
-        newRegistry.ssrHashes = new Set(hashes);
-        newRegistry.injected = new Set(hashes);
-      }
-    }
-    return newRegistry;
-  });
-  if (parentRegistry && !forceNew) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(StyleContext.Provider, { value: registry, children });
-}
-function useStyleRegistry() {
-  const registry = useContext(StyleContext);
-  if (registry === null) {
-    throw new Error("Component must be used within a StyleProvider");
-  }
-  return registry;
-}
-function useComponentStyle(styles2) {
-  const rootStyle = useMemo(() => {
-    return !styles2 || Object.keys(styles2).length === 0 ? EMPTY_OBJECT : {
-      "&": styles2
-      // "@container style(--screenSize: 1) or @container style(--screenSize: 2) ... etc": responsiveSizes,
-    };
-  }, [styles2]);
-  return useStyles(rootStyle);
-}
-const StyleInjectionTargetContext = createContext(null);
-function useDomRoot() {
-  const domRoot = useContext(StyleInjectionTargetContext);
-  return domRoot;
-}
-function useStyles(styles2, { prepend } = EMPTY_OBJECT) {
-  const { indexing } = useIndexerContext();
-  const domRoot = useDomRoot();
-  const injectionTarget = typeof document === "undefined" ? null : domRoot instanceof ShadowRoot ? domRoot : document.head;
-  const registry = useStyleRegistry();
-  const { className, styleHash } = useMemo(() => {
-    if (indexing || !styles2 || styles2 === EMPTY_OBJECT || Object.keys(styles2).length === 0) {
-      return { className: void 0, styleHash: void 0 };
-    }
-    return registry.register(styles2);
-  }, [indexing, registry, styles2]);
-  useInsertionEffect(() => {
-    if (!styleHash || registry.injected.has(styleHash)) {
-      return;
-    }
-    const { css } = registry.cache.get(styleHash) || {};
-    if (css) {
-      const styleElement = document.createElement("style");
-      styleElement.setAttribute("data-style-hash", styleHash);
-      styleElement.innerHTML = `@layer dynamic {
-${css}
-}`;
-      if (prepend) {
-        injectionTarget.insertBefore(styleElement, injectionTarget.firstChild.nextSibling);
-      } else {
-        injectionTarget.appendChild(styleElement);
-      }
-      registry.injected.add(styleHash);
-    }
-  }, [registry, styleHash, injectionTarget]);
-  useEffect(() => {
-    if (!styleHash) {
-      return;
-    }
-    registry.incrementRef(styleHash);
-    return () => {
-      registry.decrementRef(styleHash);
-      setTimeout(() => {
-        var _a2;
-        if (registry.getRefCount(styleHash) === 0 && !registry.ssrHashes.has(styleHash)) {
-          registry.injected.delete(styleHash);
-          (_a2 = injectionTarget.querySelector(`style[data-style-hash="${styleHash}"]`)) == null ? void 0 : _a2.remove();
-        }
-      }, 0);
-    };
-  }, [injectionTarget, registry, styleHash]);
-  return className;
-}
 function AnimatedLogo() {
   return /* @__PURE__ */ jsxs("div", { className: styles$w.loadingContainer, children: [
     /* @__PURE__ */ jsx("div", { className: styles$w.loadingText, children: "Loading XMLUI App..." }),
@@ -24569,7 +24811,7 @@ function NestedApp({
         }
         return null;
       });
-      Promise.all(sheetPromises).then((sheets) => {
+      void Promise.all(sheetPromises).then((sheets) => {
         const validSheets = sheets.filter(Boolean);
         shadowRef.current.adoptedStyleSheets = validSheets;
       });
@@ -24688,7 +24930,10 @@ function NestedApp({
     )
   ] });
 }
-function NestedAppRoot({ children, themeStylesToReset }) {
+function NestedAppRoot({
+  children,
+  themeStylesToReset
+}) {
   const themeVarReset = useMemo(() => {
     const vars2 = {};
     Object.keys(themeStylesToReset).forEach((key) => {
@@ -24911,7 +25156,7 @@ function AppWithCodeViewNative({
                   {
                     className: styles$w.headerButton,
                     onClick: () => {
-                      openPlayground();
+                      void openPlayground();
                     },
                     children: /* @__PURE__ */ jsx(RxOpenInNewWindow, {})
                   }
@@ -26642,21 +26887,21 @@ const FormItem = memo(function FormItem2({
       return safeBindTo;
     }
   }, [bindTo, defaultId, itemIndex, parentFormItemId]);
-  const labelWidthValue = useFormContextPart((value2) => labelWidth || value2.itemLabelWidth);
+  const labelWidthValue = useFormContextPart((value2) => labelWidth || (value2 == null ? void 0 : value2.itemLabelWidth));
   const labelBreakValue = useFormContextPart(
-    (value2) => labelBreak2 !== void 0 ? labelBreak2 : value2.itemLabelBreak
+    (value2) => labelBreak2 !== void 0 ? labelBreak2 : value2 == null ? void 0 : value2.itemLabelBreak
   );
   const labelPositionValue = useFormContextPart(
-    (value2) => labelPosition || value2.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]
+    (value2) => labelPosition || (value2 == null ? void 0 : value2.itemLabelPosition) || DEFAULT_LABEL_POSITIONS[type]
   );
   const initialValueFromSubject = useFormContextPart(
-    (value2) => getByPath(value2.originalSubject, formItemId)
+    (value2) => getByPath(value2 == null ? void 0 : value2.originalSubject, formItemId)
   );
   const initialValue = initialValueFromSubject === void 0 ? initialValueFromProps : initialValueFromSubject;
-  const value = useFormContextPart((value2) => getByPath(value2.subject, formItemId));
-  const validationResult = useFormContextPart((value2) => value2.validationResults[formItemId]);
-  const dispatch = useFormContextPart((value2) => value2.dispatch);
-  const formEnabled = useFormContextPart((value2) => value2.enabled);
+  const value = useFormContextPart((value2) => getByPath(value2 == null ? void 0 : value2.subject, formItemId));
+  const validationResult = useFormContextPart((value2) => value2 == null ? void 0 : value2.validationResults[formItemId]);
+  const dispatch = useFormContextPart((value2) => value2 == null ? void 0 : value2.dispatch);
+  const formEnabled = useFormContextPart((value2) => value2 == null ? void 0 : value2.enabled);
   const isEnabled2 = enabled2 && formEnabled;
   useEffect(() => {
     if (initialValue !== void 0) {
@@ -26926,6 +27171,10 @@ const FormItem = memo(function FormItem2({
     }
   }
   const [animateContainerRef] = useAutoAnimate({ duration: 100 });
+  const isInsideForm = useIsInsideForm();
+  if (!isInsideForm) {
+    throw new Error("FormItem must be used inside a Form");
+  }
   return /* @__PURE__ */ jsx(
     ItemWithLabel,
     {
@@ -26994,7 +27243,7 @@ const filteredValidationSeverityValues = validationSeverityValues.filter(
 const FormItemMd = createMetadata({
   status: "stable",
   allowArbitraryProps: true,
-  description: "`FormItem` wraps individual input controls within a `Form`, providing data binding, validation, labeling, and layout functionality. It connects form controls to the parent form's data model and handles validation feedback automatically.",
+  description: "`FormItem` wraps individual input controls within a `Form`, providing data binding, validation, labeling, and layout functionality. It connects form controls to the parent form's data model and handles validation feedback automatically.\n\n> **Note:** `FormItem` must be used inside a `Form` component.",
   props: {
     bindTo: {
       description: "This property binds a particular input field to one of the attributes of the `Form` data. It names the property of the form's `data` data to get the input's initial value.When the field is saved, its value will be stored in the `data` property with this name. If the property is not set, the input will be bound to an internal data field but not submitted."
@@ -27953,7 +28202,7 @@ class PollClient {
     this.polling = true;
     this.tries = 0;
     this.abortController = new AbortController();
-    this.poll(this.abortController.signal);
+    void this.poll(this.abortController.signal);
   }
   stopPoll() {
     this.polling = false;
@@ -28486,7 +28735,7 @@ const AppMd = createMetadata({
     }
   }
 });
-function AppNode({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) {
+function AppNode({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler, registerComponentApi }) {
   const processedNavRef = useRef(false);
   const layoutType = useMemo(
     () => extractValue(node.props.layout),
@@ -28702,6 +28951,7 @@ function AppNode({ node, extractValue, renderChild: renderChild2, className, loo
       navPanelDef: NavPanel3,
       logoContentDef: node.props.logoTemplate,
       renderChild: renderChild2,
+      registerComponentApi,
       children: [
         renderedContent,
         /* @__PURE__ */ jsx(SearchIndexCollector, { Pages: Pages2, renderChild: renderChild2 })
@@ -28833,7 +29083,7 @@ function PageIndexer({
 const appRenderer = createComponentRenderer(
   COMP$T,
   AppMd,
-  ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
+  ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler, registerComponentApi }) => {
     return /* @__PURE__ */ jsx(
       AppNode,
       {
@@ -28841,7 +29091,8 @@ const appRenderer = createComponentRenderer(
         renderChild: renderChild2,
         extractValue,
         className,
-        lookupEventHandler
+        lookupEventHandler,
+        registerComponentApi
       }
     );
   }
@@ -29701,7 +29952,7 @@ const SelectMd = createMetadata({
     [`backgroundColor-${COMP$I}-badge--hover`]: "$color-primary-400",
     [`backgroundColor-${COMP$I}-badge--active`]: "$color-primary-500",
     [`textColor-item-${COMP$I}--disabled`]: "$color-surface-200",
-    [`textColor-${COMP$I}-badge`]: "$color-surface-50",
+    [`textColor-${COMP$I}-badge`]: "$const-color-surface-50",
     [`backgroundColor-item-${COMP$I}`]: "$backgroundColor-dropdown-item",
     [`backgroundColor-item-${COMP$I}--hover`]: "$backgroundColor-dropdown-item--hover",
     [`backgroundColor-item-${COMP$I}--active`]: "$backgroundColor-dropdown-item--active",
@@ -32058,6 +32309,7 @@ const NotificationToast = ({ toastDuration }) => {
 };
 const defaultProps$n = {
   isRoot: false,
+  applyIf: true,
   toastDuration: 5e3,
   themeVars: EMPTY_OBJECT,
   root: false
@@ -32065,6 +32317,7 @@ const defaultProps$n = {
 function Theme({
   id,
   isRoot = defaultProps$n.isRoot,
+  applyIf,
   renderChild: renderChild2,
   node,
   tone,
@@ -32185,6 +32438,13 @@ function Theme({
   if (indexing) {
     return children;
   }
+  const shouldApplyTheme = applyIf ?? defaultProps$n.applyIf;
+  if (!shouldApplyTheme) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderChild2 && renderChild2(node.children),
+      children
+    ] });
+  }
   if (isRoot) {
     const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -32255,6 +32515,12 @@ const ThemeMd = createMetadata({
       void 0,
       "boolean",
       defaultProps$n.root
+    ),
+    applyIf: d(
+      `This property controls whether the theme wrapper is applied. When true (default), the theme wraps the children. When false, children are rendered unwrapped.`,
+      void 0,
+      "boolean",
+      true
     )
   },
   opaque: true
@@ -32275,6 +32541,7 @@ const themeComponentRenderer = createComponentRenderer(
       {
         id: extractValue.asOptionalString(node.props.themeId),
         isRoot: extractValue.asOptionalBoolean(node.props.root),
+        applyIf: extractValue.asOptionalBoolean(node.props.applyIf),
         layoutContext,
         renderChild: renderChild2,
         tone: themeTone,
@@ -32462,7 +32729,7 @@ async function invalidateQueries(invalidates, appContext, state) {
     }
     arrayToInvalidate.forEach((invalidate) => {
       var _a3;
-      (_a3 = appContext.queryClient) == null ? void 0 : _a3.invalidateQueries(
+      void ((_a3 = appContext.queryClient) == null ? void 0 : _a3.invalidateQueries(
         new DataLoaderQueryKeyGenerator(
           extractParam(state, invalidate, appContext),
           void 0,
@@ -32470,7 +32737,7 @@ async function invalidateQueries(invalidates, appContext, state) {
           void 0,
           void 0
         ).asPredicate()
-      );
+      ));
     });
   } else {
     await ((_a2 = appContext.queryClient) == null ? void 0 : _a2.invalidateQueries());
@@ -32938,7 +33205,7 @@ async function uploadFile({ appContext, state, lookupAction, uid }, {
       throw e;
     }
   }
-  invalidateQueries(invalidates, appContext, state);
+  void invalidateQueries(invalidates, appContext, state);
   return result;
 }
 const uploadAction = createAction("upload", uploadFile);
@@ -33020,7 +33287,7 @@ function Loader({
     let intervalId;
     if (pollIntervalInSeconds) {
       intervalId = setInterval(() => {
-        refetch();
+        void refetch();
       }, pollIntervalInSeconds * 1e3);
     }
     return () => {
@@ -33054,8 +33321,8 @@ function Loader({
   }, [loaderLoaded2, uid]);
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
-      refetch: async (options2) => {
-        refetch(options2);
+      refetch: (options2) => {
+        void refetch(options2);
       },
       update: async (updater) => {
         var _a2, _b;
@@ -33073,7 +33340,7 @@ function Loader({
         }
         (_b = appContext.queryClient) == null ? void 0 : _b.setQueryData(queryId, newData);
       },
-      addItem: async (element, indexToInsert) => {
+      addItem: (element, indexToInsert) => {
         var _a2, _b;
         const oldData = (_a2 = appContext.queryClient) == null ? void 0 : _a2.getQueryData(queryId);
         const draft = createDraft(oldData);
@@ -33085,10 +33352,10 @@ function Loader({
         const newData = finishDraft(draft);
         (_b = appContext.queryClient) == null ? void 0 : _b.setQueryData(queryId, newData);
       },
-      getItems: async () => {
+      getItems: () => {
         return data;
       },
-      deleteItem: async (element) => {
+      deleteItem: (element) => {
         throw new Error("not implemented");
       }
     });
@@ -33249,7 +33516,9 @@ function MockLoader({
   const waitTime = extractParam(state, loader.props.waitTime, appContext);
   const responseObj = extractParam(state, loader.props.data, appContext);
   const doLoad = useCallback(async () => {
-    waitTime && await asyncWait(waitTime);
+    if (waitTime) {
+      await asyncWait(waitTime);
+    }
     return responseObj;
   }, [responseObj, waitTime]);
   return /* @__PURE__ */ jsx(
@@ -33397,7 +33666,7 @@ function PageableLoader({
     const queryKey2 = thizRef.current;
     return () => {
       var _a2, _b;
-      (_a2 = appContext.queryClient) == null ? void 0 : _a2.cancelQueries(queryKey2);
+      void ((_a2 = appContext.queryClient) == null ? void 0 : _a2.cancelQueries(queryKey2));
       (_b = appContext.queryClient) == null ? void 0 : _b.setQueryData(queryKey2, (old) => {
         if (!old) {
           return old;
@@ -33439,6 +33708,7 @@ function PageableLoader({
   }, [
     data,
     error2,
+    isRefetching,
     loaderError2,
     loaderLoaded2,
     onLoaded,
@@ -33452,7 +33722,7 @@ function PageableLoader({
     let intervalId;
     if (pollIntervalInSeconds) {
       intervalId = setInterval(() => {
-        refetch();
+        void refetch();
       }, pollIntervalInSeconds * 1e3);
     }
     return () => {
@@ -33471,8 +33741,8 @@ function PageableLoader({
     registerComponentApi({
       fetchPrevPage,
       fetchNextPage: stableFetchNextPage,
-      refetch: async (options2) => {
-        refetch(options2);
+      refetch: (options2) => {
+        void refetch(options2);
       },
       update: async (updater) => {
         var _a2, _b;
@@ -33496,7 +33766,7 @@ function PageableLoader({
         const newData = finishDraft(draft);
         (_b = appContext.queryClient) == null ? void 0 : _b.setQueryData(queryId, newData);
       },
-      addItem: async (element, indexToInsert) => {
+      addItem: (element, indexToInsert) => {
         var _a2, _b;
         const oldData = (_a2 = appContext.queryClient) == null ? void 0 : _a2.getQueryData(queryId);
         const draft = createDraft(oldData);
@@ -33511,7 +33781,7 @@ function PageableLoader({
       getItems: () => {
         return data;
       },
-      deleteItem: async (element) => {
+      deleteItem: (element) => {
         throw new Error("not implemented");
       }
     });
@@ -33655,8 +33925,14 @@ function DataLoader({
           }
           const response = await fetch(queryUrl, fetchOptions);
           if (!response.ok) {
-            console.error("[SQL DataLoader] Failed response:", response.status, response.statusText);
-            throw new Error(`Failed to execute SQL query: ${response.status} ${response.statusText}`);
+            console.error(
+              "[SQL DataLoader] Failed response:",
+              response.status,
+              response.statusText
+            );
+            throw new Error(
+              `Failed to execute SQL query: ${response.status} ${response.statusText}`
+            );
           }
           const jsonResult = await response.json();
           if (jsonResult && typeof jsonResult === "object") {
@@ -33684,15 +33960,7 @@ function DataLoader({
         });
       }
     },
-    [
-      api,
-      loader.props,
-      state,
-      url,
-      body,
-      rawBody,
-      appContext
-    ]
+    [api, loader.props, state, url, body, rawBody, appContext]
   );
   const queryId = useMemo(() => {
     return new DataLoaderQueryKeyGenerator(
@@ -33725,7 +33993,7 @@ function DataLoader({
         }
       }
     },
-    [loader.props.inProgressNotificationMessage, loaderInProgressChanged2, loader.props.dataType]
+    [loader.props.inProgressNotificationMessage, loaderInProgressChanged2]
   );
   const loaded = useCallback(
     (data, pageInfo) => {
@@ -33748,7 +34016,7 @@ function DataLoader({
         }
       }
     },
-    [loader.props.completedNotificationMessage, loaderLoaded2, loader.props.dataType]
+    [loader.props.completedNotificationMessage, loaderLoaded2]
   );
   const error2 = useCallback(
     async (error22) => {
@@ -33873,7 +34141,9 @@ const dataLoaderRenderer = createLoaderRenderer(
   }) => {
     var _a2, _b, _c;
     if (!((_a2 = loader.props) == null ? void 0 : _a2.url) || !loader.props.url.trim()) {
-      throw new Error("You must specify a non-empty (not whitespace-only) 'url' property for DataSource");
+      throw new Error(
+        "You must specify a non-empty (not whitespace-only) 'url' property for DataSource"
+      );
     }
     return /* @__PURE__ */ jsx(
       IndexAwareDataLoader,
@@ -34612,7 +34882,6 @@ const DateInput = forwardRef(function DateInputNative({
       return null;
     }
   }, [day2, month2, year2]);
-  useImperativeHandle(ref, () => dateInputRef.current);
   useEffect(() => {
     if (registerComponentApi) {
       registerComponentApi({
@@ -35939,7 +36208,6 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
     const s24 = (second2 || "00").padStart(2, "0");
     return `${h24}:${m24}:${s24}`;
   }, [hour2, minute2, second2, amPm, is12HourFormat]);
-  useImperativeHandle(ref, () => timeInputRef.current);
   useEffect(() => {
     if (registerComponentApi) {
       registerComponentApi({
@@ -36686,7 +36954,6 @@ const Timer = forwardRef(function Timer2({
     isPaused: () => isPaused,
     isRunning: () => isRunning && !isPaused
   }), [pause, resume, isPaused, isRunning]);
-  useImperativeHandle(forwardedRef, () => timerApi, [timerApi]);
   useEffect(() => {
     if (registerComponentApi) {
       registerComponentApi(timerApi);
@@ -37248,14 +37515,16 @@ function AppState({
   registerComponentApi,
   onDidUpdate
 }) {
-  const registerAppState = useAppStateContextPart((value2) => value2.registerAppState);
   const update = useAppStateContextPart((value2) => value2.update);
+  const value = useAppStateContextPart((value2) => {
+    var _a2;
+    return (_a2 = value2 == null ? void 0 : value2.appState) == null ? void 0 : _a2[bucket];
+  });
   useIsomorphicLayoutEffect(() => {
     if (initialValue !== void 0) {
-      registerAppState(bucket, initialValue);
+      update(bucket, initialValue);
     }
-  }, [bucket, initialValue, registerAppState]);
-  const value = useAppStateContextPart((value2) => value2.appState[bucket]);
+  }, [bucket, initialValue]);
   useIsomorphicLayoutEffect(() => {
     updateState({ value });
     if (onDidUpdate) {
@@ -37304,7 +37573,7 @@ const AppStateMd = createMetadata({
       defaultValue: defaultProps$f.bucket
     },
     initialValue: {
-      description: `This property contains the initial state value. Though you can use multiple \`${COMP$u}\`component instances for the same bucket with their \`initialValue\` set, it may result in faulty app logic. When xmlui instantiates an \`${COMP$u}\` with an explicit initial value, that value is immediately set. Multiple initial values may result in undesired initialization. By default, the bucked's initial state is undefined.`
+      description: `This property contains the initial state value. Though you can use multiple \`${COMP$u}\`component instances for the same bucket with their \`initialValue\` set, it may result in faulty app logic. When xmlui instantiates an \`${COMP$u}\` with an explicit initial value, that value is immediately merged with the existing state. The issue may come from the behavior that \`initialValue\` is set (merged) only when a component mounts. By default, the bucket's initial state is undefined.`
     }
   },
   apis: {
@@ -39107,26 +39376,31 @@ const AutoCompleteMd = createMetadata({
   },
   themeVars: parseScssVar(styles$E.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-menu-${COMP$h}`]: "$backgroundColor-primary",
+    [`backgroundColor-menu-${COMP$h}`]: "$color-surface-raised",
     [`boxShadow-menu-${COMP$h}`]: "$boxShadow-md",
     [`borderRadius-menu-${COMP$h}`]: "$borderRadius",
     [`borderWidth-menu-${COMP$h}`]: "1px",
     [`borderColor-menu-${COMP$h}`]: "$borderColor",
-    [`backgroundColor-item-${COMP$h}`]: "$backgroundColor-dropdown-item",
-    [`backgroundColor-item-${COMP$h}--hover`]: "$backgroundColor-dropdown-item--active",
-    [`backgroundColor-item-${COMP$h}--active`]: "$backgroundColor-dropdown-item--active",
-    [`minHeight-Input`]: "39px",
     [`backgroundColor-${COMP$h}-badge`]: "$color-primary-500",
     [`fontSize-${COMP$h}-badge`]: "$fontSize-sm",
+    [`paddingHorizontal-${COMP$h}-badge`]: "$space-2_5",
+    [`paddingVertical-${COMP$h}-badge`]: "$space-0_5",
     [`borderRadius-${COMP$h}-badge`]: "$borderRadius",
-    [`paddingHorizontal-${COMP$h}-badge`]: "$space-2",
-    [`paddingVertical-${COMP$h}-badge`]: "$space-1",
-    [`paddingHorizontal-${COMP$h}`]: "$space-1",
+    [`paddingHorizontal-item-${COMP$h}`]: "$space-2",
+    [`paddingVertical-item-${COMP$h}`]: "$space-2",
+    [`paddingHorizontal-${COMP$h}`]: "$space-2",
     [`paddingVertical-${COMP$h}`]: "$space-2",
+    [`opacity-text-item-${COMP$h}--disabled`]: "0.5",
+    [`opacity-${COMP$h}--disabled`]: "0.5",
     [`backgroundColor-${COMP$h}-badge--hover`]: "$color-primary-400",
     [`backgroundColor-${COMP$h}-badge--active`]: "$color-primary-500",
     [`textColor-item-${COMP$h}--disabled`]: "$color-surface-200",
-    [`textColor-${COMP$h}-badge`]: "$const-color-surface-50"
+    [`textColor-${COMP$h}-badge`]: "$const-color-surface-50",
+    [`backgroundColor-item-${COMP$h}`]: "$backgroundColor-dropdown-item",
+    [`backgroundColor-item-${COMP$h}--hover`]: "$backgroundColor-dropdown-item--hover",
+    [`backgroundColor-item-${COMP$h}--active`]: "$backgroundColor-dropdown-item--active",
+    // Default borderColor-Input--disabled is too light so the disabled component is barely visible
+    [`borderColor-${COMP$h}--disabled`]: "initial"
   }
 });
 const autoCompleteComponentRenderer = createComponentRenderer(
@@ -41454,7 +41728,7 @@ function InspectButton$1({
       htmlElement.removeEventListener("mouseenter", mouseenter);
       htmlElement.removeEventListener("mouseleave", mouseleave);
     };
-  }, [inspectId, node, inspectMode, setShowCode]);
+  }, [inspectId, node, inspectMode, setShowCode, setInspectedNode]);
   return /* @__PURE__ */ jsx(Fragment, { children: inspectMode ? null : visible && !!root2 && createPortal(
     /* @__PURE__ */ jsx(
       Button,
@@ -44718,7 +44992,7 @@ const Dialog = ({
   ] });
 };
 const ConfirmationModalContext = React__default.createContext({
-  confirm: async (title2, message, actionLabel) => false
+  confirm: (title2, message, actionLabel) => Promise.resolve(false)
 });
 const useConfirm = () => useContext(ConfirmationModalContext);
 const ConfirmationModalContextProvider = ({ children }) => {
@@ -44740,7 +45014,7 @@ const ConfirmationModalContextProvider = ({ children }) => {
     }
   }, [showConfirmationModal]);
   const handleShow = useCallback(
-    async (title22, message2, actionLabel) => {
+    (title22, message2, actionLabel) => {
       if (typeof title22 === "string") {
         setTitle(title22);
         setButtons([
@@ -45524,7 +45798,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.10.19";
+const version = "0.10.21";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -46031,7 +46305,7 @@ async function evalCalculatedMemberAccessAsync(evaluator, thisStack, expr, evalC
   await completeExprValue(expr.member, thread);
   return evalCalculatedMemberAccessCore(thisStack, expr, evalContext, thread);
 }
-async function evalSequenceAsync(evaluator, thisStack, expr, evalContext, thread) {
+function evalSequenceAsync(evaluator, thisStack, expr, evalContext, thread) {
   if (!expr.exprs || expr.exprs.length === 0) {
     throw new Error(`Missing expression sequence`);
   }
@@ -46143,7 +46417,7 @@ async function evalAssignmentAsync(evaluator, thisStack, expr, evalContext, thre
   const rootScope = getRootIdScope(leftValue, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "assignment");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "assignment");
   }
   await evaluator(thisStack, leftValue, evalContext, thread);
   thisStack.pop();
@@ -46153,7 +46427,7 @@ async function evalAssignmentAsync(evaluator, thisStack, expr, evalContext, thre
   await completeExprValue(expr.expr, thread);
   const value = evalAssignmentCore(thisStack, expr, evalContext, thread);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "assignment");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "assignment");
   }
   return value;
 }
@@ -46161,14 +46435,14 @@ async function evalPreOrPostAsync(evaluator, thisStack, expr, evalContext, threa
   const rootScope = getRootIdScope(expr.expr, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "pre-post");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "pre-post");
   }
   await evaluator(thisStack, expr.expr, evalContext, thread);
   thisStack.pop();
   await completeExprValue(expr.expr, thread);
   const value = evalPreOrPostCore(thisStack, expr, evalContext, thread);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "pre-post");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "pre-post");
   }
   return value;
 }
@@ -46216,8 +46490,8 @@ async function evalFunctionInvocationAsync(evaluator, thisStack, expr, evalConte
         functionArgs.push(...funcArg);
       } else {
         if (arg.type === T_ARROW_EXPRESSION) {
-          const funcArg = await createArrowFunctionAsync(evaluator, arg);
-          const wrappedFunc = async (...args) => {
+          const funcArg = createArrowFunctionAsync(evaluator, arg);
+          const wrappedFunc = (...args) => {
             return funcArg(arg.args, evalContext, thread, ...args);
           };
           functionArgs.push(wrappedFunc);
@@ -46225,7 +46499,7 @@ async function evalFunctionInvocationAsync(evaluator, thisStack, expr, evalConte
           await evaluator([], arg, evalContext, thread);
           const funcArg = await completeExprValue(arg, thread);
           if (funcArg == null ? void 0 : funcArg._ARROW_EXPR_) {
-            const wrappedFuncArg = await createArrowFunctionAsync(evaluator, funcArg);
+            const wrappedFuncArg = createArrowFunctionAsync(evaluator, funcArg);
             const wrappedFunc = (...args) => wrappedFuncArg(funcArg.args, evalContext, thread, ...args);
             functionArgs.push(wrappedFunc);
           } else {
@@ -46254,18 +46528,18 @@ async function evalFunctionInvocationAsync(evaluator, thisStack, expr, evalConte
   const rootScope = getRootIdScope(expr.obj, evalContext, thread);
   const updatesState = rootScope && rootScope.type !== "block";
   if (updatesState && evalContext.onWillUpdate) {
-    evalContext.onWillUpdate(rootScope, rootScope.name, "function-call");
+    void evalContext.onWillUpdate(rootScope, rootScope.name, "function-call");
   }
   const value = ((_b = evalContext.options) == null ? void 0 : _b.defaultToOptionalMemberAccess) ? functionObj == null ? void 0 : functionObj.call(currentContext, ...functionArgs) : functionObj.call(currentContext, ...functionArgs);
   let returnValue = await completePromise(value);
   if (updatesState && evalContext.onDidUpdate) {
-    evalContext.onDidUpdate(rootScope, rootScope.name, "function-call");
+    void evalContext.onDidUpdate(rootScope, rootScope.name, "function-call");
   }
   setExprValue(expr, { value: returnValue }, thread);
   thisStack.push(returnValue);
   return returnValue;
 }
-async function createArrowFunctionAsync(evaluator, expr) {
+function createArrowFunctionAsync(evaluator, expr) {
   return async (...args) => {
     const runTimeEvalContext = args[1];
     const runtimeThread = args[2];
@@ -46391,7 +46665,7 @@ async function createArrowFunctionAsync(evaluator, expr) {
     return returnValue;
   };
 }
-async function completePromise(input2) {
+function completePromise(input2) {
   const visited = /* @__PURE__ */ new Map();
   return completePromiseInternal(input2);
   async function completePromiseInternal(input22) {
@@ -48872,7 +49146,7 @@ const Animation$1 = forwardRef(function Animation2({
   const [reset, setReset] = useState(false);
   const [count, setCount] = useState(0);
   const times = 1;
-  const animationId = useId();
+  useId();
   const animationSettings = useMemo(
     () => ({
       from: _animation.from,
@@ -48915,9 +49189,9 @@ const Animation$1 = forwardRef(function Animation2({
       onStart,
       onStop,
       reset,
+      once,
       reverse2,
-      toggle,
-      animationId
+      toggle
     ]
   );
   const [springs, api] = useSpring(
@@ -48931,7 +49205,7 @@ const Animation$1 = forwardRef(function Animation2({
   });
   const composedRef = ref ? composeRefs(ref, forwardedRef) : forwardedRef;
   const startAnimation = useCallback(() => {
-    api.start(_animation);
+    void api.start(_animation);
     return () => {
       api.stop();
     };
@@ -48950,7 +49224,7 @@ const Animation$1 = forwardRef(function Animation2({
       children,
       (child, index) => animateWhenInView ? /* @__PURE__ */ jsx(AnimatedComponent, { ...rest, style: animationStyles, ref: composedRef, children: child }, index) : /* @__PURE__ */ jsx(AnimatedComponent, { ...rest, style: springs, ref: forwardedRef, children: child }, index)
     );
-  }, [animateWhenInView, animationStyles, children, springs, rest]);
+  }, [animateWhenInView, animationStyles, children, springs, rest, composedRef, forwardedRef]);
   return content2;
 });
 const tooltipBehavior = {
@@ -48981,12 +49255,11 @@ const animationBehavior = {
     var _a2, _b;
     const { extractValue } = context;
     const animation = extractValue((_a2 = context.node.props) == null ? void 0 : _a2.animation, true);
-    const animationOptions = extractValue(
-      (_b = context.node.props) == null ? void 0 : _b.animationOptions,
-      true
-    );
+    const animationOptions = extractValue((_b = context.node.props) == null ? void 0 : _b.animationOptions, true);
     const parsedOptions = parseAnimationOptions(animationOptions);
-    return /* @__PURE__ */ jsx(Animation$1, { animation: parseAnimation(animation), ...parsedOptions, children: node });
+    return /* @__PURE__ */ jsx(Animation$1, { animation: parseAnimation(animation), ...parsedOptions, children: context.node.type === "ModalDialog" ? cloneElement(node, {
+      externalAnimation: true
+    }) : node });
   }
 };
 const labelBehavior = {
@@ -49980,11 +50253,6 @@ function AppContent({
     root2
   ]);
   const [appState, setAppState] = useState(EMPTY_OBJECT);
-  const registerAppState = useCallback((bucket, initialValue) => {
-    setAppState((prev) => {
-      return { ...prev, [bucket]: initialValue };
-    });
-  }, []);
   const update = useCallback((bucket, patch) => {
     setAppState((prev) => {
       return {
@@ -49998,11 +50266,10 @@ function AppContent({
   }, []);
   const appStateContextValue = useMemo(() => {
     return {
-      registerAppState,
       appState,
       update
     };
-  }, [appState, registerAppState, update]);
+  }, [appState, update]);
   return /* @__PURE__ */ jsx(AppContext.Provider, { value: appContextValue, children: /* @__PURE__ */ jsx(AppStateContext.Provider, { value: appStateContextValue, children: /* @__PURE__ */ jsx(StandaloneComponent, { node: rootContainer, children }) }) });
 }
 function signError(error2) {
@@ -51068,26 +51335,34 @@ function StandaloneApp({
   const shouldDecorateWithTestId = decorateComponentsWithTestId || // @ts-ignore
   (typeof window !== "undefined" ? window.XMLUI_MOCK_TEST_ID : false);
   const useHashBasedRouting = (appGlobals == null ? void 0 : appGlobals.useHashBasedRouting) ?? true;
-  return /* @__PURE__ */ jsx(ApiInterceptorProvider, { interceptor: mockedApi, useHashBasedRouting, waitForApiInterceptor, children: /* @__PURE__ */ jsx(
-    AppRoot,
+  return /* @__PURE__ */ jsx(
+    ApiInterceptorProvider,
     {
-      projectCompilation,
-      decorateComponentsWithTestId: shouldDecorateWithTestId,
-      node: entryPoint,
-      standalone: true,
-      debugEnabled,
-      routerBaseName: typeof window !== "undefined" ? window.__PUBLIC_PATH || "" : "",
-      globalProps,
-      defaultTheme,
-      defaultTone,
-      resources,
-      resourceMap,
-      sources,
-      extensionManager,
-      contributes,
-      children
+      interceptor: mockedApi,
+      useHashBasedRouting,
+      waitForApiInterceptor,
+      children: /* @__PURE__ */ jsx(
+        AppRoot,
+        {
+          projectCompilation,
+          decorateComponentsWithTestId: shouldDecorateWithTestId,
+          node: entryPoint,
+          standalone: true,
+          debugEnabled,
+          routerBaseName: typeof window !== "undefined" ? window.__PUBLIC_PATH || "" : "",
+          globalProps,
+          defaultTheme,
+          defaultTone,
+          resources,
+          resourceMap,
+          sources,
+          extensionManager,
+          contributes,
+          children
+        }
+      )
     }
-  ) });
+  );
 }
 async function parseComponentMarkupResponse(response) {
   if (!response.ok) {
@@ -51316,7 +51591,7 @@ async function loadThemeFile(url) {
     }
   }
 }
-async function fetchWithoutCache(url) {
+function fetchWithoutCache(url) {
   return fetch(normalizePath(url), {
     headers: {
       "Cache-Control": "no-cache, no-store"
@@ -51337,7 +51612,7 @@ function useStandalone(standaloneAppDef, runtime = EMPTY_OBJECT, extensionManage
   });
   const [projectCompilation, setProjectCompilation] = useState(null);
   useIsomorphicLayoutEffect(() => {
-    (async function() {
+    void async function() {
       var _a2, _b, _c, _d, _e;
       const resolvedRuntime = resolveRuntime(runtime);
       const appDef = mergeAppDefWithRuntime(resolvedRuntime.standaloneApp, standaloneAppDef);
@@ -51623,7 +51898,7 @@ function useStandalone(standaloneAppDef, runtime = EMPTY_OBJECT, extensionManage
       });
       setProjectCompilation(resolvedRuntime.projectCompilation);
       setStandaloneApp(newAppDef);
-    })();
+    }();
   }, [runtime, standaloneAppDef]);
   return { standaloneApp, projectCompilation };
 }